優れたユーザーインターフェース：インターフェースをデザインするためのいくつかのヒント #デザイン #インターフェースデザイン #Design #Interface Design

マルチカラムではなく、シングルカラムのレイアウトを使用するようにしてください。

1カラムのレイアウトは、全体像をよりよくコントロールすることができます。同時に、ユーザーは一目で内容を把握することができます。一方、複数のカラムは、ユーザーをメインアイデアから遠ざける危険性があります。ベストプラクティスは、論理的なストーリーでユーザーを誘導し、テキストの最後にアクションボタンをつけることです。

贈り物は、多くの場合、より魅力的です。

ユーザーにちょっとしたプレゼントを贈ることほど、フレンドリーなジェスチャーはありません。具体的には、ギフトを贈ることは、互恵性の原則に基づき、顧客ロイヤリティを獲得するための効果的な戦術でもあります。そうすることのメリットは明らかで、今後のキャンペーンをより円滑に進めることができるでしょう。

重複する機能を統合してインターフェースを簡素化

製品の開発を通じて、意図的または非意図的に多くのモジュール、レイアウト、または要素が作成され、それらの機能の一部が重複することがあります。これは、インターフェイスが過剰に設計されている証拠です。冗長な機能は無駄であり、コンピュータのパフォーマンスを低下させます。また、インターフェイスのモジュールが多ければ多いほど、ユーザーの学習コストは大きくなります。ですから、インターフェイスをリファクタリングして、十分に無駄のないものにすることを検討してください。

自画自賛よりもお客様の声

肯定的なカスタマーレビューは、プロジェクトの機会を獲得したり、プロジェクトの転換率を高めたりする上で、非常に効果的なツールです。潜在的な顧客が、他の人々がそのサービスについて肯定的なレビューをしているのを見れば、プロジェクトの機会は劇的に増えます。ですから、これらの肯定的なレビューが本物で信頼できるものであるという金色の証拠を提供するようにしてください。

メイン・アイディアを頻繁に提示し、印象を深めること。

メインスローガンを何度も繰り返すこの方法は、インターフェイスが非常に長かったり、ページ数が多い場合に適しています。まず第一に、同じメッセージが画面いっぱいに表示されるのは迷惑です。しかし、ページが十分に長い場合、このような繰り返しはより自然で、混雑しません。ページの上部にボタンを置き、ページの下部に目立つボタンを置くことは悪いことではありません。こうすることで、ユーザーがページの一番下にたどり着き、次に何をするか考えているときに、あなたが提供するボタンが契約の可能性を得ることができたり、ユーザーがサービスを必要としていなくても、ボタンがフィルタリングの役割を果たすことができます。

オプションとボタンの区別

色、階層、モジュール間のコントラストなどのビジュアルは、ユーザーが製品を使用するのに役立ちます。このような優れたインターフェイスを伝えるには、クリック可能な要素、選択可能な要素、プレーンテキストを明確に区別する必要があります。下の例では、クリック可能な要素を青で、選択されている現在の要素を黒で設定しています。このように適切にデザインすることで、ユーザーは製品のモジュールを簡単に切り替えることができます。しかし、これら3つの要素を混乱させるようなデザインにしてはいけません。

ユーザーに選択させるのではなく、推薦を与えること

多くのサービスを紹介する場合、たとえ推奨設定がすべてのユーザーを満足させるものでなくても、重く推奨するのが良い習慣です。これには理論的な裏付けがあり、ユーザーに提示される選択肢が多ければ多いほど、ユーザーが決断するのが難しくなることがいくつかの研究明らかになっています。そこで、ユーザーが選択しやすいように選択肢を強調することができます。

決定操作の代わりに取り消し操作を与えます。

リンクやボタンをクリックしたと仮定して、その操作を取り消すことは自然な流れであり、人間の本能に沿ったものです。何かをするたびにOKボックスをポップアップさせるのは、その行動の結果を理解しているかどうかをユーザーに尋ねているようなものです。私は、ユーザーが毎回正しいことをしていて、誤用はめったに起きないと思い込むことに慣れています。ですから、誤用を防ぐために作られた確認ウィンドウはユーザーフレンドリーではなく、ユーザーは何かをするたびに意味のない確認をする必要があります。ですから、ユーザーの利便性を高めるために、アンドゥの実装を検討してください。

