「Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。」を読みました

2019年7月25日木曜日

2.レバレッジメモ

t f B! P L
(初稿日:2011/10/31)
「Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。」を読みました

Webサイトのリニューアルや改善を行うにあたり、SEOに偏りすぎたサイトやページを構築してしまい、ユーザビリティを損なってしまったら元も子もないので、常にユーザビリティには気をつけるようになりました。

他のサイトやメディアを閲覧する際に、どのような意思のもとナビゲーションを設置しているか、コンテンツを見せているかなど気にしてはいるものの、
個人の気づきでは限界もあると思います。
そこで、この書籍「Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。」を読んでみました。

この書籍じたいは発売から日数はたっていますが、内容としては古くはなく、
ユーザビリティを学びだす書籍としてはとても参考になるかと思います。


レバレッジメモ

検索エンジンの普及とユーザビリティの関係

ユーザーがどのページから訪問しても、ユーザーの探す情報にたどりつけ、情報の閲覧や目的をすばやく達成できるようにする。
どのページを最初に見ても、何のWebサイトで、何ができるのか、自分が今どこにいるのか、目的のページに行くようにはどうすればいいのか把握しやすいナビゲーションやデザインが求められる。
SEOの最終目的は、Webサイトのアクセス数アップではなく、Webサイトを利用するユーザー数の増加であり、優良顧客となるリピーターの増加。

Webサイトの目的を考える

「目的+特長=サイト」の個性を効果的に打ち出すためにあるのが、デザインやユーザビリティ。
競合相手と比較し、ストロングポイントを探す。
また、ターゲットユーザーも考える。
サイト立ち上げ前の想定ユーザーと立ち上げ後のユーザー層を調べる。

コンテンツとタスクから基本構成を考える

運営サイドとユーザーが必要とするコンテンツを洗い出し、情報のランク付けをする。
ユーザーがWebサイトで目的を達成するまでのタスクを細分化しランクを付ける。
タスクに優先順位をつけメニューやページの構成を考えることで、ユーザーを迷わせずに誘導することができる。
コンテンツとタスクを組み合わせ、階層にとらわれず導線を配置する。

同じページに複数の入り口から入れるようにする

情報量が多い場合は、ひとつのカテゴリだけでは目的の情報にたどりつきにくい。
ユーザーが探しやすい複数のカテゴリを用意し情報にたどり着けるようにする。

ナビゲーションに例外規則を作らない

初めて訪れたユーザーでも、すぐに閲覧方法や操作を覚えることができたり、リピーターが異なる目的のページに行こうとする場合でも経験を手掛かりに操作できるような、ユーザーが学習しやすいサイトが好ましい。

フッター部分から次のアクションへ結びつける

ページの下までスクロールするユーザーは、次のアクションを考えていたり、なんらかの情報を求めている場合が多い。
そんなユーザーの気持ちをつなぐリンクや情報を入れる。

ユーザーはWebブラウザを全画面表示しない

画面解像度が1024×768以上のものも増えてきたが、ユーザーは画面いっぱいに広げない場合もあるし、お気に入りなどのサイドバーを表示している場合もある。
サイト構成で3カラムレイアウトのサイトは、
3カラム目は表示されない可能性があることも意識する。

CSSで印刷されることも考えたページをデザインする

ユーザーがプリントアウトするときには、不要な情報を除いたりしたほうが親切。

どのページから入ってきても次の行動がわかるように設計する

ナビゲーションが不十分なために1ページしか見ずに直帰されているとすれば、大きな機会損失につながる。
それを防ぐために、階層と現在いるページの位置を明らかにするパンくずリストや、関連する情報などの内容を合わせたコンテキストナビゲーションを用意し直帰を防ぐ。

テキストリンクには具体的な内容を記載する

「ここをクリック」や「詳細はこちら」のようなあいまいな表現でのリンクではなく、「〇〇キャンペーン応募へ」「〇〇サービスの詳細仕様」など、
クリックするとどのようなページが表示されるのかをユーザーに事前に予測させる。
また、青くて下線のある文字はクリックでき、一度クリックしたリンクは紫色になるという認識をもっているユーザーが多いため、標準仕様をベースにデザインすることも大事。

ユーザーを混乱させないリンク

ほとんどのユーザーはリンクをクリックするとHTMLページが表示されていると思っているので、PDFや動画などの際は事前にリンク先が何のファイルか明記する。
ページ内リンクをクリックしても同ページ内の遷移と認知しないユーザーのために、ページ内リンクには記号を付けるなど工夫する。

文字情報の読みやすさを向上させる

ユーザーは文章を読むのではなく見る。内容に興味を示さなければ、画面をスクロールしない。
スクロールしない範囲でも隅から隅まで読まない。
そのため、冒頭に概要を記載し、そこから詳細説明に入るなど、最初の数行を読んだだけで全体の内容をおおよそ把握できるようにする。
段落や小見出し、数字などを項目に使用し、余白を作ることで流して読むことができるようにする。
また、ページ内にスクロール枠をつけ文章を記載しない。
ニュースやお知らせは最初の数件を記載し、過去分は別ページに分けるほうが読みやすい。

文字以外の要素のユーザビリティを向上させる

テキストでは表現しにくい内容やビジュアルが購買に与える影響が大きい時など、画像にはひとつひとつの意味をもたせて掲載する。
少ないスペースでは、アイコンを使うことでわかりやすくなる場合もあるが、アイコン自体の意味が不明瞭にならないように気をつける。

Q&Aを有効活用する

よくある質問と答えは、1ページ内に複数掲載せず、1ページに1つずつ掲載し、アクセス解析でユーザーの悩みや商品、サービスの問題点などをリサーチする。

現在位置を常に明確にする

トップページから入っても、検索結果から流入しても、ユーザーがいまどの位置にいるのかをナビゲーションメニュー、見出し、パンくずリストなどで把握できるようにする。

ユーザー属性に合わせたナビゲーションを用意する

アクセス解析を用いることで新規ユーザーとリピーターの行動の違いが見えてくる。
新規ユーザーは探索しながらサイトを閲覧するのに対し、リピーターは目的のページが決まっていることが多いので、それぞれのユーザーむけに項目別と目的別のナビゲーションを用意する。

ユーザーテストで行動を事前に把握する

Webサイト制作に入る前に紙に書いたラフの設計図を使い、制作に直接かかわっていない人でペーパープロトタイピングを行う。
チェックする際はユーザビリティチェックシートを用意し問題点を洗い出し、制作者全員で共有し解消する。
その繰り返しで企画段階から内容をつめ、制作過程での大きな変更を防ぐ。

QooQ