デザインフェーズの初期作業 Part 2: UXの法則を適用する（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

UXは比較的新しい分野ですが、数十年に渡るHCI（ヒューマンコンピュータインタラクション）分野の研究を取り込んでいます。この『デザインフェーズの初期作業』の2つ目の記事では、UXの法則を取り上げます。
以前公開した『Tユーザー体験デザインの進化』で触れたように、デザイナーは結局のところ、人のためにデザインしています。そして、人々は、広く似通った特徴を共有しており、デザインに関する決断ではそれらの点が考慮されるべきです。

HCIの分野には、ユーザー体験デザイン適用できるたくさんの原理があります。
それらの原理の多くは、以下のように「法則」の形でまとめられています。

ヒックの法則。選択肢を最小限に抑え、認知負荷を緩和して意思決定を容易にすることの必要性を強調した法則
フィッツの法則。インターフェイス要素の大きさや位置決めを注意深く行い、インタラクションを使いやすくするためのアプローチについて有益なアドバイスを提供している法則
ミラーの法則。複雑なタスクを容易にするために、小さな「塊」に分けることのメリットを強調した法則

これらの原理は、マクロレベルとミクロレベルの両方で適用でき、デザイナーとして向上するために深く学ぶ価値は、十分にあります。この記事では、ヒックの法則、フィッツの法則、およびミラーの法則の3つの法則を説明しますが、他にもたくさんの法則があります。
ジョン・ヤブロンスキの素晴らしいサイト『Laws of UX』は、役に立つ原理のコレクションが掲載されている、ブックマーク必須のサイトです。サイト自体もサイトに含まれるデザインも素敵ですが、各原理についての適切な概要と、より詳しい情報が記述された参照先のリンクが含まれています。

ヒックの法則

ヒックの法則 (または、ヒック・ハイマンの法則) は、「決定にかける時間は、選択肢の数と複雑さに合わせて増大する」ことを伝えます。心理学者であるウィリアム・エドムンド・ヒックとレイ・ハイマンに因んで名づけられたこの法則は、ユーザーに提示する選択肢の数を減らすことの重要性を強調しています。
ユーザーに数多くの選択肢を提供することはユーザーの利益になると考えているかもしれませんが、実際のところは、ユーザーの認知負荷を増加させています。**ユーザーは、より多くの選択肢に直面するほど、決定することへの関心を失ってしまう傾向があります。**これは特にeコマースのような、ユーザーが離れると直接的なダメージを受ける状況において問題となり得ます。

A Book Apartでは、ホームページにすべての書籍を掲載するのではなく、最近発売された本だけ掲載することで、選択肢の数を減らし、決断からの回避を緩和している。特定の書籍を探しているユーザーのためのライブラリには、クリック1つでアクセスすることが可能

ヒックの法則は、次のようなさまざまな手段でUXデザインに適用することができます。

ナビゲーションを作成する際は、延々と選択肢を提供する代わりに、数個に絞る
eコマースの場合は、すべての商品を掲載する代わりに、選択肢の数を減らして焦点を絞る。これにより、決断からの回避を緩和でき、より高いコンバージョンレートが期待できる
主要なコンテンツと副次的なコンテンツを区別する。ユーザーの進路の選択肢を減らすことで、認知負荷を軽減できる

「より多い」ことは「より良い」ことであると考える傾向は誰にもありますが、ヒックの法則はその逆を告げています。選択肢の数が多いほど、ユーザーが決断するまでにかかる時間が長くなり、時には決断を下せなくなることもあります。選択肢で圧倒することを避け、重要なものだけに絞ることが大切です。

フィッツの法則

フィッツの法則は、「ターゲットに到達するのにかかる時間は、ターゲットへの距離とターゲットのサイズの関係で表される」と述べています。言い換えると、画面上のボタンといったターゲットが遠いほど、ユーザーが簡単に手を伸ばせるように、より大きなサイズである必要がある、ということです。
フィッツの法則は、ボタンやその他のクリック可能な画面上の要素をデザインする場合に特に重要です。異なる状況では異なる扱いが必要とされ、それによってデザインの方向性は影響を受けます。

