知っておきたいUIデザインパターン10選

Janko Jovanovic氏がSmashing Magazineにおいて10 UI Design Patterns You Should Be Paying Attention Toのタイトルのもと、ユーザインタフェースに関するデザインパターンを紹介している。UIデザインパターンは一般的なユーザインタフェースの問題を解決するためのデザインパターン。繰り返し表れるような一般的な問題に対して効果がある。次のUIデザインパターンが紹介されている。

遅延レジストレーション

サービスを使うにあたって最初に登録作業が必要になるのは、ユーザにいらだちを感じさせる。できればユーザ登録作業は必要になるまで遅延させておいて、必要になった段階で実施する。たとえばオンラインショッピングのように、ユーザ登録なしでも商品の閲覧やカートへの追加ができて、支払いの段階ではじめてユーザ登録を要求する

プログレッシブディスクロージャ

その時ユーザが必要としている情報だけを表示し、それ以外の必要がない情報は表示しない。ひとつのステップが完了したら次のステップに進み、そこでも同じように、そのアクションで必要な情報だけを表示する。このとき以前のステップで入力したデータや作業した内容はつねに見れるようにしておき、あとから変更できるようにする

寛大なフォーマット

たとえば検索機能にさまざまな入力フォームやチェックオプションを用意するのではなく、ひとつの入力フォームだけを用意して、あとはバックエンドシステムの方が入力されたキーワードから内容を推察して動作する。たくさんのオプションや入力フォームを用意するのとくらべてUIがすっきりする。ただし、バックエンドシステムの開発は大変なものになる

主要操作の明瞭化

なにが主目的の操作であるかを明示的にわかるようにする。たとえば主要操作のボタンは背景色と比較して映えるものにし、主要操作以外のボタンは背景色に似せた色にして目立たないようにする。どの操作が最終的におこなおうとしている操作なのかをわかりやすいようにする

ブレッドクラム

ブレッドクラムを活用する。ブレッドスクラムはたとえばAppleのサイトに見られるような、そのページへの階層構造を指し示すUIで、「HOME ＞ Shop Mac ＞ MacBook Pro ＞ Configure」のような表示になっている。ユーザがそのページがどこに位置しているのかを把握しやすくなる

アカウントレジストレーション

アカウント登録してパーソナルデータを保持することで、そのユーザに適したコンテンツを提供する。たとえばオンラインショッピングであれば、過去のショッピングデータを保持しておいて、そのユーザが好むと推測されるショッピングデータを掲示するといったもの。登録することでユーザにどういったメリットがあるかをすべて紹介することで、ユーザがアカウント登録したいとおもうようにすることが大切

入力必須フィールド

入力フォームがいくつかある場合、「入力必須」といった指定をつけてどのフィールドは値を入力しなければいけないかを明示する。こうすることでユーザはすべてのフィールドに値を入力する必要がなくなる。できればオプションのフィールドは表示しないようにして、必要なフィールドだけを表示するようにした方がいい

ステップレフト

複数のステップで作業を進める場合、現在のアクションが全アクションのどこにいるのかがわかるようにする。たとえばページの上部に「1 登録 → 2 選択 → 3 申し込み」のようなプログレスを表示しておき、そのページのところだけを色を強調してどの段階にいるのかをわかるようにする。ここでのポイントはどのページでもステップレフトは同じ場所に同じUIで用意しておくということ

サブスクリプションプラン

複数の月次サービスがある場合の掲載パターン。だいたいプラン名、価格、使える機能、申し込みボタンをそれぞれ表にまとめて一瞥してわかるようにしておく。サブスクリプションは順序(たとえば金額順)ごとに記載する

ホバーコントロール

多くの情報を掲示しなければならない場合では、ページが煩雑になりがち。こういったケースでは、表示するデータは隠蔽しておき、マウスが対象の要素の上にきた場合にホバー表示させるといったことで回避することもできる