すべてのトレンドは価値がありますか？ Webデザイナーが犯す最も一般的なUXの間違いトップ5

「余計なものがすべて捨てられ、人間がシンプルさと集中力を発見したときに、エレガンスが達成されます。姿勢がシンプルで落ち着いたものであるほど、それはより美しくなります。」 –パウロコエーリョ

Webデザイナーの使命は、魅力的なユーザーエクスペリエンスを作成し、サイト訪問者がタスクを実行できるようにし、コンバージョンを増やすことです。 その過程で、彼らはしばしば美学にのみ焦点を合わせ、近道を取り、さまざまな一般的なデザインパターンやトレンドに依存することになります。 この場合の危険性は、人気のあるトレンドによって脇道に追いやられる可能性があり、その結果、トレンドが不適切に展開されているために、一般的なUXの間違いが発生することです。

ウェブに関して言えば、人々は物事を学びたくない、物事をやりたいのです。 ウェブ上には、デザイナーが視覚的な魅力だけに焦点を当てることを選択し、そうすることで使いやすさを犠牲にした例がたくさんあります。 彼らは、デザインを駆り立てる「すごい瞬間」は、それ自体がユーザーを引き付けるのに十分強力であると推測しました。 しかし悲しいことに、ユーザーはUIを理解するのに苦労しており、サイトの使用に真の困難を感じており、サイトのバウンス率は急上昇しています。

ケイト・ラッターが述べたように、「醜いが有用なものはかなり、しかし無意味なものに勝る」。 Webデザインパターンとトレンドを効果的に使用するための鍵は、見た目に美しいものとそれらが付加価値を与える場所との間のバランスを見つけることです。

いくつかの一般的なUXの間違いを見てみましょう。

Webデザインの一般的なUXの間違いその1：大きな固定ヘッダー

ますます背の高い粘着性のあるヘッダーがウェブサイトで見られます。 位置が固定され、かなりのスペースを占める「ブランディングブロック」とナビゲーションメニュー。 それらはブラウザウィンドウの上部（「スティッキーヘッダー」）に接着されたままであり、コンテンツがその下をスクロールするときにコンテンツをブロックすることがよくあります。

大手ブランドのWebサイトの一部のヘッダーは、高さが150ピクセルを超えています。 それらの価値はどこにありますか？ スティッキーヘッダーなどの固定要素には実際のメリットがありますが、Webデザイナーはそれらの使用に注意する必要があります。考慮すべき重要なUXの問題がいくつかあります。

粘着性のあるナビゲーションヘッダーは、快適には大きすぎる可能性があります

スティッキーなナビゲーションヘッダーを使用するという決定がすでに行われている場合は、ユーザーでテストすることをお勧めします。 船外に出て、粘着性のあるナビゲーションヘッダーにコンテンツを詰め込むのはUXのよくある間違いです。 ヘッダーが固定されていても、訪問者にとってブラウジングは快適です。 適切なバランスを見つけることができないと、メインコンテンツのためのスペースが少し残され、訪問者に閉所恐怖症の息苦しいサイト体験がもたらされる可能性があります。

CSSには簡単な回避策がある場合があります。スティッキーヘッダーをわずかに透明にすることで、スクロールしながらコンテンツを見ることができ、コンテンツ領域がより充実した感じになります。

背の高いスティッキーヘッダーの例を次に示します。ロジャーフェデラーのATPのプレーヤープロフィールページ。

このサイトのスティッキーヘッダーの高さは180pxを超えています！ これは、一部のラップトップではページ全体の高さの30％を超えています。これは、回避可能なユーザーエクスペリエンスの低下です。

モバイルでのスティッキーナビゲーションヘッダーのUXの問題を考慮していない

粘着性のあるナビゲーションヘッダーがインタラクションを高速化できる大型の高解像度コンピューターディスプレイを使用している人もいるかもしれませんが、モバイルについてはどうでしょうか。 間違いなく、かなりの数のサイト訪問者がモバイルデバイスからサイトにアクセスするため、固定ヘッダーは最善のアイデアではない可能性があります。 幸いなことに、レスポンシブデザイン手法により、プラットフォームごとに異なるソリューションを設計し、デスクトップブラウザー用の粘着性のあるnavヘッダー（しゃれを意図したもの）を使用することができます。

Coffee with a Copサイトにも固定ヘッダーがありますが、高さが80ピクセル未満とはるかに小さくなっています。

この場合のヘッダーナビゲーションは、より効率的なナビゲーションを可能にするため、高解像度の画面に最適なソリューションです。 小さい解像度の画面では、ヘッダーも固定されていますが、かなりのスペースを占有します。 モバイルの粘着性のあるナビゲーションヘッダーの優れた代替手段は、常に存在するハンバーガーメニューです。 このパターンは普遍的な問題解決策ではありませんが、かなりのスペースを解放します。

Webデザインの一般的なUXの間違いその2：薄くて軽いフォント

