Shopifyのモバイルポップアップは、小さな画面、動くブラウザーのツールバー、画面上のキーボードで操作されることを前提に設計します。特典はすぐ理解できる長さにし、項目は入力しやすく、閉じる操作も探さず見つけられるようにします。エディター上の整ったスクリーンショットだけでなく、ページを開いてから閉じるまで実際に操作してください。
短くても内容が伝わる約束にする
見出しの役割を一つにし、重要な特典条件は近くに表示します。登録に必要な最小限の情報だけを尋ねましょう。任意の好みを聞くなら、その目的を理解できるように説明し、小さなポップアップを長いアンケートにしないでください。
Sendvioのフォーム機能を使い、文字のスタイルや余白をストア全体に揃えます。狭い画面にデスクトップの配置を押し込むために、ラベルをすべて縮小するのではなく、テキストが自然に折り返すようにしましょう。文章が長くなる言語では、縦に広げるか、レイアウトを簡素にする必要があります。
デスクトップの配置ではなく、必要な内容を収める
スマートフォンでは、特典、重要な条件、入力欄、送信操作、見える位置にある閉じる操作を優先します。大きな装飾画像によってフォームが画面の下に押し出されるなら、画像を縮小するか省略します。何の情報を求めているか理解するために、ブランド画像をスクロールで通り過ぎなくてはならない状態は避けましょう。
文章の長さに合わせて、高さを柔軟に増やすか、適切にスクロールできるようにします。固定高の枠へ無理に押し込まないでください。翻訳した見出し、入力エラー、システム文字サイズの拡大によって必要なスペースは変わります。最短の表現にしないと動作しないデザインは、実際のお客様に使ってもらう準備ができていません。
簡素化した後も情報の優先順位を保ちます。不要な画像を省略することと、特典の重要条件を削除することは異なります。短いフォームでも購読内容と価値を説明しましょう。混雑を解消するために、配信許可の説明を技術的に残すだけで読みにくい小ささにしてはいけません。
訪問者が操作を決められるようにする
閉じる操作を見える場所に置き、タップしやすい大きさにします。キーボードでフォームを操作でき、フォーカスがオーバーレイの裏に隠れないか確認してください。エラーは該当項目の近くで問題を伝え、入力済みの情報を消さないようにします。
ポップアップが表示されるタイミングを考えます。ページを理解する前に買い物客の操作をさえぎると、関心より苛立ちを生むかもしれません。特典に合った表示時期を選び、新規訪問者、再訪した購読者、すでに買い物をしている人の体験でテストしましょう。
キーボードが開いた状態で一通り操作する
実際のスマートフォン、またはそれに近い端末テストで入力欄にフォーカスします。キーボードが出た後も、入力欄、エラーメッセージ、送信操作、閉じる操作にアクセスできるか確認しましょう。続いて項目を移動し、長い文章を入力します。その間、ブラウザーで見える領域が変わることがあるため、入力前のスクリーンショットだけでは不十分です。
モーダル形式のフォームなら、キーボードフォーカスはダイアログ内に入り、開いている間はその中にとどまり、閉じた後は自然な位置へ戻る必要があります。対応環境ではEscapeキーでも期待どおりに閉じられるか確認します。対象者に適した支援技術でもテストしてください。画面上の配置を見るだけでは、ラベルやエラーが明確に読み上げられるか確認できません。
現実的な最小画面でテストする
幅の狭いスマートフォンでフォームを開き、各入力欄にフォーカスし、有効な情報と無効な情報の両方を送信します。端末を回転し、文字を拡大して、完了メッセージも確認しましょう。フォームを閉じた後、元のページが問題なく操作できることを確かめます。
フォームの成約率だけでなく、有効な購読者数とその後の反応も測定します。ストアから簡単に離れられないためにアドレスを集めるデザインは改善ではありません。フォームは明確な機会を提示し、買い物体験をそのまま保つものであるべきです。
再表示の挙動もデザインの一部として確認します。閉じた直後にページが変わるたび、同じポップアップを繰り返し表示しないようにしてください。利用できる表示制御を設定し、新規訪問者と再訪者の両方でテストします。すでに購読した人に、顧客の状態と合わない新規獲得用の案内を出し続けてはいけません。
結果がよくない場合は、表示機会とフォームの有用性を分けて調べます。特典に魅力がない、表示時期が邪魔、技術的な手順に不具合があるなどの理由で、登録数が少ない可能性があります。表示回数を増やす前に原因を確かめましょう。理想的なフォームとは、買い物を続けながら内容を理解し、無理なく入力するか閉じるか決められるものです。