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




「操作しやすい」を表現するデザインの技…2
わかりづらい言い回しや
類似したアイコン・ボタンを排除する
文=姫野貴志((株)メタフェイズ)


GOOD 機能別にデザインを用意する

アイコンのデザインを機能ごとに変更したり、ボタンの文言をわかりやすくすると、ユーザーストレスが軽減できる。制作側の都合優先ではなく、ユーザーの操作しやすさを第一に考えてページづくりを行おう

BAD 類似パーツやわかりづらい文言は
ユーザーを惑わす原因になる

【A】は、トップという文言があいまいで、Webサイトのトップページなのか、このページの先頭なのか迷ってしまう。【B】は、外部リンクかページ内リンクなのか、リンクページがポップアップで開くのか予測できない。【C】は、リンク個所を見ただけではリンク先がよくわからない。現状のままでは、クリックしたら何が起こるのか予測できない個所が多すぎて、ユーザーを混乱させてしまう


アイコンやボタンに、意味不明なデザインや文言が使われている場合がある。そういったページに訪れたユーザーは、操作に戸惑ってしまい二度とそのページを見なくなる可能性がある。ユーザーを混乱させない、使いやすいページにするためには、アイコンやボタンは関連する内容のデザインや文言にすることが必要だ。たとえば、「ページトップ」を「ページの先頭へ」に変えたり、「詳細はこちら」を「○○の詳細はこちら」のような文言にし、動詞や一意の名詞を使用する。このような工夫が施されていれば、その個所を見ただけで、クリックすると何が起こるのかある程度予測でき、ストレスなくWebサイトが見られる。ちょっとした一手間で、ユーザビリティを向上させることができるので試してほしい。さらに、統一されたデザインや言い回しにすると、制作側もブレが生じなくなるだろう。



INDEX
多くのユーザーが求める「操作しやすいデザイン」とは?
ユーザーインターフェイスを工夫するために、設計を理解する
「操作しやすい」を表現するデザインの技
→技1 クリック可能な部分と不可能な部分を区別して操作しやすくする
→技3 クリック可能領域を広めに設定して操作しやすさを向上させる
→技4 ページ遷移のないタブメニューで操作しやすくする


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

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在