最近では、薄くて軽いフォントが多くのモバイルアプリやウェブサイトに普及しています。 スクリーン技術の進歩とレンダリングの改善により、エレガントでクリーン、そしてトレンディであるため、多くのデザイナーがそれらを使用しています。 ただし、薄い書体は使いやすさの問題を引き起こす可能性があるため、UXを妨げる可能性があります。

Webサイトのすべてのテキストの目標は読みやすくすることであり、薄いタイプは読みやすさに深刻な影響を与える可能性があります。 すべての訪問者が、シンタイプをうまくレンダリングするディスプレイでサイトを表示するわけではありません。 一部のライトタイプは、Retinaディスプレイを搭載したiPhoneまたはiPadで読み取るのが困難です。

とりわけ、テキストは読みやすくなければなりません。 ユーザーがアプリ内の単語を読めない場合は、タイポグラフィがどれほど美しいかは関係ありません。

Appleヒューマンインターフェイスガイドライン

Appleはモバイルアプリについて言及していますが、同じ原則がWebサイトにも当てはまります。 読みやすさは必須であり、使いやすさのためにオプションではありません。 それが読めないならば、ウェブサイトにコンテンツを置くことは意味がありません。

シンタイプを使用する前に考慮すべきいくつかの一般的なUXの間違いは次のとおりです。

トレンディなので細くて軽いフォントを使う

フォントは見栄えが良いだけでなく、読みやすいものでなければなりません。 適切なコントラストと読みやすさを実現するために、設計者は、サイズ、重量、色など、デザインの最適な組み合わせを追求する必要があります。

さまざまなデバイスと画面サイズでサイトをテストして、すべてのサイトテキストが読みやすいことを確認することをお勧めします。

これは、次の一般的なUXの間違いにつながります。

すべての主要なデバイスでテキストの読みやすさをテストしていない

薄くて軽いタイプは、多くの設計者の高価で微調整されたモニターで見栄えがするかもしれませんが、安価で標準以下のディスプレイで私たちのデザインをよく見る平均的なユーザーも考慮する必要があります。 ベストプラクティスは、デスクトップコンピューター、ラップトップ、タブレット、スマートフォンなど、すべての主要なデバイスでフォントがどのように表示されるかを確認することです。

たとえば、モバイルデザインをテストしている間、参加者に日光の下でモバイルデバイスでサイトを使用してもらいます。実際のユーザーは、必ずしも完璧なブラウジングと照明条件を備えているとは限りません。 ウェブサイトで細いフォントを使用している場合、モバイルユーザーに適応する簡単な方法があります。読みやすくするためにモバイルで太いフォントを指定します。

Webデザインの一般的なUXの間違いその3：低コントラストのテキスト

低色のコントラスト要素を使用することも、現代のユーザーインターフェイスデザインで流行しています。 一部の領域でコントラストを下げることにより、デザインが「ミニマリスト」に見えるため、ミニマリストのデザイントレンドから生まれました。 デザイナーは、提示する必要のある情報の複雑さを軽減できなかったため、デザインのコントラストを低くして遊んでいました。

薄いフォントについてはすでに説明しましたが、さらに大きな落とし穴があります。明るい書体と低コントラストの組み合わせで、読みやすさが悪いためにUXを大幅に妨げます。 設計者は、このユーザビリティの罠を回避するためにできることは何でもする必要があります。

本文コピーのテキストコントラストが低い

Cool Springs Financialは、Webサイトの本文にHelveticaの薄いバリアントを使用しています。 見た目はエレガントで見た目に美しいUIに貢献しますが、いくつかのプラットフォームで読むのは困難です。 低コントラストは必ずしも悪いことではありませんが、テキストが読みにくくなるため、Webサイトのユーザビリティに悪影響を与える可能性があります。

テキストコントラストをテストしていません

デザイナーがWebコンテンツアクセシビリティガイドラインに従って正しいテキストコントラストを設定するのに役立つColorableと呼ばれるWeb上のコントラストチェック用の便利なツールがあります。 デザイナーは、適切なテキストコントラストを使用していることを確認したら、Webサイトで他の色を調整し、複数のデバイス/ユーザーテストをすばやく実行して、テキストが読みやすいことを確認できます。

Webデザインの一般的なUXの間違いその4：スクロールハイジャック

ウェブ上で注目を集めているもう1つのリスクの高いトレンドは、「スクロールハイジャック」です。 この傾向を実装するWebサイトは、ページのスクロールを制御します（通常はJavaScriptを使用）。 人々がそれに遭遇すると、ページスクロールを制御できなくなり、その動作を予測できなくなり、混乱やフラストレーションにつながる可能性があります。 これは、Webサイトのユーザビリティを損ない、最悪の場合、「コンピュータレイジ」を引き起こす可能性のある危険な実験です。

一部のWebサイトはスクロールハイジャックを回避できますが、それはすべての人ができるという意味ではありません。 たとえば、多くのWebデザイナーは、スクロールハイジャック、視差効果、さまざまな製品の高解像度画像を使用してAppleのサイトをフォローしています。 Appleには、ターゲット市場、独自のコンセプト、およびWebサイト専用のコンテンツがあります。 すべてのサイトには固有の問題があるため、それらの問題に合わせた固有のソリューションも必要です。

