🦄 🕵️ 🗳️ オンラインストアなどの致命的なユーザビリティの10の間違い 💅🏼 👩🏿‍🤝‍👩🏾 👩‍⚖️

「 最初の間違いを恐れず、2番目の間違いを避けてください。」民俗の知恵が教えてくれます。そしてもう一方は、誰が彼の過ちから学んでいるのか、誰が見知らぬ人から学んでいるのかをはっきりと示しています。それにもかかわらず、オンラインストアの開発は間違いを犯しやすいです。視聴者の機能、サイトの構成の微妙な違い、ページのフォームは、唯一の真の試行錯誤の方法でしか理解できない場合があります。

MasterCardとUsabilityLabが実施した調査によると、オンラインストアでの購入プロセスのユーザビリティ制御の主なポイントが特定されました。専門家はそれらにさまざまな重大度を割り当てました：低、中、高。もちろん、インターフェイスを設計するときは、絶対にすべての側面と詳細を考慮する必要があります-バイヤーの利便性を確保するための些細なことはありません。ただし、オンラインストアのすべての開発者が覚えておく必要があり、そのままでは残せないエラーがあります。調査中にテストが開始されたときに回答者と専門家が遭遇したオンラインストアの最も重大な10のユーザビリティエラーに注目します。現時点では、サイト上のこれらのエラーの一部は修正されています。オンラインストアは引き続きユーザビリティの向上に取り組んでいます。

ショッピングカート内の詳細な製品特性の欠如

オンラインストアの購入者がバスケットを使用するには、主に2つのシナリオがあります。

商品のリストを収集し、注文を完了します。通常、このようなシナリオは、ユーザーがサイトを訪れた目的と購入の準備ができていることが確実にわかったときにトリガーされます。
「延期」機能を使用する代わりに商品をバスケットに「投入」してから、アイテムを並べ替えて特性を詳細に調べ、購入を決定し、注文を作成します。このようなシナリオは一般的であり、自発的な購入時、販売時、プロモーション時などに非常にうまく機能します。

ショッピングカートのインターフェースと使いやすさは、これらのシナリオと一致している必要があります。総誤差-製品、その特性、画像、詳細な説明へのリンクに関する情報をバスケットに記載しないでください。ユーザーは、商品の価格だけに基づいて選択の正しさを判断するべきではありません。クリック不可能な画像も最適なソリューションではありません。クリックすると、製品に関する詳細情報、製品の拡大写真、またはいくつかの角度の写真が付いたスライダーを開く必要があります。

例を考えてみましょう。ページ上のRIVGOSHショッピングバスケットのカタログには商品の完全な説明へのリンクがないため、適切な製品が選択されているかどうかを確認することは困難になります。製品写真もリンクではありません。調査中、これにより、回答者の半数が誤って収集された間違った商品を注文したという事実に至りました。

商品の利用可能量に関する情報の欠如

商品ページ自体とショッピングカートの両方で商品の利用可能な数量を指定しない場合、ユーザーの不快感の大部分を得ることができます。商品の入手可能性に関する情報（または入手可能性の欠如に関する情報）が注文プロセスの最後に提供されるのが遅すぎる場合、これは店舗に対する顧客の忠誠心を大幅に低下させることがあります。残念ながら、このような明らかで非常に迷惑な間違いは、大規模なオンラインストアのサイトでも見られます。

たとえば、M.VideoストアのWebサイトで、ある回答者がストアにない製品を注文しようとしました。製品が利用できないという情報は、注文プロセスの最後にのみ提供されました。

RivGoshストアのWebサイトで、ユーザーは、配送方法を選択する際の承認後にのみ、製品が自分の都市にないことを知ります。

オンラインストアまたはオフラインポイントでの商品の入手可能性に関する情報をタイムリーに示します。たとえば、製品カードやバスケットに追加するときなどです。そうすることで、強制力のない注文をするのに時間を浪費しないように、買い手に製品の交換または購入の拒否を決定する機会を与えます。

