ホームページ » ウェブデザイン » 11一般的なWebデザインの間違い(曖昧さ)

    11一般的なWebデザインの間違い(曖昧さ)

    インターネット上にはたくさんのウェブサイトがあり、何百、あるいはおそらく何千もの日が作られています。ここで熟考することは非常に興味深いことです - 良いWebサイトの要素は何ですか?

    Webサイトを構築するのは大変なことですが、本当の課題はそれを使えるようにすることです。問題は、ほとんどのWebデザイナーが、Webサイトが自分自身のために作成されたのではなく、ユーザーのニーズを解決するために作成されたものであることを忘れていることです。彼らは実用性とユーザビリティよりも創造性を優先します。.

    この記事では、ハイライトしたい Web開発者やデザイナーが作成する11のWebデザインの不備 そして、これらの間違いを簡単に回避できる方法についてのいくつかの提案.

    1.検索ボックスはどこにありますか?

    Webは情報のアーカイブのようなものです。企業のWebサイトであろうと、単なるブログであろうと、検索ボックスは不可欠です。訪問者は、検索ボックスを使用して、Webサイト内に隠されているものを探している可能性があります。.

    提案:Googleカスタム検索 始めるためのきちんとした、シンプルで効果的な方法です。それは訪問者が効率的な方法であなたのサイトを検索することを可能にします。コントロールパネルからHTMLコードをコピーしてあなたのウェブサイトに貼り付けるだけで、あなたのウェブサイトに検索機能が追加されました。.

    これはあなたのサイトにもGoogleの検索エンジンを表示するための簡単なフォームコードです。あなたがしなければならないのはあなたのウェブサイトの名前にサイト名を変更することだけです。さらに、送信値を好きなものに変更できます。.

     

    もっと: 聖なる検索ボックスの設計:例とベストプラクティス- この記事では、検索ボックスを設計するためのガイドラインについて詳しく説明します。.

    読みやすさと読みやすさ.

    これはWebデザインの重要な要素です。もちろん、優れたインターフェース設計はユーザーの注意を引きますが、ユーザーは自分が望む情報を把握できるようにテキストを読む必要があります。一部のWebサイトでは、非常に奇妙なフォントスタイルとサイズを使用しています.

    提案:幸いなことに、あなたのウェブサイトでのユーザーの読書体験を向上させるためにあなたができる簡単な方法があります。.

    1. ほとんどの主要サイトの配色を比較して、色によって読みやすさがどのように向上するかに注目してください。さまざまな配色を試すのに適した場所は Adobe Kuler.
    2. 使う サンセリフ書体 それはウェブ上で簡単に読むことを可能にするので.

    もっと: これは読みやすさを向上させる上であなたに多くのヒントを与えるでしょう良い記事です。 - 読みやすさ - Webページを読みやすくする.

    3.整理されていないコンテンツレイアウト.

    Webサイトのコンテンツはトラフィックを促進するものです。. コンテンツがどのように構成されているかが、成功または失敗につながります。どうしても必要な場合を除いて、ユーザーは読むことはしませんが、情報を調べてWebページ上の関心のある箇所を選び出します。一部のデザイナーは、Webページにテキストブロックを配置して、見出し、小見出し、箇条書き、キーワード、段落などをまったく無視しています。.

    各Webページに適切なページタイトルを使用して、ユーザーが自分のいる場所を正確に把握できるようにします。 Webページに名前を付けることを忘れているデザイナーもいます.

    全体的に見て、このカテゴリで最悪の場合、不正確で、アクセスできない、重要でない、または古くなっているコンテンツがあなたのウェブサイトに置かれるでしょう。内容はウェブサイトの全体的なテーマと一致しなければならず、そして有用でなければなりません。ページが作成中の場合、なぜそれを作成するのに面倒なのでしょうか。デザイナーが本当に必要な場合、それは一時的なものであり、3週間はもはや一時的なものと見なされません.

    提案: HTMLを使用してWebサイトのコンテンツを整理し、CSSを使用してページのデザインを作成します。.

    1. 余白を使用して、テキストと画像の間に十分な空白を作成します.
    2. 更新して一貫性を保つ. 更新の目的は、新しいコンテンツを追加するだけでなく、過去の間違いを見つけて修正することです。. ヤコブ・ニールセン あなたが雇うことを示唆している ウェブ “庭師”.

    あなたのチームの一員としてウェブ庭師を雇うための予算。ウェブサイトの変化に合わせて、雑草を根絶して花を植え直すための誰かが必要ですが、ほとんどの人はメンテナンスよりもむしろ新しいコンテンツを作成するために時間を費やすことになります。実際には、多くの古いページは関連性を保ち、新しいページにリンクする必要があるため、メンテナンスはWebサイトのコンテンツを拡張するための安価な方法です。もちろん、いくつかのページはそれらの有効期限後にサーバーから完全に削除される方がましだ。 - ヤコブ・ニールセン

    悪いナビゲーション.

    ウェブサイト内のナビゲーションはシームレスであるべきです. ユーザーは簡単に自分の道を見つけることができるはずです。 Webサイト内にナビゲーションの標準はありませんが、特に新しいWeb開発テクノロジが出現するにつれて、ナビゲーションは直感的で一貫性のあるものでなければならないことを理解することが不可欠です。.

    テキストをナビゲーションとして使用する場合は、簡潔にしてください。視覚的な比喩は再発明されるべきではありません。ハイパーリンクを使用する場合は、テキストの本文から目立つようにします。デッドリンクは、どのWebページにも配置されるべきではありません。これはユーザーの混乱を招き、時間を無駄にします。そして、さらに悪いことに、ホームページにリンクしているホームページにリンクを張っていることがあります。.

    提案:

    1. すべてのリンクにテキストによる説明を使用して、ナビゲーションを円滑にします。画像の代替テキストを入力してください。 FlashまたはJavascriptのリンクに代替のテキスト記述手法を使用する.
    2. Webサイトのテーマに合わせてナビゲーションを整理して構成します。個人のWebサイトはより創造的でありながらアクセスしやすいものにする余裕がありますが、ビジネスWebサイトにはより効率と明快さが必要です.

    ユーザーが3クリック以内に自分の欲しいものを見つけられない場合、ほとんどのユーザーはすぐにその場を離れます。.

    もっと: 効果的なWebサイトナビゲーションの実装 - この記事では、Webサイトに効果的なナビゲーションを実装するためのより多くの洞察を提供します.

    5.インターフェース設計の矛盾.

    過度の創造性はまさにそれになり得ます。過剰です! Webサイト内のWebページごとに異なるデザインを作成することによってWebサイトを作成するときに、別のレベルに持っていくデザイナーもいます。これは決してユーザーを混乱させるものではありません。そして全く迷惑です。全体的なルックアンドフィールが一貫していない場合、Webサイトがどれほど優れていて魅力的であっても、ユーザはそれに関連することができず、管理の自由度が低下します。したがって、到着したらすぐに出発.

    提案:

    1. サイトの主要なセクションへのリンクを持つすべてのページに標準の一貫したテンプレートを使用する.
    2. キーワードは簡単です。審美的にシンプルなデザインを作成すると、ユーザーはあなたのウェブサイトで混乱することはありません.

    6.不親切な画面解像度.

    私たちはあなたが水平にスクロールしなければならないウェブサイトを訪れたと確信しています。これは、現代のWebデザインでは絶対にあり得ないことです。優れたデザイナーは、ほとんどの画面サイズに合うWebサイトを開発します。ウェブサイトのための現在の最適化されたレイアウトは現在1024 x 768ピクセルです.

    提案:特に訪問者が携帯電話やネットブックからネットサーフィンをしているときなど、すべての解像度に合わせてデザインを作成することは困難であり、ほとんど不可能です。

    • あなたの統計をチェックしてください - Google Analyticsなどの分析サービスは、使用しているモニターの解像度に関する情報を提供します。これらはあなたの次の刷新を始める前にあなたが知っておくべき役に立つ情報です。.
    • W3学校ブラウザ統計 - W3スクールは、ネチズンが使用している最も人気のあるブラウザの明確なリストを提供し、それらを人気に従ってソートします。他にも興味深い重要な統計があります.

    7.複雑な登録フォーム.

    登録フォームは扱いにくい. ユーザーからどれだけの情報が必要ですか。ユーザーがあなたのウェブサイトに登録するために無数の詳細を入力しなければならなかった時代は終わりました。一部のWebサイトでは、ほとんどの登録フィールドを必須にし、数回試行した後にユーザーが不満を感じている範囲でそれらのフィールドを検証します。ユーザーが情報を取得するためにWebサイトにアクセスすることを忘れないでください。逆ではない.

    Someecardのシンプルなフォームは登録を苦痛にしません.

    提案:Web上のコミュニティ間で登録フォームを比較し、登録プロセス中にユーザーに必要な基本情報を理解します。.

    もっと: Webデザインにおける9つの一般的なユーザビリティの間違い - Smashing Magazineに関するこの記事では、他のユーザビリティの間違いの中でも特に登録フォームについて詳しく説明しています。.

    8.画像/アニメーションの不正使用.

    Webページ上の画像が多すぎると非常に効果がありません。. 画像は、ユーザーの注意を引くために使用することができますが、それは気を散らすものであるか、または単なる悪化を招くこともあります。必要に応じて、画像を使用してユーザーを説明し、ガイドします。.

    アニメーションは素晴らしく強力な媒体です。特に適切に使用されるとき。それがサイクルであるか、またはWebページ上で多すぎると、ユーザーの神経質になります。ユーザーは忍耐力、時間、またはリソースを持っていないので、デザイナーが代替案を提供する必要があります。フルページアニメーションの場合は、スキップボタンを使用することを推奨します。.

    もっと: フラッシュ:99%悪い - Flashを適切に使用してください。 Jakob Nielsenがこの記事を公開してから約10年が経ちますが、特にFlashの使い勝手の点ではなおさらです。 Webの基礎を破る ピース.

    雑然としたページ、より多くの空白.

    あまりにも多くのデザイナーが忘れている 空白 そしてその重要性彼らは彼ら自身のデザインの創造性にとても夢中になっているので、彼らはそれが彼らについてではないことを忘れています。したがって、彼らは彼らが1ページにできる限り詰め込もうとします。最終結果?忙しくて雑然として読めないページ.

    kylestandingは彼らのデザインで空白をうまく利用する.

    ここにあなたに良いアイデアを与えるためのいくつかの記事があります Webデザインにおける空白の重要性

    • 4つのホワイトスペースレイアウトの比較
    • ホワイトスペースの価値
    • 空白

    10.バックグラウンドミュージックはありません、お願いします!

    ユーザーはかっこよくしたくない、彼らは効率を求めます. そして、はい、99パーセントはあなたのウェブサイトの音楽を気にしません。デザイナーによっては、Webページごとに異なるBGMを配置することで、状況が悪化します。.

    提案:BGMを使わない, ただし、必要に応じて、コードとユーザーコントロール用のフレームを作成します。そのようにして、ウェブサイト内に新しいページがロードされるたびに変わるのではなく、音楽は連続的にループします。ユーザーはいつでも停止または一時停止できます.

    11.テスト、テスト、テスト.

    これを強調しすぎることはありません。特定のブラウザでしか表示できないWebページにアクセスしたことがある回数Web開発者はWebサイトをテストするときに種類のチェックリストを用意する必要があります。.

    • Webサイトをさまざまな環境で表示できますか?
    • デザインレイアウトはすべてのブラウザで一貫していますか?
    • Webサイトは、画像のオフ、JavaScriptのオフなど、さまざまな設定で表示できますか?

    提案:W3Cは品質保証をテストするためのツールを提供しています。チェックアウト W3C品質保証ツールボックス そして Webページ検証.

    結論:

    それを簡単にしなさい、愚かな(K.I.S.S)。それが肝心なことだ。それが簡単であれば、それは使用可能です。結局のところ、素晴らしいウェブサイトはそれをシンプルで使いやすいものにしています。あなたの宿題をしなさい、そしてそれは簡単にそして自然に来る.

    Webデザインプロジェクトでのあなたの経験は何ですか?Webデザインの間違いについて他にどのようなヒントや考えを共有したいですか??

    編集者注: この投稿はによって書かれています ブルジョウ Hongkiat.comのために。 Brujo Owohは、Webデザインと2Dアニメーションを専門とするマルチメディアシステムの学部生です。彼はフィクションを読んだり、彼の仲間との付き合いをしたり、Twitterのデザイントレンドに遅れないようにしています。 Brujoのブログにアクセス.