モバイルエクスペリエンスのためのeコマースUX

「モバイルコマース」という用語は、20年前にKevin Duffeyが、モバイルデバイスが顧客のポケットの中で小売店として機能できることを示唆したときに導入されました。 当時の技術的な限界を考えると、いつの日か小さなポケットサイズのデバイスで商品を簡単に探索、確認、購入できるようになると誰が考えたでしょうか。

モバイルが消費者とのやり取りの仕方をどのように変えているかを誇張することはできません。 これらの変化を受け入れる必要があります。 –ウォルマートのCEO、ジョエル・アンダーソン

eコマースの驚異的な成長は、モバイルeコマースの成長にも拍車をかけ、現在では7,000億ドル近くの価値があります。 モバイルeコマースは現在、巨大なオンライン市場の最大のスライスです。 アメリカ人の80％以上が先月オンラインで購入しました。3年前、その数はわずか11.6％でした。

Business Insider Intelligenceのレポートによると、モバイルコマースは2020年までに最大45％増加します。ComScoreの調査は同意し、2016年には、2015年と比較してモバイルデバイス経由の支出が44％増加したと報告しています。

販売数が多いにもかかわらず、ユーザーの60％以上が、携帯電話を使用しているときに財務情報がハッキングされることを懸念しています。 それにもかかわらず、顧客満足度は依然としてかなり高く、AmazonやAppleなどのモバイル小売大手はどちらも80％以上の満足度を獲得しています。

成功のためのモバイルeコマースUXのベストプラクティス

ピンチおよびダブルタップジェスチャによる画像ズームのサポート

人々は、モバイルで画像を拡大するためのダブルタップやピンチなどのジェスチャーに精通しています。 モバイルeコマースのユーザビリティ調査中に、Baymard Instituteは、当然のことながら、買い物客は製品を徹底的に検査できることを望んでおり、細部に関心があることを発見しました。 製品の購入に興味を持っていたが、ズームインしてそれを探索することができなかったユーザーは、それを購入することに不安を感じ、しばしば販売にコミットしませんでした。

50のトップグロスモバイルeコマースアプリケーションのうち、40％以上がズームジェスチャをサポートしていなかったことは非常に驚くべきことです。 画像のクローズアップバージョンを提供しているサイトでさえ、同様のバウンス率を経験しました。これは、モバイルeコマースアプリでの製品画像ズームジェスチャのサポートが基本であることを示唆しています。

モバイルデバイスの画面サイズが小さいことを考えると、これはプラットフォーム固有の問題です。 これらの機能の少なくとも1つをサポートすることで、eコマースアプリケーションの上位50％の企業、つまり上位のリストにアプリを配置できます。

考慮すべきいくつかの要因：

• 低解像度の画像は、ズームなしの画像と同等です。 ユーザーは製品の詳細をはっきりと見ることに興味があり、そのためには高解像度の画像が必要です。 低品質の画像を拡大するオプションは、ユーザーが詳細を表示できないため、ほとんど役に立ちません。
• Baymard Instituteは、アプリの50％が、商品の画像をピンチまたはダブルタップできることをユーザーに示していないことを発見しました。 画像ズームが利用できるかどうかを示すことは重要です。 これらのジェスチャはモバイルユーザーには一般的に知られていますが、それでも使用可能であることを示す必要があります。 これを行うには、アイコンまたは視覚的表現の使用をお勧めします。

ショッピングカートに「保存」機能を提供する

前述のように、モバイルデバイスの小さな画面サイズは、モバイルeコマースの主な障害です。 Baymard Instituteは、モバイルユーザーの61％以上が、電話ではなくデスクトップを使用して購入を完了することが多いことを確認しました。

「ショッピングカートの保存」機能により、カートの放棄数が減り、買い物客は後で購入するためにアイテムを保存できます。 永続的なショッピングカートを使用すると、顧客は返品時に目的の商品を検索しなくても買い物を続けることができます。これは、買い物客の55％が利用する機能です。

これらの顧客を維持する方法は次のとおりです。

1. カートに追加されたアイテムを保存して、カートをウィッシュリストとして機能させます。
2. 買い物客が保存されたアイテムを含む電子メールを受信できるようにするオプションを作成します。 デスクトップを使用して購入を完了することができるというリマインダーを表示します。

わかりやすく、適切にラベル付けされたフォームを使用する

モバイルフォームにベストプラクティスを適用することも考慮事項です。 eコマースアプリまたはサイトのUXデザインは、混乱を排除しながら、ユーザーができるだけ早くフォームに記入できるようにすることが重要です。

モバイルフォームのユーザビリティのベストプラクティスは次のとおりです。

