ウェブサイトのユーザビリティに関する最高の秘訣20か条

昨日、ウェブサイトのリーダビリティに関する記事を配信しましたが、意外と好評でした。ということで、2匹目のドジョウを狙って今回はユーザビリティについての記事を紹介したいと思います m(__)m ウェブデザイナーにもSEO担当者にも、基本ながら一読の価値ある内容。 — SEO Japan

ユーザビリティは、ウェブサイトにとってものすごく大切なことだ。訪問者が素早く簡単に楽しくウェブサイトにアクセスしてそれを使うことができなければ、ウェブサイトの外観がどんなに格好良くても、コンテンツがどんなに素晴らしくても関係ないのだ。訪問者の多くは、ただ諦めて他のどこかに行ってしまうだろう。

それでは、どうやってできる限り使い易いウェブサイトを作ればいいのだろうか?あなたはラッキーだ。だって、この記事ではあなたのウェブサイトのために20個のユーザビリティの秘訣を特集しているのだ。テクノロジーは常に変化するため、ユーザビリティの秘訣も変化する。だから、あなた自身の秘訣や技も私たちに共有しよう。

1. 更新頻度に合わせてウェブサイトデザインを構築する

新しいコンテンツを投稿する頻度が低いのであれば、より静的で機能重視のデザインにすることだ。頻繁に投稿するのであれば、ブログスタイルのデザインを適用しよう。

2. トップ左側にロゴ、その右側か下にメニューを置く

ロゴはトップ左側に配置し、その右側もしくは下にメニューを置く。このロゴは必ずクリックできるようにして、訪問者をトップページに連れ戻すこと。それらの理由は?一般に認められた約束事だから―それは、ほとんどのウェブユーザーが当たり前に期待することなので、言ってみるならば、車のデザインの中でハンドルをどこに置くか決めるのにクリエイティブになる必要がないのと同じだ。

3. 検索エリアを上部左もしくは右に置く

検索バーを上部左もしくは右に含める(もちろん、検索するコンテンツが十分にあるなど、それが適切な場合)。さらに、“検索”という言葉をフォーム内に入れて、それがタイピングが可能な検索バーだと分かるようにする。

4. 問い合わせ情報や問い合わせフォームは見つけやすくする

問い合わせ情報もしくはフォームは、メニューまたはフッター内に専用のリンクを設けて別ページにするか、サイドバーかフッターにコンタクト情報を含める。

5. ヘルプページを見つけやすくする

FAQ、テクニカルサポート、ドキュメンテーションなどのヘルプページは、メニューもしくはフッター内で見つけやすくする。

6.メニューの項目は出来る限り少なくする

新規訪問者が持つ選択肢が多くなればなるほど、彼らが陥る決断できないまひ状態は大きくなる(=ナビゲーションメニューの項目のどれもクリックしなければ、直帰する確率は高くなる)。

7. リンクとボタンに状態変更を含める

クリックが可能であることやすぐに実施可能であることを強調する時には、訪問者の混乱を低下すると同時に、訪問者が望ましいリンクとボタンをクリックする可能性が増える。それをリンクとボタンに状態変更を含めることによってするのだ。つまり、マウスオーバーしたり、クリックする時に外観が変わるということだ。

8. アクティブなフォーム領域をハイライト表示する

訪問者がフォーム領域の中をクリックしたときにはそれをハイライト表示して、入力し始めた時にそこがテキスト入力されることになるもしくはアクションの結果となる場所であることを強調する。

9. リンクの色をできるだけ目立たせる

リンクの色を目立たせて、そのテキスト部分が明らかにクリック可能であることを示す。これは、アクセスしやすさの問題を持っている(=低コントラストの項目に苦戦している)人にとって特に重要で有効である。

10. 全てのことをできる限り一貫させる

不一致を避けることで訪問者の予期しない驚きを取り除く。次の事柄などをできる限り一貫させる(全幅ページかサイドバーのあるページかも含む):色、リンクの色、構造、インターフェース、構成要素がどこにあるか。

11. フォームを分かりやすくする

グループ化したフォームは、フォームを分かりやすくする。例えば、苗字と名前を同じライン上に置いて、市と県を別のライン上に置いたりすることだ。さらに、それぞれのフォームの前にはタイトルをつけてフォーム内に何を入力すればいいのか分かるようにする。

12. トップ近くにパンくずリストを追加する

