優れたユーザー インターフェース デザインのための 37 のヒント (画像付き)

1 列のレイアウトにより、全体的な状況をより適切に制御できます。同時に、ユーザーはコンテンツを一目で確認することもできます。複数の列を使用すると、ユーザーの注意が散漫になり、要点が伝わらない可能性があります。最善のアプローチは、論理的な物語でユーザーを導き、最後に行動喚起ボタンを提供することです。

ユーザーにちょっとした素敵な贈り物を贈るといった、友好的な行為ほど素晴らしいものはありません。具体的には、贈り物をすることは、相互主義の原則に基づいた顧客ロイヤルティを獲得するための効果的な戦術でもあります。そうすることで得られるメリットは明らかであり、将来の活動（販売促進、製品の更新、その他の活動など）がよりスムーズになります。

製品開発プロセス全体を通じて、意図的または無意識のうちに多くのモジュール、レイアウト、要素が作成されますが、それらの機能は類似しています。この状況はすでに過剰設計を示しています。これらの冗長な機能モジュールは役に立たず、コンピュータのパフォーマンスを低下させるので、常に注意してください。さらに、インターフェース上のモジュールの数が増えるほど、ユーザーの学習コストも大きくなります。したがって、インターフェースを十分にスリムにするためにリファクタリングすることを検討してください。

顧客からの賞賛は、プロジェクトの機会を獲得したり、プロジェクトのコンバージョン率を向上させるための非常に効果的な手段です。潜在的な顧客が、他の人があなたのサービスに好意的なレビューを与えていることを知ると、プロジェクトの機会が劇的に増加します。したがって、これらの肯定的なレビューが本物であり、信頼できるものであるという確固たる証拠を提供するようにしてください。

メインスローガンを複数回繰り返すことは、インターフェースが非常に長い場合やページ分割されている場合に適しています。まず第一に、画面が同じ情報で埋め尽くされるのは絶対に望ましくありません。それは煩わしいからです。しかし、ページが十分に長い場合、繰り返しはより自然に見え、混雑しているようには見えません。したがって、ページの上部にボタンを配置し、下部にもっと目立つボタンを配置しても問題はありません。こうすることで、ユーザーがページの下部に到達し、次に何をすべきか考えているときに、提供したボタンが潜在的な契約を獲得したり、ユーザーがサービスを必要としない場合でもフィルターとして機能したりすることができます。

色、階層、モジュール間のコントラストなどの視覚的なデザイン要素は、ユーザーが製品を使いやすくするのに役立ちます。ユーザーは、現在どのページにいて、どのページに移動できるかを常に把握できます。このような優れたインターフェースを伝えるには、クリック可能な要素 (リンク、ボタンなど)、選択可能な要素 (ラジオ ボタンなど)、および通常のテキストを明確に区別する必要があります。以下の例では、クリックアクション要素を青に設定し、現在選択されている要素を黒に設定しています。このような適切な設計により、ユーザーは製品のモジュール間を簡単に切り替えることができます。ただし、これら 3 つの要素を混乱を招くような方法で設計しないでください。

多くのサービスを提示する場合、推奨設定がすべてのユーザーを満足させない可能性があるとしても、重点的な推奨事項を提示することをお勧めします。これには理論的根拠があります。いくつかの研究では、ユーザーが直面する選択肢が増えるほど、意思決定が難しくなるという現象が明らかになっています。そのため、オプションを強調表示して、ユーザーが選択できるようにします。

たとえば、リンクやボタンをクリックしたとします。アクションを元に戻すと、スムーズかつ自然になり、人間の本能と一致します。各操作ごとに確認ボックスをポップアップ表示すると、ユーザーがその操作の結果を理解しているかどうかを尋ねているように見えます。私は、ユーザーの操作が常に正しいと想定することに慣れていますが、実際には、誤った操作が発生するのはごくまれです。そのため、誤操作を防ぐために設計された確認ウィンドウは実際には非人道的であり、ユーザーは操作するたびに意味のない確認を行う必要があります。したがって、ユーザーの利便性を高めるために、製品に元に戻す操作を実装することを検討してください。

