オンラインショッピングに最適なユーザビリティソリューション：お客様を幸せにします

人々は買う傾向があります。 したがって、一般的な消費の問題、特に購入プロセスに関する科学者や研究者の関心は衰えません。 初期の経済学者や社会学者がこれらのプロセスを研究した場合、現在心理学者や神経生理学者が消費者行動の研究に参加しています。 外国の医学および一般的な科学の出版物では、そのような用語でさえ登場しました- 小売療法 。 実際には、購入中に、ストレスに似た感覚が現れたり、不安感を感じたり、多幸感の状態になることがあります。 そして、これは、オンラインで行われたものを含むすべてのタイプの購入に適用されます。 したがって、実際の店舗で販売しているのか仮想店舗で販売しているのかに違いはありません。売り手として、買い手が購入から本当の喜びを受け取り、再び返品できるようにすべてを行うことが重要です。


前回の投稿では、オンラインストアの購入ページを開発する際に犯した主な間違いを調査しました。次に、回答者が指摘した成功した発見とベストプラクティスに焦点を当てます。

一般的に言えば、オンラインストアのプロトタイピングと設計のプロセスで注意すべきいくつかの重要なポイントがあります。 インフォグラフィックでベストプラクティスに基づいた一般的な推奨事項を確認できます。



購入プロセスは、商品を選択する段階、注文する段階、支払いの段階という3つのブロックの原則に従って分割されます。 回答者の観点から最も成功したソリューションを検討してください。

製品の選択

この段階で、買い手は好きな商品を選択してバスケットに入れるか、バスケットに入れます。 この場合、購入の決定は、原則として最後まで行われず、不明瞭で不当な行動によって買い手を迷わせないことが重要です。 そして、ここでは、バスケットに商品を追加するプロセスを視覚化する方法が非常に重要です。 これを行うには、いくつかの方法があります。

• 商品がカートに入っているという情報が表示されたポップアップウィンドウは、購入する中小の商品用です
  
• カートページへの自動移行-少数のアイテムでも
  
• 製品カードの製品追加ボタンまたはカウンターを変更します-特に多数のアイテム（製品、カスタムメイドの食品）に関連します。
  

つまり、製品を追加するときは、製品が正常に追加されたことを示すフィードバックが必要です。 製品を追加するステップには、最低限必要なステップが含まれている必要があります。
製品を再追加する可能性を最小限に抑えることも必要です。 たとえば、ストアのウェブサイトのEnterで[カートに追加]ボタンをクリックすると、ボタンの名前がす​​ぐに変更され、ボタンを最初に押した後に非アクティブになります。 再追加の可能性は最小限に抑えられます。



Ozonストアのウェブサイトで、バスケットに商品を追加すると、ボタンの名前が「In the basket」に変わり、ボタンをもう一度押すとバイヤーがバスケットに移動します。



バイヤーが商品の入手可能性を時間内に見つけた場合も良いでしょう。 Zaraストアのアプリケーションでは、商品の利用可能な数量に関する情報がバスケットページに直接表示されます。



店舗に複数のポイントがある場合、特定の商品がどれだけ、どれだけ入手可能かを示す価値があります。 このソリューションは、緊急の購入に特に役立ちます-バイヤーは、選択したポイントで商品を受け取ることを確信しています。 このような成功したソリューションの例として、CitylinkストアのWebサイトのバスケットがあります。製品があるストアはバスケットページにリストされ、それぞれの商品のおおよその量が示されます。



商品が選択された後、ユーザーを支払い段階に導くことが重要です。 このステップでは、購入を継続するボタンの正しいデザインが重要な役割を果たします。それは目立って理解できるはずです。 ほとんどのテスト済みストアのサイトでは、注文を継続するボタンが視覚的に強調表示され、ページに表示されます。 たとえば、ストアのWebサイトEnterでは、注文を続行するボタンが視覚的に優先されます。



