UI デザインの基本原則

いい UX（ユーザーエクスペリエンス）には、いい UI（ユーザーインターフェース）が不可欠です。 Webサイトやアプリがインターフェースが原因で使いづらい場合、その製品は使われることない上に、テクニカルサポートを圧迫させて、コストが膨れ上がってしまいます。

UI はビジネスに大きな影響を与えるため、ビジネスの成功には不可欠なのです。

そしてこの原則の多くは、「ユーザーの生活を楽にする」ことに集約されます。

UI デザインの１４原則で、ユーザーの使いやすさが改善されます。この原則を実践してみませんか。UXPinを使えば、高度なプロトタイプが可能になり、美しく完全にインタラクティブなプロトタイプを数分で作成できます。UXPin をぜひ無料でお試しください。

１．ユーザーを中心に据える

いつものように、最初の UI デザインの原則は、人（あるいは、所謂「ユーザー」）に焦点を当てるということです。いい UI は、使いやすく自然で、混乱を招くようなことはなく、ユーザーが求めていることを実現してくれますからね。

ユーザーを理解して、彼らが何をしたいのかを理解する必要があります。そして例えば「ユーザーは専門家なのか」など、ユーザーについて知る最善の方法は、彼らと話すことです。

インタビューの作成と構成は本記事の範疇を超えていますが、対象者にインタビューして彼らがどのような人なのかを知り、彼らのための UI デザインを開発しましょう。HCD（人間中心設計）について学ぶことで、最高のインターフェイスのための正しい考え方に行き着き、人をまず第一に考えてデザインは第二に考えるということができるようになるでしょう。

２．明瞭さを追求する

UI の目的は、ユーザーが Web サイトやアプリケーション（または、より一般的に言うと、より広いデザインでは、あらゆる製品）と対話できるようにすることです。なので、混乱を招いたり、インタラクションの助けにならないものは避けましょう。

３．画面ごとのアクションとステップの最小化

タスクとアクションを効率化し、できるだけ少ないステップで実行できるようにしましょう。各画面には、主要なフォーカスが１つあるべきです。例えば、このブログの目的は、みなさんがこれを読み、できれば楽しんでいただき、そこから学ぶことであり、SNS でシェアしたり、同僚にメールしたりするためではありません（シェアするほど価値があると判断した場合はシェアしてほしいですが）。

主要なアクションを常に前面中央に配置し、二次的なアクションをページの奥深くに移動するか、視覚的に軽い重みと適切なタイポグラフィを取り入れましょう。

４．シンプルさを目指す

クラシックなものが存在するのには理由があります。クラシックは時代を越え、流行遅れになることはありませんが、現代的なタッチが加わることでさらに魅力が増します。黒いカクテルドレスやタキシードを考えてみてください。どちらもファッションスタイルの定番です。シンプルでエレガントで、着る人に高級感を添えます。

UI はシンプルでエレガントであるべきです。シンプルさについて、詳しくはこちらの記事（英語）をご覧ください。

５．一貫性を保つ

一貫性があることで「馴染み」が生まれ、馴染みのあるインターフェースは当然使いやすくなります。車のハンドルを握ったとき、ブレーキとアクセルが左右逆だったらどんなにイライラするでしょうか。あるいは、Webフォームへの入力で、赤が「送信」ボタンで、緑が「削除」ボタンだったらどうでしょう。

一貫したデザインだと、ユーザーが感じる摩擦が減ります。一貫したデザインは予測可能ですからね。予測可能なデザインとは、指示がなくても機能の使い方が理解しやすいということです。UI デザインは内部だけでなく、外部的でも一貫しているべきなのです。

Web サイトやアプリ間で同じように、あるいはほぼ同じように機能する一般的な規約だと、サイトのナビゲートや使用がしやすくなります。例えば Apple のヒューマンインターフェースガイドラインは、アプリ間の一貫性の素晴らしい例として挙げられます。このガイドラインは、どの Apple 製品のユーザーでも、他のどのアプリでも簡単に使えるように、アプリ間やすべてのApple 製デバイスでどのように機能が動作すべきかが詳しく説明されています。

これはまた、一般的なパターンを新たに発明したり一から作り直したりしないということでもあります。デザインの問題に対するパターンはすでに数多く存在しています（パターンがあると、ユーザーがすでにその仕組みを知っていることから認知負荷も軽減されます。これは８番目の原則で挙げています。)。なので例えば「検索バー」をページの一番下に置くと、それは「革命的なデザイン」になるのではなく、混乱を招くだけになるでしょうね。

デザインシステムは、UI デザインの一貫性を確保するための素晴らしい方法なのです。

６．UI デザインは見えなくていい

UI が注目されるようなものであってはいけません。素晴らしい UI だと、摩擦なく製品を使うことができ、インターフェースとのインタラクションの方法を考えることに時間が費やされることはありません。

７．有益なフィードバックを提供する

フィードバックには、視覚的なもの、音声的なもの（新着メッセージを受信したときの「チーン」という音）、触覚的なもの（ゲームや電話が「消音」に設定されているときの新着メールや電話の「バイブレーション」で通知する機能で有用）があり、どのアクションにも、そのアクションが成功したか否かを示すフィードバックがあるべきです。