全年齢向けにするのではなく、誰のための商品なのかを明確にすること。

製品を大衆向けにしたいのか、それとも正確なターゲット・グループがあるのか。製品のポジショニングをより正確にする必要があります。ターゲットとなる顧客のニーズや基準を常に把握することで、製品をより良いものにし、顧客とのコミュニケーションの機会を増やし、この分野のプロフェッショナルで独占的な質の高いサービスであると感じてもらうことができます。製品を正確に位置づけることのリスクは、ターゲットとする潜在顧客の範囲を狭めてしまい、汎用性が低くなってしまうことです。しかし、よりプロフェッショナルであろうとするこの精神が、ひいては信頼と権威を獲得するのです。

卑屈にならず、率直かつ断固とした態度で接するようにしましょう。

不確かで震えるような声でも、自信に満ちた言い方でも意味を伝えることができます。インターフェイスのフレーズが疑問符で終わっている場合、例えば "Maybe"、"Possibly"、"Interest?" など。または "試したいですか？"口調をもう少しはっきりさせてもいいでしょう。しかし、絶対的なものはないので、ユーザーに自分で考える余地を与えるために、表現を緩めることはおそらく大丈夫でしょう。

人々が簡単に区別できるように、インターフェイスは対照的であるべきです。

インターフェイスからメイン機能エリアを目立たせる方がずっと効果的です。メインスローガンを目立たせる方法はたくさんあります。明るいトーンと暗いトーンのコントラストによって。要素に影やグラデーションを加えてレイヤー的に目立たせることもできます。最後に、色相環の補色を使ってインターフェイスを特別にデザインし、重心を浮き立たせることもできます。これらすべてによって、主意とインターフェイスの他の要素が明確に区別され、完璧に表現されたインターフェイスが完成します。

オリジンの指定

地域、提供するサービス、製品の産地を示すことは重要であり、顧客とのコミュニケーションを、地域特性を持つより具体的なシナリオに導入します。国、都道府県、市区町村などの出身地を示すことは、自己紹介や商品紹介の際にもよく言われることです。これをインターフェイスデザインに実装すると、非常にユーザーフレンドリーなものになります。また、地域を明示することで、目に見えない形で商品の評価が上がり、良いことづくめです。

フォームコンテンツの合理化

人は元来怠け者であり、フォームに入力する際にも同じことが言えます。フォームのすべてのフィールドは、ユーザーを失う危険性があります。誰もがタイピングが速いわけではありませんし、モバイルデバイスでのタイピングは非常に面倒なものです。フォーム内のすべてのフィールドが必要かどうかを自問し、フォーム内のフィールドを最小限にしましょう。ユーザーが入力する情報がたくさん必要な場合は、別のページに分散して入力し、フォームが送信された後に追加してください。多くのフィールドでフォームを肥大化させるのは簡単ですが、もちろん、シンプルに保ち、いくつかのフィールドだけにするのも簡単です。

アクションを隠すことなくオプションを表示

ドロップダウンボックスを使用すると、ユーザーから情報が隠され、表示するために追加のアクションが必要になります。もし、その情報が操作全体に必要なものであれば、表示することでよりわかりやすくしたほうがよいでしょう。ドロップダウンボックスは、日付や地方、その他の慣習を選択するために使用するのが最適です。アプリケーションの重要なオプションにドロップダウンボックスを使わないほうがよいでしょう。

ストレートなタイポグラフィよりも、インターフェイスを忠実に再現したほうがいい

当たり障りのない文章は、間違いなくユーザーの興味を失わせ、読み続けさせなくなります。確かに1カラムがスクロールするような長いページも良いですが、ユーザーの興味を高めて読み続けさせるためには、小さなセクションを適切に設定し、相互リンクさせるべきです。ただし、セクションとセクションの間の余白が大きすぎないように注意する必要があります。