バスケットの段階では、オンラインストアが提供する配信のすべてのオプション（および利用可能な場合-およびボーナス）について説明する価値があります。 特定の注文金額から無料配信を利用できる場合は、この情報をページに表示することが特に重要です。 たとえば、Sportmasterストアのウェブサイトでは、配送が無料になるように最小注文金額が報告され、価格の横には注文金額で配送費用が計算されないという情報があります。 回答者は、配送を無料にするために、サイトで他の製品を探し始めることができると述べました。 したがって、このような決定は、平均購入領収書の価値を高めることができます。



注文する際のもう1つの重要な詳細は、ユーザーが所有するプロモーションコードとクーポンの会計処理です。 プロモーションコードフィールドが強調表示され、クーポンを持っていない購入者の注意を引くときに発生する否定的な状況の例を既に検討しました。 入力フィールドがデフォルトで非表示になっている場合、ユーザーは引き続き購入し、割引コードを受け取る機会を見つけようとしません。 たとえば、M.VideoストアのWebサイトでは、プロモーションコードの入力フィールドがリンクの後ろに隠れており、ユーザーの注意が再び集まることはありません。



また、ウィキマートサービスのWebサイトでは、プロモーションコードのアクティベーションコードの横に、取得方法に関する情報が記載されたページへのリンクが記載されています。 ユーザーは、割引を受けるためにサードパーティのサービスに切り替える必要はありません。



ユーザーのニーズと能力に基づいて、購入の構成はいつでも変更される可能性があります。 したがって、バスケットから商品を取り出すプロセスに注意を払う必要があります。 ほとんどのユーザーにとって、バスケットからの商品の取り外しは注文の商品の数量の変更に関連付けられているため、商品の取り外し機能はバスケット内の数量のカウンターの隣にある必要があります。 商品の撤去のための成功したソリューションの例は、ウィキマートとエンターの店舗のサイトから取られています。

チェックアウト

原則として、製品を選択した直後に、ユーザーはサイトで承認します-支払いプロセスに移行するための中間段階です。 承認は簡潔でわかりやすく、目立たないようにする必要があります。購入者は購入に必要な最小限の情報を、できれば正当な理由なしに情報の確認を要求せずに求められるべきです。 さらに、登録せずに注文を完了する機会を提供する必要があります。 たとえば、KassirサービスのWebサイトでは、注文の際に電話番号の確認は必要ありません。その結果、回答者は購入を正常に完了しました。



将来的には、注文するために入力した連絡先の詳細に基づいて、ユーザーに自動登録を提供できます。 多くの場合、バックグラウンド登録は、電子製品を販売するサイトで使用されます。 この調査は、そのような登録は回答者に目立たず、時間の無駄を生じさせないことを明らかにしました。

物理的な商品を販売するときに、バックグラウンド登録を利用することもできます。 たとえば、SotmarketストアのWebサイトでは、最初の購入時にバックグラウンド登録が実行されます。ユーザーはすぐにチェックアウトページに移動しますが、認証段階はありません。 注文後、登録情報とパスワードを含む手紙がメールで届きます。 その後の購入の場合、チェックアウトページで電子メールアドレスを入力するだけで、サイトに入るための「パスワード」フィールドが表示されます。



登録中、通常の注文と同じ量のデータが要求されるという事実にもかかわらず、ユーザーは時間がかかることを考慮して、サイトに登録することを望みません。 バックグラウンド登録により、ユーザーは不要なアクションを感じることなく、サイトのすべての機能にアクセスできます。

ユーザーの登録をさらに促進するには、その利点を明確かつ明確に説明する価値があります。良い例は、Svyaznoyストアのサイトです。



登録後に電話やメールを確認するなどの追加のアクションは、購入から購入者を遠ざけます。 したがって、登録の一部として必要なすべての確認を行うことをお勧めします。たとえば、Ticketland Webサイトに実装されているため、確認プロセスが登録に組み込まれ、ユーザーが不要なアクションを実行する必要はありません。



注文完了後の任意登録は、ユーザーにとって好ましい登録オプションです。 この場合、買い手は自分でサイトに登録することを決定し、自分のパスワードを設定できます。 これは顧客にとって便利なようです。顧客のほとんどが何かを購入するために必要に応じてアクセスするサイトで、1つの標準パスワードを設定するからです。 テスト済みのM.Video Webサイトでは、注文後の登録機会が正常に実装されています。 注文確認ページで、パスワードを入力するだけで登録が完了します。



