2017年までにフラットデザインはウェブを席巻し、それとともに、何がクリック可能かを示す手がかりを剥ぎ取られたインターフェースが広がった。青い下線付きリンク、ベベル付きボタン、ドロップシャドウは、ゴーストボタンや本文と見分けのつかないテキストに取って代わられた。業界はこのトレードオフを好みで論じた。デザイナーはクリーンな見た目を擁護し、ユーザビリティの専門家はユーザーが迷っていると逸話的に警告したが、どちらの側にもデータはなかった。

Nielsen Norman Groupは、意見を測定に置き換えるため、統制されたアイトラッキング実験を行った。6つのドメイン(eコマース、非営利、ホテル、旅行、テクノロジー、金融)から9つの実在するページを選び、シグニファイアの強さだけが異なる2つのバージョンをそれぞれ作成した。71人の一般ウェブユーザーを各バージョンに割り当て、どこをクリックするかを探すよう指示し、アイトラッキング機器が注視と時間を記録した。

弱いシグニファイアのページは実際の負担を強いた。ユーザーはターゲットを見つけるまでに22%多くの時間を費やし、25%多くの注視を行い、9つのページペアのうち6つで異なる視線パターンを示した。何も自信を持ってクリック可能に見えないため、注意がページ全体に分散したのである。ファインジュエリーのページでは、強いバージョンで86%のユーザーがセクション見出しから「Shop Pearl」リンクへと視線を移したのに対し、弱いバージョンでは50%にとどまり、24人中9人のユーザーが見出しそのものをクリックしようとした。

同様に価値があったのは、フラットデザインが機能した箇所である。3つのページペアは差を示さず、それらは情報密度が低く、伝統的なレイアウトで、コントラストの高いターゲットを共有していた。この研究はフラットデザインを断罪したのではなく、いつ安全であるかを特定した。その公表は議論を十分に呼び起こし、NN/gは批判への回答を公表し、知見はその後何年にもわたり同社のフラットデザイン指針に取り入れられた。

好みをめぐる争いを測定で決着させた。クリック可能性の手がかりだけが異なる対応ページペアを、ボタンを探すタスクでアイトラッキングした。

対応ペアはシグニファイアの強さ以外のすべてのデザイン変数を一定に保ったため、実在ページの研究でありながら相関ではなく因果を主張できた。

注視とタスク時間は、美的な議論をあらゆる関係者が比較できる負担コストへと翻訳した。

71人のユーザーをランダムに割り当てた被験者間デザインにより、差異に統計的有意性が与えられた(p < 0.05)。

フラットページが害を及ぼさなかった条件を公表することで、この研究はデザイナーに無視すべき判定ではなく実行可能な答えを与えた。

公開されたヒートマップは効果を一目で可視化した。弱いシグニファイアは注意をページ全体に分散させ、それはユーザーがボタンを探し回っている兆候である。

業界が好みで論じているときは、争点となっている変数を対応ペアで分離し、数値を公表せよ。議論は、条件が明示された修正可能な問題へと変わる。

この研究はNN/gで最も議論された記事の一つとなった。公表の翌日にはHacker Newsで354ポイントと171件のコメントを集め、NN/g自身の記述によれば、記事は「フラットデザインについてかなりの量の議論」を生み、同社はそれに批判への回答を公表して応じた。知見はより広い研究プログラムに取り入れられた。フラットデザインが機能しうるのはいつか、長期的な露出がユーザーの効率をいかに徐々に低下させるか、修正されたフラット美学には何が必要かについての後続記事である。こうして1つの実験は、視覚スタイルを選ぶデザイナーにとって長く続く参照点となった。

出典をたどる

出典

  1. Flat UI Elements Attract Less Attention and Cause Uncertainty Nielsen Norman Group · nngroup.com ·
  2. Flat UI Elements Attract Less Attention and Cause Uncertainty — Hacker News discussion Hacker News · news.ycombinator.com ·