「操作しやすい」を表現するデザインの技…1 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて




「操作しやすい」を表現するデザインの技…1
クリック可能な部分と 不可能な部分を
区別して操作しやすくする
文=小山田晃浩((株)メタフェイズ)


GOOD 可能・不可能な部分を視覚的に区別する
クリック不可能な部分には、下線や三角形のアイコンなどを使わず、可能な部分のみ下線などで装飾しよう。クリック可能・不可能な部分を視覚的に区別することで、クリックできる場所がわかりやすくなる

BAD 可能な部分と不可能な部分を
視覚的に区別しないと混乱が生じる

上は、アイコンの形やテキストの装飾が不適切な例。クリック不可能なテキストを下線で装飾したり、三角形や矢印などのアイコンを使うとクリック可能な部分と認識されてしまう。また、クリック可能なテキストに対して下線が引かれていなかったり、特別なアイコンがない場合は、クリック不可能な部分として認識されてしまう


テキストの装飾に下線を使っていたり、矢印や三角形のアイコンがつけられていた場合、多くのユーザーはその部分をクリックできると認識するだろう。そのため、クリックできない通常のテキストに対して下線で装飾したり、リストのアイコンに矢印や三角形を使うと、ユーザーは他のページにリンクしていると誤解し、クリックしてしまう可能性がある。逆に、クリック可能なテキストに下線を使わなかった場合、リテラシーの低いユーザーは、クリック不可能な部分として認識してしまうだろう。こうした混乱を避けるために、クリック可能な部分と不可能な部分は、視覚的にはっきりと区別し、ユーザーを混乱させない設計・デザインにする必要がある。



INDEX
多くのユーザーが求める「操作しやすいデザイン」とは?
ユーザーインターフェイスを工夫するために、設計を理解する
「操作しやすい」を表現するデザインの技
→技2 わかりづらい言い回しや類似したアイコン・ボタンを排除する
→技3 クリック可能領域を広めに設定して操作しやすさを向上させる
→技4 ページ遷移のないタブメニューで操作しやすくする


twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在