ウィキマートのウェブサイトにも同様の実装があります。 登録は注文後に行われ、別の段階では強調表示されません。



ほとんどの場合、注文時にユーザーは個人の連絡先情報を残します。 そのようなデータがマーケティング活動の貴重な基盤であることは誰もが知っています。 これは購入者にも知られており、購入者は割引やプロモーションに関する良いニュースを受け取ることに最も興味を持っています。
ただし、テストしたサイトには、ユーザーの連絡先情報、特に電子メールアドレスの使用方法に関する指示がほとんどありませんでした。 このような情報は、たとえば、ウィキマートサービスのWebサイトで提供されます。



受け取った連絡先を使用する意思があることをユーザーに警告します。関心のある顧客は常にデータを残して、ストアから追加情報を受け取ります。

支払い段階

購入の次の段階は支払いとそれに関連するすべてです。 この段階では、データ入力の正確性を確保することが重要であり、各インターフェイス要素は理解可能である必要があります。 多くのオンラインストアがこのタスクに対処できました。調査中、回答者は便利な解決策を指摘しました。

支払いオプションがグループに分けられている場合、支払い方法を簡単に把握して選択できます。 たとえば、EnterストアのWebサイトでは、オプションは「注文の受領時」と「今すぐ」のグループに分けられます。 このソリューションを使用すると、必要なメソッドだけに注意を払うことができ、長いリストのすべてのオプションを見る必要はありません。



別の良い発見は、支払い方法を人気でソートし、オプションのリストの一番上に最も人気のあるオプションを提供することです。 たとえば、SotmarketストアのWebサイトでは、「前払い」項目の支払いオプションは人気順にソートされ、頻度が最も低い方法は「7個以上の支払い方法」リンクの下に隠されています。 このリストには低頻度のオプションが多数含まれていないため、ユーザーは目的のオプションを見つけて選択しやすくなります。



サイトのオーディエンスの間で最も人気のある支払い方法はデフォルトで選択できます。これにより、ほとんどのユーザーが不必要なアクションを選択しないようにできます。 そのため、IVI Webサイトでは、デフォルトでクレジットカードによる支払いが選択されており、ユーザーは目的のオプションを追加で選択する必要はありません。

さらに購入する際に、利便性を高めるためにユーザーに銀行カードを添付する機会を与えることは価値があります。 たとえば、WebサイトおよびSteamアプリケーションでは、最初の支払いの後、ユーザーは追加の支払いに銀行カードの詳細を使用するように招待されます。 この場合、カードの詳細を再入力する必要はありません。



ユーザーがカードから引き落とされる正確な金額を知ることができるように、支払いの手数料を必ず指定してください。 支払い方法の横に、可能な価格変更を報告する必要があります。 たとえば、ホロロジニックストアのモバイルサイトでは、支払い方法の名前の横に手数料がマークされています。 この場合、支払い時に、注文金額が高くなったときにユーザーに質問はありません。



絵、特に馴染みのあるロゴは、テキストよりも単純に人に知覚されます。 そのため、LiteRes Webサイトで行われたように、支払い方法にピクトグラムや支払いサービスのロゴを追加する必要があります。 この方法で表示される情報は読みやすく、ユーザーは目的のオプションを簡単に選択できます。



集荷の場合、商品が最も近い配達ポイントに配達されることがユーザーにとって便利です。 最適には、ユーザーの地理座標が自動的に決定され、最も近い配達ポイントが提供される場合。 これが不可能な場合は、最大限の自動化に努める必要があります。たとえば、入力した住所に基づいて最寄りのポイントまたは地下鉄駅のパラメーターを置き換えるなどです。 店舗のウェブサイトEnterで、住所を入力すると自動的に地下鉄駅の名前が表示されます。 同時に、フィールドは編集可能なままであり、システムがステーションを誤って検出した場合、ユーザーはキーボードからステーションを登録するオプションがあります。