• フォームの上にフォームラベルを配置して、読みやすさ、使いやすさ、わかりやすさを向上させます。 特定の情報が必要な理由を説明することで、携帯電話でフォームに入力する際のユーザーの不安を軽減できます。
• テキスト入力を適切なキーボードと一致させます。 電話番号やクレジットカードの数字を入力するときはダイヤルパッドを表示し、住所やテキストを入力するときはテキストパッドを表示します。 これにより、ユーザーのミスが減り、フォームの入力が高速化されます。
• 入力フィールドの数を制限して、入力の労力を減らします。 入力フィールドが少ないほど、生成されるフォームの負荷が少なくなり、UXチェックアウトフローが改善されます。
• 完了すると、各フィールドが画面の上方に自動的に進みます。 これを行っても、不完全なフィールドの表示が妨げられることはありません。
• ドロップダウンメニューの代わりにステッパーを使用して、買い物客の労力を減らします。 ステッパーは、値を一定量増減するために使用され、作業が速く、目に魅力的なソリューションです。

インテリジェントな自動提案、自動検出、アドレスルックアップ、およびエラーを提供します

自動提案の背後にある主な目的は、ユーザーがフォームに簡単かつ迅速に入力できるようにすることです。 自動提案は、一般的な検索クエリを予測し、買い物客がより簡単に商品を見つけるのに役立ちます。

クレジットカードタイプの自動検出を使用することで、モバイルユーザビリティをさらに向上させることができます。 自動検出は、サポートされているカードタイプに即座にフィードバックを提供することにより、購入プロセスを合理化します。 できるだけ多くのデータ入力プロセスを自動化すると（できればビジュアルを使用して）、ユーザーエクスペリエンスが向上し、コンバージョン率にプラスの影響を与えます。

住所の検索と検証により、チェックアウトプロセスが高速化されます。さまざまなAPI（Google PlacesやUSPSなど）により、この機能を簡単に実装できます。

エラーのインライン入力検証を提供することも、モバイルUXデザインのベストプラクティスです。 スピーディーなパフォーマンスの欠如は、eコマースの買い物客にとって大きなフラストレーションです。 これは、特にユーザーが不注意でミスをした場合に、進行状況に関するライブフィードバックをユーザーに提供することで役立ちます（たとえば、チェックアウト中）。 これにより、ユーザーは間違いをすぐに修正でき、使いやすさにプラスの影響を与えます。

マイクロインタラクションを使用してモバイルショッピングのUXを改善する

マイクロインタラクションは、製品のインターフェースの詳細であり、自然な製品の流れを改善しながら単一のタスクを実行することを目的としています。 製品のいいねと評価、色とサイズの選択、下にスワイプしてデータを更新することはすべて、マイクロインタラクションの例です。

それらがどれほど一般的であるかを考えると、マイクロインタラクションはモバイルeコマースアプリケーションのUXを左右する可能性があります。

マイクロインタラクションは、次の目的で使用できます。

• より直感的な方法でアプリケーションを介してユーザーをガイドします。
• よりスムーズで自然な相互作用により、より良い信頼感を伝え、買い物客の不安を軽減し、全体的な心理的快適さを高めます。
• 将来のエラーを防ぎ、ユーザーが完了したアクティビティに基づいてユーザーに即座にフィードバックを提供します。 および/または
• 通知に応答することで、アプリとのユーザーインタラクションを改善します。

簡単で親指指向のインタラクションを提供する

買い物客がモバイルデバイスを保持する最も一般的な方法を理解すると、モバイルeコマースのユーザーエクスペリエンスと使いやすさが向上します。 2013年、Steven Hooberは、「ユーザーは実際にモバイルデバイスをどのように持っているのか」と質問しました。 人々がスマートフォンをどのように操作して保持するかを観察し、モバイルUXデザインを導く3つの主要な行動パターンに気づきました。

人々が自然に携帯電話を使用する方法にインターフェースを適応させることは、ユーザーの快適さを向上させ、買い物客の不安を軽減します。 モバイルデバイスと画面サイズはさまざまですが、デザインとユーザーエクスペリエンスの重要な側面である「サムゾーン」は同じままです。

「サムゾーン」を中心とした設計：

• ナビゲーションと探索に関する潜在的な問題を解決します
• ジェスチャと指の届く範囲をより適切に調整することにより、インタラクションを改善します
• 重要な要素を「到達しやすい」ゾーンに配置することで、変換が向上し、使いやすさが向上します

コンバージョン指向のモバイルeコマースデザインに関する考慮事項

モバイルeコマースアプリケーションで安心感を伝える

セキュリティは、モバイルデバイスで買い物をする際のユーザーにとって最大の懸念事項の1つです。 彼らの取引が安全であることを伝えることは、買い物客が店に対して持っている肯定的な認識に多くの価値を追加します。

セキュリティをユーザーに伝え、ユーザーの不安を軽減するUXデザイン手法を次に示します。

