タグ: UI

プルダウンメニューには、ユーザーに操作ストレスを与える領域、魔の三角地帯が潜んでいます。

マウスカーソルとユーザー視点を結ぶ直線と、メニューの縁で囲まれる三角地帯です。

マウスカーソルの通り道なのに、マウスオーバーが解除され、プルダウンメニューが消えたり、別のメニューが表示されます。

「宝くじ」を押そうとしたら・・・あれ！？「投資信託」に！？

製品、サービスが豊富で、プルダウンで表示させる情報量が多い大企業サイトに起こってしまう問題です。

対策として昔Amazonは、プルダウンメニューからマウスカーソルが外れても、一定時間プルダウンを消さない処理をしていました。

また、副次効果として、メニュー操作中にちょっとマウスカーソルが行き過ぎても、プルダウンが消えないメリットもあります。

すばらしい。

・・・はずでした。

2016年現在のAmazonを見てみると、「マウスカーソルが外れても、一定時間プルダウンを消さない処理」がなくなってます。

なぜ！？

ユーザーにプルダウンが消えるまで待たせることが、許せなかったのでしょう。

もともとAmazonの魔の三角地帯は小さいし、必要なかったのかもしれません。
いや、そうではなかった・・・。

恐れを感じるほど、細かいことをやっていました。

メニューの上をマウスカーソルが左右に移動したときは、プルダウンが消えますが、
斜め下に移動したときは、プルダウンが消えません！

最高のUIを目指し、どこまでも操作性を追求するAmazon。

Amazonの記事を書いているだけで、人生が終わってしまいそうなほど、工夫が詰め込まれています。

昨日、Amazonメニューの配慮について、衝撃を受けたことを書きました。

ただ、衝撃を受けたのは2年前で、その当時と2016年現在のメニューでは、操作感が微妙に変わっているような気がします。

真偽を確かめるため、サイトの過去の状態を見ることができるWayback Machineでタイプスリップして調査しました。

 

・・・やはり、進化してます。

2014年当時はメニューをマウスオーバーして、プルダウンが表示されるまで0.3秒遅らせる処理でした。

ユーザーの意図に反してプルダウンが表示されることを防ぐ点では、大きな効果を発揮したと思いますが、弱点もありました。

• マウス操作が遅いとプルダウンが表示されてしまう
• メニューを使う気満々のユーザーにとっては、0.3秒待たされる

Gifアニメだと分かりにくいかもしれませんが、横方向にマウスを移動したとき、プルダウンが開かない0.3秒の時間が連続で発生します。

この問題を解決するため、マウスが止まったときにプルダウン表示させるという仕組みに改修されていました。

Amazonの進化を見るたびに、毎回脱帽です。

AmazonのUIにおけるこだわりで、衝撃を受けたことがあります。

PCサイトを利用中、メニューをマウスオーバーした時です。

「アカウントサービス▼」、「プライム▼」、「リスト▼」といったページ上部のメニューをマウスオーバーしても、マウスカーソルが移動中の場合、メニューがプルダウン表示しないようになっています。

これは、ブラウザ上部にあるタブなどを操作をしてから、マウスカーソルをサイト上に移動した際、コンテンツが隠れないようにする配慮です。

もし、メニューが即時にプルダウン表示していたら、ユーザーの意図に反して情報が隠れたり、押したいところが押せなかったり、最悪、メニューを誤ってクリックするなど、ストレスの原因になります。

AmazonのPCサイトでは、マウスカーソルがメニューの上で停止したときだけ反応するよう、配慮されています。

気づくユーザーは非常に少ないと思いますが、「あまりに自然で操作していることを意識させない」・・・気づかれないことが、UIデザインの目標の一つでもあります。
UIではなく、コンテンツに意識がいってほしいからです。

 

そんな、気づかれないUIデザインにこだわりすぎて、最近UIデザインの仕事を受注できなくなりました・・・。