現代のインターネットユーザーは、交通サービス、ナビゲーター、組織の検索など、都市の仮想マップを積極的に使用しています。したがって、さらに便利なソリューションは、オフラインストアの場所を地図上に表示することです。 SvyaznoyストアのWebサイトでは、マップとリストの両方にストアが表示されます。 フォームには検索フィールドもあります。これは、店舗に多数のピックアップポイントがある場合に便利です。 さらに、ユーザーに必要なパラメーターでアイテムのリストを並べ替えることができます。



アイテムは、地下鉄駅名のアルファベット順にソートできます。 多数の店舗がある場合、メトロラインの色表示を使用して検索を容易にできます。 たとえば、UlmartストアのWebサイトでは、リストは地下鉄の駅の名前でソートされており、各行には駅のある行の色インジケータがあります。



ユーザーは住所を入力するときに間違いを犯す可能性がありますが、これにより注文の続行が拒否されることはありません。 起こりうるエラーを回避するために、入力する最初の文字でリストからオプションを提案する必要があります-これは、ユーザーが目的のアドレスを選択するのに役立ちます。 ストアのウェブサイトEnterで、ドロップダウンリストからアドレスを選択するか、キーボードから手動で入力できます。



多くの場合、その名前の横にある店舗を選択するときに、商品をいつ受け取ることができるかが正確に示されます。 UlmartとSvyaznoyの店舗のサイトでは、店舗の名前の横にあるリストに、注文を引き取ることができる時間に関する情報が含まれています。




場合によっては、注文後すぐに店舗から商品を受け取ることが重要です。 ユーザーの便宜を図るため、今すぐ商品を取り込める店舗をリストにマークできます。

注文確認のプロセスでは、何らかの理由でユーザーが注文パラメーターを変更したい場合があります。そのため、この機能は確認フォームから直接利用できます。 たとえば、BuketストアのWebサイトでは、すべての注文パラメーターを変更できます。 ユーザーは、編集のために前のステップに戻る必要はなく、それによって商品の支払いという最終アクションから離れる必要があります。



原則として、カードの詳細を入力する段階では注意が必要です。 小さくて馴染みのある銀行カードには、オンラインストアのフォームに転送する必要があるかなり大量の情報が含まれています。 この場合、ユーザーはデータ入力の正確さを確信する必要があります。 詳細入力ページの思慮深いデザインは、さらに自信を与えることができます。

データ入力中またはデータ入力後のユーザーは送信された情報の正確性を検証するため、カード番号の入力フィールドを視覚的にブロックに分割すると便利です。 調査中、回答者は個人の銀行情報を使用しなかったため、詳細を記入する際の不安のレベルは実際よりも低くなりました。 しかし、参加者の半数以上が入力されたデータの正確性をチェックしました。 カード番号が数字の連続したシーケンスで提示される場合、回答者は検証に問題がありました。



一般に、カードから詳細を入力するためのページを設計するプロセスでは、些細なことのように思われる多くのことはそうではありません。 たとえば、「地図上のように」姓と名を入力します。 最初に、フィールドは名前と姓で同じである必要があります。次に、入力した文字の大文字と小文字に注意する必要があります。銀行カードの名前と姓は大文字とラテン文字で入力されるため、フィールドに入力するときに経験の浅いユーザーに質問が発生します。 「名前」フィールドへの入力中にオンラインで支払いをした経験のほとんどない回答者のほとんどは、名前を大文字または小文字で書く必要があるか、名前をラテン文字で書く必要があるかを自問しました。 モバイルデバイスからの入力は、大文字のスペルへの翻訳がほとんどのユーザーにとって明白ではないという事実によって複雑になり、ユーザーはキーを連続して押して各文字の後に文字を大文字に変換します。これにより、入力時間が大幅に増加します。
実装の成功例は、Aeroexpress Webサイトで見ることができます。 名前を入力すると、文字は大文字で表示されます。 ユーザーが誤ってキーボードレイアウトを切り替えずにキリル文字を入力し始めた場合、文字はキーボード上の対応するラテン文字に自動的に置き換えられます。



