効果的なWebデザインの10の原則

視覚的なデザインではなく、 使いやすさと実用性がウェブサイトの成否を決定します。 マウスをクリックしてすべての決定を下すのはユーザーだけなので、成功して収益性の高いWebデザインを作成するための標準的なアプローチの1つは「ユーザー中心のデザイン」です。 最終的に、ユーザーがこの機能またはその機能の使用方法を知らない場合、簡単に無視できます。



この記事では、実装の詳細（たとえば、検索ボックスを配置する場所）については考慮せず、効果的なWebデザインを作成するための主要な原則、ヒューリスティックな方法、アプローチに焦点を当てます。提案された情報を知覚するプロセス。





まず、原則を正しく使用するためには、ユーザーがWebサイトをどのように操作するか、ユーザーがどう思うか、そして行動モデルが何であるかを知る必要があります。

ユーザーはどう思いますか？

原則として、ウェブサイトでのユーザーの行動は、たとえば店内での行動とそれほど変わりません。 ユーザーはそれぞれの新しいページをちらりと見て、テキストのパッセージを見て、注意を引いた最初のリンクをクリックします。または、少なくともリモートで探しているリンクに似ています。 実際、彼らはページのほとんどを見ることさえしません。



多くのユーザーは、何か面白い（または有用な）「クリック可能な」ものを探しています。 適切な「候補」が目を引くと、ユーザーはすぐにクリックしてリンクをたどります。 結果が期待を満たしていない場合、ユーザーは「戻る」をクリックして検索を続行します。



ユーザーは、情報の質と信ver性を高く評価しています。 ページに高品質の素材が含まれている場合、ユーザーはページ上の広告の存在とそのデザインに妥協する準備ができています。 これは、デザインがあまり良くないが、コンテンツが質の高いサイトが多くのトラフィックを獲得する理由の1つです。 コンテンツは、それを取り巻くデザインよりもはるかに重要です。



ユーザーは読んでおらず、「スキャン」しています。 Webページを分析するとき、ユーザーはページ上のコンテンツに沿ってそれらを導く固定ポイント、「アンカー」を探します。





ユーザーは読まずにスキャンします。 文の中央にあるぎくしゃくしたホットスポットに注意してください。 これはスキャンプロセスの特徴です。



ユーザーは短気です。 非常に単純な原則：Webサイトがユーザーの期待に応えられない場合、デザインはその機能を果たさず、会社はお金を失います。 ナビゲーションの直感性が低いほど、ユーザーがWebサイトを離れて代替手段を見つけたいという欲求が強くなります。



ユーザーは最適な決定を下しません。 ユーザーは、必要な情報を見つけるための最速の方法を探していません。 また、Webサイトを順番にクロールせず、あるセクションから別のセクションに移動します。 実際、彼らは彼らの意見では、最初の最も適切なオプションを選択します。 目的の目標に導くことができるリンクを見つけたら、すぐにリンクをクリックする可能性があります。







両方の画像は、ウェブ上で順次スキャンが機能しないことを示しています。



ユーザーは直感的に行動します。 多くの場合、ユーザーはデザイナーが提供したものを注意深く読むのではなく、単に閲覧するだけです。 Steve Krugによると、主な理由はユーザーが気にしないということです。 「機能するものが見つかったら、それを使用します。 これがどのように機能するかに興味はありません。主なことは、正しく機能することです。 あなたがメッセージボードとして行ったことを視聴者が見たら、質の高いメッセージボードデザインを作成します。



ユーザーが制御したい。 ユーザーがブラウザを制御し、サイトを介したデータの正しい転送に依存することが重要です。 たとえば、ポップアップウィンドウが突然開くことを望まず、戻るボタンをクリックして前のページに戻ることができるようにします。 ここから、最も重要なプラクティスの1つに従う必要があります 。 リンクを新しいブラウザウィンドウで開かないでください 。

1.ユーザーに考えさせない

Circleの使いやすさに関する最初の法則では、ウェブページは明白なはずです 。 デザインを作成するときの主なタスク- 質問を取り除くには、ユーザーは長所、短所、代替案を考慮して、すべての意思決定を意識的に行う必要があります。



