其の6 クリックできる部分はわかりやすく | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル中級其の6

クリックできる部分はわかりやすく


メニュー項目が多いサイトのプルダウン形式のナビゲーションや、大項目の中に小項目があるようなメニューを制作する際、特に気をつけならなければいけないのは、どこがクリックできて、どこがクリックできないかを明確にすることだ。

見た目が同じにも関わらず、振る舞いが異なるナビゲーションは、ユーザーがその都度、その箇所をクリックできるのか?できないか?を確認しなければならない。

ユーザーがサイトの使い方を習熟しにくく、こちらが見てほしいと意図する重要なページを見逃してしまうこともある。このような使い勝手の悪いナビゲーションはユーザー離れの原因にもなるので、誰にでもわかりやすい設計を心がけたい【1】【2】。

【1】赤枠内の画像。ほかのナビゲーションと同じく「矢印」が付いているため、このナビゲーションにはリンクの設定はしていないのに、恐らくユーザーの多くはクリックしてしまうだろう



【1】赤枠内の画像。ほかのナビゲーションと同じく「矢印」が付いているため、このナビゲーションにはリンクの設定はしていないのに、恐らくユーザーの多くはクリックしてしまうだろう





【2】見た目を変えすぎると統一感がなくなり、ここだけが特別なコンテンツかのように見えてしまうので、「矢印」のみをはずしクリックできないことを表現した





【2】見た目を変えすぎると統一感がなくなり、ここだけが特別なコンテンツかのように見えてしまうので、「矢印」のみをはずしクリックできないことを表現した



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

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在