Article7 ブランドを傷つけるユーザビリティの間違い

公開: 2022-08-12

ユーザビリティは、Web サイトの成功において最も重要な要素の 1 つです。 しかし、それはしばしば見落とされます。 何度も何度も、企業がユーザビリティのベスト プラクティスに違反しているのを目にしてきました。

それはあなたのブランドを傷つけ、あなたの収益を100%傷つけます。

この記事では、最も一般的な 7 つの間違いを分析して、何を探すべきかを理解し、ユーザーとの信頼を失うのではなく構築できるようにします。

Jason Wolter (情報アーキテクト) と Cynthia Stipeche (ブランド エクスペリエンス担当ディレクター) と一緒に、これら 7 つの間違いと、それぞれがブランドに与える影響について説明します。

  • 間違い #1: 「ハンバーガー メニュー」
  • 間違い #2: ホーム リンクを使用しない
  • 間違い #3: 検索機能がない
  • 間違い #4: カルーセルの回転
  • 間違い #5: 動画の自動再生
  • 間違い #6: 2 列のフォーム
  • 間違い #7: プレースホルダー テキスト

間違い #1: 「ハンバーガー」メニュー

ジェイソン:ビッグガンから始めましょう。 一番大きいのはおそらくハンバーガーメニューでしょう。 人々はハンバーガー メニューをかなり使用しますが、見つけられる率は非常に低いです。 特に 3 本のバーの場合、メニューは常に表示されるとは限りません。

多くの場合、3 つのバーは認識されません。 私たちが従事しているビジネスでは、ハンバーガー メニューを使用することは私たちにとって一種の第二の性質です。 しかし、フィールド テストでは、これら 3 本のバーが何を表しているかはわかりません。 メニューを非表示にして、より良いオプションに見つけやすくします。

ハンバーガー メニューを使用する必要がある場合 (たとえば、モバイル デバイスで表示する場合)、ベスト プラクティスは、クリック可能なボタンであることを明確に示すために、周囲にアウトラインを付けた「メニュー」というボタンを使用することです。 しかし、それは目に見えるナビゲーションに取って代わるものではありません。 理想的には、それはあなたが本当に行きたい方法です。

よりクリーンなため、多くの代理店が使用しています。 でも人には見えにくい。 ユーザビリティとは、摩擦をなくし、ユーザーが簡単に操作できるようにすることです。 また、ユーザーが Web サイトを操作するために Web サイトの使い方を学ばなければならない場合、ユーザーが戻ってくる可能性はどのくらいでしょうか?

認知負荷といいます。 あなたは白紙の状態で参加しますが、誰かが何かを見つけるのが難しいほど、または情報を待たせれば待つほど、彼らはあなたを見捨てる可能性が高くなります. 解決策は、それらに適したより単純なソリューションを作成することです。

これは、ユーザビリティに関する最大の間違いの 1 つです。 ハンバーガーメニューは必見！

シンシア：これについて少し説明します。 多くの人がハンバーガー メニューを認識していませんが、テストによってそれが証明されています。 しかし同時に、それは企業の聴衆に依存します。

たとえば、エンターテイメントやゲームのサイトで、視聴者の年齢層がかなり若い場合、これらの 3 行の意味を正確に理解している可能性があります。 テストからのベスト プラクティスがありますが、多くの場合、それは年齢の多様性です。 あなたのビジネスに多くの若い顧客がいる場合、彼らはそれが何であるかを正確に知っています. 現時点では、特に B2B サイトを運営している場合は、おそらくそのハンバーガー メニューに頼るべきではありません。

ターゲットオーディエンスとペルソナが重要です。 万人向けのウェブサイトを持っているとしたら、それは大きな間違いです。 ユーザーは、何のコンテキストも情報も提供されないことに圧倒されます。 すべてのページの目的を定義する必要があります。 定義されていない場合は、正しく構造化されていません。 そして、正しく構造化されていないと、正しく機能しません。

調査に基づいていないペルソナを作成すると、オーディエンスを満足させないサイトをデザインすることになります。 エンド ユーザーを観察し、エンド ユーザーと対話し、顧客と対話することは、ウェブサイトを通じてユーザビリティとブランドを管理する上で非常に重要です。 そして、私たちはそれを行います。 私たちは、ターゲットオーディエンスとその問題点をよりよく理解するために、顧客調査の多くの声を行います.

ターゲットオーディエンスへの共感を育むつもりなら、それは実際の人々に根ざしている必要があります. それは、仮定ではなく、観察に根差したものでなければなりません。

間違い #2: ホーム リンクを使用しない

ジェイソン:多くの Web サイトは、左上のロゴをクリックすると、またはブランド ロゴが表示されている場所ならどこでも、いつでもホームページに戻ることができるということを知っている人々に依存しています。

テストはそうではないことを示しています。

