Google と AnswerLab は、この疑問の答えを出すために調査を実施しました。
モバイル ユーザーは目的指向が非常に高く、自分独自の条件に合わせて、必要なものをすぐに入手できることを期待しています。
この調査は、参加者との対面のユーザビリティ セッションという形で、119 時間にわたって米国で実施されました。参加者は、さまざまなモバイルサイトで主なタスクを実行することを求められました。iOS と Android のユーザーが含まれており、参加者自身のスマートフォンでサイトをテストしました。参加者はサイトごとに購入や予約などコンバージョンに特化したタスクを実行し、そのときの感想を求められました。
この調査では、モバイルサイトのデザインに関する 25 の原則を明らかにして、5 つのカテゴリに分類しました。
ホームページとサイトのナビゲーション
ポイント:モバイル版のホームページはユーザーの求めるコンテンツとユーザーをつなぐことに重点を置く必要があります。
CTA（コールトゥアクション）を前面および中央に配置する
二次的なタスクは、メニューまたはスクロールしなければ見えない位置に配置します。
メニューは短くわかりやすく
モバイル ユーザーは、目的のものが見つかるまで長いオプション リストをスクロールするほど忍耐強くはありません。 メニューの項目はできるだけ絞り込み、ユーザービリティを損なわないようにしてください。
ホームページに簡単に戻れるようにする
ユーザーはモバイルページの左上にあるロゴをタップするとホームページに戻ることを期待しており、それが利用できない、または機能しないときはストレスを感じます。
一番目立つ場所に広告を表示しない
アプリのインストールを促す大きなインタースティシャル（例: コンテンツを覆い隠すようにページの全面に表示される、アプリのインストールを促す広告）はユーザーにとって邪魔になり、タスクの実行を妨げます。アプリのインストールのインタースティシャルを使用しているサイトは、ユーザーに不快感を与えるだけでなく、Google のモバイル フレンドリー テストで不合格になり、検索ランキングが下がる可能性があります。
サイト内検索
ポイント:モバイル ユーザーが探している情報を迅速に見つけられるようサポートする必要があります。
サイト内検索ボックスを表示する
通常、情報を求めるユーザーは検索しようとするため、ページ上ですぐに検索フィールドが目に入るようにしておく必要があります。 メニューの中に検索ボックスを隠すことはおすすめしません。
サイト内検索で有用な情報を提供する
情報を探しているユーザーは、複数ページにわたる検索結果をすべて調べるようなことはしません。 クエリのオートコンプリート、打ち間違いの修正、クエリに関連する候補の表示によって、ユーザーの負担を軽減してください。 一から自身で開発せずに、Google カスタム検索などの堅牢なサービスの利用を検討してください。
結果を絞り込むフィルタを実装する
調査の参加者は、目的の情報を見つける際にフィルタに依存しており、効果的なフィルタがないサイトからは離脱してしまいます。検索結果の上にフィルタを用意して、特定のフィルタを適用した場合の結果の件数を表示すると使いやすくなります。
より適切なサイト内検索の結果を表示する
サイトの顧客セグメントが多岐にわたる場合、検索ボックスを表示する前にユーザーにいくつか質問をして、その回答を検索クエリのフィルタとして活用すると、ユーザーにとって最も有用なセグメントから結果を返すことができます。
コマースとコンバージョン
ポイント: カスタマー ジャーニーについて理解し、ユーザーの好みに応じたコンバージョンを実現してください。
登録しなくても閲覧できるようにする
調査の参加者は、サイトを利用しようとしたときに事前に登録を求められるとストレスを感じ、特に、あまり知らないブランドでその傾向が見られました。 ビジネスで顧客情報が不要であるにもかかわらず、あまりにも早い段階で登録を要求すると登録してもらえない可能性が高まります。
ゲストとして購入できるようにする
ある調査では、ゲストとして精算できると「便利」「シンプル」「簡単」「迅速」と評価されました。 ユーザーは、購入にあたってアカウントの登録を強制するサイトに対してストレスに感じており、アカウントのメリットが不明な場合は特にその傾向が見られます。
既存の情報を使って利便性を最大限に高める
登録ユーザーの情報を呼び出し、プリファレンスをあらかじめ入力します。新規のユーザーには、使い慣れたサードパーティの購入手続きサービスを提供します。
複雑なタスクには Click-to-Call ボタンを使用する
電話機能を搭載した端末では Click-to-Call リンクを使用して、ユーザーがリンクをクリックするだけで電話をかけられるようにすることができます。ほとんどのモバイル端末では、電話番号に発信する前に確認を求められるか、電話番号をどう処理するかをたずねるメニューが表示されます。
別の端末でも容易に処理を完了できるようにする
別の端末でタスクを完了したいことがよくあります。たとえば、大画面で商品を見たい場合や、 時間がないので後回しにしたい場合があります。 このようなカスタマー ジャーニーに対応するには、ソーシャル ネットワークでアイテムを共有できるようにしたり、サイト内から直接、自分宛てにメールでリンクを送信できるようにします。
フォームの入力
ポイント: 使いやすいフォームによってシームレスでスムーズなコンバージョン エクスペリエンスを実現できます。
情報の入力を簡素化する
ユーザーが Enter を押すと自動的に次のフィールドに進むようにします。一般的に、必要なタップ数は少ないに越したことはありません。
最もシンプルな入力タイプを選ぶ
状況に応じて、最適な入力タイプを選びます。
datalist などの要素を使用して、フィールドの入力候補を表示します。
日付を選択するときは視覚的なカレンダーを提供する
開始日と終了日が明確になるようにラベルを付けます。ユーザーが予定を入れるためだけにサイトから離れてカレンダー アプリを確認しなくてもよいようにしてください。
ラベルとリアルタイム検証によってフォームのエラーを最小限に留める
入力箇所に適切なラベルを付けて、リアルタイムで入力内容を検証します。
効率的なフォームを設計する
自動入力を活用し、事前に入力されたデータによって簡単にフォームに入力できるようにします。
また、既に把握している情報をあらかじめフィールドに入力します。
たとえば、出荷先および請求先住所を取得するときは、requestAutocomplete
の使用を試みるか、出荷先住所と請求先住所を相互にコピーできるようにします。
ユーザビリティとフォーム ファクタ
ポイント: 操作感を改善するわずかな変更によって、モバイル ユーザーを喜ばせることができます。
サイト全体をモバイル向けに最適化する
ユーザーの端末のサイズと機能に応じて変化するレスポンシブ レイアウトを使用します。 調査の参加者によると、PC 版およびモバイル版として最適化されたページが混在しているサイトは、PC 版のみのサイトよりも使いづらいことがわかりました。
ピンチ操作を不要にする
ユーザーは垂直方向のスクロールには慣れていますが、水平方向のスクロールには慣れていません。 幅を固定した大きな要素は使用しないでください。CSS メディアクエリを使用して、さまざまな画面ごとに異なるスタイルを適用します。特定のビューポートの幅のみで適切に表示されるようなコンテンツは、作成しないでください。ユーザーに水平方向のスクロールを強制するサイトは Google モバイル フレンドリー テストで不合格となり、検索ランキングが下がる可能性があります。
商品の画像を拡大できるようにする
小売店の顧客は商品を高解像度の拡大画像で見ることをサイトに期待します。調査の参加者は、購入したい商品を見ることができない場合にストレスを感じました。
最適な向きをユーザーに知らせる
調査の参加者は、画面の向きを変えるよう促されるまで同じ向きで見続ける傾向がありました。 横向きと縦向きの両方をデザインするか、最適な向きに切り替えるようユーザーに促してください。 ユーザーが向きの切り替えの提案を無視しても、重要な CTA（コールトゥアクション）を完了できるようにする必要があります。
1 つのブラウザ ウィンドウに留まらせる
複数のウィンドウを切り替えることが難しく、サイトに戻る方法がわからなくなる場合があります。CTA（コールトゥアクション）によって新しいウィンドウを起動することは避けてください。ユーザーがサイトから離れる操作を特定し、サイトに留まる機能を提供してください。たとえばクーポンを受け付ける場合は、利用したいユーザーがその他のサイトを探さなくても済むように、サイトで直接クーポンを提供します。
「フルサイト」というラベルは使わない
調査の参加者は「フルサイト」（例: PC 版サイト）と「モバイル版サイト」というオプションを目にすると、モバイル版サイトはコンテンツが不足していると判断し、「フルサイト」を選択して PC 版サイトに移動しました。
ユーザーの位置情報が必要である理由を明確にする
ユーザーは常に、位置情報を求められる理由を知る必要があります。調査の参加者が市外にあるホテルを予約しようとしたところ、旅行サイトが位置を検出し、現在地の都市のホテルを提案したため混乱を招きました。デフォルトでは位置情報のフィールドは空白にして、「現在地の近くで検索」などの CTA を通してユーザーが入力を選択できるようにします。