技術的な障害が発生した場合の収集内容のリセット

購入中、技術的な障害は除外されません。ユーザーが誤ってページを閉じた、接続が切断されたなどです...技術的な問題が発生した場合、ユーザーは停止した場所から注文を続行できる必要があります。しかし、多くの場合、バスケットは自動的に空になり、購入プロセスを新たに開始する必要があります。これは重大なユーザビリティエラーです。このような状況では、買い手が購入を拒否するリスクが高くなります。

調査中、回答者には支払いに関する技術的な問題があり、そのため注文が中断されました。たいていの場合、この後バスケットから商品が消えたため、回答者は商品を購入のためにバスケットに集めるために再び不満を抱かなければなりませんでした。状況の1つでは、回答者がEnterストアで最後の製品を注文しました。バスケットをリセットした後、製品を再度注文できませんでした-すでに在庫切れです。

UtkonosストアのWebサイトで買い物をするときに、いくつかの回答者が同様の問題に遭遇しました。調査の時点で、登録が完了した後、商品はバスケットから消え、回答者はサイトで再度検索する必要がありました。特に食料品店では、この状況は非常に重要です。買い手は大量注文を行い、各アイテムの繰り返し検索にはかなりの時間がかかります。

買い手が再び商品を選択したとしても、一定の確率で店舗は低額の支払いを受けるリスクを負います：繰り返し選択している間、ユーザーはリストを確認し、必要と思わない商品を消すことができます。したがって、ユーザーの利便性とストアの信頼性のために、注文プロセスが完了するまですべての製品をバスケットに保管し、サイトからの一時的な退出、登録、および購入のいずれかの段階で技術的な問題が発生した後に消えないようにする必要があります

登録プロセスの使いやすさの問題

注文後に登録するという要件は重大な間違いであり、最も不快な結果になります。サービスとマーケティングの両方の観点から、さらにやり取りするために必要な顧客データを受信できません。注文する前に登録することも最善の解決策ではありません。ユーザーがデータを入力するために追加の時間を費やしているため、ユーザーが何も買わない場合は不要になる可能性があり、その結果、無駄な時間に不満が生じるからです

最良の方法は、注文中に必要な情報を収集し、注文の最後にアカウントパスワードを作成する機能を提供することです。また、オンラインストアのWebサイトでのユーザー登録の組織に関係なく、登録済みの購入者が受け取るメリットに関する明確で十分に構造化された情報を提供することをお勧めします。

オンラインストアは、サービスを使用するために別のログインを作成するように求められることがあります。例外的なケースでは、これは正当な決定ですが、ほとんどの場合、忘れられたり、ユーザー名を忘れた同じユーザーの二重または三重の登録を取得するのが正しい方法です。

たとえば、Aeroexpress Webサイトでは、電話番号、電子メール、およびログインを個別に入力する必要があります。同時に、サイトに登録したい調査回答者は、別のユーザー名を作成することを心配せずに、電子メールアドレスを入力し、それをログインフィールドにコピーしました。

ログインが電子メールのみである場合、これを示す必要があります。 Ozonアプリケーションに登録する際、ユーザーはログインの入力を求められますが、ログインできるのはメールアドレスのみであるとは説明されていません。ユーザーは、登録中にエラーが生成される理由とその修正方法を理解していません。メールアドレスはユーザー識別子として使用されますが、フィールドは「ログイン」と呼ばれます。

ユーザーがさまざまなシステムを入力するために膨大な数のログインを覚えることは難しいことを理解する必要がありますが、選択した通常のパスワードと組み合わせて電子メールアドレスまたは電話を忘れることは困難です。したがって、これらの識別子を使用する必要があります。また、ユーザーの観点からは、登録、メールの確認、認証のプロセスを経るよりも、覚えているユーザー名とパスワードをストアに戻す方が簡単です。

注文金額に変更はありません