多くの人は、あなたがそのようにナビゲートできることに気づいていません。 そのため、ユーザーはブラウザの [戻る] ボタンをクリックしてホームページに戻ろうとします。 したがって、内部ページに永続的なリンクを設定すると、ユーザーがそのホームページに戻るための明確な方法が作成されます。 そして、多くの人がそれを無視しています。

Cynthia:内部ページに「ホーム」と表示されたボタンを明確に表示したい場合があります。 それは世代の違いが関係していると思います。 若い視聴者は、ロゴをクリックすると家に帰ることができると期待するでしょう。 しかし、現在のテストでは、ホームページに戻る唯一の方法としてロゴを使用することはベスト プラクティスではないことが示されています。

間違い #3: 検索機能がない ️‍️

ジェイソン:検索は別問題です。 検索を通じて Web サイトをナビゲートするユーザーのサブセットがあります。 したがって、検索オプションがない場合、または露出した検索バーやナビゲーションから目立つ検索ボタンで検索オプションを強調していない場合は、特定のオーディエンスを疎外していることになります。 これは、深いアーキテクチャを持つ大規模なサイトでは特に重要です。 Search Engine Journal の調査によると、ユーザーの 3 分の 1 近くが、Web サイトに検索ボックスがないことに気が進まないと答えています。 40% 以上が、検索ボックスが Web サイトで最も重要な機能であると述べています。

最低限、ナビゲーションと視覚的に区別できるアイコンにする必要があります。 目を細めて画面の真ん中を見つめるテストがあります。 視界がぼやけ、視覚的に識別できる突き出たアイテムを探します。 検索アイコンがナビゲーション テキストからはみ出していれば問題ありません。 ただし、できる最善の方法は、検索バーを公開して、どこからクエリを開始するかが明確になるようにすることです。

Cynthia:もう 1 つの問題は、サイトで検索を提供しているのに、検索結果をフィルタリングする方法をユーザーに提供していない場合です。 または、検索機能がある場合でも、結果のページには、たとえばファイルの種類でフィルター処理する機能がありません。 ユーザーが情報を見つけようとしているときに、より多くの摩擦が生じます。

サイトの検索機能に関するもう 1 つの誤りは、結果ページで再度検索できないことです。 過去にテストを行ったところ、若い傾向にある多くの人がサイトの検索やコンテンツの検索にメイン メニューを使用していないことがわかりました。 彼らは検索機能に直行しました。

彼らはナビゲーションを台無しにせず、まっすぐ検索に進みます。 Google などの検索エンジンで情報を見つけるように育った世代にとって、Web サイトで検索機能が機能しなければ、情報を失うことになります。

間違い #4: カルーセルの回転

Jason:自動回転カルーセル (または一般的なカルーセル) はあまり効果的ではありません。 人々は通常、それらをスクロールして通り過ぎます。 つまり、ページをスキャンしているだけの場合、マーキーには 4 つの重要なメッセージがあるかもしれませんが、ほとんどの人はコンテンツまでスクロールするだけなので、最初の 1 つだけを見ることになります。

自動カルーセルはもっと悪いです。 そこにあるコンテンツによっては、ユーザーは表示されているメッセージを実際に制御することはできません. そのため、彼らはあなたの重要なメッセージの 1 つに興味を持っているかもしれません。 または、彼らはそれを見て、戻ってきたいと思うかもしれません。 その後、上にスクロールしてもそこにないので、クリックして見つけに行かなければなりません。

だから、あなたはそれらを機能させています。 これは認知負荷に戻ります。 そして、探しているメッセージを見つけたら、5 秒間そのメッセージをオンにしてから、再び切り替えます。 戻るにはクリックする必要があります。 それはただの混乱です。

たとえば、5 つの証言スライドがある場合、ユーザーの 95% は最初の 1 枚だけを見ることになります。 クリックしてすべてを表示しようとはしません。 しかし、それは優先度が非常に高いわけではないので、場合によっては許容されます。

本当に悪いのは、3 つまたは 4 つのメイン メッセージと CTA があるマーキーです。 これらはあなたが実際にプッシュしようとしている重要なメッセージであり、人々はそれらを見ることはありません. 4 つの証言のうち 3 つが表示されなくても問題ありませんが、カルーセルが回転するためにユーザーが重要なメッセージを見逃すのは良くありません。

Cynthia:通常、ペストのようなカルーセルは避けていますが、多くの企業は今でもカルーセルを使用しています。 ユーザーが重要な情報を見逃す可能性があるため、マーキーでは特に意味がありません。 ページの上部であっても、重要なコンテンツを非表示にしない方がよいでしょう。

ページの上部にすべてを詰め込みたいと考えている人もいますが、それは彼らが考えていることのすべてです. しかし、情報がマーキーに隠されている場合、それは何の役にも立ちません。

