Uxデザイン

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

なのでウェブデザイナー私たちは常に優れたUXエクスペリエンスを作成し、ユーザーが目標を達成できるように支援しています。私たちの日常業務では、さまざまな種類の一般的なパターンや傾向を使用しています。私の経験では、これらのパターンとトレンドがクライアントやデザイナー/開発者を間違った方向に簡単に導くことができる方法を見てきました。たまに私たち全員が見られているように見えるもので少し軌道から外れることは秘密ではありません 信じられないほど 。私は何度もそれらの罠に陥ったことを認めます。私は視覚的に魅力的なものを作成することを選択し、そのために使いやすさを犠牲にしました。なぜ私はそれをしたのですか？ある瞬間だと思いましたワオそれが起こり、それは魔法のようにユーザーを引き付けます。私はこの効果を望みましたワオそれは長い影響を引き起こすでしょう。私が作成したインターフェースをユーザーが理解するのに苦労していることに気づいたとき、厳粛な瞬間が訪れました。私はそれを非常に誇りに思っています。時々あなたは難しい方法を学びます。

デザイナーが犯す5つの最も一般的なUXの間違い

私が学んだ教訓は、ユーザーの多忙な旅を避けるために、私たちが作成しているユーザーインターフェイスの光沢のある表面の下にあるものを常に自問する必要があるということでした。パターンやトレンドが好きになり、それらが提供する価値について考える前に、立ち止まる価値があります。ケイト・ラッターが見事に言っているように、「醜いが便利なものは、かわいくても意味がない」。

誤解しないでください-私は物事を美しくするべきではないことを示唆しているのではなく、物事を美しく着用可能にすることに焦点を当てるべきであることを示唆しています。パターンとトレンドの鍵は、見た目とその背後にある価値のバランスを見つけることです。

この記事では、私が毎日目にするいくつかの一般的なUXエラーをリストします。すべてが悪いわけではありませんが、いわば、注意して実装しないと危険な場合があります。また、これらのトレンドを実装するときにユーザビリティを向上させる方法や、回避策を提案する方法についても少し説明します。追加するものが何もないので、リストを見てみましょう。

よくある間違い＃1：大きな固定ヘッダー

大きくて背の高い見出しがますます見られます-ブックマークされたブロックとメニューは、位置が固定されており、表示ウィンドウの大部分を占めています。それらは上部に固執し、しばしばそれらの下のコンテンツをブロックします。高さ150ピクセルを超える高生産のウェブサイトでヘッダーを見たことがありますが、その背後に本当の価値はありますか？私はそれを少し強制しているかもしれませんが、大きな固定ヘッダーは恐ろしくて今では古いHTMLフレームを思い出させます。ふぅ！

デザインの原則は何ですか

固定要素には本当のメリット、しかしそれらを扱うときは注意してください-心に留めておくべき重要なことがたくさんあります。固定ヘッダーを実装するときは、できるだけ避けたい一般的な間違いをいくつか覚えておいてください。

大きすぎて快適ではありません

大きな固定ヘッダーを設計するという決定がすでに行われている場合は、いくつかのテストを実行して、「big」が「toobig」であるかどうかを確認します。行き過ぎて見出しに多くのコンテンツを入れないように注意してください。そうすると、要素が高すぎます。ヘッダーを固定すると、ユーザーがすばやく簡単にブラウジングできるようになります。ヘッダーの実際のサイズがわからない場合は、視覚的な魅力とブランドの存在感をあまり犠牲にせずに、ヘッダーを小さくするようにしてください。適切なバランスを見つけられないと、ユーザーに閉所恐怖症の体験をもたらし、コアコンテンツのための余地をほとんど残さない可能性があります。

昨年、私はクライアントがデスクトップバージョンでの固定ナビゲーションを持つことを主張するプロジェクトに取り組んでいます。バーが特に高くないときでさえ、私は何人かのユーザーが閉じ込められたと感じることから閉所恐怖症を感じるかもしれないのではないかと心配しました。私の解決策は単純でした-CSSを使用してナビゲーションバーに少し透明度を与えることで、ユーザーはバーを通して見ることができ、コンテンツ領域がより大きく表示されました。ここにCSSコードの一部があります。それがあなたにも役立つかどうか試してみませんか？

.header { opacity: 0.9; }