決済、登録などのプロセスのページでは、トップ近くにパンくずリストを追加する。これは、訪問者が、自分はどれ位プロセスを進んだのか、あとどれ位プロセスが残っているかを知るためのものだ。訪問者は当て推量やあとどれ位時間がかかるのかが分からないことを嫌うため、それを取り除くのだ。ここに、プラグインを使わずにWordPressにパンくずリストを追加することに関するチュートリアルがある。

13. “ウィンドウショッピング”フレンドリーになる

価格/仕様/説明を、グリッド/リスト/インデックスページ内で素早く提示する。それらを見るためにマウスオーバーしたり、クリックして別のページに行くことを要求しない。訪問者は自分の欲しいものを早く見つけることができるほど満足し、あなたの商品のために戻ってくる可能性は高くなる。あなたも、非効率的なウェブデザインがつくづく嫌になって使うのを止める気持ちをよく知っているはずだ―自分のウェブサイトをそういう中の1つにしないこと。

14. 常に自分の名前/ロゴ/タグラインをトップに置く

あなたがNike、Apple、Sonyもしくは世界中で知られているブランドでない限り、自分の名前/ロゴ/タグラインを常にトップに置いて、どこにいるのか常に分かるようにするのだ。これは特に、訪問者が外部リンクから直接あなたのページや記事の1つにやって来た場合に重要になる。

15. 機能を優先し、過度なグラフィックは最低限にとどめる

ナビゲーションの邪魔になるアニメーションやグラフィックは使用しない。訪問者はコンテンツや情報にアクセスしたいのであって、メニュー項目をクリックする方法を探したいわけでも、100回目に何らかのアニメーションを見たいわけでもない。

16. スプラッシュ・ページなんていらない

今は1997年じゃない。しかし、本当のところ、ウェッブサイト全体が元来スプラッシュ・ページでない限り(映画のような、1つのアイテムの宣伝サイト)は、訪問者があなたのウェブサイトを期待している時にフルページ広告で驚かすことによってイライラさせないことだ。その代わりに、ホームページ上にプロモーションコンテンツを置けば、それはすぐに目に入るけれど訪問者がそれに従って行動するかしないかの選択肢を与えることになる。彼らは急いでいて、フルページ広告に迎えられることなくメニューアイテムをクリックしたいこともあるのだ。

17. 画像を使ってテキストを分割する

これが読みやすさを高めるのに役立つ。雑誌が定期的に画像とグラフを使ってテキストを分割しているのには理由がある。6000語の記事を読みやすくするためだ。

18. 見出し、区分、リストを使ってテキストを配置する

見出し、画像を使った区分、箇条書きリストを使ってテキストを配置して、スキャナビリティを増す。これは、訪問者がページ/記事上で求めているものを探して、それを読み始める前に素早く要点を得ると同時に、より早いスピードで読むことを可能にする。

19. 独自のドメインを持つ

あまりに当たり前のことだ。しかし、これは以下の2つの理由から必要不可欠である:あなたがプロで合法であることを訪問者に確信させるだけでなく、それが無料サービスか何かのサブドメインではなくて適切なウェブサイト上にいるのだと安心させる。さらに、ドメインは年間およそ9USドルほどと途方もなく安い(あなたがいつこれを読んでいるかによってもっと安いこともある)ので、独自のドメインを所有しない理由は全くない。

20. 出来るだけ短い明確なパーマリンクを持つ

明確で短いパーマリンクをウェブサイト上に持つことは、そのURLを共有しやすくするだけでなく(貼り付けられる場所にフィットするため)、数字やシンボルのような大量のちんぷんかんぷんなものではなくてそのページ/記事が何について書かれているのかがはっきりと分かるため、訪問者に自分が読んでいるもしくは読もうとしているものを再確認させることができる。

もっと使えるアドバイスはあるだろうか?

あなたの番だ:どういうわけかこのリストに欠けているユーザビリティのアドバイスが他にあるだろうか?下のコメント欄にあなたにとって最も必要不可欠なものを共有してほしい。


この記事は、respystudiosに掲載された「The Ultimate 20 Usability Tips for Your Website」を翻訳した内容です。

読んでみればどれも当たり前に聞こえる内容ばかりですが、自身のサイトで考えてみると「あ、そういえば気にしてなかった」なんてこともあるかもしれませんね。ここに書かれていることを100%厳守する必要はないと思いますが、守らないなら守らないなりの理由はあってしかるべきかもしれません。リーダビリティにユーザビリティ、ウェブデザイナーもSEO担当者も気にすることは増えるばかりですが、常にユーザー目線を忘れないことがこれまで以上に大切になっている今日のウェブです。 — SEO Japan [G+]
Page Top

投稿ナビゲーション