自分なりのUI設計ガイドライン

UI系の本や、デザイン原則系の記事、UI設計の仕事を通して学んだことをここで一度まとめて、自分なりのUI設計ガイドラインとしたいと思います。
主に、大項目ごとにどういうことを考えるとその大項目に対して効果を出せるのか、っていうのを洗い出す感じで書いていきます。
今後UI設計する時にこのガイドラインを元に設計することで、ある程度の品質を毎回保てればいいなと思っています。

また学びがあったタイミングなどで、つどつどアップデートしてけたらなと思います。

優れた概念モデルを用いる

・メタファーを用いる。
・OOUIを活用する。
・ユーザがUIを操作中、今どこにいるのかを把握できるようにする。

何ができるのかを知覚・認識させる

・アフォーダンス・シグニファイアを用いて、「〜ができること」を知覚させる。
・明確なラベル、アイコンを利用する。
・Grouping, Mapping, 近接を用いて、コンテンツを識別しやすくする。
・アプリ、プラットフォーム内でインターフェースの一貫性を保つ。
・一番利用頻度の高い機能の発見可能性を最重要視する。
・大きめの情報は、段階的に提示することで、ユーザの混乱を防ぐ。

何が起きたのか、起きているのかを理解できるようにする

・常にフィードバックを返す。
  ・今どういう状態なのか。
  ・その操作は完了、成功したのか。
  ・警告とエラー。
・アニメーションやサウンド、振動を用いて、何が起きたのかの理解を促す。
・メタファーを用いることで、何が起きているかの理解を促す。

エラーを事前に防ぐ

・操作対象の見た目を差別化し、押し間違いを防ぐ。
・破壊的変更の前には、確認ダイアログを表示する。
・入力フォームなどでは、許容フォーマットを明示的に示す。
・適切なデフォルト値を設ける
・割り込みタスクから復帰したときにも迷わないように、今がどういう状態なのかを明確に表す。
・優れた対応づけを用いて、何に対しての操作なのかを理解しやすくする。
・制約をうまく利用する。
・優れた概念モデルを用いる。

ユーザがエラーに対応できるようにする

・エラーが起きたことを知らせる。
・どういうエラーが起きたのかを理解できるように伝える。
・次にどういうアクションを取ればいいのかを明確に伝える。
・Undoできるようにする。(確認ダイアログにするのかUndoにするのかは、その操作が頻繁に行われるのものなのか、重大な操作なのかで判断すれば良さそう。例えばTodoのDoneは頻繁に行うのでUndoが好ましい)

ユーザに寄り添う

・どういうコンテキストで使われるものなのかを考慮する。どこで、どういうデバイスで、どういう環境で使われるものなのか。
・その画面ではユーザにとって何が一番重要なのかを考える。
・ユーザはどういう使い方をしたいのかを考える。
・熟練者のためのショートカットやジェスチャー操作を取り入れる。

各画面で考慮するべき状態

・理想状態
・Empty状態
・Loading状態
・Error状態(まずどういうエラーが起こりうるのか)
・コンテンツの長さを変動させた状態(タイトル文字の長さとか)
・状態が少し進んだ状態

一貫性を保つための基本要素

・Color
・Typography
・Spacing
・Shadow
・BorderRadius
・Button
・Dialog
・各form要素。text, select, radio, checkbox, sliderなど

参考文献

https://dely.design/n/n9a52c80847c3
http://bokardo.com/principles-of-user-interface-design/
https://www.nngroup.com/articles/ten-usability-heuristics/
https://medium.com/@eugenesanu/7-basic-design-principles-we-forget-about-8f5c15d4b527
誰のためのデザイン
融けるデザイン
マイクロインタラクション

最後に

だいぶざっくりにまとめたので、すぐに使えるというものではないですが、UI設計時にこの記事をベースにして考えを掘り下げていければいいなと思います。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます!
2
沖縄出身、川崎在住 です。 UI DesignとWebの技術を勉強中です。 仕事はWeb系のエンジニアです。AWSとかSPAとか。 https://twitter.com/digital_fei
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。