Intercomのホームページでは、行動を促すためのボタンに大きく人目を引くものが使用され、見やすさと操作しやすさを実現している

デスクトップの環境では、ユーザーはおそらくマウスを使用しています。ディスプレイが大きければ、マウスの移動する距離も大きくなりがちです。この場合には、CTAボタンが十分な大きさを与えられ、見やすくクリックしやすいものであることが大切です。
モバイルの環境では、タップ対象の領域を考慮してインターフェイスをデザインすることが重要です。タッチスクリーン向けにデザインする場合は、指の正確性がマウスポインタより低いため、タップ対象領域のサイズを大きくする必要があります。(もちろん、デスクトップ環境でもタップ対象が大きいことは役に立ちます)

フィッツの法則は、次のようなさまざまな手段でUXデザインに適用することができます。

モバイル向けにデザインしている場合は、タップ領域の使用に適用します。画面スペースが小さいため、クリック可能な要素の数を減らし、要素のサイズを大きくします。
当たり前のように聞こえるかもしれませんが、画面上に大きなボタンがある場合は、それが最も大事ななCTAボタンであるようにします。さもなければ、ユーザーがうっかりそれをクリックしてしまうかもしれません。
ドロップダウンメニュー等のネストされたナビゲーションをデザインしている場合は、個々のターゲットが、ユーザーが操作できる十分な大きさを持つようにします。

一般的に、ユーザーにクリックさせるには、より遠ざかっているものほど、そのサイズを大きくする必要があります。デザインの枠組みを検討する際は、重要なCTAのデザインにフィッツの法則を適用しましょう。小さめのボタンが見栄えが良くてすっきりとしていたとしても、ユーザーが不便に感じるなら、デザインの改善が必要ということです。

ミラーの法則

ミラーの法則は、「人は平均的に、一度に7個（±2個）のみを頭の中に記憶できる」と述べています。つまり、一時的に記憶できる数量はあまり多くないということです。
ミラーの法則は、情報を整理してグループ化したり、塊に分ける方法を考える際に特に重要です。次の2つの電話番号（同じ架空の番号）のフォーマットを考察してみましょう。

07700984964 と 07700 984 964

数字間に空白のない数（左）が羅列されている場合、ユーザーが11桁の数字をワーキングメモリに維持するのは困難です。ところが、空白を入れると（右）、ユーザーの作業は大幅に単純化されます。ユーザーが記憶できる数で情報を分けることによって、3つのグループの数字を頭の中に記憶し、ユーザーは作業を進められるようになります。

Gumroadでクレジットカードの情報を入力する場合、クレジットカードの番号は空白文字に挟まれたた、4つのグループに分割される。これにより、ユーザーがカード番号を入力して、それが正しい情報であることを確認する作業が容易になる

ミラーの法則は、こういったマイクロインタラクションを単純化するだけでなく、マクロの視点でも使用できます。たとえば、フォームをデザインする際は論理的なグループで情報を分割するようにします。氏名や住所などのコンタクト情報、ユーザー名やパスワードなどのアカウント情報、さらに、その他のグループといったように分類を行います。

ミラーの法則は、次のようなさまざまな手段でUXデザインに適用することができます。

電話番号のような数字の列を掲載する際は、簡単に記憶を維持できるように分割します。
フォームをデザインする場合は、クレジットカード番号を4桁ごとにするなど情報を分割すると、ユーザーが確認しやすくなります。
提示する選択肢の数を、一度に認知可能な範囲に制限して、認知負荷を軽減します。

デザイナーは複雑な情報を提示しなければならないことが多くあります。こういった場合にも、ミラーの法則が役に立ちます。可能な場合は、グループ化できる情報を探していくつかの塊に分割することで、より簡単にユーザーの頭の中に維持されるようになります。

続けて、パート3の『デザインフェーズの初期作業 Part 3: ルックアンドフィールの確立（UXデザイン入門シリーズ）』をお読みください。（近日公開予定）

この記事はA Comprehensive Guide to UX Design: UX Laws (Part 2)（著者: Christopher Murphy）の抄訳です