UIを学ぶならまず「超明快webユーザービリティ」を読め!

こんにちは、ニコラス(@6cker845)です。

最近 UIについて勉強し始めたのですが、「超明快Webユーザービリティ」がわかりやすすぎたので、紹介します!

わかりやすさとは、ユーザーに考えさせないこと

この本の中で徹底されているのは、webサイトはユーザーに考えさせちゃだめだということです。

UIを考えるにあたって、いろんな手法やスキルはあるのですが、それ以上にWebサイトは一目瞭然である必要があります。

それは言ってしまえば、webサイトを見ているユーザーの頭の中に浮かぶ「?」を排除してあげることです。

・これは何のサイト?
・どこから始めればいいの?
・〇〇はどこにあるの?
・このページの一番重要なところはどこ?
・これは広告?それともサイトの一部?

といった疑問を解消してあげましょう。

ページは階層を分けると見やすくなる!

webサイトをは階層の使い方を工夫するだけで格段と見やすくなります。
ここでは注意すべき3つのポイントを解説します。

重要なものほど目立つようにする


ブログ内の文章は重要度に応じて、目立たせましょう。
重要なものほど

・大きく
・太く
・目立つ色をしている
・大きな余白で区切られている

であるか、それらの複数であったりすると重要であることを読者も理解します。

論理的に関係しているものは、視覚的にも関係させる


共通点のあるものは

・同じ見出しに並ばせる
・同じスタイルで表示される
・はっきりと区切られたエリア内に置く

ことで、それらがまとまりをもって要素であることわかりやすく伝わります。

入れ子構造を使う


たとえば、個別の書籍何冊かを「小説」という名前のセクションでまとめて囲とします。すると、それらの本が「小説」に関するものであるということがわかります。

文章は流し読みしやすいフォーマットにすること

webサイトを訪れるユーザーのほとんどはコンテンツにしっかり目を通してません。

ユーザーはほとんどのテキストを流し読みしながら見ているのです。

この事実に落胆するのではなく、ユーザーが流し読みしやすいフォーマットを作っていきましょう。

見出しはふんだんに使え

テキストの間の見出しがよく練られていれば、実質的な概要として機能します。

セクションの大まかな内容を理解させたり、あるいは内容そのものを見出しに書き、ユーザーの好奇心を掻き立てましょう!

見出しは中間に浮かせるな


見出しを使う時は見出しの上にある読み終わった文章よりも、見出しの下にあるこれから読む文章のほうに近づけましょう。

この違いは大きく、見出しがどの文章についているのか、明確に示すべきです。

アフォーダンスを与えろ

アフォーダンスとは、使い方が見て分かるような手がかりを与える形態のことを言います。

ボタンひとつとってもボタンだとわかりやすいものと、わかりにくいものがあるように、アフォーダンスを明確にすることで、ユーザーは迷いなく操作を行うことが出来ます。

フラットデザインの代償

アフォーダンスは目で見てはっきりわかる必要がありますが、最近のインターフェースでザインのトレンドはその逆を行っています。

それがフラットデザインです。

目立つ形状を無くし、インターフェースの外観をフラットにしています。

これは、整理整頓された綺麗な外見を採用することと、ユーザーに十分な視覚情報を与えて、アフォーダンスを認識できるようにすることのどちらを取るか、といったトレードオフが発生しています。

サイトは50ミリ秒で好印象を獲得しろ!

最後に、ユーザーはページを数秒パッと見ただけで、「良さそう?コンテンツは豊富そう?ページはきちんと区分けされている?」といった全体的な印象をいくつも形成します。

なによりも面白いのは、ユーザーが最初に抱いた上記のような印象が、実際に時間を取ってサイトをじっくり見て回った場合の印象と極めて似通っているということです。

このような悪い印象を持たれないように、サイトの第一印象は良くなるように心がけましょう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. TERRY より:

    分かりやすい!そしてこの本読みてぇ