ユーザーにとって最も不快な使いやすさのエラーは、注文の最終コストに関連しています。最終コストは、選択した支払い方法の手数料による増加など、予想外に変化する可能性があります。多くの店舗では、注文金額の変更のタイムリーな表示を無視しますが、登録の最終段階での金額の増加は怒りを引き起こし、購入の拒否につながる可能性があります。次に、示されていないタイムリーなボーナスまたは割引は、購入の決定に影響を与えませんが、買い手が最終決定を下さない場合、注文に対する支払いを刺激する可能性があります。そのような状況の例は、M.Videoストアのサイトです。このサイトでは、カードで支払うときに割引が与えられますが、これに関する情報はありません。

注文額が増加した場合、できるだけ早く報告することが重要です。悪い例は、Zaraストアアプリケーションから取ることができます。このアプリケーションでは、一部の支払い方法では注文額が増加しますが、支払いオプションを選択する段階での手数料については何も報告されません。

注文プロセスの最初に配送料が示されていない場合も、同様の状況が発生します。オンラインストアのウェブサイトで注文を拒否する最大数は、通常、追加のマージンと隠れた配送条件に関連しています。ユーザーは商品の収益性の高い購入条件（クーポン、割引、プロモーションコード）を探して店舗のウェブサイトを離れるので、配送料が支払われるという情報が早ければ早いほど良いです。

たとえば、配送方法を選択する場合、EnterストアWebサイトは配送料が支払われるという情報を提供しません。テストではなく実際の状況では、これにより購入が拒否されたり、別の配信方法を選択するために不要なアクションが実行されたりする可能性があります。

配達ポイントの不便なプレゼンテーション

買い手にとっては、途中で注文を受け取るのが最も便利です。仕事から、仕事から、家の近くで、頻繁に訪れる場所からそれほど遠くない場所に。したがって、ルートを知っていれば、ユーザーは地図上で問題点を簡単に見つけることができます。ただし、この調査では、すべてのサイトが地図上のピックアップポイントを検索できるわけではないことが明らかになりました。たとえば、Ozonストアのアプリケーションでは、可能なアイテムは同じ名前のリストで表されます。それらの違いは明確ではありません。「情報」アイコンを数回クリックして、特定のアイテムの場所を確認する必要があります。

最良の解決策は、地図上の問題点のリストの表形式、テキスト形式、およびプレゼンテーション形式を組み合わせることです。この場合、ユーザーは混乱することはありませんが、必要なポイントをすぐに判断できます。

データが誤って入力された場合の不適切なインターフェイスフィードバック

可能であれば、フィールドへの入力中に、入力されたデータの正確性の技術チェックを実行する必要があります。ただし、テストされたサービスのほとんどでは、フォームの送信後に正確性チェックが実行され、エラー、エラーの発生理由、および修正方法は明らかではありません。

情報のない支払いエラーメッセージ

支払いを行う場合、たとえば、ユーザー側からの技術的な問題（カードにお金がない）や、支払いのキャンセルにつながるその他の問題が発生する可能性があります。エラーフィードバックがあいまいに、不完全に、あいまいに、または不在で提供される場合、ユーザーが問題を解決することは困難です。

SteamおよびAeroexpressアプリケーションのスクリーンショットは、可能なアクション（Steamサポートに連絡し、後で支払いを繰り返す）を提案しましたが、カードにお金がないので役に立たない-問題はユーザー側にあります。

このような状況を回避するために、問題の原因と原因を正確に示すことは価値があります。また、独立した除去方法（可能な場合）について報告し、テクニカルサポートサービスの連絡先を示すこともお勧めします。たとえば、カードに十分なお金がないことが示されている場合、購入者は不要なアクションを取り、テクニカルサポートの専門家に連絡する必要はありません。別のカードまたは他の支払い方法を使用して購入を完了できます。

注文確認ページの情報が少ない

購入内容が注文確認ページに表示されていない場合、ユーザーは正しい製品が選択されていることに疑念を抱くことがあります。たとえば、登録後にストアのWebサイトを入力すると、注文の数と量に関する情報のみが表示されます。また、登録せずに購入した場合は、電子メールでのみその構成と指定された連絡先情報を確認できます。