カードの記録形式と同様の記録形式を使用すると、ユーザーの認知的負荷が軽減され、サービスのエクスペリエンスにプラスの影響があります。 マップ上で必要な情報を見つけるのが簡単になり、フォームフィールドに入力するときの質問が少なくなります。
ユーザーがカードの詳細を簡単に入力できるようにするには、銀行カード自体の形式で入力フォームを実装するのが最善です-入力するデータは絶対に明らかです。 リットルストアのWebサイトにある正常な支払いフォーム：入力フィールドの場所は、地図上の情報の場所に対応しています。 このバージョンでは、経験の浅いユーザーでも適切な情報を簡単に見つけることができます。



ページにカードの詳細を入力する順序は、ユーザーの視線の軌跡に対応する必要があり、追加情報を入力しても中断されません。 Rambler.Kassaサービスには、モバイルデバイスからの支払いに適したソリューションがあります。 すべてのフィールドは、ユーザーがマップ上で表示する順序で配置されます。



詳細を入力するプロセスでは、自動的に決定できるデータを要求することはお勧めしません。 カードの種類、銀行名、銀行のテクニカルサポート番号は自動的に決定されますが、セキュリティ対策として支払いページで要求されることがよくあります。 適切なソリューションの例としては、PayUシステムがあります。このシステムでは、入力時にカードのタイプが自動的に決定されます。

より多くのフィールドをより強力な保護と関連付ける人はほとんどいないため、フォームフィールドを追加してもユーザーの安心感は生まれません。 多くの場合、オプションの支払いフィールドのうち、カード所有者の名前フィールドのみが使用されますが、その頻度のため、調査回答者は支払いが必須であると考え、不要とは見なしませんでした。たとえば、ポスターアプリケーションの支払いページには、支払いに必要なフィールドのみが表示され、ユーザーは支払いフォームにすばやく簡単に入力できます。

名前のないカードが多数あるため、この場合の対処方法に関する追加のヒントが必要です。たとえば、ロシア標準銀行は名前のないカードを提供しています。



ユーザーにとって、オンラインストアのページの正しいデザインは、購入と支払いの安全性の同義語です。したがって、支払いシステムページの設計に特別な注意を払う価値があります。このページは、注文後に購入者がリダイレクトされるページです。
支払いシステムのページは、オンラインストアのWebサイトまたは外部に埋め込まれている場合があります。いずれにしても、ユーザーが新しいサイトへの移行によって混乱しないように、デザインの統一性とページのブランド化が必要です。支払いフォームがストアのウェブサイトページに埋め込まれると、バスケットの内容を表示することが可能になります。たとえば、M.Video Webサイトでの方法。ユーザーは、バスケットの内容と注文の量を確認できます。



Vedomostiの出版物の購読料を支払うと、銀行の支払いページに移行しますが、ページのデザインスタイルはページ上で維持され、Vedomostiのロゴと注文の説明があります。この場合、回答者の大半はページアドレスの変更に気づかず、支払いのセキュリティに自信があります。



支払いフォームのロゴまたは3DSecureサービスのピクトグラム（MasterCard SecureCodeなど）は、支払いフォームのページに存在する必要があります。URLアドレスバーに「ロック」記号を保存することは不要です。ほとんどのユーザーは支払いページのアイコンの技術的な意味を理解していないという事実にもかかわらず、そのようなアイコンは支払いセキュリティの主観的な感覚を高める追加の要因です。



電子決済の際、技術的な問題、ユーザー側の問題（カードにお金がないなど）、または支払いのキャンセルにつながるその他の状況が発生する可能性があります。操作がキャンセルされた場合、不承認となった支払いに関する情報を含むページへの移行が行われます。支払いが失敗した場合、ロボカッササービスページは、発生したエラーに関する簡単な情報を含むページに移動します。ユーザーは、支払いに戻るか、ストアに戻って注文を調整するように求められます。



注文の支払いがパスしなかった場合、ユーザーにすぐに通知する必要があります。支払いに失敗した後のLamodaストアのWebサイトでは、ストアのWebサイトに戻ります。このページには、注文が成立したという情報と、ストアマネージャーが注文を明確にするために購入者に連絡する情報が記載されています。



