ユーザビリティはウェブデザインの重要な側面であることに誰もが同意します。 オンラインストアやWebアプリケーションでポートフォリオサイトの設計に取り組んでいるという事実にもかかわらず、ユーザーにとってページを便利でシンプルにすることが重要です。 過去数年にわたって、Webおよびインターフェースの設計のさまざまな側面について多くの研究が行われてきました。 これらの研究の結果は非常に重要であり、作業の質の向上に役立ちます。 この記事には、サイトのユーザーエクスペリエンスの向上に役立つ10の有用な結論と使いやすさの原則が含まれています。

フォームフィールドのラベルは、フォームフィールドよりも適切に配置されます

UX Mattersの調査では、フォームラベルをフォームフィールドに配置するのが最善であることが示されました。 多くのフォームでは、ラベルはフィールドの左側に配置され、2列のレイアウトを作成します。 見栄えは良いですが、使用するのが最も簡単なレイアウトではありません。 それは何のためですか？ フォームは主に垂直方向であるという事実に基づいて、 ユーザーはフォームに上から下に情報を入力します 。 ユーザーはフォームを上から下に移動し、フォームの左側でラベルを探すよりも、フォームのフィールドの上にあるラベルを読む方が便利です。





Tumblr Webサイトには、UX Matterガイドラインに準拠したシンプルでエレガントなサインアップフォームがあります。



ラベルを左側に配置すると、別の問題が発生します。ラベルを左端と右端のどちらに揃えますか？ 左に揃えると、フォームが視覚的に便利になりますが、ラベルがフォームから分離されるため、どのラベルがフォームのどのフィールドを参照しているかがわかりにくくなります。



右側の配置は反対になります。フォームは見た目は快適ですが、視覚的にはすでに不便です。 ほとんどの場合、フォームフィールドにラベルを挿入すると最も便利です。 この調査では、ラベルを太字にするべきではないことも示されましたが、この推奨事項は必須ではありません。

ユーザーは顔に集中します

人々は、彼らが視界に入るとすぐに他の人々に本能的に気づきます。 Webページでは、マーケティング担当者が注目を集めるための優れたツールとなる顔と目に焦点を当てています。 しかし、人々の顔や目への注意はほんの始まりに過ぎず、実際、私たちは写真の人物が見ている方向を見さえし始めていることがわかります。





私たちを直接見ている子供と一緒に画像を見るときのヒートマップ追跡視線。 Usable Worldによって行われた研究。





そして今、子供はコンテンツを見ています。 見出しと本文を見る人の数の増加に注意してください。



これは、 この視線追跡調査で実証されています。 私たちは本能的に人々の方向を見ますが、人々が何か他のものを見ると、私たちもその方向を見始めます 。 この現象を利用して、ページの重要な部分にユーザーの注意を引きます。

設計品質は自信の指標です。

Webサイトに対する人々の信頼に影響を与える要因を特定するために、さまざまな調査が実施されています。

• Stanford-Mackowski Website Trust Survey 2002：サイトを信頼できるものにする理由 、
• サイトを信頼するもの。 大規模な定量的研究レポート 、
• コンピューターの信頼の要素
• サイトの信頼スコアに影響する要素：予備調査結果（ACM CHI 2000 Conference on Human Factors in Computing Systems、v.2、New York：ACM Press）

Feverが優れたアプリケーションであるかどうかはわかりませんが、エレガントなユーザーインターフェースとWebサイトは素晴らしい第一印象を与えます。



これらの研究の興味深い発見の1つは、ユーザーが実際に本をその表紙で判断することです...またはむしろウェブサイトを設計によって判断することです。 レイアウト、一貫性、タイポグラフィ、色、スタイルなどの要素は、ユーザーがサイトをどのように認識し、どのような画像を投影するかに影響します。 サイトは、良い画像を投影するだけでなく、視聴者に適した画像を投影する必要があります。



サイトの信頼性に影響を与える他の要因は、Webサイトのコンテンツの品質、エラーの数、更新の頻度、使いやすさ、作成者の信頼性です。

ほとんどのユーザーはスクロールしません