また、注文確認ページに、注文とストアの連絡先情報を受け取るための次の手順を説明する必要があります。注文の詳細と商品の配送と受領に関する必要な情報を記載したメールがメールアドレスに送信されたことを示す必要があります。商品の配送を手配する場合は、配送の条件と住所を指定する必要があります。集荷が選択された場合、ページにはユーザーが選択した店舗の住所と営業時間が含まれている必要があります。

注文情報はメールで複製されません

調査中にテストされたすべての店舗は、注文後に確認書を送付しました。しかし、多くの手紙は、配達の時点でのバイヤーによる商品の受け取りに関するバイヤーにとって重要な情報を示していませんでした：注文の受け取り場所、配達時間、アイテムの稼働時間など。ここでのエラーは異なります。たとえば、UlmartストアのWebサイトでの購入後にメールで届くレターは、商品を受け取るためにどのアクションを完了する必要があるかを示していますが、ユーザーが選択した配送方法に対応していません。 Sportmasterストアで注文を確認する手紙は、買い手にとって重要な情報、つまりコスト、方法、おおよその配達時間を示すものではありません。

多くの場合、顧客はさまざまなデバイス（モバイルなど）からオンラインストアからレターを開きます。オンラインストアのウェブサイトにアクセスするよりも、メールアプリケーションで手紙を見て道路上のピックアップポイントの住所と営業時間を指定する方がはるかに便利です。これは通常、モバイルデバイスにとっても「重すぎる」です。したがって、レターは、注文および配送パラメーターの最大の詳細を含む普遍的なチートシートである必要があります。

...およびユーザビリティの15の敵

間違いなく、オンラインショッピングサイトの使いやすさの問題は、オンライントレーディングに関連する研究者、マーケティング担当者、プログラマー、デザイナー、デザイナーにとって懸念事項です。一部のアナリストは、喜んで自分の経験を共有しています。読者のために、避けるべきユーザーインターフェイス（UI）デザイン手法に関する興味深い記事を発表することにしました。最近、これらの方法はオンラインストアだけでなく、オンライン購入を意味しない商用サイトでも悪用されていますが、製品/サービスに関するすべての情報をユーザーに提供するように設計されています。 （ヒント：英語を知っている場合は、元の記事を読んでください-優れたユーモアで書かれており、改作で伝えることはできません）。