間違い #5: 動画の自動再生

Jason:多くの Web サイトは、マーキーで動きを使用することを好みます。 動画が表示される場合があり、ページにアクセスすると動画の再生が開始されます。 それが気に入らない人もいます。 彼らは動きが好きではなく、ビデオを見たくありません。

これを回避するには、一時停止ボタンを含めます。 ユーザーが見たくない場合にシャットダウンできるようにする必要があります。 おそらくより良い方法は、そこに画像を戻し、再生ボタンを実際に強調して、ユーザーに「このビデオを見たいかどうか」というオプションを与えることです。 あなたは彼らにそれを押し付けて、彼らに見せているだけではありません。

サイトの他の領域で動画を自動再生するだけでも、ユーザーが情報を探す流れを妨げる可能性があります。 したがって、何かを自動再生することは一般的には良い考えではありません。

Cynthia:自動再生ビデオはひどいものです。 耳障りな体験です。 Web サイトにアクセスして、ビデオを自動的に開始する必要はありません。 音量をオフにしてビデオを再生するのはよくありません。 さらに悪いのは、ボリュームをオンにすることです。 疫病のようにあなたのウェブサイトを避けるように人々を説得したい場合は、先に進んで自動再生ビデオに立ち寄ってください.

強力な動画コンテンツがある場合は、おそらくその動画の一部を取得して、パッシブ ループを作成します。 それから、あなたの顔にそうではなく、目立ちます。 3 秒程度のループで再生され、ビデオ全体を見るための行動を促すフレーズを含めることができます。 そうすれば、不快になったり、気分を害したりすることはありません。 その時点で、ユーザーに「これについてもっと知りたい」と思わせるだけで十分です。 オーディオがオンになり、ビデオの再生が開始されたときに、彼らが驚かないようにするためのオプションを提供します。 ユーザーは常に管理下にある必要があります。 人々はしばしばそれについて考えません。

ユーザーへの共感が必要です。 それで、それはどういう意味ですか？ ビジネスには独自の目標があります。 しかし、エンドユーザー自身が必要とするものを邪魔することはできません。 重要な質問は、「彼らの経験の枠組みの中で、私が提供しているものをどのように提供するのが最善か? そのため、エンド ユーザーに共感するときは、サイトにアクセスして、それについて学ぶように彼らを招待してください。 そして、彼らが詳細を学ぶために飛び込んでいくのをサポートしてください。

その時点で、善意の感覚があります。 ユーザーにとって最善を尽くすことでウェブサイトにアプローチするのではなく、収益にとって直接的に最善を尽くすことは、長期的には見返りをもたらします。

間違い #6: 2 列フォーム

Jason:ページの左右にフィールドを配置するのではなく、垂直方向にフィールドを配置すると、はるかに使いやすくなります。 人々は何かをタブで移動することに慣れており、ページを下に移動することを期待しています。 2 つの列がある場合、異なるタブ パターンが多すぎます。 彼らはそれが下がっているかどうかを知りません。 それが右に行くかどうか、彼らは知りません。 何が起こるべきかという期待があり、それは下降することです。 したがって、複数の列がある場合、常にその期待を満たしているとは限りません。 そのため、フォームを下に移動するだけで済むように、列を 1 つにすることをお勧めします。

Two-Column Form Fields

間違い #7: プレースホルダー テキスト

Jason:プレースホルダー テキストは使いたくないでしょう。 プレースホルダーは、そこに入れることが期待されているコンテンツをユーザーが理解できるようにするためにあります。 ユーザーは、プレースホルダー テキストがなくても、そのフィールドに何が属しているかを判断できる必要があります。

そのため、そのフィールドの外にラベルが必要です。 それらがプレースホルダーとして内部にある場合、クリックするとテキストが消えます。 タスクを中断すると、戻ってきて、どのフィールドに入力しているかわからなくなる可能性があります。

Best Practice for Form Fields

これは、スクリーン リーダーのアクセシビリティにも影響します。 ラベルは、スクリーン リーダーを使用しているユーザーに、そのコンテンツがどうあるべきかを伝えます。 ラベルがプレースホルダーであり、外部の指示として含まれていない場合、スクリーン リーダーと混同される可能性があります。

最大の間違い: 機能性よりも美学

機能性よりも美学を優先したり、その逆を優先したりしないでください。 あなたは両方の良いミックスをしたい. デザインのトレンドを実装することを検討している場合は、それがサイトにとって理にかなっており、正しい理由でそれを使用していることを確認してください. デザイン要素は非常にクールに見えるかもしれませんが、ほとんどのユーザーにとって実用的ではありません。 したがって、物事が機能していることを確認する必要があります。

あなたのブランドはあなたの評判です。 Web サイトが使いにくい場合、取り返しのつかないほどの損害を被る可能性があります。