実用的なユーザビリティの10のポイント：ガイドライン編

Post on:2009年9月30日

1. ラベルはフィールドの上に配置

UX Mattersのレポートによると、フォームにおけるラベルの理想的な配置はフィールドの上です。

多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。
なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。

また、ラベルを左に配置することはもう一つの問題があります。
あなたはラベルを右揃えと左揃えのどちらで配置しますか？　左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。
右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。

2. フォーカスは視線の先に

ユーザーの注意をひきつけるテクニックとして、人の顔や目にフォーカスを合わせる傾向があります。しかし、顔と目を配置するだけでは意味がありません。そのイメージが見ている方向が重要です。

You look where they look

上のキャプチャでは、赤ちゃんがコンテンツを見ている配置では見出しやテキストを見る人が増加することが分かります。

UsableWorldにアイトラッキングに関するレポートがあります。我々は本能的に顔に注目してしまいます。そしてその顔が向いている方向を同じように見てしまいます。
ウェブページで最も重要な箇所にユーザーの注意をひきつけたい場合はこの現象を利用していください。

3. デザインのクオリティは信頼を与える

ウェブサイトの重要な役割の一つにユーザーに信頼を与えることがあります。

Fever

一つの例として、我々はこのFeverのアプリケーションが良いものかどうか知りません。しかし、ウェブサイトのユーザーインターフェイスは素晴らしい第一印象を与えます。

ウェブサイトのデザインが信頼性を審査する一つのファクターとなりえます。レイアウト、一貫性、タイポグラフィ、カラー、スタイルなどユーザーに影響を与えることでしょう。

信頼性に影響を与える他のファクターには、ウェブサイトの内容、エラー、使いやすさなどがあります。

4. ランディングページのスクロール

useit.comのレポートによると、初めての訪問でどれぐらいスクロールするかというと、ビジターの23%という数字がでました。
これは、ビジターの77%がスクロールをしない、ということを意味しています。多くのユーザーはスクリーン上に目に見えるページの下までしかコンテンツを見ないということです。

また、二回目の訪問でスクロールするビジターは16%で、減少します。このデータは、特にランディングページに対してキーコンテンツをどのように配置すべきかを考える重要なものです。

このことは、ページの上のエリアに全てを配置すべきであることを意味しません。あまりにも多くの情報をつめこみすぎると、ユーザーはどこから見はじめるべきなのか分からなくなります。

Basecamp

このサイトでは広いスペースを利用して、大きいスクリーンショットとタグライン、アクションの呼びかけ、クライアントリスト、特長をまとめた短いリストを配置しています。

重要なポイントは3点です。

ウェブサイトの名称
ユーザーのバリューの提示（ベネフィット）
主要なセクションへのナビゲーション

しかしながら、最近のレポートではスクロールに関するユーザーの動向が変化し、ページの下部までスクロールすることをいとわないようになりました。これはユーザーの環境（ディスプレイのサイズ）が多種多様になったためです。

ここに一つのTipsがあります。
重要な情報が境目に表示されないようにするためには、ページのセクションを分ける際にホワイトスペースを広く使用することです。

5. リンクはやっぱりブルー

あなたのウェブサイトに他とは異なるユニークなデザインを採用するのは素晴らしいことですが、ユーザビリティの面から見ると皆と同じようにすることが最も良いです。なぜなら人々が新しいウェブサイトに訪問した際、その新しいコンテンツの意味を理解するために他のウェブサイトで見つけた経験を元に学ぶからです。

Google Labs

Googleは多くのユーザーがリンクとして認識するから、ウェブサイトのすべてのリンクをブルーにしています。

リンクのカラーを考える際、コントラストは重要なポイントです。背景と比較し十分なコントラストを与えてください。第二のポイントは他のテキストのカラーよりも目立つようにするべきです。テキストと同じカラーにはしないでください。
最後のポイントはカラーをブルーにすることです。ブラウザのデフォルトのリンクカラーはブルーです。そしてユーザーはそれを期待してアクセスします。ブルーではないカラーを選択することは決して問題ではありませんが、ユーザーがリンクを見つけるスピードに影響を与えるかもしれません。

6. 検索ボックスの文字数

検索ボックスの理想的な幅はいくつでしょうか？
Jakob Nielsenのレポートによると、現在の検索ボックスの大半はあまりにも短いということが分かります。ボックスの幅が短い時の問題は、長い文字列を入力することはできますが、一度に目に見える範囲が狭く、再検討や編集することが難しくなってしまうことです。

レポートによると、検索ボックスの平均的な幅は18文字分で、その文字数だと実際に入力された文字の27%をカバーするものでした。幅を27文字分とすると、90%をカバーします。
例えば、テキストフィールドの幅を指定する際、emでも行えるので27文字分に調整することもできます。

Google

Googleの検索ボックスは、長いテキストを入力するのに十分な幅を備えています。

Apple

Appleの検索ボックスは、「Microsoft Office 2008」と入力しただけで表示されず、あまりにも幅が短いです。

一般的には、検索ボックスはユーザーが問い合わせるに使用するので、短くするのではなく幅を広く設計します。
しかし、このデザインは不幸にも簡単に却下されるか、無視されがちです。ただし、フィールドに若干のpaddingを与えるとユーザーエクスペリエンスを改善することができます。

7. ホワイトスペースの価値

たいていのデザイナーはホワイトスペースの効果を知っています。それはパラグラフ、画像、ボタンなどの間にある空間です。
各項目の間のスペースをコントロールし、関係性を示したりすることができます。

Netsetter

上部に大きなコンテンツマージンがあり、パラグラフの間隔に注目してください。このホワイトスペースはコンテンツを読むことを容易にし、快適にします。

ホワイトスペースはコンテンツの読み取りをいっそう容易にします。パラグラフの間、左右のマージンにホワイトスペースを配置することで理解度を20%増やすとも言われます。
ユーザーは容易に、そこに視線を合わせることができるでしょう。

8. ユーザビリティテストの重要性

Jakob Nielsenのレポートによると、ウェブサイトのユーザビリティテストは5人のユーザーで実施した場合は問題点の85%が明らかになり、15人のユーザーで実施した場合は問題点のほぼすべてを見いだすであろうとリリースしました。

Why You Only Need to Test with 5 Users

ウェブサイトの最も大きな問題点は、通常最初の一人か二人のユーザーで発見できます。次のユーザーはこれらの問題点を確認して、残っているマイナーな問題点を発見します。
このたった二つのステップでウェブサイトの問題の半分は見つかるでしょう。これはテストに多くの費用をかけなくてもよいことを意味します。

このユーザビリティテストの大きな分岐点は0か1という点です。テストが何もないよりは「有る」ということが大切です。

9. プロダクトページは作りこむ

多くのプロダクトページは、さっとながめるユーザーにとってさえ十分な情報に欠けています。これは重大な問題です。
なぜならプロダクトページの情報がユーザーが購入する際の決断を促すものになる為です。プロダクトページの情報に有用性が欠けていると8%のユーザーが諦めて、10%のユーザーがウェブサイトを去ります（ユーザビリティに欠けるため）。

Apple

Appleではプロダクトごとに「技術仕様」のページを設けています。これは複雑なディテールが分かりやすく記載されています。

あなたのプロダクトについて詳細な情報を提供するようにしてください。しかし、あまりにも多くのテキスト量にはしないでください。
情報を理解することを容易にします。長文を使用するのではなく、多くの小見出しを使用し走査しやすいようにします。画像を多く使用することも効果があります。
最後に、ユーザーが理解しにくい専門用語は使わないでください。