• 買い物客がどこに行くのかについて、ボタンのラベルを示唆的で明確にします。 「続行」、「安全」、「暗号化」などの言葉は、ユーザーの心理的な快適さを強化します。
• ロック記号を使用して、買い物客に取引が安全であることを保証します。
• McAfeeSecureやNortonなどのセキュリティプロバイダーによる信頼バッジを使用します。 これは、ユーザーがWebサイトを肯定的に認識するのに役立ちます（Baymard Instituteの調査）。
• 買い物客による信頼の認識をさらに高めるために、デザインに色彩心理学の原則を適用します。 これらの原則のいくつかには、視聴者指向および性別固有の色が含まれます。

検索を優先する（そしてそれをフォールドより上に保つ）

買い物客はモバイルeコマースサイトまたはアプリを使用して、商品を探索したり、特定の商品を購入したりします。 したがって、適切に設計された検索は、モバイルeコマースアプリケーションにとって非常に重要です。 eBayは、サイト検索がモバイルショッパーにとって最も重要な機能の1つであると考えており、インターフェースの中央と折り目の上に配置することでそれを強調しています。

モバイル検索に関する重要な考慮事項：

• それが見えることを確認してください！ 検索バーに簡単にアクセスでき、折り目の上にあると、買い物客は簡単に商品を検索できます。
• 一般的な検索パターンから取得したデータを使用して先読み検索を提供し、検索結果ページに関連商品を表示します。
• 高度なフィルタリングオプションを提供して、顧客が目的の製品をすばやく簡単に見つけられるようにします。

検索フォームを表示する際に考慮すべき重要な側面は、ユーザーがアプリケーションを操作する最初の段階でのみ価値があるということです。 ユーザーは通常、ショッピングジャーニーの開始時にアプリケーションを検索します。また、ジャーニーの後半で検索フォームを表示すると、UXに悪影響を与える場合があります。

たとえば、チェックアウトプロセス中、検索は役に立たなくなり、ユーザーが集中力を失い、購入へのコミットメントを放棄する可能性があるため、気が散るだけです。

スムーズ、簡単、スピーディーなチェックアウトを提供

調査によると、チェックアウトプロセスは、オンラインで購入を完了する上で最もストレスの多い部分です。 Baymard Instituteは、購入前にアカウントを作成する必要があるため、カートの放棄率が35％であると報告しています。 カートの放棄率を下げるには、買い物客に最初に登録するように求めない、簡単で迅速なチェックアウトプロセスを設計することが重要です。

ユーザビリティ調査によると、ユーザーの60％以上がゲストチェックアウトオプションを見つけるのに苦労していました。 エルゴ、ゲストのチェックアウトオプションは、はっきりと表示され、簡単にアクセスできる必要があります。

eコマースのチェックアウトフローを改善するためのいくつかの提案を次に示します。

• ユーザーエンゲージメントを促進するには、現在アクティブなステップに番号を付けて表示することにより、チェックアウトプロセスの各ステップにラベルを付けます。
• プログレスバーなどの視覚的表現を使用して、チェックアウトプロセスの進行状況を表示します。
• チェックアウトプロセス中に登録およびログインするオプションを提供しますが、それを選択します。
• 不安やバウンス率を減らすために、ゲストとしてチェックアウトした場合は、チェックアウト後にログインまたは登録することをお勧めします。
• 段階的開示手法を適用して、ユーザーフォーカスを改善し、コンテンツを30％高速にロードします。

要約：成功するモバイルeコマースデザインのいくつかの重要な特徴は何ですか？

• サインアップとチェックアウトのプロセスフローをすばやく簡単に提供します
• 適切なアイコン、バッジ、レビュー、紹介文を表示することで、安心感と信頼感を植え付けます
• 親指に優しいゾーンを中心に設計されたインタラクションを提供します
• 一貫性のある凝縮されたナビゲーションを使用
• 製品の高速検索と簡単なフィルタリングを組み込んでいます
• モバイルアプリケーションのユーザーのストレス、不安、コンバージョン率の間の直接的なつながりを理解する
• モバイルサイトの読み込みが速く、応答性の高いエクスペリエンスを提供します
• 製品画像ズームのジェスチャをサポート

モバイルeコマーススペースはますます大きくなるだろう

モバイルeコマースのトレンドは、モバイルeコマース市場が指数関数的に成長しており、業界の成長が売り手に多くのメリットをもたらしていることを示しています。 ただし、それに伴い、売り手が成功するために従わなければならないモバイルeコマースデザインの多くのベストプラクティスと標準が生まれました。

買い物客は、うまく機能し、見た目が美しく、行動に適応したモバイルアプリケーションを期待しています。 すべてのアプリケーションは独自の制限と目標によって異なりますが、この記事で概説されている基本原則に従うことで、モバイルeコマースアプリケーションを成功させることができます。

モバイルeコマースUXの改善に関するチートシートをダウンロードする

•••

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

• 著名なeコマースのトレンドとそのデザインへの影響（インフォグラフィック付き）
• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• eコマースUX–基本的な設計戦略と原則
• eコマースウェブサイトデザインの究極のガイド
• eコマースの再設計：マイナーな変更によってUXが大幅に改善された方法