あなたの製品を人気商品にしたいですか、それとも特定のグループをターゲットにしたいですか?製品の位置付けをより正確にする必要があります。ターゲット顧客のニーズと基準を常に理解することで、より良い製品を作り、顧客とのコミュニケーションの機会を増やし、顧客に非常にプロフェッショナルだと感じてもらうことができます。これは独占的な高品質のサービスです。製品をあまりに正確に位置づけることのリスクは、ターゲットとなる潜在顧客の範囲が狭まり、汎用性が低下する可能性があることです。しかし、よりプロフェッショナルであろうとするこの精神は、信頼と権威を獲得することにつながります。

(ヒント: 下の写真のかわいいキャラクターは好きですか? MicroPersonas について学んでみてください)

自信のない震える声で自分の考えを伝えることも、非常に自信を持って表現することもできます。インターフェースでの発言のほとんどを「たぶん」「おそらく」「興味がありますか」「試してみたいですか」などの疑問符で終わらせると、間違いなく口調をよりしっかりとしたものにすることができます。しかし、絶対的なものは何もありません。ユーザーが自分で考える余地を与えるために、適度に文言を緩和してもよいのではないでしょうか。

インターフェースから主要な機能領域を強調表示する方がはるかに良いでしょう。メインスローガンを目を引くものにする方法はたくさんあります。明るい色調と暗い色調のコントラストでハイライトします。要素に影のグラデーションやその他の効果を追加することで、インターフェースが階層化され、テーマが強調されます。最後に、重心を強調するという目的を達成するために、カラーホイール上の補色（黄色と紫など）を使用してインターフェイスを特別に設計することもできます。これらすべてを組み合わせると、最終的なインターフェースでは、主な意図がインターフェースの他の要素から明確に区別され、完璧に表現されます。

地域、提供するサービス、製品の原産地を示すことは重要です。また、顧客とのコミュニケーションをより具体的かつ地域的なシナリオにすることもできます。出身地、国、県、都市を示すことも、自己紹介や商品の紹介をするときによく行われます。これをインターフェースデザインに実装すると、非常に親しみやすい感じになります。同時に、エリアを指定することで製品の評判も暗黙的に高まり、さらに良いものになります。

人間は本質的に怠け者であり、フォームに記入するときも同じです。誰もフォームの多くのフィールドに記入したいとは思いません。フォーム内のすべてのフィールドには、ユーザーを失うリスクが伴います。誰もが速くタイピングできるわけではありませんし、モバイルデバイスでの入力はさらに面倒です。フォーム内のすべてのフィールドが必要かどうかを自問し、フォーム内のフィールドの数を減らすようにしてください。ユーザーに大量の情報を入力してもらう必要がある場合は、フォームの送信後もユーザーが引き続き入力できるよう、情報を複数のページに分散させるようにしてください。フィールドが多すぎると、フォーム全体が肥大化して見えやすくなります。もちろん、フィールドを少数だけにしてシンプルにすることも簡単です。

使用するドロップダウン ボックスでは、ユーザーに対して情報が非表示になり、情報を表示するには追加のアクションが必要になります。操作全体を通じてこの情報が必要な場合は、より明確に表示することが望ましいです。ドロップダウン ボックスは、日付や都道府県の選択などの規則がある場所に最適です。プログラム内の重要なオプションをドロップダウン形式にしないのが最善です。

味気ない記事では、間違いなくユーザーは興味を失い、読み続けることになります。はい、1 列スクロールの長いページは良いですが、ユーザーの興味を高めて読み続けてもらうために、いくつかのセクションを適切に設定し、それらをリンクする必要があります。ただし、セクション間の空白スペースが大きすぎないように注意してください。

さまざまなユーザーのニーズを満たすために、ページのあちこちにリンクを配置するのが一般的です。主な目的が、ユーザーにページの最後にあるダウンロード ボタンをクリックさせることである場合は、よく考える必要があります。ユーザーが他のリンクをクリックしてページを離れる可能性があるためです。そのため、ページ上のリンクの数に注意する必要があり、ナビゲーションに使用するリンクと、異なるスタイルの操作に使用するリンクを分離することが最善です。ユーザーが機能ボタンをクリックするように誘導するページ上の不要なリンクを削除するようにしてください。

最近では、ほとんどのインターフェースに、電子メールの既読または未読ステータス、電子請求書の支払い済みまたは未払いステータスなど、ステータスを示すさまざまなスタイルの進行状況バーまたはアイコンがあります。ユーザーにとって、このようなステータスをインターフェース上に表示することは非常に重要です。このようにして、ユーザーは特定の操作が成功したかどうか、次にどのような操作を実行する必要があるかを知ることができます。

