Magazineから紹介します。Guidelines下記は、その意訳です。Mattersのレポートによると、フォームにおけるラベルの理想的な配置はフィールドの上です。Tumblr多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。よさそうに思えますが、これは採用すべきではありません。フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。ラベルを左に配置することはもう一つの問題があります。左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。フォーカスは視線の先にユーザーの注意をひきつけるテクニックとして、人の顔や目にフォーカスを合わせる傾向があります。顔と目を配置するだけでは意味がありません。そのイメージが見ている方向が重要です。look上のキャプチャでは、赤ちゃんがコンテンツを見ている配置では見出しやテキストを見る人が増加することが分かります。UsableWorldにアイトラッキングに関するレポートがあります。我々は本能的に顔に注目してしまいます。その顔が向いている方向を同じように見てしまいます。ウェブページで最も重要な箇所にユーザーの注意をひきつけたい場合はこの現象を利用していください。デザインのクオリティは信頼を与えるウェブサイトの重要な役割の一つにユーザーに信頼を与えることがあります。Fever一つの例として、我々はこのFeverのアプリケーションが良いものかどうか知りません。ウェブサイトのユーザーインターフェイスは素晴らしい第一印象を与えます。ウェブサイトのデザインが信頼性を審査する一つのファクターとなりえます。レイアウト、一貫性、タイポグラフィ、カラー、スタイルなどユーザーに影響を与えることでしょう。信頼性に影響を与える他のファクターには、ウェブサイトの内容、エラー、使いやすさなどがあります。ランディングページのスクロールuseit.comのレポートによると、初めての訪問でどれぐらいスクロールするかというと、ビジターの23%という数字がでました。これは、ビジターの77%がスクロールをしない、ということを意味しています。多くのユーザーはスクリーン上に目に見えるページの下までしかコンテンツを見ないということです。二回目の訪問でスクロールするビジターは16%で、減少します。このデータは、特にランディングページに対してキーコンテンツをどのように配置すべきかを考える重要なものです。このことは、ページの上のエリアに全てを配置すべきであることを意味しません。あまりにも多くの情報をつめこみすぎると、ユーザーはどこから見はじめるべきなのか分からなくなります。Basecampこのサイトでは広いスペースを利用して、大きいスクリーンショットとタグライン、アクションの呼びかけ、クライアントリスト、特長をまとめた短いリストを配置しています。重要なポイントは3点です。ウェブサイトの名称ユーザーのバリューの提示(ベネフィット)主要なセクションへのナビゲーションしかしながら、最近のレポートではスクロールに関するユーザーの動向が変化し、ページの下部までスクロールすることをいとわないようになりました。これはユーザーの環境(ディスプレイのサイズ)が多種多様になったためです。ここに一つのTipsがあります。重要な情報が境目に表示されないようにするためには、ページのセクションを分ける際にホワイトスペースを広く使用することです。リンクはやっぱりブルーあなたのウェブサイトに他とは異なるユニークなデザインを採用するのは素晴らしいことですが、ユーザビリティの面から見ると皆と同じようにすることが最も良いです。人々が新しいウェブサイトに訪問した際、その新しいコンテンツの意味を理解するために他のウェブサイトで見つけた経験を元に学ぶからです。LabsGoogleは多くのユーザーがリンクとして認識するから、ウェブサイトのすべてのリンクをブルーにしています。リンクのカラーを考える際、コントラストは重要なポイントです。背景と比較し十分なコントラストを与えてください。第二のポイントは他のテキストのカラーよりも目立つようにするべきです。テキストと同じカラーにはしないでください。最後のポイントはカラーをブルーにすることです。ブラウザのデフォルトのリンクカラーはブルーです。ユーザーはそれを期待してアクセスします。ブルーではないカラーを選択することは決して問題ではありませんが、ユーザーがリンクを見つけるスピードに影響を与えるかもしれません。Nielsenのレポートによると、現在の検索ボックスの大半はあまりにも短いということが分かります。ボックスの幅が短い時の問題は、長い文字列を入力することはできますが、一度に目に見える範囲が狭く、再検討や編集することが難しくなってしまうことです。レポートによると、検索ボックスの平均的な幅は18文字分で、その文字数だと実際に入力された文字の27%をカバーするものでした。幅を27文字分とすると、90%をカバーします。テキストフィールドの幅を指定する際、emでも行えるので27文字分に調整することもできます。GoogleGoogleの検索ボックスは、長いテキストを入力するのに十分な幅を備えています。2008」と入力しただけで表示されず、あまりにも幅が短いです。一般的には、検索ボックスはユーザーが問い合わせるに使用するので、短くするのではなく幅を広く設計します。このデザインは不幸にも簡単に却下されるか、無視されがちです。フィールドに若干のpaddingを与えるとユーザーエクスペリエンスを改善することができます。ホワイトスペースの価値たいていのデザイナーはホワイトスペースの効果を知っています。それはパラグラフ、画像、ボタンなどの間にある空間です。各項目の間のスペースをコントロールし、関係性を示したりすることができます。Netsetter上部に大きなコンテンツマージンがあり、パラグラフの間隔に注目してください。このホワイトスペースはコンテンツを読むことを容易にし、快適にします。ホワイトスペースはコンテンツの読み取りをいっそう容易にします。パラグラフの間、左右のマージンにホワイトスペースを配置することで理解度を20%増やすとも言われます。ユーザーは容易に、そこに視線を合わせることができるでしょう。Nielsenのレポートによると、ウェブサイトのユーザビリティテストは5人のユーザーで実施した場合は問題点の85%が明らかになり、15人のユーザーで実施した場合は問題点のほぼすべてを見いだすであろうとリリースしました。Usersウェブサイトの最も大きな問題点は、通常最初の一人か二人のユーザーで発見できます。次のユーザーはこれらの問題点を確認して、残っているマイナーな問題点を発見します。このたった二つのステップでウェブサイトの問題の半分は見つかるでしょう。これはテストに多くの費用をかけなくてもよいことを意味します。このユーザビリティテストの大きな分岐点は0か1という点です。テストが何もないよりは「有る」ということが大切です。プロダクトページは作りこむ多くのプロダクトページは、さっとながめるユーザーにとってさえ十分な情報に欠けています。これは重大な問題です。プロダクトページの情報がユーザーが購入する際の決断を促すものになる為です。プロダクトページの情報に有用性が欠けていると8%のユーザーが諦めて、10%のユーザーがウェブサイトを去ります(ユーザビリティに欠けるため)。AppleAppleではプロダクトごとに「技術仕様」のページを設けています。これは複雑なディテールが分かりやすく記載されています。あなたのプロダクトについて詳細な情報を提供するようにしてください。あまりにも多くのテキスト量にはしないでください。情報を理解することを容易にします。長文を使用するのではなく、多くの小見出しを使用し走査しやすいようにします。画像を多く使用することも効果があります。最後に、ユーザーが理解しにくい専門用語は使わないでください。Nielsenのレポートによると、たいていのユーザーはバナー広告に盲目であると報告されています。ユーザーがコンテンツに没頭しているとしたら、広告によって注意をそらされることはないでしょう。これはユーザーが広告を避けるということだけではありません。ナビゲーションやボタンなど広告のように見えてしまうエレメントに注意してください。FlashDen※現在は異なる為、上記はSmashingMagazineからのキャプチャこのウェブサイトの左のサイドバーにあるバナーは、広告ではありません。これはサイト内のコンテンツへのリンクです。これらは広告バナーのように見えてしまい、若干のユーザーには広告と認識されてしまうかもしれません。コンテンツのように見える広告は人々が見て、そしてクリックするでしょう。多くの広告収入を生み出すかもしれません。コンテンツだと思ってクリックしたユーザーの信頼を犠牲にしています。「短期の広告収入」と「長期の信頼」のどちらが大事か、よく考えてください。Posts関連記事が見つかりませんでした。