ユーザビリティのヒント（3）

虫眼鏡のアイコンは『検索』か『拡大』か？
「インタラクションデザイン」

ソシオメディア　上野 学
2006/9/13

ナビゲーションをアクションのように見せない

　 Webにおいては、別のページに移動するためのリンク（ナビゲーション）と、処理開始するためのリンク（アクション）が、画面中に混在するのが普通です。その際、あるリンクがどちらのものなのか、視覚的に区別することが望まれます。

　一般的に、テキストリンクはほかのページに移動するナビゲーション、フォームボタンは入力内容を送信してサーバ上のプログラムを実行するためのアクションとして認識されますが、画像で作られたリンク（特にボタンの形状をしているもの）はどちらにも見えるので、混乱の原因になりやすいといえます。

　例えば、次のようなボタンをよく見かけます。

図2 ナビゲーションなのかアクションなのか分からないリンク

　これはボタンに見えるため、クリックすると「最新ドライバ」のダウンロードが開始されるように思われます。しかし実際にクリックしてみると、ダウンロード元のサーバを選ぶためのページが表示されたりするのです。そしてそこでサーバを選ぶと、やっとダウンロードが開始されるという具合です。このような経験は皆さんにもあるかと思います。

　ウェブアプリケーションを利用するユーザーは、タスク進行のマイルストーンとなるアクションがどこにあるのかを、なんとなくイメージしているものです。「ここでボタンを押すと情報が送信される」とか、「ここでボタンを押すと購入が確定する」といったものです。

　このような重要なアクションがどこで発生するのかということが分かりにくいと、ユーザーは現在の操作が作業全体にとってどのような意味を持つのか推測できず、ストレスが大きくなってしまいます。

　例えばナビゲーションのためのリンクであれば、「○○のダウンロード画面へ」といったラベルを用いて、次の画面に進むことを示唆したり、アクションのためのリンクであれば、「○○をダウンロード」もしくは「ダウンロード開始」のように処理が開始されることを示唆するラベルを用いるとよいでしょう。

そのほか、紛らわしいアイコンやラベルは再考する

　アイコンやラベルは、それが何を意味しているのかがユーザーにとって明確でなければ、いくらコンテンツや機能が充実していても混乱の要素を増やすだけになってしまいます。しかしアイコンやラベルは、何か重要な情報を限られた面積や文字数の中で端的に表現しなければならないため、常にデザイン上のチャレンジとなります。

　あるアイコンのグラフィックやラベルの文字列が、制作者が意図したとおりに受け取られるかどうかは、制作者自身は確認のしようがありません。ですから、制作者が「これなら理解されるはず」とかなり自信を持っていたとしても、基本的には第三者に見てもらって検証することが必須となります。そして、どんなにアイデアを出しても適切なアイコンやラベルが思い付かない場合は、その機能や情報の分類方法自体を見直さなければならないのです。

　例えば、前述のように虫眼鏡のアイコンが何を意味するのか、「消去」と「削除」はどちらが適当なのか、「ショッピングカート」と「買い物かご」はどちらが一般的なのか、「ホーム」と「トップ」は共存できるか？などなど。簡単には白黒つけられないことがたくさんあります。

　デザイナーは少なくとも、「これはもしかしたら、紛らわしいのではないか？」という疑問を常に自分に投げかける必要があるでしょう。ポータルサイトにある「辞書検索」という言葉を聞いて、「世の中に存在するいろいろな辞書の中から、ある目的に適した辞書を探すためのサービス」だと思う人もいるのです。

　今回のTipsは以上です。アイコンやラベルを適切にデザインするためにはセンスが必要ですが、うまく用いることができれば、ユーザーが思いどおりにタスクを遂行できる空間をバランスよく作り上げることができます。

　そのためには、自分が普段、分かりやすいと感じる、もしくは特に悩まなくても使えているユーザーインターフェイスを思い返してみて、そこで用いられているアイコンやラベルがどのような特徴を持っているのか研究してみるとよいのではないでしょうか。

3/3

次回、いよいよ最終回！

INDEX
ユーザビリティのヒント（3）
	Page1 説明が必要なアイコンは用いない 処理を開始するスイッチをアイコンに頼らない
	Page2 制限コントロールの選択肢に否定文を使わない 肯定ボタンのラベルにあいまいな文言を用いない
	Page3 ナビゲーションをアクションのように見せない そのほか、紛らわしいアイコンやラベルは再考する

関連記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）