Jakob Nielsenがページをスクロールするユーザー数（ サイトのユーザビリティを優先 ）に関する調査では、ユーザーがサイトに初めてアクセスしたときにスクロールするユーザーはわずか23％でした。 これは、ユーザーの77％がページをスクロールせず、スクロールが必要になるまでコンテンツを表示するだけであることを意味します。 さらに、スクロールするユーザーの割合は、その後の訪問中に16％に減少します。 これらのデータは、重要な情報を目立つ場所、特にランディングページに表示することがいかに重要かを示しています。



これは、サイトのヘッダーに過剰な情報を収集する必要があるという意味ではなく、ページのこの部分を最適な方法で使用することを意味するだけです。 サイトのヘッダーにある情報量が多すぎると、コンテンツにアクセスできなくなります。ユーザーがあまりにも多くの情報を見ると、このすべての表示を開始する場所がわかりません。





Basecampはその場所をうまく活用しています。 画面上部（高さ768ピクセル）には、大きなスクリーンショット、サブタイトル、提案、行動を促すフレーズ、顧客のリスト、ビデオ、機能の短いリスト、および画像が表示されます。



これは、最初にすべての新規ユーザーがアクセスするホームページにとって最も重要なことです。



そのため、サイトのこの部分でメインデータを提供します。

1. サイト名
2. 意義のある申し出（すなわち、その使用から彼らが受ける利益）
3. ユーザーにとって重要なサイトの主要部分をナビゲートします。

ただし、それ以降、ユーザーの習慣は大きく変わりました。 最近の調査によると、ユーザーは非常に快適にスクロールできると感じており、状況によってはページの一番下までスクロールすることができます。 多くのユーザーにとって、ページ切り替えを使用するよりもスクロールする方が便利です。多くのユーザーにとって、重要な情報をサイトの上部に配置する必要はありません（これは、高解像度のモニターがさまざまなためです）。 そのため、レイアウトを見やすくするためにレイアウトをパーツに分割し、大きなスペースで分割することをお勧めします。

リンクに最適な色は青です。

サイトに独自のデザインを作成するのは素晴らしいことですが、使いやすさに関しては、他の人がやっていることの方が良いです。 人々が新しいサイトにアクセスするとき、他のサイトでそれらを見つけるのに慣れている場所で常に物事を探し、彼らの経験を使用して新しいコンテンツを理解するので、慣習に従ってください。 これは「サンプル使用」と呼ばれます。 リンクの色、サイトのロゴの場所、ナビゲーションタブの動作など、特定のことを期待します。





Googleは常にリンクを青にします。理由は次のとおりです。色は多くのユーザーに馴染みがあるため、リンクを見つけやすくなります。



リンクの色は何色ですか？ 最初の考慮事項はコントラストです。リンクは背景色とコントラストをとるのに十分なほど暗い（または明るい）必要があります。 次に、ページ上のテキストの残りの部分とは異なる必要があるため、ページ上のテキストが黒のときに黒のリンクを作成しないでください。 最後に、調査では（Van Schaik and Ling）使いやすさを優先する場合は、リンクを青色にする方が良いことを示しました。 デフォルトのブラウザリンクの色は青なので、人々はその特定の色が見えることを期待しています。 別の色を選択することは決して問題ではありませんが、ユーザーはそのようなリンクを見つけるのにもっと時間が必要です。

理想的な検索フィールドは27文字の幅である必要があります

検索クエリを入力するための理想的なフィールドの幅はどのくらいですか？ Jacob Nielsenは、サイトの検索フィールドに入力された検索クエリの文字数に関する調査を実施しました。 今日の検索クエリの入力フィールドのほとんどは非常に短いことがわかります。 検索クエリの短い入力フィールドの問題は、十分に長い検索クエリを記述できるという事実にもかかわらず、その一部のみが同時に表示されるため、その後の編集が困難になることです。



この調査では、 平均して、検索クエリの入力フィールドの幅は18文字であることが示されました。 データから判断すると、検索クエリの27％は長すぎて、それらに適合しませんでした。 検索クエリの入力フィールドの長さを27文字に拡張すると、検索クエリの90％を入力できます。 幅はピクセルとポイントだけでなく、「em」（現在のフォントのサイズに等しい相対的な長さの単位）でも設定できることに注意してください。 したがって、この値を使用して、検索クエリ入力フィールドの幅を27文字に設定します。





Google検索クエリの入力フィールドは、長い検索クエリに十分な幅です。





Appleの検索クエリ入力フィールドが短すぎるため、クエリ「Microsoft Office 2008」はそれに適合しませんでした。