フォームのリセットボタン（リセット、クリア）。このようなボタンは、注文に関するコメントの形、またはユーザーがメッセージを入力するオンラインストアでのフィードバックの形で表示されます。そのようなボタンが送信ボタン（送信、送信、投稿）の隣にある場合、誤ってボタンを押すと、フォーム全体がリセットされます。テキストがコピーされず、フォームで最初に作成される場合、これは購入者にとって非常に迷惑です。
[キャンセル]ボタン（閉じる、キャンセル）でも同様の問題が発生します。 [戻る]ボタンなどに近い場合、その操作も非常に望ましくありません。
ウィンドウを閉じるボタン（右上隅にある同じ「十字」）が、ユーザーが予期しないアクションを実行することがあります。たとえば、ウィンドウをトレイに最小化するか、縮小します。このボタンは唯一のアクションを実行する必要があります-ユーザーがクリックすることでウィンドウを閉じます。
ユーザーがサイトに滞在した最初の1分間のポップアップ（ウィンドウ）コールバックフォームの外観。訪問者は、おそらく、まだ何を見つけたいのか、何を見つけたいのかまだ決まっていないので、コールバックを強要されます。注目すべきコールオーダーボタンを作成し、ユーザーがサイトに精通できるようにすることをお勧めします。
非表示のパスワード入力フィールドは、入力された文字をマスクする非常に*****です。パスワードを携帯電話のタッチキーボードから入力すると、間違いを犯しやすくなります。このような場合、画面上の文字を制御する方が便利です。ユーザーには選択肢を与える必要があります。入力時にパスワードを表示するかどうか。
訪問者の希望なしにページで自動的に再生されるスライドショー（フラッシュ、ビデオなど）も、よくある間違いです。これに依存して関心を引くべきではありません-むしろ、ページの予期しない動作により、ユーザーがページを閉じます。
人気のあるカルーセルサイトは、特にカルーセルなしで設計された適応型モバイルサイトが別にない場合、最良のソリューションではありません。カルーセルはモバイルデバイスではうまく表示されず、デバイス上のサイトは最新の状態ではありません。
ドロップダウンメニューは、サイトをナビゲートする最良の方法とはほど遠いものです。まず、モバイルデバイスのユーザーにとっては不便だからです。そのようなメニューにもう1つのメニューが埋め込まれている場合、サイトは完全に不快になり、ナビゲートが困難になり、ロードが困難になります。
ドッキングされたツールバー（ツールバー、ツールバー、ナビゲーションメニュー）は、ユーザーにとって便利なソリューションです。サイトをどれだけ使用しても、すべての基本機能は固定されており、利用可能です。ただし、多くの場合、開発者はツールバーの設計に失敗し、スクロールしても消えます。この動作は避けてください。
サイトをナビゲートしている間、ユーザーはいつでもメインページに戻ることができます。ホームボタン（ホーム、ホーム）がない場合は悪いことですが、ユーザーがサイトのロゴをクリックしてメインページに戻らずに現在の位置に留まる場合は完全に受け入れられません。そして、ここにナビゲーションの指示に関して完璧なサイトがあります:-)
隅にあるサイトメニューを呼び出すボタン（ハンバーガーナビゲーションアイコン）は、モバイルには便利なソリューションですが、フルメニューをデザインするのに十分なスペースがあるデスクトップサイトには最適なソリューションではありません。このようなナビゲーションにより、ユーザーはサイトで不必要なアクションを実行する必要があります。
サイトの長いページ（スクロール）のファッションは、サイトをナビゲートする際にキーボードの優先度を高めました。ほとんどのユーザーにとって、これは不快で珍しい方法であり、マウスを優先して回避する方が良いでしょう。これは元の記事にはありませんが、ここでは、マウスでスクロールするときにページの信じられないほど不便な水平方向の動きを追加できます（ try ）。これはオリジナルであり、おそらく本のようなサイトをスクロールできるモバイルガジェットにとっても便利ですが、画面上のページのこの動作は、ユーザーとマウスホイールの動きと矛盾し、戸惑いを引き起こします。
悪い配色は、インターネット上で非常に一般的なものです。赤に赤、黄に白のフォント...色の間違いを避けるために、色理論の研究を慎重に検討するか、特別なツールを使用する必要があります。
サイトの小さな活字-ユーザーに目を痛めたり、追加の光学ツールを使用してページを表示させたりしないでください。
Captcha（captcha）-ユーザーが人間かロボットかを判断するために使用されるコンピューターテスト）は、サイトに入るとすぐに発生しますが、これはナンセンスです。ロボットまたは人がサイトにアクセスしたかどうかを確認し、登録またはフィードバックの送信の段階でボットやスパムから身を守ることをお勧めします。

一部の人にとっては、いくつかのエラーは明白または奇妙に見えるかもしれません。ただし、選択した問題は、サイトやオンラインストアのインターフェイスで頻繁に見つかるため、ユーザビリティを大幅に悪化させるため、正確に強調表示されます。これらの問題を解決するために、開発者やサイト所有者は、非標準の設計およびプログラミング手法に関する超能力と知識を必要としません。必要なのは、少しの内部テストを実施し、問題を認識して、修正を開始することだけです。洗練と自己検査の2、3回の反復-そして、あなた自身があなた自身のサイトで何かを購入したいと思うでしょう。そして、それはすべてがうまくいったことを意味します！

当社の調査から詳細をご覧ください（PDF、15MB、203ページ）

続けてくれてありがとう

オンラインストアなどの致命的なユーザビリティの10の間違い