実際のユーザーでテストしていない

トレンディなアイデアやUIパターンを借りるときは、UXの問題を回避するために、実際のユーザーでWebサイトのプロトタイプをテストするのが最善です。 簡単なユーザビリティテストにより、たとえば、スクロールハイジャックの実装が実行可能かどうかが明らかになります。 テストを行わないと、設計者はスクロールハイジャックが機能するかどうかを知る方法がなく、想定を立てるのはコストがかかることがよくあります。

人気のある個人ブログサイトであるTumblrは、ホームページでスクロールハイジャックを使用しています。 そうすることは危険かもしれませんが、彼らが彼らのターゲットオーディエンスと彼らが提示したいクールでヒップなユーザーエクスペリエンスをよく知っていると仮定するのは安全です。 サイト訪問者がスクロールを開始すると、スクロールがハイジャックされ、人々は次のセクションに移動します。

長いスクロールページはいくつかのセクションに分割されており、ウィンドウの左側にある大量の飽和色と目立つインジケータードットによって区別できます。 その結果、Tumblrのホームページは、大きな垂直カルーセルの訪問者が、独自の心を持った不快な実験的なWebサイトではなく、制御しているように感じます。

Webデザインの一般的なUXの間違いその5：カルーセル

カルーセル（さまざまなコンテンツをローテーションするためのスライドショー）は、Web、特にランディングページやホームページで非常に一般的です。 それらは便利な場合もありますが、多くのユーザビリティの問題があるため、別の一般的なUXの間違いと見なされます。 Nielsen Norman Groupによると、「人々はしばしばこれらの大きな画像をすぐにスクロールして通り過ぎ、その中のすべてのコンテンツを見逃します。」 回転するスライドの一部で訪問者に価値のあるコンテンツが表示されない可能性があるため、UXに悪影響を与える可能性があります。

ウェブサイトのカルーセルはユーザーに価値を提供しない可能性があります

正しく行われた場合、カルーセルは大きな印象的な画像でユーザーを引き付けることができます。 問題は、カルーセルは多くの場合、付加価値を追加しないが、単に装飾のためにあり、他のすべての人がそれらを使用しているためにのみ含まれていることです。 サイトカルーセルが理にかなっているかどうかをテストする方法：カルーセルが訪問者に提供する3つの利点を書き留めます。 3つの意味のある利点が見つからない場合、それは何の価値ももたらしません。

前と次の矢印の発見可能性は低い

次および前の矢印が検出されない場合、Webサイトカルーセルの重要な情報が非表示のままになる可能性があります。 コントロールは、モバイルでもタップ互換である必要があります。

多くの場合、カルーセルを制御するための矢印はありません。 スライドを進めるために、スライドインジケータのドットのみが含まれています。 ただし、多くの場合、コントラストが低く、発見可能性が低く、クリック可能またはタップ可能な領域が十分にありません。 クリック可能な小さなターゲットは、UXの低下、Webサイトの訪問者の不満、およびWebサイトの迅速な終了につながる可能性があります。

たとえば、Floresta Longo FoundationのWebサイトでは、ホームページに回転する画像のカルーセルがあります。 自動再生するように設定されており、5枚の写真を回転します。 ただし、前の矢印と次の矢印は小さく透明であるため、見つけにくく、クリックするのが困難です。 スライドの訪問者がオンになっていることを示すインジケーターはなく、画像が何を表しているかを示すラベルもありません。 画像はリンクではなく、純粋な装飾として機能します。 このタイプのカルーセルは、訪問者を引き付けるためにある程度の価値を持っているかもしれませんが、全体として、それは多くの要望を残しています。

結論

Webデザインの傾向は、慎重に検討して慎重に実装しないと、いくつかの一般的なUXミスにつながる可能性があります。 UXデザイナーは最善の判断を下し、革新を恐れないようにする必要がありますが、優れたWebサイトの使いやすさを確保するには、実際のユーザーでデザインを徹底的にテストするのに役立ちます。

ウェブデザインのトレンドが狂ったように溢れている中で、流行しているものが行き交います。 この混乱の中で、美学、効率、使いやすさのバランスの取れた使用は、最も強力であり、最もユーザーに受け入れられていることが証明されているUXトレンドを区別する上で重要な役割を果たします。

Webデザイナーは、最もクールな配色、最も素晴らしいスクロールアニメーション、または最も素晴らしい視差効果を思い付くことができますが、結果として人間の相互作用が損なわれると、UXが低下し、人々はすぐに先に進みます。 別のサイトはクリックするだけです。

Toptal Designブログでさらに読む：

• レスポンシブデザイン–ベストプラクティスと考慮事項
• ブラウザからウェブサイトのデザインプロセスにアプローチする
• デザイナーのためのコーディング–どれだけ知っておくべきか？
• UIデザインのベストプラクティスとよくある間違い