これらの人気のあるWebデザインのトレンドを使用する場合は注意が必要です

ほとんどの文化的製品と同様に、Webデザインには独自の時代精神があります。 毎年、人気のあるデザインコンポーネント、機能、トレンドの新しい作物が見られます。 特に新しい技術開発のペースが速いと、態度は急速に変化します。

いくつかのウェブデザインのトレンドは、時の試練に耐えられません。 過去にユーザビリティを妨げたり、サイト訪問者を思いとどまらせたりする傾向を示す必要があります。 設計者は、彼らが従事しようとしているまさにその人々を疎外する可能性のある以下の傾向を採用することに注意する必要があります。

十分なネガティブスペースがありません

ネガティブスペースは、使いやすさにおいて重要ですが、多くの場合、歌われていない部分です。 ホワイトスペースと呼ばれることもあります。これは、画像またはデザイン要素の周囲およびその間のスペースです。 アートのように、ウェブデザインのネガティブスペースは芸術的要素として独自の力を持っています。 残念ながら、ネガティブスペースを無駄なスペースと見なす人もいますが、美術館の壁がアートの間にスペースを必要とするように、ウェブデザインのブロックもそうです。 ネガティブスペースを使用すると、サイトのコンテンツが読みやすく、見つけやすくなります。

Webデザイナーは、「家を出る前に、鏡を見て、アクセサリを1つ取り外す」という、ココシャネルのアドバイスに耳を傾けるのがよいでしょう。 Webデザイナーは、アセットを追加する前に、CSS要素とHTML要素がデフォルトで空のスペースを持たない方法を検討する必要があります。

この問題を、優れたWebサイトに必要な高品質のコンテンツと組み合わせると、問題は明らかです。アクセスしすぎたWebサイトで、見る場所が多すぎます。 各要素の周囲に十分なスペースがある場合、ユーザーにはコンテンツが表示され、CTAが目立つようになります。

混雑したサイトには、簡単な修正がいくつかあります。 まず、垂直スクロールの無限の容量を使用します。 上部のナビゲーションが明確な場合、折り目の下に他の二次要素があることは完全に許容されます。 サイトが最初はナビゲートしやすい場合、ユーザーはさらに情報を探してもかまいません。 次に（タイポグラフィについては後で詳しく説明します）、フォントサイズに注意してください。 大きすぎるとスペースを取り、上司からのメールのように積極的に読むことができます。 それはバランスです–圧倒されないが、それでも注目を集めているフォントを見つけてください。

ハンバーガーメニュー

過去数年間で最も顕著なウェブデザインのトレンドの1つは、ハンバーガーメニューです。 この傾向は、モバイルデバイスでWebサイトにアクセスするユーザーが急増したことも一因です。 ハンバーガーメニューのポイントは、ページのメインスペースが乱雑にならないように、メニューナビゲーションを非表示にすることです。 ユーザーはアイコンを認識し、通常はフルメニューを見つけるのに問題はありません。 それは良い考えです–人々がそこに着く前に彼らが欲しいものを知っているなら。

この問題は、サイトがコンテンツを有機的に発見するユーザーに依存している場合に発生します。 Luke Wrobleskiが言うように、「明らかなことは常に勝ちます」。 そしてそれは明らかです–より高い視認性はより高い使用法を意味します。 Facebookの例を考えてみましょう。 ソーシャルメディアのアウトレットがiOSアプリの上部のハンバーガーメニューから下部のタブバーに移動したとき、ユーザーの満足度、収益、速度（およびその認識）の向上と同様に、ユーザーの関与は屋根を通り抜けました。

ユーザーが自然に発見する他のコンテンツの量を制限することは危険なゲームです。 カテゴリを非表示にすることで、訪問者はすぐにオプションにさらされることはありません。

ハンバーガーメニューは、企業がユーザーの商品への露出に依存しているeコマースサイトに特に損害を与えます。 ユーザーがメニューを開く必要がある場合、ユーザーはあなたのビジネスの最も明白で重要な側面を見逃す可能性があります。 また、RSSフィードを表示する読者にビジネスが依存している場合は、ハンバーガーメニューを完全に避ける必要があります。 それらは、読者が関連トピックやその他の現在のヘッドラインを見ることができることに依存しているニュースサイトに悪影響を及ぼします。