ユーザーの気をそらすようなリンクの貼りすぎに注意

様々なユーザーのニーズを満たすために、ページのあちこちにリンクを貼るのはよくあることです。もし、ページの最後にあるダウンロードボタンなどをクリックさせることが主な目的であれば、よく考える必要があります。ユーザーは別のリンクをクリックして、ページを離れてしまっているかもしれません。ですから、ページ上のリンクの数には注意が必要で、ナビゲーションに使われるリンクとアクションに使われるリンクをスタイル分けするのが良いでしょう。ページに必要のないリンクは削除するようにすると、ユーザーは機能ボタンをクリックするようになります。

手術の状況や進行状況の提示

現在、ほとんどのインターフェースは、電子メールの既読・未読、電子請求書の支払済・未支払といったプログレスバーや様々な色のステータスアイコンで表示されています。このようなステータスをインターフェイスに表示することはユーザーにとって必要なことです。これにより、ユーザーは特定のアクションが成功したかどうか、次に何をするかを知ることができます。

ユーザーにタスクを完了しているように感じさせないこと

インターフェイス上に2つのボタンがあるとします。1つは「割引を受ける」、もう1つは「今すぐサインアップする」です。2つ目のボタンは利益を感じないし、"サインアップ "は終わりのないフォームを連想させるからです。つまり、ユーザーに利益を感じさせるボタンの方がクリックされる可能性が高いということです。このような、ユーザーが得をした気分になるような文字情報は、ボタンの横に配置することもでき、必ずしもボタンのタイトルである必要はありません。もちろん、通常のボタンも有用であり、一般的に反復的なアクションが頻繁に行われる場所で使用されます。

コンテキストが見つからないと感じるのではなく、直感的に操作できるようにします。

要素を直接操作する方が、より直感的であることは言うまでもありません。例えば、リストで、ユーザーが各エントリに対してアクションを実行したい場合、リストの外側ではなく、現在のエントリにボタンを配置します。もう一つの例は、要素を直接クリックして編集することです。これは、適切なボタンを選択してクリックするよりもはるかにシンプルで、時間もかかりません。もちろん、ページの進む・戻るボタンのような、コンテキストを必要としない一般的な操作では、このようなことをする必要はありません。

余分なページを作らず、全コンテンツを表示するようにします。

十分な大きさのワイドスクリーンのインターフェイスでは、ボタンをクリックしてからフォームを表示するよりも、直接フォームを表示する方がずっとよいでしょう。まず、クリックの回数を減らすことで、プロセスがシンプルになり、時間を節約できます。第二に、フォームを直接表示することで、ユーザーにフォームの長さを知らせることができ、実際に登録にそれほど時間がかからないことを伝えることができます。もちろん、このルールは登録フォームが非常にシンプルな場合に適しています。

インターフェイスを硬直したレンダリングではなく、滑らかなものに。

ユーザーが操作している間、インターフェイス上の要素はしばしば現れたり、隠れたり、開いたり、閉じたり、拡大したり、縮小したり、移動したりします。これらの要素に自然なアニメーションを追加すると、フェードイン/フェードアウトの効果が美しいだけでなく、より現実に即しているだけでなく、要素のサイズと位置の変更は、時間のかかるアニメーション処理です。しかし、アニメーションの時間を長く設定しすぎると、ユーザーが早く操作を完了したいと焦るようになるので注意してください。

#p#

ユーザーにサインアップを促すのではなく、ステップバイステップのガイドを提供します。

ユーザーにすぐにサインアップさせるのではなく、まず体験作業をしてもらってはどうでしょう。この体験は、プログラムの機能性、特徴などを示すことができます。ユーザーがいくつかの簡単なステップでアプリケーションの価値を理解すれば、登録フォームに記入する可能性が高くなります。このようなステップバイステップのアプローチは、登録をできるだけ遅らせますが、それでもユーザが登録せずにパーソナライゼーションなどの簡単なアクションを実行できるようにします。

ボーダーが多すぎるとインターフェースが分断されます