フィードバックで、以下の４つの分野の質問に答えることができます：

ロケーション：現在地
ステータス：今どうなっているのか、この状況はまだ続いているのか
今後の状況：次は何か
成果と結果：それでどうなったのか

ナビゲーションアイテムの上にカーソルを置くと色が変わり、そのアイテムがクリック可能であることが示されます。また、ボタンはボタンのように見えるべきです。フィードバックは、ユーザーが正しいことをしているかどうか（または間違ったことをしているかどうか）を知らせてくれるものでであるべきです。

８．認知的負荷を軽減する

この UI デザインの原則の多くは、ユーザーの認知的負荷を軽減する役割を果たすものです。つまり、基本的には、ユーザーに考えさせないということです（同様に UX デザインの原則としても有用です）。

認知負荷を減らし、Web サイトやアプリを使いやすくするための一般的な方法としていかが挙げられます：

アクションと情報をチャンク（細切れ）にする ：ほとんどの人は、情報を処理するときに「７±２」の塊を処理できる。たとえば、電話番号を「１２３４５６７８９０」のような１０桁のシーケンスではなく、「１２３−４５６−７８９０」のような通常の３-３-４の方法で分割すると、エラーが少なくなる。
３クリックルールを適用する：情報を探すのに３回以上クリックされるべきではない。
認識を優先して想起を最小限に抑える：例えば「ゴミ箱」や「（通知によく使われる）ベル」のアイコンなど、既存の記憶を呼び起こす一般的なアイコンを考えてみると、コンテクスト内の一般的な画像やアイコンで、ユーザーは機能を識別することができる。これは、大抵の人が理解できる一般的なアイコンを別のものを表すのに使わないということでもある。そういうことをすると、混乱を招くだけである。

９．アクセスしやすくする

UI デザインは、アクセシビリティの問題を考慮する必要があります。これは、オンラインにおいては、多くの場合は「視覚に障害がある人が製品にアクセスして使えるようにする」ということになります。あと、色覚に障害がある人のことについても忘れてはいけません。

男性のおよそ１２人に１人（約８％）、女性の２００人に１人（約０.５％）が、色覚に何かしらのハンデがあります。色は強調のために使いますが、情報伝達を色だけに頼らないようにしましょう。

１０．UI にユーザーのフィードバックを含める

デザインが独り歩きしてはいけません。ユーザーからのフィードバックを集めることで、デザインの選択をテストして検証しましょう。ユーザーがあなたのデザインを使おうとするのを（指導せずに）観察してください。彼らは混乱していませんか？望む結果を簡単に得られますか？

これをデザインプロセスで実行し、リリース後に継続的に評価しましょう（ヒートマップは UI の有効性を追跡する１つの方法であり、もう１つの方法として A/B テストがあります)。

１１．柔軟性

複数のプラットフォームで動作し、見栄えのする UI を作成しましょう。もちろん、デバイスのフォームファクターや、Android や iOS などの OS（オペレーティングシステム）によって微調整が必要な場合もありますが、何にでも対応できる柔軟性が必要です。

１２．視覚的構造

一貫したビジュアル構造を保つことで、慣れ親しんだ感じを演出し、ユーザーの不安を取り除いて、リラックスしてもらえるようにしましょう。最も重要なものが明白になっている視覚的階層、配色、一貫したナビゲーション、要素の再利用、グリッドを使った視覚的順序の作成など、注目すべき要素がいくつかあります。

１３．ダイアログは終了につながるべきである

アクションには、（各ステップでフィードバックがある）始まり、中間、終わりがあるべきです。例えば、オンラインで購入する場合、ブラウジングや商品選択からチェックアウトに移り、最後に購入が完了したことを確認します。

１４．明確な次のステップを提示する

インタラクションの後にユーザーが取れる明確な次のステップを含めましょう。それは、例えば長いブログ記事の最後にある「トップに戻る」のクリックや、より詳しい情報へのポインタのようなシンプルなものかもしれません。ユーザーが次のステップで目標を達成できるようにサポートしましょう。

UI デザインの際に最後に覚えておくべきことは、すべての人にアピールすることは決してできないということです。ただ、大多数の人にアピールできるように最善を尽くすことはできますし、ペルソナと明確に定められたユーザーに基づいて、個別化するために最善を尽くすこともできます。

それでも、それですべての人が満足することはできませんが、UI デザインに何を盛り込んで何を除外するかを決める際に、本記事で挙げた１４の UI デザインの原則をすべて念頭に置いておくと、意思決定においてユーザーが常に前面に出され、中心に置かれるでしょう。

UXPinではUIの作成を簡単に行うことができます。ブラウザ上で作業し、リアルタイムのフィードバックを得て、チーム全員とオンラインで連携できます。UXPinを使えば、UI デザインの作成、テスト、反復がこれまで以上に速くなるでしょう。UXPin のUI デザインのパワーをご覧になりませんか。UXPin をぜひ無料でお試しください。