フィッツの法則の活用：Eコマースのユーザーインターフェイス設計原則

eコマースサイトの購入フローのわずかな改善は、訪問者を有料の顧客に誘うときに大きな影響を与える可能性があります。 フィッツの法則をeコマースサイトのインターフェイスに適用することで、デザイナーはユーザーが探しているものを正確に見つけ、カートにアイテムを追加し、最終的に購入するのを簡単にすることができます。

フィッツの法則によれば、人がポインタをターゲットに移動するのにかかる時間は、ターゲットまでの距離をターゲットのサイズで割った関数です。 基本的に、これは、大きくて近いオブジェクトの方が操作しやすいことを意味します。 この法律は、1954年に心理学者のポール・フィッツによって考案されました。ポール・フィッツは、人間の行動の数学的モデルを作成し、人間の神経系の能力を定量化するために取り組みました。

フィッツの法則は、速度と精度のトレードオフを定量化します。タスクの実行が正確であるほど、完了するまでに時間がかかります。 UIデザインに変換すると、「カートに追加」ボタンなどのターゲットがユーザーのカーソルまたは指から離れるほど、そのターゲットを大きくする必要があることを意味します。 そうすれば、目標に到達するという行為はそれほど正確さを必要とせず、迅速に実行することができます。

UIコンポーネントを大きくすることの重要性は明らかなように思われるかもしれませんが、フィッツの法則は視覚的なインパクトのためにサイズを大きくすることではありません。 これは、ユーザーがカーソルまたは指でコンポーネントに到達するのにかかる時間を短縮することです。 多くの場合、これはUIコンポーネントを大きくすることを意味しますが、ユーザーがeコマースサイトをより効率的に移動して最終的に購入できるようにする他の手法を展開することも意味します。

フィッツの法則の公式を破る

Fittsが書いた数式は、t = a + b log2（2 d / w）です。ここで、

• tは時間に等しい。
• aとbは、テストの観察から得られた回帰係数を表します。
• dは、開始点とターゲットの間の距離です。
• wはターゲットの幅です。
• log2は、数式が対数であることを示し、 log2（2 d / w）は、ターゲットを取得するのがどれだけ難しいかを定量化する測定値である難易度（ID）を生成します。

対数方程式は、ターゲットのサイズまたは距離と反応時間の関係を示します。小さなターゲットの場合はサイズまたは距離を小さくすると取得が容易になりますが、大きなターゲットの場合はサイズまたは距離を少し大きくしてもそれほど簡単にはなりません。到着。

この方程式に照らして、eコマースUIの設計者は、サイト上の他のアイテムとの相対的なインターフェイスターゲットのサイズと、カーソルからのそのターゲットの距離という2つのことを考慮に入れる必要があります。 フィッツの法則をeコマースに適用するということは、ターゲットを見つけて操作しやすくすることで、顧客がタスクをすばやく完了し、購入プロセスの次のステップに進むことができるようにすることを意味します。

フィッツの法則とEコマースUIデザイン：完璧なフィット

フィッツの法則は、プライムピクセルの概念、つまり任意の時点でのユーザーのカーソルの位置を生み出すのにも役立ちました。 eコマースUIデザイナーの目標は、プライムピクセルからターゲットまでの距離を可能な限り短くすることです。 ただし、プライムピクセルは可変であるため（ユーザーがページに到達したときにカーソルをどこに置くかを正確に知っているのは誰ですか？）、eコマースページの固定コンポーネントを制御して、それらをできるだけ近くに配置するためのいくつかの手法があります。ユーザーのプライムピクセルが存在する可能性が高い場所に可能です。

効率的な製品発見のための設計

成功しているeコマースサイトでは、製品を簡単に見つけることができます。 フィッツの法則を使用して製品の発見を改善する1つの方法は、ホームページのヒーローセクションに検索機能を追加することです。 人々は予測可能なパターンでWebページをスキャンする傾向があり、スキャン動作とカーソルの動きは密接に関連しています。

訪問者が注視すると予想される領域に検索バーを配置すると、つまりカーソルを配置してプライムピクセルを作成すると、検索クエリを入力するためにカーソルを移動する必要がある距離を大幅に短縮できます。 さらに、予測検索を実装すると、ユーザーをより迅速にターゲットリストに誘導するのに役立ちます。

Eコマースメニューを最適化する