境界線が多すぎると、主な焦点から外れてしまいます。言うまでもなく、境界線はセクションを設定するための領域を分割する上で大きな役割を果たしますが、同時に、その明白な線はユーザーの注意をそらしてしまいます。ユーザーの注意を逸らさずにセクションを分けるという目的を達成するためには、インターフェイスの異なる領域にある要素を空白でグループ化したり、異なる背景色を使用したり、テキストを統一した方法で整列させたり、異なる領域に異なるスタイルを設定したりすることができます。WYSIWYGインタフェース設計ツールを使用する場合、多くの場合、これらのブロックの利便性に多くのブロックをドラッグするインタフェースで、より乱雑に表示されます。そこでまた、それらを区切るために、いくつかの水平線をどこにでも置くでしょう。より良い方法は、ブロックを垂直に整列させることで、余計な線を表示しないようにすることです。

製品の特徴を列挙するのではなく、製品の利点を示すこと。

ユーザーは常にベネフィットに関心があり、製品の機能はそれほど重要ではありません。クリス・ギレボーが著書『100ドルから始める』で指摘しているように、人はストレスや葛藤、心配事、未知の未来よりも、愛やお金、評価、自由な時間のほうを気にするものです。だからこそ、製品の特徴を紹介する際には、ベネフィットに立ち返ることが必要なのだと思います。

データに依存しすぎない製品設計を

インターフェースはしばしば、0、1、10、100から10,000以上まで、さまざまなデータ量を表示する必要があります。ここでよく問題になるのは、0個のデータが使用されるプログラムの最初から、使用可能なデータの超過分まで、インターフェイスをどのように表示するかということです。これは見落としがちな部分です。プログラム開始時にデータがない場合、ユーザーには真っ白な画面が表示され、このときユーザーはどのような操作をすればよいのかわからないことがあります。データのない最初のインターフェイスを利用することで、ユーザーはプログラムの使い方やプログラムのデータ作成方法を学び、慣れることができます。完璧は常に目標であり、インターフェースデザインも例外ではありません。

デフォルトでは

インターフェイスのデフォルトを、ユーザーが製品を使用することをチェックするものにすることは、ユーザーが本当に使用する必要がある場合、追加のクリックをすることなく、OKをクリックするだけでよいことを意味します。もちろん、デフォルトでサービスのチェックを外しておき、ユーザーが必要であれば手動で選択できるようにするという方法もあります。前者の設計の方が2つの理由で優れています。1つは、ユーザーがその製品やサービスを必要としている場合、デフォルトの設定になっているため、ユーザーが余計なクリックをする必要がなく、非常に時間を節約できることです。もうひとつは、このやり方は、他の誰もがその製品を選んでいることを暗に示して、何らかの形でユーザーにその製品を勧めているということです。もちろん、デフォルトの選択肢のように見えるようにインターフェースをデザインすることは、多かれ少なかれ議論の余地があり、一種の強制です。倫理的でありたいのであれば、ユーザーに選択させるテキストを曖昧にするか、二重否定のようなあまり露骨でない表現を使うか、どちらもユーザーに製品を選択することを余儀なくさせないようにすることができます。

インターフェイスは一貫性があり、ユーザーの学習コストを増加させないように設計されています。

ドナルド・ノーマンの一連の本が出版されて以来、インターフェイスデザインにおいて一貫性を保つように努めることは、一般的に従うガイドラインとなりました。デザインに一貫性を持たせることで、ユーザーは新しい操作を覚える必要がなくなり、学習コストが削減されます。ボタンをクリックしたり、ドラッグ・アンド・ドロップを実行したりするとき、そのような操作はアプリケーション全体を通してすべてのインターフェイスで一貫性があり、同じような結果をもたらすことが期待されます。その代わりに、特定の操作の結果がどうなるかを再学習するために、新しいコンテキストが必要になります。色、向き、要素の表現、位置、サイズ、形状など、一貫したインターフェースを実現するためにできることはたくさんあります。しかし、インターフェイスを一貫したものにするにあたっては、全体的な一貫性を適宜崩すことも望ましいということを覚えておくことが重要です。このときどきの一貫性のなさは、強調したい場所で使えば、大きな効果を発揮します。つまり、絶対的なものはなく、一貫したデザイン・ガイドラインに従うべきですが、そのルーチンから適切に離れることも必要です。