インターフェースに 2 つのボタンがあるとします。1 つは「割引を受ける」、もう 1 つは「今すぐ登録」です。 2 番目のボタンは利益を生みそうにないし、「サインアップ」というと、記入しなければならないフォームが果てしなく続くイメージが思い浮かぶので、ほとんどの人は最初のボタンをクリックすると思います。つまり、ユーザーに利益をもたらすボタンはクリックされる可能性が高くなります。このような、ユーザーにメリットを感じさせるテキスト情報は、ボタンの横に配置することもでき、ボタンのタイトルとして使用する必要はありません。もちろん、通常のボタンも便利で、繰り返し操作が頻繁に行われる場所でよく使用されます。

言うまでもなく、要素を直接操作する方が、より直感的で明確な方法です。たとえば、リスト内で、ユーザーに各項目を操作させたい場合は、リストの外側ではなく現在の項目にボタンを配置する必要があります。もう 1 つの例としては、要素を直接クリックして編集状態に入ることが挙げられます (たとえば、ページ上の住所情報はクリック後に編集できます)。この方法は、選択して対応するボタンをクリックして操作する従来の方法よりもはるかに簡単で便利です。もちろん、ページ上の進むボタンや戻るボタンなど、コンテキストを必要としない一般的な操作では、これを行う必要はありません。

十分に大きいワイドスクリーン インターフェイスでは、ボタンをクリックしてフォームをポップアップ表示するよりも、フォームを直接表示する方がはるかに優れています。まず、クリック回数が減るので、プロセスが簡素化され、時間が節約されます。次に、フォームを直接提示することで、ユーザーはフォームの長さを知ることができ、実際には登録にそれほど時間がかからないことが分かります。もちろん、このルールは非常にシンプルなサインアップフォームには有効です。

ユーザーの操作中、インターフェース上の要素は、表示、非表示、開く、閉じる、拡大、縮小、移動されることがよくあります。これらの要素に自然なアニメーションを追加すると、フェードインとフェードアウトの効果が美しくなるだけでなく、よりリアルになります。要素のサイズと位置の変更は、時間のかかるアニメーション プロセスです。ただし、アニメーション時間を長く設定しすぎないように注意してください。そうしないと、操作をできるだけ早く完了したいユーザーがイライラしてしまいます。

ユーザーにすぐに登録を求めるのではなく、まずは体験的な操作をいくつか実行させてみてはいかがでしょうか?この体験プロセスでは、プログラムの機能や特徴などを実証できます。ユーザーがいくつかの簡単な手順でプログラムの価値を理解すると、登録フォームに記入する意欲が高まります。このステップバイステップのガイダンスにより、ユーザー登録を可能な限り遅らせながら、ユーザーが登録せずにパーソナライズなどの簡単な操作を実行できるようになります。

プロセスの境界によって、主題から注意が逸れてしまう可能性があります。言うまでもなく、境界線はエリアを分割したりセクションを設定する上で大きな役割を果たしますが、同時にその目立つ線はユーザーの注意をそらすことになります。ユーザーの注意をそらすことなくセクションを分割するという目的を達成するために、レイアウト時に、空白スペースを介してインターフェースのさまざまな領域の要素をグループ化し、異なる背景色を使用し、テキストの配置を統一し、領域ごとに異なるスタイルを設定できます。 WYSIWYG インターフェース設計ツールを使用する場合、インターフェース上で多くのブロックをドラッグすることが多く、ブロックが多すぎると乱雑に見えてしまいます。そこで、あちこちに水平線を引いて、区別することにします。より良い方法は、視界を妨げる余分な線がないようにブロックを垂直に並べることです。

市場はこのように機能します。ユーザーは常に自分の利益だけを気にしており、製品の機能はそれほど重要ではありません。製品の使用によってもたらされる価値をより直感的に反映できるのはメリットだけです。クリス・ギレボーは著書『Starting with $100』の中で、人々はストレスや葛藤、心配事、未知の未来よりも、愛やお金、アイデンティティ、自由時間などを重視していると指摘しています。そのため、製品の機能を説明する際には、メリットに立ち返る必要があると考えています。

