こんにちは！mizuki（@kikapyon）です。
UIデザイン初心者だと、クリックが可能なターゲット要素をどのようなデザインにすべきか悩みますよね。ターゲット要素の最適化にはサイズ、距離、デザインのポイントを抑えることが大切です。
この記事では、上記3つのポイントの詳細な説明とともに、そもそもなぜ最適化が必要なのかをユーザーの動きも含めて紹介していきます。
なぜターゲット要素を最適化する必要があるか
ターゲット要素を意識したり最適化したりする必要があるのは、インタラクションコストが増加すると使用率が低下し、ユーザーが離脱するからです。
インタラクションコストとは、ユーザーがタスクを達成するまでの精神的、肉体的なコストです。
例えば購入したい商品を探してサイトを見ている時、もし購入までなかなか辿り着けなかったら、他のサイトで買おうかなと移動してしまいますよね。
このように、ユーザーはなるべく早くタスクを完了させたいので、工数が多いページは負担に感じ、離脱してしまいます。
ユーザーの負担を軽減させるには？
では、どのようにユーザーの負担を軽減させれば良いのでしょうか？その解決策の一つとして「フィッツの法則」というものがあります。
フィッツの法則
フィッツの法則は、相互作用するためにポインター(マウスカーソル、人間の指、または手など)が特定のターゲット(物理的またはデジタルボタン、物理的オブジェクトなど)に移動するのにかかる時間との関係を示します。
①ターゲットまでの距離が長いほど、ポインターがターゲットに移動するのに時間がかかる。つまり、ターゲットが近いほど到達が速くなる。
②ターゲットが大きいほど、移動時間は短くなる。つまり、ターゲットは大きいほど良い。
「引用：Fitts’s Law and Its Applications in UX（筆者翻訳） 」
要素のサイズを大きくすることを意識するだけでも移動時間が短くなることにより、インタラクションコストが低くなり改善に繋がります。
ターゲット要素をより最適化する方法
ここまでは、ターゲット要素を最適化させる理由や、その手段として「フィッツの法則」を用いれば良いということを紹介しました。ここからは、より具体的に「サイズ編」「距離編」「デザイン編」にわけて、ターゲット要素をより最適化する方法を紹介します。
サイズ編
小さくて何度もトライしないと押せないターゲット要素は、ストレスを感じますよね。
例えば漫画アプリやゲームアプリを使用している時に出てくる広告の×ボタン。広告を消してコンテンツに戻りたいのに、×ボタンが小さすぎて広告主のページに遷移してしまったり、アプリストアに飛ばされたりとストレスが溜まります。
このように、ターゲット要素のサイズは、ユーザーが快適に使えるかどうか（離脱するかどうか）に関わってくる重要な部分です。ユーザーが離脱しないためのサイズに関するポイントを2つ紹介します。
①大きければ大きいほど良い
フィッツの法則では、より大きなターゲットをクリック、タップ、またはホバーする方が速いことが明確に示されています。それだけでなく、ターゲットが大きくなるとエラー率が低下することが分かっています。
②通り過ぎることの無い要素
画面端に配置されている要素にマウスポインターが到達する際に、通り過ぎてしまう危険がないので（画面の端に当たると自動的に止まるため）、ユーザーはターゲットが画面の中央にある時に比べて早く要素に到達できます。
実際にmacにも左右上や中央下にも②通り過ぎることの無い要素が採用されています。
ただし、画面端の配置はマウスまたはトラックボール駆動、トラックパッドなどのUIではメリットがありますが、タッチスクリーンでは効果はありません。逆にモバイルなどのタッチスクリーンデバイスの場合は、画面端に配置されたターゲットに到達するのに時間がかかってしまいます。このことから、デザインやデバイスにあわせて最適化をする必要があるのが分かります。
距離編
画面が大きくなればなるほど、タスク達成のための要素を見つけてから距離のある要素をクリックしたりするのに時間がかかります。
例えばウェブページのURLをコピーするために、マウスポインターを移動させてからクリックしにいくなどです（だからこそコマンドは重宝しますね）。
そんな距離に関する3つのポイントをご紹介します。
①メニューデザイン
アイテムのリストを表示するメニューのタイプは、移動時間に大きく影響します。その理由を理解するために、線形メニュー、長方形のメニュー、円形メニューの3種類のメニューデザインを用意しました。
前提としてメニューが開いている際は、マウスポインターがメニュー上またはラベル上にあるとします。
線形メニューでは、メニューラベルからメニューの最初の要素（Option1）までの距離が最も短く、メニューの最後の要素（Option7）までの距離が最も長いことがわかります。そのため、線形メニューは、使用頻度に応じてアイテムを並べる時に適しています。最も頻繁にクリックされるものを一番上に配置すると良いです。
長方形のメニューでは、要素は水平方向と垂直方向の両方に配置されているので、要素までの平均距離は、線形メニューよりも短くなります。マウスポインターなどを動かす時間や認知にかかる時間が減るため、線形メニューよりは良いメニューデザインと言えます。
円形メニューでは、すべての要素が円上に配置されています。その結果、それぞれの要素へかかる到達時間はすべて同じです。均等な距離を保つことができ、大きなメリットがありますが、UIデザインではまだあまり使用されておらず、ユーザーにはなじみが無いことが特徴でもあります。
また、線形メニューであってもメニューラベルの位置を中央にすることで、平均移動時間を改善できます。すべての要素が均等にクリックされることが想定される場合に効果的です。
②関連する要素は近くに配置する
特定の順序で要素がクリックされることが分かっている場合は、近くに配置して間の距離を最小限にすることによって、移動にかかる時間を最適化できます。
モバイルでは特に、メニューラベルから離れて表示された画面下部に関連オプションが表示されることがあります。ですがこのUIは、余計に移動時間がかかってしまうので、最適ではありません。オプションは、メニューラベルの近くに表示することが理想的です。
1枚目の画像の最後の要素からSaveまでの距離と、2枚目の画像の最後の要素からnextまでの距離に注目してください。関連するターゲット要素を近くに置くことで、ユーザーの認知コストを減らし、移動時間を短縮することができます。
③要素を密集させない
要素を近づけすぎると、ユーザーが誤って間違った要素をクリックしてしまうことがあります。これは、特に要素が小さい場合に発生する可能性があるので注意してください。
デザイン編
インタラクションコストを下げてユーザーの負担を軽減させるためには、パディングの取り方や曖昧さを減らすテキストラベルを添えることなどが重要です。ここを押さえることでより素早く認知させ、より簡単にタスクを完了できるように最適化することができます。
そんなデザイン編では2つのポイントをご紹介していきます。
①パディングを十分に取る
UIをデザインする際、特定の要素にパディングを入れることによって、クリックできるターゲット面積を増やす手法もあります。パディングを多く取ることによってマウスポインターが通り過ぎてしまうことをある程度防ぐことができます。
しかし、ターゲットがパディングされていることに気づかない人は、ターゲットに近づくにつれ、ターゲットエリアを超えないようにするために必要以上にスピードを落としてしまうことがあります。
モバイルの場合、親指のタッチ面積の平均幅は2.5cmです。この数字を念頭に置き設計することは、ユーザー中心設計で基本的なことであり、大切なのでぜひ覚えておいてください。
②アイコンとテキストラベルを表示する
アイコンにはテキストラベルが必要です。なぜならテキストラベルは、アイコンのみの曖昧さを軽減して理解しやすくするだけでなく、その要素への移動時間を短縮できるからです。
アイコンとテキストラベルの両方で構成されるターゲットは、単なるアイコンよりも素早く認知できるため、フィッツの法則によればより簡単に理解できます。
おわりに
いかがでしたでしょうか。今回はボタンなどのターゲット要素に関するポイントをサイズ、距離、デザインに分けて解説しました。ユーザー負担の少ない、快適に使えるUIデザインに役立てていただけると嬉しいです。
参考文献
Fitts’s Law and Its Applications in UX
Understanding Success Criterion 2.5.5: Target Size
Twitterでは新着記事の情報やTipsを日々更新中です！フォローいいねコメントお待ちしております。