より適切なデフォルト値を使用することで

適切なデフォルト値と事前入力されたフォームフィールドは、ユーザーの作業負荷を大幅に軽減することができます。これは、ユーザーの貴重な時間を節約し、フォームや登録情報をすばやく入力するのに役立つ、非常に一般的な方法です。

いくつかの慣例に従い、それらを再設計しようとしないでください。

インターフェース・デザインにおける規約遵守のガイドラインは、インターフェースの一貫性のガイドラインと似ています。インターフェイスデザインの規約が守られていれば、ユーザーは簡単にそれを使うことができます。一方、一貫性のない非準拠なデザインは学習コストを増加させます。インターフェイスデザインにおけるこのような慣例があれば、インターフェイスの右上にある十字がアプリケーションを閉じるためのものであることを考えなくても簡単に知ることができますし、ボタンがクリックされたときに何が起こるかを予想することも簡単です。もちろん、慣習が陳腐化することはありますし、同じアクションが時間の経過とともに新しい意味を持つこともあります。しかし、インターフェイスにおいてこれらの慣習を破るとき、それは明確な目的を持って、良い観点から行われなければならないことを覚えておいてください。

ユーザーに、得をするよりも損をしない方がいいと思わせること。

誰だって成功はしたくないし、失敗もしたくない。心理学から得られた信頼できる知見によると、人は一般的に、新たな利益を得ることよりも、今持っているものを失うことを避けたいと考えます。この結論は、商品のデザインやプロモーションにも当てはまります。その製品が、顧客の興味、健康、社会的地位などの維持に役立つことを示そうとする方が、その製品が顧客に持っていないものをもたらすと伝えるよりも良いのです。例えば、保険会社の場合、事故の後に多額の保険金が支払われることを売りにしているのか、それとも所有する財産の損失を避けるのに役立つという事実を強調しているのか。

テキストによる説明よりも、階層的なグラフィカル・プレゼンテーションの方が好ましい。

階層的なデザインは、インターフェースの重要な部分とそうでない部分を分けます。階層的なインターフェイスを作るには、次のような部分に取り組むことができます：整列、間隔、色、インデント、フォントサイズ、要素サイズなど。これらの調整がすべて適切に適用されると、インターフェイス全体の読みやすさを向上させることができます。また、非常にわかりやすいインターフェイスで上から下へ目を通すよりも、ユーザーはゆっくりとインターフェイスを読むことができます。また、インターフェースにもう少し個性を持たせることもできます。旅行と同じで、高速鉄道に乗って早く名所に着くこともできますが、ゆっくりと道中の景色を楽しむこともできます。だから、レイヤーデザインは、真っ白で単調な画面ではなく、目に残るものを与えてくれるのです。

送信後にバリデーションを行うのではなく、インライン・バリデーション・メッセージを使用します。

フォームを処理するとき、ユーザーが必要な内容を記入したかどうかを即座に検出し、検証メッセージを出すのがベストです。こうすることで、エラーが発生したらすぐに修正することができます。反対に、送信後にフォームをチェックするとエラーメッセージが表示され、ユーザーは面倒に感じ、作業を繰り返さなければならなくなります。

ユーザー入力要件の緩和

ユーザーが入力するデータについて、書式や大文字・小文字などの制限を緩和してみてください。そうすることで、より人間的で、よりユーザーフレンドリーなインターフェイスにすることができます。この良い例が、ユーザーに電話番号を入力させる場合です。ユーザーが電話番号を入力する方法は、カッコ付き、ダッシュ付き、スペース付き、市外局番の有無など、いろいろあります。コードでこれらのフォーマットの問題に対処すれば、数行のコードを書くだけで済みますが、数え切れないほどのユーザーの作業負担を減らすことができます。

ユーザーに、時間を意識させるのではなく、素早く対応する必要性を感じさせます。

