UIUX設計に必要な基礎テクニック
ユーザーの心を考える
例えば「検索システム」が必要とします。すると画面上部に、横長の検索窓を置きます。
これは普通のデザインです。
一歩先のデザインはユーザーの気持ちを考えて何を用意すべきか考えたものです。
例えばYouTubeの検索システムで検索するとします。
検索結果のサムネイルを縦スクロールで見て行きますが、
「昔の動画が混ざっている。もっと新しいのだけにしたいな」
となれば一度画面上部に縦スクロールして
ページの一番上に帰ってからフィルターボタンを押します。
この時にいつも面倒だと思うのですが、、
画面の左側にボタンの配置があるのであれば
検索した時だけ配置を変えて絞り込み用のボタンを置いても
良い気がします。
↓例
（figmaで作りました。右上の再生ボタンを押して、
画面が変わったのちに右上の拡大ボタンを押すと最大サイズになります）
このデザインについて
画面左サイドの元からあったボタンはどうするの？という意見が出そうなのですが、
検索中は使いませんので表示する意味がなく、隠して使うべきボタンに
置き換える方がユーザー寄りのUIになります。
もしくは
絞り込み用ボタンの下に移動します。
ボタンは動かないという概念はもう無くてもよいのではと感じます。
その場、その場でユーザーは何がしたいのか？、どうすればユーザーが助かるのか？
を永遠と考えて概念を気にせず、寄り添ったUIにするのが大事な事だ感じます。
ボタンのカスタマイズ機能、もしくは
ユーザーの挙動を記録して更新ボタンクリックによって
自動で並び替えられるUIだってありだと感じます。
それが概念のないユーザー寄りの未来のUIUX設計だと感じます。
ーーーーー
・色による視線誘導
・境界認知
・層の考え方
色による視線誘導
ユーザーの視線を引かなければいけない場面がサイトにはあります。
例えば「新しいメールが来ている」
「これについて気を付けてほしい」
といった場面ですが、
良く使われるのが「赤」で視線を引く効果があります。
その効果を上げるには赤系を普通のUIに使わない事です。
極力グレー系にして赤を際立てます。
そうすると見てほしいものに視線誘導ができ、
ユーザーを迷わすようなトラブルが起こりづらくなります。
他の色が持つ意味としては
青はクリックできるという意味、
紫はクリック済であるという意味、
などがあり、
ユーザーに分かりやすくするために
色に意味を持たせる必要があります。
ーーーーー
境界認知
よく見かけるのが、これの欠如したUIが増えている問題です。
例として文字が表示されているだけでボタンと認識しづらいサイトがあります。
クリックできる範囲がわかるように淵に線を入れるか、
ボタンの範囲の色を変えるかした方が分かりやすいです。
noteのような投稿コンテンツの集合体であるサイトでも
境界線が不明で分かりづらいです。
慣れれば気になりませんが、
どのサイトでも最初が肝心で初めて来る顧客が簡単に
理解できるかどうかは大きな問題です。
改善例はこちらに書きました。
【右上に拡大表示のボタンがあります】
ーーーーー
層の考え方
サイトの表面の部分でクリックしていない状態では
第一層が見えている状態とします。
ユーザーが何かクリックしてページ移動した状態では
第二層にいると考えます。
さらにクリックすえば第三層にいると考えます。
ユーザー目線で考えると深層に入り込むほど
ボタンの位置など認識しなおしになりますし、
読み込み時間分待たされ、
手前の画面に帰る手間も発生します。
よってUX向上を目標にした場合に極力、深層に入り込まない事が
テーマになります。
ユーザーの見たい情報がなるべくページの上に表示されて、
発見しやすい事も大事です。
例えば求人アプリでは
閲覧者の見たいものは
・給与
・応募資格
・リモートで働けるか
辺りになるのではないでしょうか？
特に応募資格は先に見せてもらわないと、
無駄にいろいろな情報を見てから「あ、、応募できない、、」
となってしまい無駄な時間を使ってしまいます。
よって層の考え方
からすると上記の３点は「第一層」に表示すればUXが上がるという事になります。
そして求人の詳細ページは項目が探しやすい事、
見られる率の高い項目が上の方に表示される事も大事です。
その辺を踏まえてデザインするとこうなります。
↑のプロトタイプに「ブロック」というボタンがありますが、
これはその企業の募集を表示しないためのアイデアです。
求人は毎日見るもので、応募しない予定の企業が沢山あるのに
何度でも沢山表示されて、時間の浪費になります。
こういう不満を分かってあげて、
概念に屈せず、手間を減らしてあげるアイデアが
UX向上につながります。
ーーーーー