成功しているeコマースサイトの重要な機能は、顧客が効率的に探索し、買い物をしているカテゴリや製品を見つけることができるメニューです。 顧客がコンテンツカテゴリにカーソルを合わせると表示される自動ドロップダウンメニューを採用して、フィッツの法則を適用します。 ユーザーがアイテムを選択するためにカーソルを遠くに移動する必要がないように、1つのリストに多くのアイテムを配置することは避けてください。 さらに、優れた情報アーキテクチャと製品写真を使用して、選択を行うためにカーソルが移動する必要のある距離を短縮する、より大きなターゲット領域をユーザーに提供します。

召喚ボタンの表面積を増やす

フィッツの法則を適用するための明白な場所は、購入をトリガーするCTAボタンです。 ボタンを大きくして、目立ち、クリックしやすいようにします。 より大きなターゲットを取得するには、精度が低くなります。 さらに、ボタンを折り目の上に含め、アクセス可能なコントラストを適用し、ユーザーが間違った要素をクリックしないように他のコンポーネントから十分に離して配置することで、ボタンを明確にします。 T0は、ユーザーの意思決定の信頼性をさらに高め、ボタンのマイクロコピーが明確で有益であることを確認します。

また、画面の端に沿ってCTAボタンを配置して、魔法のピクセルと呼ばれるものを最大限に活用することを検討してください。これは、ユーザーがターゲットに当たっている間にすばやく不正確にナビゲートできる画面の領域です。

一部のアクションを他のアクションよりも難しくする

ほとんどの場合、eコマースUIデザイナーは、フィッツの法則を適用してユーザーの操作を高速化します。 ただし、場合によっては、速度を落としたいことがあります。 たとえば、設計者は、プライムピクセルからさらに離れた製品アドオン用の小さなチェックボックスを実装する場合があります（この場合、「カートに追加」ボタンである可能性があります）。 そうすることで、ユーザーは追加の製品を選択する際により正確になり、不要なアイテムを誤って購入しないようになります。

モバイルデバイスに関するフィッツの法則

フィッツの法則をモバイルデバイスのeコマースUI設計に適用する場合、設計者はいくつかの制約を考慮する必要があります。

指はカーソルです

モバイルデバイスには、カーソルはありません。 ユーザーは、指を使ってインターフェースを操作します。 ただし、指は太いため、カーソルよりも精度が低くなります。 タッチターゲットは、Webサイトよりもモバイルアプリケーションの方が大きくする必要があります。 画面の幅にまたがるCTAボタンを検討し、そのパディングを増やしてクリックしやすくします。

多くの場合、モバイルでの使用は片手です

多くの場合、ユーザーはモバイルデバイスを片手に持ち、親指で操作します。 これにより、ユーザーが両手を使って上部に触れない限り、通常、ユーザーは画面の下部を操作できなくなります。 モバイルeコマースのUIデザインを検討する際、デザイナーは希望するターゲットを親指の自然な到達範囲内に配置する必要があります。

警告を考慮してください

フィッツの法則を適用するときは、2つの重要な質問を検討する価値があります。ユーザーがこのページにアクセスしたときに達成したい主な目標は何ですか。 そして：ユーザーがその目標を簡単に達成できるようにするにはどうすればよいですか？

フィッツの法則は特効薬ではありません。 それを適用することが理にかなっている場合や、他の概念がより適切な場合があります。 eコマースの場合、サイトの別の側面（たとえば、コンテンツがオーディエンスにどれだけうまく伝わるか）に焦点を当てることで、より良い結果が得られるかどうかを検討することも価値があります。

検索エンジンのページに表示される広告で時々発生するように、フィッツの法則がダークパターンとして使用される可能性があるという危険性もあります。 通常、これらの広告は、それ自体が検索結果であるかのようにページの上部に表示されます。 これはフィッツの法則の例です。広告と最後に操作されたコンポーネントの間の距離が互いに近いためです。 関連する検索結果の横に会社の広告を表示するための多くの良い使用例がありますが、この設計上の決定は、ユーザーを誤った方向に向けたい競合他社によってハイジャックされることがよくあります。

Eコマースの成功のためのフィッツの法則に従う

フィッツの法則はインターネットが登場する数十年前に開発されましたが、デジタル製品の設計においては貴重な原則です。 今日、設計者はフィッツの法則を使用して、eコマースの顧客がサイトをナビゲートし、製品を見つけ、購入するのを容易にすることで収益を増やすことができます。

Toptalブログでさらに読む：

• 購入への道を開く–eコマースUXのベストプラクティス
• ランディングページのベストプラクティス（インフォグラフィック付き）
• 変換するランディングページをデザインする方法
• Figmaでの設計システムの構築とスケーリング：ケーススタディ