サイトのナビゲーションと構造が直観的でない場合、質問の数が発生し、システムがどのように機能し、ポイントAからポイントBに到達する方法をユーザーが理解することがより困難になります。明確な構造、正しい視覚的なヒント、および容易に認識可能なリンクは、ユーザーが目標に到達するのに役立ちます。







例を見てみましょう。 Beyondis.co.ukは 、「チャネルを超え、製品を超え、流通を超えている」と主張しています。 これはどういう意味ですか？ ユーザーは「 Fパターン」に従ってWebサイトを学習する傾向があるため、上記のステートメントは、ユーザーがサイトをダウンロードしたときに最初に表示される要素になります。



設計はシンプルで直感的ですが、ユーザーはこのページが何であるかを理解するために答えを探す必要があります。 これは、 不要な質問の典型的な例です。 設計者のタスクは、質問の数をゼロにする傾向があることです。 視覚的な説明は右側にあります。 両方のブロックを交換するだけでも、使いやすさを高めることができます。







ExpressionEngineは、Beyondisと同じ構造を使用しますが、不要な質問を避けます。 さらに、このスローガンには独自の機能があり、ユーザーに選択を促します。サービスを試すか、無料版をダウンロードします。



認知的負荷を減らすことで、訪問者によるアイデアの認識を簡素化します。 これを達成したら、システムの有用性と、ユーザーがシステムからどのように利益を得ることができるかを説明できます。 理解できない場合、人々はあなたのウェブサイトを使用しません。

2.ユーザーの忍耐力をテストしない

訪問者にサービスを提供する各プロジェクトで、ユーザー要件を最小限に抑えるようにしてください。 ユーザーがサービスを試すために必要なアクションが少ないほど、カジュアルな訪問者が実際に実際にサービスを試す可能性が高くなります。 初めてサイトを訪れた人は、長いフォームに記入して、まったく使用しないアカウントを作成するのではなく、サービスを試してみたいと思います。 ユーザーにサイト内をさまよい、個人データを「引き出す」ことなくサービスを使用する機会を与えます。



37Signalsチームの開発者の1人であるRyan Singer氏によると 、ユーザーは、サービスの実際の動作を確認した後 、電子メールアドレスを尋ねると喜んで提供します。 言い換えれば、ユーザーは自分のメールを「見返りに」受け取ることを理解します。







このアプローチの素晴らしい例は、 Stikkitです。 登録には、ほとんど何も必要ありません-それは非常に便利で簡単です。 そして、それはまさにあなたがあなたのサイトでユーザーに感じてほしい方法です。







ダニは登録時にさらに情報が必要です。 ただし、登録自体に必要な時間は30秒未満です。 フォームは水平に配置されているため、ユーザーはページをスクロールする必要さえありません。



理想的には、すべての障壁と障壁を削除し 、最初に登録する必要はありません。 登録手順だけで、潜在的なユーザーの数を減らすことができます。

3.ユーザーの注意を集中させる

Webサイトに静的コンテンツと動的コンテンツの両方が含まれる場合、ユーザーインターフェイスの一部の側面は他の側面よりも注目を集めます。 明らかに、写真はテキストよりもキャッチーです-太字の文章が通常の文章よりも目立つように。



人間の目は複雑な非線形デバイスであり、Webユーザーは境界、パターン、動きを即座に判断できます。 したがって、ビデオに基づいた広告や動いているオブジェクトを含む広告は、非常に迷惑で気を散らすものですが、マーケティング側からはその機能を実行します。ユーザーの注意を引き付けます。







Humanized.comは、フォーカスの原則を完全に活用しています。 ユーザーにすぐに見える唯一の要素は「無料」という言葉で、すぐに引き付けられますが、まったく情報がありません。 細いヒントは、ユーザーに「無料」製品の詳細を知るのに十分な情報を提供します。



ユーザーをサイトの特定のオブジェクトに（視覚要素を正しく使用して）集中させると、ユーザーはこれを行う方法をあまり考えなくても、ポイントAからポイントBに移動することができます。 訪問者が得る質問が少なければ少ないほど 、彼らはより良くなり、ウェブサイトが代表する会社をより信頼します。 言い換えれば、ユーザーが自分の行動の意味について考える必要が少ないほど、サイトの印象が良くなります。これがユーザビリティの主な原則です。

