UI制作で大切にすべき7つのこと

2020年7月27日 05:55

UI制作における原則改めて整理していて、多くの場所で語られている「よいUIであるために必要な要素」を自分の言葉で7つにまとめてみました。
あえて聞くとすべて当然なことだらけですが、確認兼ねて考え直すきっかけになれば嬉しいです。

直感性

電卓の数字キーを押せば画面に出力され、リモコンの数字キーを押せばチャンネルが切り替わる等、現実空間ですでに操作の経験があるからこそ、画面上でも動きが予測できるものが多い。この現実空間の経験をうまく利用し、あえて反するような動作にしないこと。

以前見かけた図書館の本検索画面ではなぜか「検索ボタンが赤」「戻るボタンが青色」になっていたため、何度も繰り返し間違えてしまった。

画面を上下にスワイプすることで画面がスクロールされること、左右にスワイプすることで画面が進む／戻ることはブラウザだけでなく、多くのアプリケーションですでに共通化され常識になっている動作です。こうした一般的な習慣に逆らったり、意外な動作にならないようにすること。

例えばMacBookとwindowsとでタッチパッドのスクロール方向が異なる場合、各自無意識にデフォルト操作が染みついているため戸惑う人も多いです。こうした利用者の経験の違いを埋めるため、例えば多くのゲームではカメラ操作（上下左右反転などの）設定が変更できるようになっています。

「送信」ボタンで「メッセージが送信できること」を明らかにするため、ラベルや印字にて起こりうる結果をしっかり明示すること。この際、最小限の情報で多くを伝えるようシンプルに留めて余計な情報やノイズでユーザーを惑わせないようにする。

アイコンと文字を組み合わせでユーザーにできることを使える際には、配置や余白等にまで気を配ることで、いかにわかりやすいかを追求する。

一つのアプリケーションや類似する操作の中で、インターフェースのデザイン、機能、操作反応は一貫して同じであるべきです。一度使い方を学習すれば多くを覚えなおすことなく他の画面にも応用でき、可能な限りユーザーの混乱を避け使いやすさに貢献します。

ユーザーが行ったアクションの結果のリアクションは可能な限り即座で分かりやすいほうがよい。その反応の中で、意図している動作が正常に行われたかどうかの確認ができるほうが望ましい。

Twitterの画面では可能なアクションが無彩色のアイコンで並び、細かいアニメーションを伴って反映結果をユーザーに伝えている。

可能な限りユーザーが求めている動作を最短で提供すること。できる操作をわかりやすく列挙するだけでなく、頻度や行動傾向に基づくショートカットの提案があるとよい。こうしたユーザーにとっての優先度も、情報を階層化する際に検討事項とする。

選択をやり直す機会や、取り返しがつかない決定を行う前に再確認を設けることで、機敏な操作を安心して行うことができる。

以上です。何か少しでも参考になれば嬉しいです。

この記事が気に入ったらサポートをしてみませんか？