最近出会ったときに見つけたこの例ロジャーフェデラーのATPプロフィールページ。

固定ヘッダーの高さは約110ピクセルで、下にスクロールするとサブナビゲーションが表示され、ヘッダーの高さは160ピクセルになります。これは、ドックを開いた状態でのMacBook Proの全ページの高さの30％以上です。

モバイルで問題を修正しない

確かに、多くのユーザーはかなり大きな画面を使用し、固定メニューは大きな解像度で有利になる可能性がありますが、小さな解像度やモバイルの世界ではどうでしょうか？ユーザーの大部分が解像度の小さいデバイスを使用するため、モバイルの場合はオプションposition: fixedおそらく最善の解決策ではありません。幸運なことに、レスポンシブテクニックこれにより、別のソリューションを設計し、大きな解像度の場合にのみ固定ヘッダーを使用することができます。「モバイルファースト」アプローチは、私たちに多くの答えを与えてくれます-それはモバイル解像度から始まり、本質的なコンテンツだけであり、そこから始まります。

警官とコーヒーヘッダーも固定されていますが、80ピクセル未満です。

簡単かつ高速なナビゲーションが可能であるため、高解像度での優れたソリューションと言えます。解像度が小さい場合、ヘッダーは固定され、デバイス画面上でかなりのスペースを取ります。モバイルでは固定ヘッダーを使用せず、代わりに固定ハンバーガーアイコンを使用することをお勧めします。これにより、タップするとメニューが開く可能性があります。このパターンは普遍的な問題を解決しませんが、大量のスペースを解放します。スマートフォンやタブレットでは、スペースは非常に貴重な場合があります。

よくある間違い＃2：薄い書体

薄いフォントはどこにでもあるようです-多数のネイティブモバイルアプリと最新のウェブサイト。ディスプレイ技術の進歩と レンダリング 改善され、多くの設計者は、デザインに薄い書体または薄い書体を使用することを選択しています。彼らはエレガントで新鮮で斬新です。ただし、薄いフォントは読みやすさに影響を与え、大きな問題になる可能性があります。フォントを適切にレンダリングするモニターですべての人がWebサイトを表示するわけではないことに注意してください。たとえば、薄型タイプは、Retinaディスプレイを搭載したiPhoneやiPadでは非常に読みにくいことがわかりました。書体の外観と感触について考える前に、少し前に戻りましょう。

ユーザーがアプリ内の単語を読めない場合は、タイポグラフィがどれほど美しいかは関係ありません。

のアップルのヒューマンインターフェイスガイド：

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

Appleはモバイルアプリを指しますが、同じ原則をすべてのWebサイトに適用できます。コルムロシュが言ったように、読みやすさ≠オプション、しかし、良い使いやすさのために必要です。ユーザーの大多数がほとんど読めないのであれば、ウェブサイトにコンテンツを載せても意味がありませんね。

書体をダイエットする前に知っておくべき最も一般的な間違いは次のとおりです。

はいので薄いタイポグラフィを使用してください

他のトレンドと同様に、他の人がそれをするので、何かをしたり身に着けたりすることは危険です。フォントは見栄えが良いだけではありません。まず第一に、それらは読みやすく、優れたユーザビリティへの出発点である必要があります。見た目が良いという理由だけで薄いタイプを使用するという決定は、裏目に出ることになります。この素晴らしい講演では、より完璧なタイポグラフィ、ティム・ブラウンがタイポグラフィが歌うスイートスポットについて語ります。このスイートスポットは、サイズ、重量、色の組み合わせであり、Webサイトの基盤を築きます。

そのスイートスポットに当たるコンテンツの本文に適したフォントを確実に見つけるには、さまざまな環境でいくつかのテストを実行します。これにより、回避する価値のある次のエラーが発生します。

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

薄いタイプは画面上で見栄えがよく、読みにくい場合がありますが、注意してください。あなたはあなたのユーザーではありません。ユーザビリティテストに投資して、実際のユーザーがデスクトップ、ラップトップ、タブレット、スマートフォンなどの主要なデバイスでのタイポグラフィに満足しているかどうかを確認します。より多くのモバイルテストを行うにつれて、参加者に日光の下でモバイルデバイス上でWebサイトを使用してもらいます-実際のユーザーがWebサイトをナビゲートするための理想的な条件を常に持っているとは限りません。晴れた日にモバイルデバイスで何かを読まなければならない場合、それがどれほど難しいかをおそらく知っているでしょう。 Webサイトで薄いフォントを使用する場合は、モバイルユーザーに合わせて簡単に調整する方法があります。これが私が最近ウェブサイトで見た解決策です：