4.最も重要なことを示すよう努める

現代のWebデザインは、「ステップ」（1-2-3-readyに似ています！）、巨大なボタン、エフェクトのヒープなどを使用するアプローチに対して批判されることがよくあります。 しかし、設計の観点からすると、そのような要素はそれほど悪くありません。 それどころか、そのような要素は非常に効果的です 、なぜなら それらは、サイトの各部間のユーザーの移行を促進します。







Dibusoft.comは、快適なデザインと明確な構造を組み合わせています。 このサイトには、肉眼で見える9つの主要な要素があります。 おそらく色は薄すぎますが。



使用可能な機能をユーザーに知らせることは、設計を成功させるための基本原則です。 これをどのように達成するかは問題ではありません。 重要なことは、コンテンツがどれほど簡単に認識され、ユーザーがシステムを簡単に操作できるかです。

5.効率的に書く

ウェブはプリントとは異なります。 ユーザーの好みやブラウザを介した表示方法にライティングスタイルを適合させる必要があります。 訪問者はプロモーションテキストを読みません。 画像がなく、 太字や斜体の文がない大きな段落はスキップされます。 誇張は無視されます。



ビジネスについて話す。 「かわいい」または機知に富んだ名前、内部で使用される特定の名前、なじみのない専門用語は避けてください。 たとえば、サービスについて説明し、ユーザーに登録してもらいたい場合は、「今すぐ開始」よりも「登録」の方が優れており、「サービスを試す」よりも優れています。







Eleven2.comはポイントにまっすぐに行きます。 魅力的なスピーチや過大評価された発言はありません。 代わりに、彼らはすぐに価格を示します-訪問者が必要とするすべて。



効果的なテキストの書き込みに最適なソリューション：

• 短く簡潔な表現を使用してください（できるだけ早くポイントに到達するため）。
• 「スキャンされた」マークアップを使用します（コンテンツを分類し、マルチレベルの見出し、視覚要素、およびテキストブロックのフローを中断するリストを使用します）。
• シンプルで客観的な言語を使用します（プロモーションテキストは広告のように聞こえてはなりません。ユーザーにサービスを使用するか、ウェブサイトにとどまる理由を合理的かつ客観的に説明します）。

6.単純化のために努力する

「シンプルに保つ」（KIS）の原則は、Webサイトの設計の主な目標です。 ユーザーがデザインを楽しむためだけにサイトにアクセスすることはほとんどありません。 さらに、ほとんどの場合、彼らは設計にもかかわらず、適切な情報を探しています。 単純化のために努力し、複雑にしないでください。







Crcbusのデザインはシンプルです。 このサイトが何であるか理解できないかもしれません、なぜなら イタリア語ですが、ナビゲーションバー、タイトル、コンテンツ、著作権の行を正確に定義します。 アイコンでさえ、情報の一部を伝えます。 マウスでそれらにカーソルを合わせると、追加情報が表示されます。



訪問者の観点から見ると、広告ユニットや追加の「トピック」リンクのない最も一般的なテキストデザインが最適です。 これは、Webページに印刷可能なバージョンが必要なもう1つの理由です。このような詳細により、Webサイトのユーザーエクスペリエンスが向上します。







フィンチは、サイトに関する情報を明確に表示し、ユーザーに不必要なコンテンツで過負荷をかけずに選択できるリンクを提供します。

7.空きスペースを恐れないでください

実際、空きスペースの機能を過大評価することは非常に困難です。 それは訪問者の認知的負荷を減らすのに役立つだけでなく、画面上の情報を知覚することも可能にします。 新しいビジターがデザインを研究するとき、彼/彼女が最初に行うことは、ページをスキャンし、コンテンツ領域とわかりやすい情報に分割することです。



複雑な構造は、読み取り、スキャン、分析、および作業が困難です。 目に見える線または空のスペースで2つの設計要素を分離するという選択に直面している場合は、2番目の要素を優先して選択することをお勧めします。 階層構造は複雑さを軽減します （Simonの法則）：ユーザーに視覚的な階層を提示できれば、それだけコンテンツを認識しやすくなります。







