ユーザー体験を改善する「視覚的な合図」をデザインするヒントを学ぶ | アドビUX道場 #UXDojo

連載

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

視覚的な合図はWebやアプリのいたるところに見つかります。何かを指す矢印のようなとても分かりやすいものもありますし、画像内の人物の目線の先のボタンのようにすぐには捉えにくいものもあります。

それが何であったとしても、明確なことは、それがインターフェース上のユーザー体験を改善して使いやすくすることです。それと同時に、サイトの特定の目的、すなわち、メンバー登録や商品購入などの達成を支援します。つまり、コンバージョンのためのものでもあるということです。

残念なことに、視覚的な合図を使うのは、訪問者にクリックして欲しいボタンの横に、「ここに注目」というサインを出すだけというほど単純ではありません。ごく単純な視覚的な合図であっても、そこには行動心理学がいろいろと詰まっています。これからその詳細を見ていきましょう。

なぜ視覚的な合図に力があるのか

なぜ人間は視覚的な合図に反応するのでしょう？それは人の進化する心理に関わることでしょうか？それとも、人はあまりに不注意なので、明らかな合図を必要とするのでしょうか？真実は、おそらくその両方の組み合わせです。

“視線は無視できない (ただし、矢印も)“というタイトルで、 実験心理学の季刊誌に掲載された研究には次のように書かれています。

「視線と矢印を、作業に無関係で無意味な妨害物として、目標にしている物の直前に表示しました。その結果、視線と矢印のどちらにも同じ様な傾向が見られました。すなわち、妨害物の位置が、求めるターゲットと調和しない場合に起きる干渉効果です。これは、視線や矢印が介在する注意の誘導という現象が、自動的に起きていると見なせることを強く示唆しています」

分かりやすく言えば、調査の参加者は、関連性の有無に関わらず、視線や矢印が向いている方向を見たのです。それは、人間がそうできているという強力な証拠であり、より広げて適用するなら、サイトの訪問者も同様です。

主要な視覚的合図と、その具体例

Web上には、視覚的な合図があふれています。いくつかの合図は、他の合図よりも優れています。この記事では、主要な2つの視覚的合図に注目して、より効果的なコンバージョンのためのデザインを考えます。

矢印

おそらく最も明らかな視覚的合図である矢印は、何をすべきかをとても明確に示します。矢印は、道路標識とか、日常生活の中でもいたるところで見かけます。それが、矢印をWebデザインでも理想的な合図にします。

醸造会社アンハイザー・ブッシュは、学生プログラムのページに多くの視覚的な合図を使用しています。カード型のボックス内に記述された各プログラムについて詳細を知りたい訪問者のために、とても便利な “Learn More” ボタンがあり、ボタン内には右を指した矢印が配置されています。これは、次のページにより多くのコンテンツがあることをユーザーに知らせます。訪問者が詳細を見るためにすることは、CTAボタンのクリックだけです。

目（視線）

実社会で使われる合図といえば、人の目の視線は広く浸透している合図です。考えてみてください。もし目の前の誰かと話していたとき、その人の視線が突然あなたの後方に移ったことに気づいたら、即座にあなたはにそれが何を見ているのか気になることでしょう。話に集中できず、何の騒ぎかを見るために頭を回すかもしれません。この原理に基づいた視線は、Webデザインでも有効です。

テクノロジー企業シスコのネットワークアーキテクチャのページには、視覚的な合図の典型的な例が載っています。ヒーロー画像を見てください。ヒーロー画像には、ビデオを見るため、そしてダウンロードするための2つのCTAボタンが含まれています。CTAボタンのすぐ右側には人の顔があり、横向きでCTAボタンに視線を送っています。訪問者の振る舞いを考えてみると、もしCTAボタンを見逃したなら、代わりに人の目に行き当たり、視線に気づいたらそれを辿り、結局CTAボタンへと到達します。

最新の視覚的合図に関する調査

視覚的な合図に関する最近の調査では、コンバージョンを促進するための視覚的な合図の使い方について、解明が進んでいます。ConversionXLが行ったどの合図が最も注目されるかという調査によると、最も効果的だったのは、次の2つの合図でした。

この研究では、「最も効果的」の定義に、合図のおかげでフォームを見た時間の長さの合計が使われています。調査に使われた合図は以下のものです。

上で挙げたサイトの例に戻ると、CTAボタンを人が見ているシスコの例は、視覚的合図のデザインの模範的なケースです。アンハイザー・ブッシュの例にはまだ改善の余地があるかもしれません。手書きの矢印ではないからです。

アマゾンは視覚的な合図をうまく使っています。アマゾンの書籍の製品ページの多くに、読者を購入する前にプレビューへと誘導する手書きの矢印が使われています。手描きの矢印には、「なか見！検索」という言葉が添えられています。

最も注目を集めなかった視覚的な合図についても触れておくべきでしょう。この調査の場合、それはフォームの反対側を見ている人でした。これはなんとしても避けるべき合図ということです。大統領候補のヒラリークリントンは、まさにそうした合図を彼女の勝利のためのファンドに使いました。彼女がフォームとは違う方向を見ていることは、選挙運動資金の寄付も離れていくことを意味しています。

おわりに

視覚的な合図はUXデザインに不可欠な要素です。人間としてユーザーは、次のステップの手がかりを得ようと、矢印や視線のような従来から使われてきた合図を見る性質があります。調査に裏打ちされたデータを使用すれば、Webサイトやアプリにおいて、視覚的な合図の有効性をさらに高めることができるでしょう。登録用のフォーム、ソーシャルメディアへの共有、クリックまたはタップを行うアイコンのどれにとっても、視覚的な合図はとても役立ちます。

調査によれば、手書きの矢印は効果が高く、要素を見ない視線は最悪でした。後者は、ユーザーにクリックするなといっているようなものです。次のプロジェクトでビジュアルのレイアウトを検討する際はこれらのルールを覚えておけば、より大きな成功につながることでしょう。

この記事はHow to Design Visual Cues for Better UX（著者:Marc Schenker）の抄訳です