オークユーザーのニーズにうまく適応します-デスクトップの解像度では、H1ヘッダーは非常に薄いです。ヘッダーが大きく、色のコントラストが良いので、読みやすさは損なわないのではないかと思います。ヘッダーサイズが大幅に小さいモバイルでは、重量がわずかに厚くなり、読みやすくなります。明らかに、小さいサイズの薄いフォントに関しては読みやすさの問題が発生し、より重いフォントの重みを実装しました。 メディアクエリ 。彼の解決策は単純でしたが、非常に効果的でした。

よくある間違い＃3：低コントラスト

近年、低コントラストがユーザーインターフェースデザインのトレンドとなっています。低コントラストを作成する書体についてはすでに説明しましたが、陥る可能性のある大きな罠があります。薄い書体と低色のコントラストを組み合わせると、ユーザーは頭をかいて考えてしまいます。 私たちは心を失ったことがありますか？ 。もちろん、すべての低コントラストが悪いわけではありません。注意深く設計すれば、視覚的な魅力を高めることさえできます。しかし、すべてのUXバグの場合、それをやり過ぎないようにして、使いやすさを考えることが重要です。

コントラストを扱うときに避けたい大きな間違いは次のとおりです。

ボディコンテンツの低カラーコントラスト

色のコントラストが低いことだけが悪いわけではありませんが、Webサイトの使いやすさに悪影響を及ぼし、一部のユーザーがテキストを読みにくくする可能性があります。この記事で、少なくとも1つのものの色のコントラストを上げるように促された場合は、そのものをボディコンテンツにします。おそらく、実験するのに最も不利な領域です。

クールスプリングスファイナンシャルコンテンツの本文にHelveticaの薄いバリアントを使用します。見た目はエレガントで、美的観点からユーザーを喜ばせるのに役立ちますが、多くのプラットフォームで読むのは困難です。

私は、Retinaディスプレイを搭載したMacBook Proと、Retinaディスプレイを搭載したiPhoneとiPadで簡単なテストを行いました。スクリーンショットは私のMacBookProのもので、コントラストと読みやすさの問題が明らかになっています。すべてのデバイスでWebサイトのテキストを読むのに苦労しました。

コントラストをテストしないでください

道の終わりでの問題を回避するために、ユーザーテストを少し行うことを検討してください。それ自体、クライアントや同僚の何人かが「ボジャン、ユーザーテストは時間と費用がかかる」と言っているのをすでに聞いています。それらは可能ですが、実際に必要なことは、Webサイトのコントラストをテストするには長すぎます。ボディコンテンツから始めて、上に向かって進みます。 Colorableと呼ばれる優れたツールがあり、WCAGアクセシビリティガイドラインに従って正しいテキストコントラストを設定できます。正しいコントラストを使用していることがわかったら、Webサイトの他の色を調整し、ユーザーテストをすばやく実行して、ほとんどのユーザーが痛みのないエクスペリエンスを利用できるようにします。低コントラストが反乱を引き起こすとは思えませんが、多くのユーザーを苛立たせる可能性があります。

よくある間違い＃4：変位の流用

私たちが最近よく見ているもう一つの傾向は、移動の流用です。この傾向を実装するウェブサイトは、 スクロール （通常はJavaScriptを使用）、Webブラウザーの基本機能をオーバーライドします。ユーザーはページのスクロールを制御できなくなり、その動作を予測できなくなります。これにより、混乱やフラストレーションが発生しやすくなります。使い勝手が悪くなる恐れのある実験ですので、細心の注意を払ってください。

これを実装することを確信している場合は、次のエラーを回避するようにしてください。

実際のユーザーでテストしないでください

アイデアやパターンを借りるときの問題を回避するために、自分のユーザーでWebサイトのプロトタイプをテストしてください。簡単なユーザビリティテストにより、制御されたスクロールの実装が実行可能かどうかが明らかになります。これをテストすることで、多くの質問に答え、アイデアを改善する方法についての手がかりを得ることができます。テストなしでは、どちらの方向に進むべきかを知る方法がなく、仮定に基づいてWebサイトを開発することは、多くの場合、後でコストがかかりすぎます。