取得する銀行のページも、ユーザーフレンドリーで直感的でなければなりません。重要な役割は、すべての情報のレイアウトと必要なアクションの証拠によって果たされます。引き落としの量に関する情報が表示されるか、ワンタイムパスワード入力フィールドが目立つか、パスワードを入力する必要がないことが直接示されます。そのため、ユーザーは重要な情報を簡単に確認できます。

支払い確認ボタンは、入力フィールドの右側に配置する必要があります。入力フィールドの下に配置すると、スマートフォンから支払いを行うときにキーボードが重なることがよくあるためです。右側にある場合、支払いプロセスにかかる時間が短くなり、ボタンを見つけるのに問題はありません。



オンラインストアの購入者は、ページで何が起こっているのか、そしてそれ以上のアクションは何であるのかについての情報を常に受け​​取る必要があります。たとえば、銀行の1つのページに、メッセージが電話に送信され、その使用方法が指示されたことが示されています。このフォームでは、ほとんどのユーザーが理解できる頻度の用語を使用しています。
多くの場合、SMSメッセージの最後に確認コードが表示されます。確認コードを表示するには、追加の手順を実行する必要があります。これは、同じモバイルデバイスからパスワードを入力するときに特に不便です。これは、テスト済みの2つの銀行のSMSメッセージに適切に実装されています。確認コードは、メッセージの先頭にあります。ユーザーは、メッセージを開いて読んでコードを見つけるために時間を費やす必要はありません。

お支払い後

支払いを行った後、最後の仕上げは残ります-ユーザーに感謝します。ただし、感謝に加えて、「ご購入ありがとうございました」ページで、注文の構成と量、選択した方法と納期に関する情報を入力する必要があります。たとえば、UlmartストアのWebサイトでは、発注の確認ページに、検証に重要なすべてのパラメーターが示されています。



電子商品または電子チケットを購入した場合、ページには購入を取得するための指示、またはリンクから購入した商品をダウンロードする機能が含まれている必要があります。たとえば、購入後のSteamアプリケーションでは、購入したゲームをリモートでインストールすることが提案されています。



また、購入者がいつでも手紙を参照できるように、すべての情報を購入者の電子メールで複製する必要があります。シティリンクのストアレターには、受取人の配達、支払い、連絡先の詳細がすべて複製されています。手紙のテキストには、注文の数と構成、合計金額も示されています。



印刷用の注文パラメーターを持つフォームを考えると便利です。

オンラインストアのページの使いやすさについてささいな些細なことはありません。すべてのインターフェイス要素は、ユーザーが快適に購入できるように機能する必要があります。この場合、規模に関係なく、メーカーのウェブサイトにある巨大なオンラインストアや購入ページは関係ありません。ベストプラクティスと典型的な間違いは、オンラインで販売しようとする人にとって最も役立ちます。最初に便利なページを作成することは、後で修正してミスから学習するよりも優れているためです。

MasterCardブログの最初の投稿、ユーザーselekoのコメントで「マスターカード、オンラインでの購入に対して一般的に支払いを許可する店舗の割合に注意してください。オンラインで支払いができないことに比べて、余分なクリックが非常に重要であるかどうかはわかりません:)」サイトをショーケースとしてのみ使用する人がいます。購入プロセス全体で、アウトレットまたは電話で注文することができます。ただし、eコマースの分野は急速に成長しており、サイトには新しいオンラインストアやショッピングページがあります。そして、それぞれを作成する段階で、購入のすべての段階の使いやすさに特に注意を払うことが重要です。サイトで購入ページのプロトタイプとデザインを作成するときは、重要なルールを覚えておいてください。



高品質の専門知識とベストプラクティスに基づいて、販売オンラインストアを作成し、それに応じて視聴者により近くなることが容易になります。それは確かに顧客の忠誠心、そして最終的には利益に影響します。研究の完全版（PDF、15メガバイト、203頁）継続する、ご清聴ありがとうございました