多くの場合、0、1、10、100、10,000 以上など、さまざまな量のデータをインターフェイスに表示する必要があります。ここでよくある問題は、プログラムが使用する初期の 0 データからデータを持つ状態への遷移までのインターフェイスをどのように表示するかということです。これも私たちがよく見落としがちなことです。プログラムに最初にデータがない場合、ユーザーには空白しか表示されず、どのような操作を実行すればよいかわからない場合があります。データのない初期インターフェースをうまく活用することで、ユーザーはプログラムの使用方法やプログラム内でのデータの作成方法を学習し、慣れることができます。完璧を目指すことは常に私たちの目標であり、インターフェース デザインも例外ではありません。

製品を使用するユーザーにとって、このインターフェースをデフォルトの選択肢にします。つまり、ユーザーが本当にこのインターフェースを使用する必要がある場合、追加のクリックなしで直接 [OK] をクリックできるということです。もちろん、デフォルトでサービスのチェックを外す別の方法もあり、ユーザーは必要に応じて手動で選択できます。前者の設計の方が優れている理由は 2 つあります。まず、デフォルト設定ではユーザーが当社の製品またはサービスを必要とするようになっているため、ユーザーは追加のオプションをクリックする必要がありません。これは非常に便利です。第二に、この行為は、ある程度、ユーザーに製品を推奨し、他者が私たちを選んだことを暗示しています。もちろん、インターフェースをデフォルト オプションとして設計することは多少議論の余地があり、ユーザーに少し強制されているように感じられます。より道徳的な表現にしたい場合は、ユーザーに選択を求めるテキストを曖昧にするか、二重否定などのあまり直接的ではない説明を使用します。どちらの方法でも、ユーザーが製品の使用を選択することを強制されていると感じにくくなります。

ドナルド・ノーマンの一連の作品が出版されて以来、インターフェース設計の一貫性を維持することが、一般的に遵守される原則となっています。デザインの一貫性を維持することで、ユーザーの学習コストを削減でき、ユーザーは新しい操作を学習する必要がなくなります。ボタンをクリックしたりドラッグ操作を実行したりする場合、そのような操作はプログラム全体のすべてのインターフェースで一貫しており、同様の結果が生成されることを期待します。代わりに、新しい状況で特定の操作がどのような結果を生み出すかを再学習する必要があります。一貫したインターフェースを実現するために、色、向き、要素の表示、位置、サイズ、形状など、取り組むべき側面は数多くあります。ただし、インターフェースの一貫性を保つ前に、全体的な一貫性を適切に崩すこともお勧めします。デザインのこのような不一致は、強調が必要な場所で使用すると非常に効果的です。したがって、世の中に絶対的なものは何もなく、一貫した設計原則に従いつつも、ルールを適切に破るべきです。

適切なデフォルト値と事前入力されたフォーム フィールドにより、ユーザーの作業負荷を大幅に軽減できます。これは、ユーザーの貴重な時間を節約し、フォームへの記入や情報の登録を迅速に行うためによく使われる方法です。

インターフェース設計の規則は、以前のインターフェースの一貫性と非常に似ています。インターフェースの規則に従えば、ユーザーにとって使いやすくなります。逆に、一貫性がなく型破りな設計は学習コストを増加させます。インターフェース設計におけるこれらの規則により、インターフェースの右上隅にある十字形が (ほとんどの場合) プログラムを閉じるために使用されることが、考えなくてもわかります。また、ボタンをクリックした後に何が起こるかを予測することもできます。もちろん、慣習は時代遅れになり、時間の経過とともに同じ操作に新しい意味が与えられることもあります。ただし、インターフェースでこれらの規則を破る場合は、目的を持って、正当な理由に基づいて行う必要があることに注意してください。

私たちは成功が好きです。誰も失敗は望みません。心理学の信頼できる結論によれば、人々は一般的に、新たな利益を得ることよりも、所有しているものを失うことを避けようとする傾向がある。この結論は製品の設計とプロモーションにも当てはまります。顧客に、この製品が顧客にないものをもたらすと伝えるのではなく、顧客が興味、健康、社会的地位などを維持するのに役立つことを説明するようにしてください。たとえば、保険会社は事故後に受け取れる多額の補償を売りにしているでしょうか、それとも所有する財産を失うことを避けるのに役立つことを強調しているでしょうか?

