memo.xight.org

日々のメモ

虫眼鏡のアイコンは「検索」か「拡大」か

Summary

説明が必要なアイコンは用いない
処理を開始するスイッチをアイコンに頼らない
制限コントロールの選択肢に否定文を使わない
肯定ボタンのラベルにあいまいな文言を用いない
ナビゲーションをアクションのように見せない
紛らわしいアイコンやラベルは再考する

説明が必要なアイコンは用いない

ユーザによって違う意味に理解される可能性もある.
虫眼鏡のアイコンが「検索」を意味するか「拡大」を意味するか.

処理を開始するスイッチをアイコンに頼らない

Wordなどの「標準」ツールバー.
アイコンから処理の予測が必要.

プロパティを変更する場合の良い例は,Wordの「書式設定」ツールバー(太字,斜体,下線,囲み線など).
得られる結果をグラフィックで表現すればよいため,具体化しやすくアイコンの効果を得られやすい.

制限コントロールの選択肢に否定文を使わない

肯定文と否定文の混ざった選択肢を用いると理解が難しくなる.
否定文に二重否定を用いるとさらに理解が難しくなる.

悪い例はInternet Explorer のオプションダイアログ.
□ スクリプト エラーごとに通知を表示する
□ スクリプトのデバッグを使用しない
□ スケジュールに従ってオフライン項目の同期をとる
□ スムーズ スクロールを使用する

例外は,選択肢として「いずれも選択しない」行為を能動的に行なう場合.
○ 会社員
○ 自営業
○ 主婦
○ 学生
● 該当無し

肯定ボタンのラベルにあいまいな文言を用いない

悪い例は「OK」ボタン,「次へ」ボタン.
動作内容をユーザが推測する必要がある.

動作内容を記述することで回避可能.
「入力内容を送信する」,「配送先の入力へ進む」など.

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

画面遷移のためのナビゲーションと,
動作確定のためのアクションのリンクを区別する.

ナビゲーションであれば「ダウンロード画面へ進む」.
アクションであれば「ダウンロードを開始する」.

紛らわしいアイコンやラベルは再考する

アイコンやラベルは限られた表示領域の中で視覚的に表現する.
制作者の意図が確実にユーザに伝わるかは確認が困難.
第三者による検証が必要となる.

Reference

@IT - 虫眼鏡のアイコンは『検索』か『拡大』か?
http://www.atmarkit.co.jp/fwcr/rensai/usabilitytips03/01.html