Tumblrはウェブサイトでこれを使用しています。それらの実装もリスクを伴う可能性がありますが、彼らは彼らの聴衆を理解し、彼らのコンテンツとコンセプトはそれをサポートし、そして彼らは彼らのユーザーのニーズの多くを満たしているようです。ユーザーが下に行こうとすると、スクロールはWebサイトによって制御されますが、ユーザーはWebサイトの次のセクションに移動します。コンテンツは多くのセクションまたはブロックに分割されており、区別しやすく、右側に大きなインジケーターポイントが設定されています。 ビューポート 。その結果、家独自の精神を持った実験的なウェブサイトというよりは、あなたがコントロールしている大きな車のように感じます。

よくある間違い＃5：効果のないカルーセル

カルーセルはウェブ上で非常に一般的であり、長い間使用されてきました。効果的ではありますが、注意して設計および開発しないと、悪夢になる可能性もあります。ユーザーにとっての悪夢は、ユーザーがそれを理解するのに苦労しているという事実かもしれません。あなたにとっての悪夢は、あなたのユーザーがいくつかの重要なコンテンツを見ていなかったという事実かもしれません スライド カルーセルの。

重要なコンテンツのないカルーセル：Webサイトのスペースを使用する最も効果的な方法ではありません

私が見ている多くのカルーセルにも同様の欠点があります。それらのいくつかは次のとおりです。

ユーザーにとっての真の価値の欠如

カルーセルがユーザーに提供する真の価値は何ですか？正しく行われると、カルーセルはユーザーとつながり、ユーザーが目標をすばやく簡単に完了するのに役立つはずです。付加価値を提供しないかもしれないが、単純な装飾のように見えるカルーセルを何度も目にします。簡単なクイズは次のとおりです。ポストイットを取り、カルーセルがユーザーに提供できる3つのメリットを書き留めます。 3つを考えないと、カルーセルにさらに作業が必要になる可能性が高くなります。

カルーセルのスライドが多すぎる、または少なすぎる

多くのスライドはユーザーに悪影響を与える可能性があり、ユーザーは単にカルーセルを無視することを選択できます。ユーザビリティの第一人者であるヤコブ・ニールセンは、次のことを提案しています。

ユーザーがそれ以上のスライドに接続する可能性は低いため、カルーセル内に5つ以下のスライドを含めます。 5つを超えると多すぎる可能性がありますが、3つ未満の場合は、より良いソリューションが十分に推奨されていることを示している可能性があります。カルーセルの前提の1つは、非常に小さなスペースに多くのコンテンツを収める必要があるという事実ですが、スライドが2つしかないので、両方を同時に表示して、一度に片側または反対側にスライドすることを忘れないでください。？

矢印前 Y 次スライドインジケータはそれほど明白ではなく、および/またはアクセス可能ではありません。

貴重なコンテンツにアクセスできるようにしていることを確認してください。矢印が表示されると、カルーセルに関する重要な情報が非表示になる可能性があります次 Y 前それらは明白ではなく、快適なクリックには大きすぎます。ああ、そしてタップを忘れないでください-あなたのモバイルユーザーはそれをあなたに感謝します。

カルーセルに矢印がなく、ポイントインジケーターがスキッド間をジャンプするためのリンクである場合があります。あなたが提供する必要があることを忘れないでくださいタップエリアそれを素晴らしく、クリック可能で、大きくします（少なくとも35x35pxをお勧めします）。そうしないと、小さなターゲットは非常に苛立たしいターゲティング慣行につながり、ユーザーはあなたのウェブサイトを離れてしまいます。

のウェブサイトロングフォレスト財団ヘッダーに画像のカルーセルがあります。持ってる 自動再生 スライドには5枚の写真が掲載されています。矢印前 Y 次それらは小さくて透明であるため、見たり、クリックしたり、タップしたりするのが困難です。表示しているスライドのインジケーターや、写真が何を表しているかを示すラベルはありません。画像はリンクではなく、装飾としてのみ機能します。カルーセルは、ユーザーとの接続を確立する上で何か価値があるかもしれませんが、それは確かに多くのことが望まれています。