階層型設計により、インターフェースの重要な部分とそれほど重要でない部分を分離できます。インターフェースを明確に構造化するには、配置、間隔、色、インデント、フォント サイズ、要素のサイズなどの側面に取り組むことができます。これらの調整をすべて適切に適用すると、インターフェース全体の読みやすさが向上します。ユーザーが上から下まで一目で見渡せる非常にわかりやすいインターフェースと比較すると、このような明確なデザインでは、ユーザーが速度を落としてゆっくり読むことも可能になります。これにより、インターフェースもより特徴的になります。旅行と同じように、高速鉄道に乗って景勝地（ページの上から下まで見てください）にすぐに到着することもできますが、ゆっくりと移動しながら途中の景色を楽しむこともできます。したがって、レイヤー化されたデザインにより、単なる空白の単調な画面ではなく、目が留まる場所が提供されます。

さまざまな機能項目をグループ化して結合すると、プログラムの使いやすさが向上します。常識のある人なら誰でも、ナイフとフォーク、あるいは開いたファイルと閉じたファイルは一緒に使われることを知っています。同様の機能を持つ要素をまとめることも論理的であり、これは私たちの通常の認識と一致しています。

フォームを処理するときは、ユーザーが入力したコンテンツが要件を満たしているかどうかをすぐに検出し、検証メッセージを表示するのが最適です。こうすることで、エラーが発生したらすぐに修正することができます。逆に、送信後にフォームを確認するとエラーメッセージが表示され、ユーザーは疲れて以前の作業を繰り返すことになります。

フォーマット、大文字小文字など、ユーザー入力データに対する制限を緩和するようにしてください。これにより、ユーザーフレンドリーになり、インターフェースもより使いやすくなります。完璧な例としては、ユーザーに電話番号の入力を求められた場合、括弧、ダッシュ、スペース、市外局番付き、市外局番なしなど、さまざまな入力方法があります。コード内でこれらの書式設定の問題を処理する場合、コストはコード行が数行増えるだけですが、無数のユーザーの作業負荷を軽減できます。

適切な緊急感は、ユーザーが 10 日間または半月待つのではなく、すぐに決定を下せるようにする効果的な戦術です。重要なのは、この戦術はリソースが不足しているか、活動が時間的に制限されていることを意味するため、常に機能することです。今日購入することはできますが、明日はそれほど安い価格で購入できない可能性があります。一方、この戦術は、人々が持つ負けることへの自然な恐怖心を再び利用し、ユーザーに大きなチャンスを逃しているような気分にさせます。もちろん、この戦術は一部の人々から嘲笑され、不誠実だと見なされるでしょう。しかし、これは単なる戦術であり、合法である限り使用しても害はありません。したがって、マーケティングのためだけに、インターフェースに誤った緊急感を与えないようにしてください。

希少性は物事に価値をもたらします。飢餓マーケティングが伝えるメッセージは、あまり多くのものは残っておらず、わずかな品物しか残っておらず、明日また来たらなくなっているかもしれない、というものです。卸売商品と限定版商品の価格差を比較すればわかります。振り返ってみると、卸売業者や大手小売業者も、売上を伸ばすために飢餓マーケティングを利用しています。しかし、ソフトウェア業界では、ハンガー マーケティングというものがあることを忘れがちです。デジタル製品は簡単にコピーできるため、不足することはありません。実際、インターフェース設計では、現実のリソース不足と関連付けるためにも使用できます。オンラインセミナーのチケット価格について考えたり、1 か月にサービスを提供できる人数の制限について考えたりすることで、これらの情報によって制限があることをユーザーに知らせることができます。

インターフェース設計におけるこの古典的な原則は心理学に基づいています。つまり、誰かに何かを思い出すように頼むよりも、群衆の中で何かを認識する方が簡単だということです。何かを認識するには、少しの記憶といくつかの手がかりだけが必要です。一方、思い出すには、脳を徹底的に探す必要があります。おそらくこれが、試験問題における多肢選択式問題が短答式問題よりも早く終わる理由でもあるのでしょう。したがって、ユーザーに長い間考えてもらい、自分で入力してもらうのではなく、ユーザーが以前に入力した情報の一部をインターフェースに表示して、選択できるようにします。