TOP > web creators > サイトのメッセージを正しく伝えるWEBデザインの鉄則

web creators

 
 

連載記事 web creators





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


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

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

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


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



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



 
 




この記事をチェックした人はこんな記事も読んでいます。

おすすめの記事

  • 【web creators】

    Webデザイン表現&技法の新・スタンダード デザインパーツ編

  • 【インタビュー】1年生デザイナーの1週間/その66 本多菜々子さん(ミツエーリンクス)

    1年生デザイナーの1週間/その66 本多菜々子さん(ミツエーリンクス)

  • 【web creators】ホスティングサービスガイド2012

    ホスティングサービスガイド2012

  • 【web creators】

    WEBデザイン最新常識と活用技

出版物のアフターケア

ログイン

メールアドレス
パスワード