空きスペースが良いです。 Cameron.ioは、メインデザイン要素として空白を使用します。 その結果、簡単にスキャンできるマークアップが得られ、コンテンツを十分な優勢なレベルに引き上げることができます。

8.効果的なコンテンツコミュニケーション

アーロンマーカスは 、情報の効果的な視覚的表現に関する彼の作品で、いわゆる 「ビジュアル言語」-ユーザーが画面に表示するコンテンツ。

• 組織：ユーザーに明確で一貫した構造を提供します。 論理ブロックの順序と配置、それらの間の関係、これらのブロック間の移行の可能性は、組織の重要な側面です。 同じルールがすべての要素に適用されます。
• 節約：できるだけ少ない視覚要素でできる限りのことをしてください。 4つの主なポイント：シンプルさ、明快さ、独特さ、表現力。 簡易性とは、効果的なコミュニケーションに最も重要な要素のみを含めることを意味します。 明快さ ：すべてのコンポーネントは、これらの要素の目的で訪問者を混乱させない設計でなければなりません。 特徴 ：要素の最も重要な特性は簡単に目立つはずです。 表現力 ：最も重要な要素は視覚的に容易に知覚されるべきです。
• 相互作用：外観は訪問者の身体的能力に対応する必要があります。 サイトは明確で読みやすく、適切なタイポグラフィ、適切な色などを使用する必要があります。 3つの異なるサイズの3つ以下のフォント 、およびテキストの行ごとに18ワードまたは50〜80文字を使用します。

9.伝統は私たちの友達です

ウェブサイト要素の伝統的なデザインは、退屈なデザインを意味するものではありません。 実際、 伝統は非常に便利です 。 学習曲線が減り、何がどのように機能するかを把握する必要がなくなります。 すべてのWebサイトがRSSフィードをさまざまな方法で視覚化すると、使い勝手が悪くなります。 デザインの伝統は、私たちの日常生活の伝統とそれほど変わりません。データの整理（フォルダー）や購入（製品の場所）に使用する方法です。



従来のアプローチを使用すると、ユーザーの信頼、つまりユーザーに対する信頼を簡単に獲得できます。 ユーザーの期待に従う -サイトのナビゲーション、テキスト構造、検索場所などに期待することを理解します。 （ Nielsen Usability Alterboxを参照）



Steve Krugは、あなたのアイデアが本当に良いと確信している場合にのみ、新しい何かを発明することを提案します 。そうでなければ、従来のソリューションに固執する方が良いです。

10.早期にテストし、頻繁にテストする

この原則（TETO、「早期テスト、頻繁にテスト」）は、すべてのWebプロジェクトに適用する必要があります。 ユーザビリティテストでは、特定の設計に関する最大の問題がすべて示されることがよくあります。



多くの場合、テストは遅すぎるか、まれにしか実行されません。 テストが必要なものではない場合があります。 ほとんどの設計決定はローカルで行われることを理解する必要があります。 つまり、あるマークアップが別のマークアップよりも優れているかどうかを確認することはできません。決定は、どの位置（初期要件、投資家の期待、予算など）を見るかに大きく依存するためです。



いくつかの重要なポイント：

• Steve Krugは、 1人のユーザーでのテストは、一般にユーザーが参加しないテストよりも100倍優れていると考えており、プロジェクトの最初に1人のユーザーでテストする方が、最後に50ユーザーでテストするよりも優れていると考えています 。 ベームの第一法則によると、エラーは設計と建設の初期段階で最も頻繁に発生します。 後で修正すればするほど、プロジェクトのコストは高くなります。
• テストは反復的なプロセスです。 これは次のように機能します。何かを作成し、テストし、修正し、再度テストします。 おそらく、最初のテストで気づかなかった問題が他のエラーのごみの中に見つかるでしょう。
• ユーザビリティテストは常に有用な結果をもたらします。 現在の問題またはそれらの不在が表示されます。 いずれにせよ、これはプロジェクトに役立ちます。
• ワインバーグの法則によれば、 開発者はコードをテストすることはできません 。 これはデザイナーにも当てはまります。 サイトで数週間作業を続けた後、目がぼやけてしまい、プロジェクトを見直すことができなくなりました。 内部からどのように構築され、実際にどのように機能するかを知っています-独立したテスターとユーザーはこの知識を持っていません。