知っておくべき 18 の Web ユーザビリティの原則

世界最高のビジュアル デザイン スキルを持っていたとしても、訪問者がページ間やアイテム間を快適に移動できないサイトを構築した場合、優れた Web サイトの目的を見失っていることになります。そこで、本日の記事では、 Web ユーザビリティのすべきこととすべきでないことについて知っておくべき18 のことを説明します。

グリッド線を使用してウェブサイトを構造化する

クリエイティブなグリッド ページ ボックス レイアウトに興奮して熱狂しているときは、Web サイト全体のページ レイアウトがボックス内に収まっていることを確認する必要があります。グリッド構造により、訪問者の視線がページ上に固定され、これが重要になります。ページを下にスクロールすると、明確で簡潔な内容が表示されます。興味深いものを作成するには、適切なデザインを施し、グリッドに配置する必要があります。

検索フォームを忘れないでください

クリエイティブなグリッド ページ ボックス レイアウトに興奮して熱狂しているときは、Web サイト全体のページ レイアウトがボックス内に収まっていることを確認する必要があります。グリッド構造により、訪問者の視線がページ上に固定され、これが重要になります。ページを下にスクロールすると、明確で簡潔な内容が表示されます。興味深いものを作成するには、適切なデザインを施し、グリッドに配置する必要があります。

ナビゲーションを見つけやすく読みやすくする

ウェブサイトを設計していて、ナビゲーションがユーザーをポイントAからポイントBに誘導することになっている場合、どのようにしますか? 従来のリンクの代わりに、奇妙なテキストや画像を使用しますか(たとえば、ホームページに家のロゴを使用しますが、円の中に稲妻を入れるのは良いアイデアではありません) 。訪問者がウェブサイトを簡単にナビゲートできるように、ナビゲーションを読みやすく保つようにしてください。

連絡先情報に「メール送信」リンクを使用しないでください

私たちの多くは (私も含めて)、リンク、特に連絡先リンクをクリックする前に、リンクの上にマウスを移動してブラウザのステータス バーを確認します。これは、電子メール プログラムが電子メール アドレスに直接開くため、良いアイデアだと考える人もいます。しかし、これは良いUX の実践ではないと言わざるを得ません。あなたの電子メール アドレスを取得し、連絡フォームを追加する連絡先ページを作成します。ユーザーはそれに感謝し、実際にもっと頻繁にメールを送信するようになります。

可能な限り、 WebテストにはUXアプリケーションを使用する

内容が不明な場合は、さまざまな形式でデータを記録しておくとよいでしょう。 Google アナリティクスは、ウェブサイト訪問者がどのページからアクセスしたか、またサイトにどのくらい滞在したかを確認するのに最適な方法です。また、 Feedback Army のようなサイトを使用して、 ユーザーがサイトをどのように閲覧し、使用しているかをテストすることもできます。これらの Web サイト レコードを把握しておくと、サイトを最大限に活用して、必要なユーザーに適切なコンテンツを表示できるようになります。

サイトのサイドバーのウィジェットを乱用しないでください

ブログで作業していて、その中に10,000 個のウィジェットがある場合、そのうちのいくつかは使用できますが、すべてを使用することはできません。ブログは寝室のようなものだと考えてください。雑然としていて整理整頓されていないと、ゲストは泊まりたがらないかもしれません。したがって、清潔に整理された状態を保つ必要があります。ブログ訪問者は（ほとんどの場合） Google の友達、 mybloglog の友達、 FriendFeed の友達、その他のさまざまなソーシャル状況を見る必要がないので、心配する必要はありません。重要なのは、他のサイトのものではなく、自分のサイトのユーザー エクスペリエンスです。

ウェブサイトがすべてのブラウザで表示されることを確認する必要があります

IE6が葬式を迎え、誰も文句を言っていないことは誰もが知っていますが、 IE7 、 IE8 、 Opera 、 Safari 、 FFなどのブラウザを使っているユーザーがまだたくさんいることを忘れないでください。 1 つまたは 2 つのハイライトでサイトがきれいに見えるからといって、訪問者が他のブラウザを使用したときに表示される乱雑なインターフェースを許容するとは限りません。 1 ～ 2 時間かけてコードを分析し、さまざまなブラウザで正しく表示されるかどうかを確認します。

ユーザーがフォームのために苦労すると想定しないでください

サイトのお問い合わせフォームは長すぎてはいけません。サインアップフォームも同様です。物事はできる限りシンプルにしましょう。フォームを 3 つの質問 (名前、メール、内容) だけに簡素化すると、以前失ったユーザーを取り戻すのに役立つ可能性があります。

各ページの構造が一貫していることを確認する