一般に、ユーザーが入力されたクエリをすばやく確認して送信できるように、検索クエリフィールドは短すぎるよりも長すぎる方が適切です。 これは非常に簡単なアドバイスですが、残念ながら、多くの場合拒否され無視されます。

空きスペースにより理解が向上

ほとんどのデザイナーは、ページの段落、画像、ボタン、およびその他の要素の間のスペースである空白の意味を知っています。 空き領域により、ページ上のオブジェクトがより明確で目立つようになります。 また、アイテム間の距離を短くし、アイテムとこのページの他の要素の間のスペースを増やすことでアイテムをグループ化することもできます。 これは、要素間の関係を示し（ このボタンがこの要素グループに属していることを示すため）、ページ上に要素の階層を構築するために重要です。





The Netsetterの幅広いコンテンツと段落分割に注意してください。 このすべてのスペースにより、コンテンツはシンプルで読みやすくなります。



また、空き領域はコンテンツをより読みやすくします。 この研究では、段落間および左右の列に空きスペースを使用すると、 理解が20％向上することが示されました。



実際、Chapero、Shaikh、およびBakerによると、Webページのレイアウト（スペース、見出し、インデントを含む）はパフォーマンスに大きな影響を与えることはできませんが、ユーザーの満足度には影響します。

効果的なユーザーテストは広範囲である必要はありません

Jakob Nielsenによるサイトのユーザビリティテスターの理想的な数に関する調査では、5人のテスターのみがサイトのすべての問題のほぼ85％を明らかにし、15人のテスターがほとんどすべての問題を明らかにすることが示されました。





通常、最大の問題は最初または2人のテスターに​​よって発見され、残りのテスターはこれらの問題を確認し、残りのマイナーな問題を見つけます。 たった2人のテストユーザーがあなたのサイトで問題の半分を見つけるでしょう。 つまり、良い結果を得るためにテストを大規模にしたり、費用をかけたりする必要はありません。 最大の成功はテスター0人から1人に移行することで達成されるため、少なすぎることを恐れないでください 。 テストは何もないよりも優れています。

製品情報ページで目立ちます

サイトに製品ページがある場合、これらの製品を購入する人々は確実にそれらを見るでしょう。 しかし、多くの製品ページには、ユーザーが一目見ただけでも十分な情報が含まれていません。 製品情報は人々が購入を決定するのに役立つため、これは深刻な問題です。 この調査では、利便性の問題の8％が製品情報の不足に関連しており、顧客の損失の10％を引き起こしていることが示されました（つまり、ユーザーは単にサイトを離れます）。





アップルは、製品ごとに個別の「仕様」ページを提供しています。これにより、難しい技術的詳細をライトマーケティングページから分離しますが、必要に応じてそのようなデータにアクセスできます。



製品に関する詳細な情報をユーザーに提供しますが、大量のテキストでユーザーをオーバーロードしないでください。 消化可能な情報を提供します。 テキストを小さなブロックに分割し、多くの小見出しを使用します。 そのようなページに製品の多くの画像を挿入し、正しい言語を使用します。ユーザーが理解できないかもしれないスラング表現を使用しないでください 。

ほとんどのユーザーには広告が表示されません

AlertBoxに関するトピックのJakob Nielsen（Jakob Nielsen）は、ほとんどのユーザーには広告が表示されないだけだと言います。 特定の情報を探している場合、またはサイトのコンテンツを狙っている場合、バナーに注意を払うことはありません。



この結果、ユーザーが広告を回避するだけでなく、広告ではない場合でも、広告のように見えるすべてのものが回避されます 。 一部のメニュー項目はバナー広告のように見える場合があるため、これらの項目に注意してください。





FlashDenサイトの左側にある正方形のバナーは、実際にはバナーではありません。同じサイトのコンテンツへのリンクです。 これらはバナーに非常に似ているため、一部のユーザーによって無視される場合があります。



ただし、コンテンツのように見える広告は、ページでその特定のコンテンツを探している人がアクセスできます。 これにより広告収入を増やすことができますが、サイトのユーザーがバナーをクリックすると、サイト上の素材へのリンクであると見なされるため、サイトのユーザーの信頼も低下します。 これを決める前に、あなたにとって何が最善かを考えてください。 短期的な収入ですか、それとも長期的な信頼ですか？