適切な切迫感は、ユーザーに10日や半月を待たせるのではなく、すぐに決断してもらうための効果的な戦術です。重要なのは、この戦術が試行錯誤されていることで、リソースが不足していること、あるいはイベントの開催期間が限られていること、今日買うことはできても明日このような低価格で買うことができないかもしれないことを暗示していることです。その一方で、この戦術はユーザーに絶好のチャンスを逃すと感じさせるものでもあり、またしても、人が失うことを恐れる性質を応用したものでもあります。もちろん、この戦術は、一部の人からは、寛大ではないアプローチだと嘲笑されるでしょう。しかし、あくまでも戦術であり、正当性を保ちながら適用しても損はありません。ですから、マーケティングのためにインターフェイスに緊急性の錯覚を起こさないでください。

ハンガーマーケティングを利用

物が高価なのは、それが希少だからです。飢餓マーケティングは、物が希少で、残りわずかしかなく、明日来ればなくなっているかもしれないというメッセージを与えます。卸売り品と限定品の価格差がどれくらいあるか、比べてみてください。卸売業者や大手小売業者の話に戻りますが、彼らもまた、より良い売上を得るためにハンガー・マーケティングを利用しています。しかし、ソフトウェア業界では、ハンガー・マーケティングというものがあることが忘れられがちです。デジタル製品は簡単にコピーや複製ができるため、在庫がなくなるということがありません。実際、リソースの不足という現実と結びつけるために、インターフェイスデザインに利用することができます。ウェビナーのチケットについて考えてみたり、1ヶ月に提供できる人数の制限について考えてみたり-こうした情報はすべて、限りがあることをユーザーに知らせることができます。

詰め替えではなく、ユーザーに選んでもらうこと

インターフェイスデザインのこの古典的なルールは、誰かに何かを思い出してもらうよりも、山積みになったものから何かを認識する方が簡単だという心理学に基づいています。何かを認識するには、わずかな手がかりを頼りに少し思い出すだけでよいのです。一方、思い出すことは、自分の脳をフル回転させる必要があります。だから、テスト用紙の多肢選択問題は短答式問題よりも速く解けるのでしょう。ですから、ユーザーに中途半端に考えさせたり、自分で記入させたりするのではなく、ユーザーが関連する情報をインターフェイスに表示して、その中から選択させるようにしてみてください。

クリックをより簡単に

リンクやフォームの入力ボックス、ボタンなどは大きくした方がクリックしやすくなります。よると、マウスなどの周辺機器を使ったクリックは、特に要素が小さいと時間がかかります。このため、フォームの入力ボックスやボタンなどは大きくした方がよいでしょう。あるいは、元のデザインはそのままに、要素のクリック可能な部分だけを大きくする方法もあります。この典型的な例は、モバイル端末のテキストリンクやナビゲーションメニューで、テキストは必ずしも大きくありませんが、背景が引き伸ばされて広い範囲でクリックできるようになっています。

ページの読み込み速度を最適化し、ユーザーを長く待たせないようにします。

スピードは重要です。ページの読み込み速度やUIがアクションに反応する速度は、ユーザーが待ち続ける忍耐力があるかどうかに直結します。間違いなく、待ち時間が1秒でも長くなれば、ユーザーやプロジェクトの機会を失うことになります。良い解決策は、ページとイメージを最適化することです。これに加えて、心理学を使って待ち時間を長く感じさせないようにすることもできます。具体的には2つのテクニックがあります。ひとつはプログレスバーを表示すること、もうひとつはユーザーの注意を引くために関連性のあるものや興味深いものを表示することです。

ボタンだけでなく、ショートカットも重要です。

プログラムが広く配布される場合、上級ユーザーの気持ちを考慮する必要があります。人々は常に、反復的な作業をより素早く実行する方法を見つけようとし、ショートカットが生まれました。ショートカットは、インターフェイス上でクリックしまくるよりもはるかに効率的です。Gmail、Twitter、Tumblrなどの主要なプログラムで普及しているJKショートカットがその好例です。ボタンは素晴らしいですが、ショートカットはケーキの上のアイシングです。

優れたユーザーインターフェース：インターフェースをデザインするためのいくつかのヒント