市場調査ホームニールセン博士のAlertbox青色リンクのその先に:クリック可能なものは見てわかるようにしようフラットデザインか否かにかかわらず、インタラクティブな要素は、クリック可能とわかる十分な手がかりを提供する必要がある。枠線、色、サイズ、一貫性、配置や、Web標準の遵守といった手がかりによってクリックできることを伝えれば、インタラクティブな要素の外観はそれにふさわしいものとなる。2015Webの移動とは目的を達成するための手段であり、クリック1回1回が非常に重要なものになる。したがって、ページの、どのエリアが平文の静的コンテンツで、どのエリアがクリック可能かどうか(あるいはタップ可能か)は、ユーザーにわかるようになっている必要がある。クリック可能な要素が一目瞭然であれば、何かが期待通りに動かないときに、ユーザーがデザイン要素の意味を思案したり、不愉快な思いをすることはなくなる。「わからないものをクリックするほど人生は長くない」。これは単にインタラクションコストの問題である。ユーザーはクリックを通貨のように考えているので、考えなしにクリックしたりはしない。彼らは、クリック可能な場所を探しまわらざるをえなかったり、ひどい場合にはクリックが無駄になったりするような最近のサイトでは、なるべく余分にクリックをしないように気をつけているのだ。したクイズを解いてみよう。スクロールダウンして、答えを見てみよう。クリックを引きつける大きな要因の1つに、リンクテキストの質がある。この記事ではクリックのしやすさのビジュアル的な側面に焦点をあてたいと思う。さっきの画面は、見ただけでどこがクリック可能かわかっただろうか。オブジェクトは見た目でその使い方を伝える。Normanは、オブジェクトの使い方をほのめかす物理的に知覚可能なこうした手がかりを、知覚されたアフォーダンス、あるいは最近はシグニファイアと説明している。オンラインの世界では、ユーザーは世の中一般についてすでに知っていること、中でも特にWebについての知識をもとにして、何がクリック可能であるかを判断する。彼らは自分たちが慣れ親しんでいるパターンをベースに、形や色、コンテキストのようなビジュアル特性に意味づけを行うのだ。したがって、視覚的な手がかりが彼らの期待通りのものなら、ユーザーはどのアイテムをクリックすべきかを素早く判断できるようになるのである。ハイパーリンクの手がかりとして伝統的に使われているのが、ここで我々も利用している下線の入った青色のテキストである。現実世界での実物と同じく、長方形で立体のように見えるボタンもそうだ。した約束事がもたらすのは、それがクリック可能であるという、強力な知覚されたアフォーダンスである。我々も以前はこういったパターンに従うボタンやリンクを推奨していた。今日のユーザーはさまざまな外観のハイパーリンクやボタンを目にするようになってきている。Webユーザーが接するインタラクションの手がかりの種類が増えて、彼らがこうした新しい手がかりについて学んでいくにつれ、シグニファイアも徐々に変化しうるのである。そんなわけで、フラットデザイン(平面的な2Dのイラストレーションを重用するインタフェースデザインのスタイル。8が良い例)というトレンドによって、Webサイトデザイナーの中には、いかに要素を減らすかに極限まで取り組む人もいる。フラットデザインの背景にある考え方とは、インタフェースをシンプルにする、というものである。あまりにも要素を削り落としてしまうと、インタラクションがかえって複雑になり、この目的は損なわれてしまう。フラットデザインの多くで大きな論点となっているのが、クリックできることの強力なシグニファイアの1つである立体表現を、問題の解決策から外してしまうかどうかだ。ユーザーが手がかりとして長い間、頼みにしてきたテクスチャ処理を捨て去ってしまえば、どこがクリック可能で、どこがそうでないかがユーザーに判断しづらくはなる。このページでクリック可能なのは緑色の網掛け部分だけである。したクリックゾーン以外のエリアをクリックしたユーザーはかなりがっかりすることになるだろう。クリックの不確実性を低減しようテキストがクリックできるかどうかを確認するために、「マウスオーバー」してみよう、とユーザーに思わせてはならない。リンクを探しまわるというのは手間であり、ユーザーはそんなことを長時間はしないからである。(永遠に正しいガイドラインがあるとすれば、それはユーザーの手間を省くだろう。大変であればあるほど利用されなくなるということだ)。以下に、ユーザーに推測をさせないようにするために、デザインで検討すべき基本的な事柄を挙げる:テキストリンクリンクの色としては青がいまだに最も安全である。他の色もリンクが本文から明確に目立つ限りは、まったく同じように機能する。いえ、他の色を選ぶ理由が特にないのなら、最も安全な選択として青色を使うことを引き続き推奨したい。リンクの位置は、下線が必要かどうかの判断に役立つ。ナビゲーションのメニューやリスト(特にこれらがページの周辺にある場合)は下線は必要ない。した位置のおかげでリンクとわかるからである。ハイパーリンク用の色は必ずテストをして、色覚異常のユーザーにとってすぐに見分けられるようにしておこう。静的なアイテム(平文など)はハイパーリンクと同じ色にしてはならない。クリック不可能なアイテムには青い色のテキスト(あるいは下線入りのテキスト)は使ってはならない。ハイパーリンクの見た目をどのようにしようとも、同じ処理をサイト全体に一貫して、適用しよう。このページにある間違った手がかりは混乱を引き起こす。青い見出しはクリックが不可能である。その一方、画像はクリック可能なのだが、静的な画像のように見える。ページ上部に何をクリックすべきかの指示はあるものの、デザインから確実にわかるようにはなっていない。リンクは青色でなくてもよい。明らかに、このページのハイパーリンクは緑色ということがわかる。ページの右側にあるアイテムのリストも同様に、位置(端のほうにある幅狭のカラム内にある)とフォーマット(ボックスに入った箇条書きのリストになっていて、リンク以外のテキストがない)のおかげでクリック可能であることがわかる。ボタン少なくとも、ボタンは物理的なボタンに多少は似せよう。あるオブジェクトがボタンと認識されるには、ボタンとの結びつきを早く正確に思い起こさせるような視覚的に正しい手がかりを備えている必要がある。立体表現をやめるにしても、形は長方形(角が丸くなっていると望ましい)のままにしておこう。フラットデザインのインタラクティブな構成要素は影やグラデーションのような強力な効果なしでも、クリック可能であるように見えるべきだからである。(フラットデザインの初期の頃のある調査では、ボタンをフラットなものから3Dのものに変更すると、クリックが416%増加した。した影響は今は当時よりは減ったものの、その差は依然大きなものである)。反対に、クリック不可能なアイテムはボタンのように見えないようにしよう。見出しを背景色にしてしまうと、そうではないときでもボタンのように見えることだろう。ページ内のコンテンツ階層は大事にしよう。1ページの中に異なるサイズのカラフルなボックスを多数置いてはならない。見た目が似ているアイテムが混在していると、ユーザーがクリック可能な要素を見分けるのが難しくなるからである。Web上のボタンはスキューモーフィックである必要はない。物理的なボタンそっくりの見た目である必要はない。この4個のボタンはうまく機能する。枠線がはっきりしているし、処理には一貫性があり、他に競合する要素もないからである。オレンジ色のボックスはボタンだろうか。ないのに、形とラベルからボタンのように見える。Resources(:ツールと情報)」はカテゴリーの見出しというよりもボタンのようだ(訳注:実際にはクリック不可)。画像とグラフィックス小さめの画像はクリックで大きくなるようにしておこう。お互いに関連づけられている要素(たとえば、写真やアイコン、テキスト)はどれもクリック可能であるようにしておこう。することでターゲットのサイズが大きくなり、意図したクリックを捉える確率が上がる。特定の画像に対するCTA(行動を喚起するもの)は複数にならないようにしよう。例外は、そのイメージの選択肢がハイパーリンクの箇条書きのリストであったり、明快なラベルの付いたボタン等、一目瞭然であるときのみである。シンボルとアイコンリンクのためにアイコンを利用する場合、そのアイコンがすぐにリンクとわかるものでなければならない。したがって、自分たちのアイコンが実物に非常によく似た類似アイコンであるか、すでに標準になっているアイコンでない限り、それがクリック可能であることを示すために、テキストラベルのような別の視覚的手がかりと組み合わせるべきである。クリック可能であることを示す他の手がかりがないとき、それを示すものとして矢印アイコンが役立つ場合もある。これはあまり好ましいアプローチではない。いうのも、手がかりとしては、矢印というのは標準的なものではないし、一部のユーザーにとっては見つけづらく、わかりにくいものでもあるからだ。仮にこのやり方で行くと決めた場合でも、矢印はあまり使い過ぎないようにしよう。インタフェースをシンプルにするという目的にそぐわなくなるからである。このページの矢印アイコンはフラットデザインであっても、クリック可能であることのシグナルとなっている。矢印がなければ、ユーザーには黒いボックスがクリック可能であることはわからないかもしれない。Announcements(:お知らせ)の下のリストは期待どおりクリック可能である。青色のテキストがそこでは強力な手がかりとなっている。画像の下にあるリストはどうだろうか(訳注:このリストはクリック不可)。さっきのリストにも使われていたしゃれたアイコンはここでも使われている。した一貫性のなさが混乱を招くのである。結論クリック可能なアイテムはユーザーが認識しやすいようにデザインして、サイトへのエンゲージメントをうながそう。結果的にクリックしやすくなるなら、リンクのデザインが伝統的なものから外れるのは構わない。ユーザーが慣れ親しんでいるパターンから離れすぎてしまうのは問題である。Webユーザビリティビジュアルデザインイードが提供する「ユーザビリティ評価」サービスイードは、スマートフォンアプリやサイトのUI品質をユーザー視点で評価・改善提案し、ユーザー側とビジネス側、双方の目的達成をサポートします。体裁や奇をてらった言い回しは無視されるあるサイトでは大方まともな作りをしていながら、最重要タスクの成功率が14%という無惨な結果に終わった。ページ内で成功の鍵を握る領域が広告枠に似ていたせいで、ユーザがそれを無視してしまったのだ。自動送りカルーセルとアコーディオンは、ユーザーをいらつかせ、可視性を下げるユーザーの目的の内容は、ページの先頭に98ポイントの文字で書かれていた。彼女はそれを見つけられなかった。そのパネルが静止しておらず、自動送りされていたからである。「右カラム無視」への対策Webユーザーは、情報過負荷へ適応するため、重要でなさそう、あるいは広告のように見えるエリアから注意をそらすように自分たちを訓練してきた。サイドバーは適切にデザインすれば、コンテンツを発見しやすくし、ユーザビリティをうまく向上させることができる。画像重視のデザイン:大きければいいのか大きな画像には視覚に訴える力がある。その優先順位づけを誤ると、全体のユーザーエクスペリエンスにとっては害になりうる。