あなたがブロガーで、構造が複数のユーザーに対応できるように設計されている場合を除き、訪問者は馴染みのある一貫した構造を望んでいることを覚えておく必要があります。新しいページを読み込むときに別の場所にいるように感じた場合、ユーザーはすぐに戻るボタンを押します。

印刷コンテンツにはスタイルシートを使用することを忘れないでください

これはブログ/コンテンツ サイト用です。訪問者がコンテンツを印刷する場合（信じてください、特に年配の旅行者の多くはまだそうしています）、レビューやすべての広告を含むページ全体を印刷するように依頼するべきではありません。これは非常に面倒で不必要です。 「 ブログの質が向上すればフリーランサーのビジネスも向上する」 という記事を読んだことがあるなら、印刷されたテキストは白黒がなく、画像やコメント、ツールバーもなく、非常にきれいで明瞭であることが分かるでしょう。コンテンツはタイポグラフィの問題なので、目立つようにしてください。

コンテンツがスキャンしやすいレイアウトになっており、視野角に合っていることを確認してください。

一般的に言えば、人々の集中力は長くは続きません。したがって、セクション見出し ( h2 、 H3 、またはH4タグ) を使用して記事を区切り、訪問者が記事をすばやくスキャンして、関心のあるコンテンツを見つけられるようにします。コンテンツを作成するときは、ユーザーが20行以上の段落を読むと視覚的に疲れる可能性があることにも留意する必要があります。そのため、通常は 5 行から 10行が適切です。

いっぱい詰め込まないでください。

簡素化する。混雑した狭い空間では、ユーザーは重要なものに目を集中できず、逆の効果が生じます。確かに、情報はたくさんありますが、その情報を半分に折る必要はないですよね？デザインとコンテンツに息吹を与えるようにしてください。ユーザーはあなたに感謝するでしょう。

常にパンくずリストを使用する

パンくずリストは、ユーザーに現在地と次に進むべき場所を伝えるためのものです。ユーザーがサイトのサブページにアクセスしている場合、パンくずナビゲーションは次のようになります (ホーム>サブページ タイトル> )。これにより、ユーザーは自分がどのページにいるのか、また必要に応じてレベルを戻す方法が正確にわかります。

焦点を移すために色のコントラストを使うことを忘れないでください

大きなタイトルとセクション タイトルを使用する場合は、訪問者に何が重要であるかを最初に知らせるために、さまざまな色合いを試してください (例: タイトルの場合は # c1c1c1 、サブタイトルの場合は # 464646 )。色とコントラストの変化によって、ユーザーが次にどこへ進むべきかわかるかどうかが決まります。

サイトに壊れたリンクや画像がないことを確認してください

古い記事に壊れたリンクや画像がないか確認することが重要です。検索エンジンからサイトを訪れる訪問者がいる場合、壊れたリンクがあると、訪問者は次の 2 つのいずれかを推測します。1 ) 更新されていない古いサイトである、または2 ) コンテンツの価値を十分に維持していないため、訪問者は他のサイトに移動します。 WordPressユーザーの場合は、 Broken Link Checkerというプラグインがあります。また、iwebtool にアクセスして、 無料の壊れたリンク チェッカー(1 時間あたり最大 5 件のリクエスト) を使用することもできます。

フッターとその役割を軽視しないでください

そのため、ユーザーがページの一番下までスクロールすると、Web サイトの著作権に関する 1 行のテキストが表示されますが、これは非常に退屈なものです。人気の投稿、検索ボックス、メール購読などの追加コンテンツを追加して、フッターを華やかにしてみてはいかがでしょうか。ウェブサイトの魅力的なフッターをデザインする方法についてのアイデアが必要な場合は、 Footer Fetishをチェックしてください。他のものと混同しないでください。

設計プロセスではワイヤーフレームをできるだけ多く使用する

紙の上でワイヤーフレームを使用すると、最も重要な要素とその表示方法を視覚化できます。こうすることで、デザインを崩すことを心配することなく、さまざまなレイアウトを自由に試すこともできます。ワイヤーフレームのインスピレーションを得るために、私はI love Wireframesを参考にしました。ワイヤーフレームは素晴らしいです。

検索エンジンではなく読者のためにコンテンツを書く

検索エンジンのためではなく、読者のために書くべきです。キーワードは過去には効果があったかもしれませんが（そしておそらく現在でも効果があります）、実際の訪問者があなたのページに来て、 3段落以内に「デザイナー」という単語を100回見た場合、戻るボタンを押すと思いますか、それとも読み続けると思いますか?間違いなく、「戻る」をクリックする可能性は非常に高くなります。

書く前に声に出して読んでみてください。自然で滑らかでないと感じたら、滑らかになるまで書き直してください。人々があなたのコンテンツを読むとき、実際の人間が自分と話しているように感じることを期待しているので、それが実際にそうなるようにしてください。