フロントページカルーセル

現在、フロントページのカルーセルはどこにでもあり、中小企業のページから大企業までのサイトで見ることができます。 デザイナーは、視覚的な経済性を生み出し、1つの機能を通じて多くの情報を提供するため、カルーセルに惹かれる可能性があります。

あなたの会社がまだその名前を公表しようとしている場合は、カルーセルを慎重に使用してください。 カルーセルは、ユーザーがページを見つけるのをより困難にし、検索エンジン最適化（SEO）に悪影響を与える可能性があります。これは、通常、カルーセルはページの本文のコンテンツが少ないことを意味するためです。 ページ上のテキストが少ないということは、Googleが見つけるメタ情報が少ないことを意味します。

ただし、ページ自体にテキストを追加することをポイントにするなどの回避策はありますが、これは視覚的な経済性のためにカルーセルを使用するポイントを損ないます。 カルーセルは、サイトで大きなアクセシビリティの問題を引き起こす可能性もあります。 それらはロード時間を遅くすることで有名であり、多くの場合JavaScriptを使用するため、パフォーマンスの問題が発生する可能性があります。

カルーセルはサイトへのアクセスを困難にするだけでなく、サイトにアクセスできる訪問者をうまく引き付けることができません。 2013年の調査によると、カルーセルが自動転送か手動転送かに応じて、サイト訪問者の約1％がカルーセルをクリックしました。

また、Wroblewskiがハンバーガーメニューについて提供しているアドバイスを考慮すると、問題はカルーセルでも同じです。それらは明らかではありません。 上記の調査では、クリックした1％の83％が最初の画像をクリックしました。 これは、ユーザーを引き付けることを望んでいる他の4つの画像にとってどのような意味がありますか？ 彼らはマイレージを獲得しておらず、エンゲージメントを促進するためにほとんど何もしていません。

Wroblewskiは、実際に機能する例として、AmazonでのPJMcCormickのカルーセル設計を使用しています。 画像はセグメントに分割され、ユーザーが特定のセクションにカーソルを合わせると、カルーセル内の画像になり、ユーザーがそこをクリックして探しているものを見つけることができることがわかります。

ポップアップ

ドロップダウンメニューは、最も熟練したユーザーでも操作が複雑になる可能性があり、その複雑さを小さな画面に追加すると、ナビゲーションにとって悪夢になります。 一方、ポップアップメニューコントロールには、ユーザーの鋭敏さやペースに関係なく簡単にスクロールできるメニューオプションのリストが含まれています。 AppleのiPhoneは、この良い例です–ドラッグ、フリック、またはナッジ–大きなターゲットと寛容なオプションにより、制御が簡単になります。

うまくいけば、ポップアップは複合入力（日付、高さ、重みの入力）に最適であり、プロセスがはるかに合理化されます。

たとえば、日付を入力するための3つのオプション（日、月、年）の代わりに、1つの日付フィールドで一連のポップアップメニューを開いて、ユーザーが一度に3つのリストをスクロールして正しい日付を入力できるようにすることができます。 この簡単な修正により、ユーザーの焦りとともに入力時間を短縮できます。

無限スクロールとフッターコンテンツの組み合わせ

無限スクロールは便利なデザインツールです。 コンテンツを際限なく簡単に読み込むことで、満足のいくユーザーエクスペリエンスを実現できます。 Pinterestのようなサイトは、優れた効果を発揮するために無限スクロールを使用しており、それを流行に保つことに部分的に責任があります。 垂直スクロールは特定のアプリにとって大きな成功を収めていますが、水平スクロールは依然として多くのユーザーを混乱させています。 彼らはしばしばそれがオプションであることにさえ気づいていません。 コンテンツが終了しているように見える場合は、同様に困惑します。

無限スクロールは、ユーザーがアクセスしたいコンテンツを含むフッターがサイトにある場合に問題になります。 ユーザーは上下にスクロールし、フッターに追いつくことができなくなります。 精通したモバイルユーザーはこれを理解しようとしていますが、それが彼らを苛立たせている場合、彼らは試みないかもしれません。 明白であることに加えて、ナビゲーションは簡単でなければなりません。

読み込みが遅い画面

地滑りによってユーザーがサイトを放棄する最大の理由は、読み込み時間が遅いことです。 調査では、ユーザーの約半数が、ページが読み込まれるまで10秒以上待たないと答えています。 より高速なインターネット接続とデバイスに慣れてきたため、人々はページがほぼ瞬時に読み込まれることを期待しています。 画面の読み込みに時間がかかるほど、ユーザーが離れる可能性が高くなります。

ユーザーはこれについて責任を負わないでください。テクノロジーは私たちの経験を十分に合理化して、それが期待されるようになりました。 読み込み時間を遅らせる可能性のある複雑なコンテンツのバランスをとるときは、誰にも見られない場合に問題になるかどうかを検討してください。 モバイルユーザーは、ウェブサイトをチェックしている間、カフェラテを飲みながら座っているわけではありません。彼らは移動中であり、モバイルエクスペリエンスが同じようにペースが速いことを期待しています。

不必要に複雑なタイポグラフィ

現在利用可能なさまざまな書体により、Webデザイナーは、1ページに多数のフォントを使用したくなるかもしれません。 1つのドキュメントで2つまたは3つを超えるフォントを使用してはならないという、よく引用されるタイポグラフィのガイドラインがあります。

複数のフォントを正当化する状況があるかもしれませんが、通常は、情報のクリーンで明確な配信に焦点を当てた方がよいでしょう。 Wroblewskiは、TimBrownのタイポグラフィのベストプラクティスに関するメモを提供しています。 タイポグラフィの最も重要な要素の1つはバランスです。サイズ、リーディング、測定のバランスにより、読みやすさと美的魅力が向上します。 読まない場合のフォントのポイントは何ですか？ デザインの明確さを曖昧にすることは直感に反し、読者を増やすことはありません。

1つまたは2つのフォントを選択すると、統一された外観が作成され、ユーザーがブランドをより適切に識別できるようになります。 目標はユーザーを引き付けることであることを忘れないでください。 サイズが大きすぎる複数のフォントは、サイトを快適に読みにくくします。 テキストが判読できない場合、誰もそのページに長時間留まることはありません。

フローティング要素

フローティング要素はユーザーの注意を引くための優れた方法ですが、タイミングが不適切な場合、ページの一部をブロックしてユーザーの見たいものから注意をそらすことにより、ユーザーを遠ざける可能性があります。 それはすべて、彼らがサイトに関与しないことを保証します。 フローティング要素は、小さな画面でサイトにアクセスしようとしているモバイルユーザーにとって特に苛立たしいものです。

さらに、フローティング要素は意図したとおりに機能しないことが多く、閉じて重要なページ機能の上にフローティングしている場合でも開きます。 ユーザーエクスペリエンスが複雑になるほど、ユーザーがサイトを使い続ける可能性は低くなります。

視差スクロール

視差スクロールは必ずしも悪いデザインの選択ではなく、多くのマーケティングキャンペーンで大きな効果を発揮するために使用されてきました。 これは、サイトが差別化するための新しいオプションを提供し、最近人気が高まっています。

いくつかの欠点があります。 カルーセルと同様に、検索エンジンがクロールするコンテンツが少ないため、SEOに悪影響を与える可能性があります。 視差スクロールは、モバイルデバイスからアクセスできる必要があるサイトにとっても適切な設計上の選択ではありません。 JavaScriptと多くのグラフィックスに依存しているため、ページの読み込みが非常に遅くなり、ページが読み込まれる前にユーザーが焦って離れる可能性が高くなります。

トレンドを最大限に活用する

これらすべてのトレンドに適したアプリケーションは間違いなくありますが、Webデザイナーは、それらを使用することを決定する前に慎重に検討する必要があります。 デザイナーにとって最良のルールは、フラッシュインザパンの流行よりも機能性とユーザーエクスペリエンスを重視することです。 ルーク・ウロブレフスキーのアドバイスをどんなデザインでも念頭に置いて、明白にしてください。 どんなに良いコンテンツであっても、隠されていれば役に立たない。