web-dev-qa-db-ja.com

多数のフィールドがあるモバイル検索フォームの最適なレイアウトは何ですか?

約8〜10のフィールドを持つ検索フォームのレイアウトに取り組んでいます。この時点で、検索フォームはビューポートのほぼ全体を占めています。私の調査では、大きなモバイルフォームの一般的な戦略が判明しましたが、これらはさまざまなサインアップフォーム、連絡先フォームなどに向けられているようです。

問題は、検索ツールとしてのフォームの機能では、返される結果に元の入力フィールドがすべて含まれている必要があることです。その結果、最初に返された一致は、ユーザーが下にスクロールするまで表示されない可能性があります。これは最適な体験とは程遠いようです。

フォームからこれ以上フィールドを削除できないと仮定すると、ユーザーが検索用語を確認する機能を維持しながら検索結果をナビゲートし、移動せずに新しい検索を実行するための最良の戦略は何ですか?

これは、私が話しているフォームのタイプに非常によく似たフォームのスクリーンショットです。
enter image description here

編集:
re: http://www.uxbooth.com/blog/mobile-form-design-strategies/ では、右揃えのラベルが、その記事を検討した。垂直方向に配置されたラベルから逸脱するという決定は、元の問題を解決するために行われました-フォームの垂直方向のサイズを小さくします。

すべてのラベルが比較的短いので、1つが切り取られるリスクが軽減されます。また、フォントサイズ、コンテナグリッド、フィールドサイズはすべて変更され、小さい画面での不適切なフォーマットのリスクが軽減されました。フォーカスされているラベルの表示が失われる問題も、自動ズームを防止することで解消されています。

場所のフィールドを組み合わせても、この状況ではうまく機能しないと思います。記事の例とは対照的に、場所フィールドは、同じ結果セットへの単なる代替パスではありません。例:店舗Aが第1地区にある場合、店舗Aのみを検索すると、その店舗の結果のみが得られますが、第1地区を検索すると、店舗Aと同じ地区内の他のすべてが含まれます。

サーバー側の処理を更新して、1つのフィールドのみを解析し、ユーザーが「District X」または「Store X」などを入力したかどうかを解釈することができます。ただし、結局のところ、ユーザーにはるかに長いテキスト文字列を入力するよう要求する複数のフィールドを持つよりも最適なエクスペリエンスではありません。さらに、4つのオプションに対して1つのフィールドが直感的でないため、追加の指示が必要になるため、節約された不動産の一部が無効になります。最後に、タイプミスした単語、つまり間違った結果は、ユーザーのフラストレーションの原因である可能性が非常に高いようです。

ロケーションフィールドを削除してGPSに依存している限り、このアプローチは機能しません。ユーザーが探しているロケーションから数百マイル離れている可能性があるためです。

不要なフィールドの削除に関しては、不要な要素はすべて削除されているということを、私のWordで説明する必要があります。

7
user1091949

検索すると、下に示すように、検索パネルが検索結果の上部にあるパネルに折りたたまれることをお勧めします。

enter image description here

これの背後にある理由は、検索フォームをそのままにして、その下に結果を表示することはお勧めしません。これは、先にも述べたように、これにより結果が妨げられるためです。私が見ているようにこれに対する可能な解決策は、私の提案が提案するように、結果を含む新しいページにリンクするか、検索フォームを折りたたむことです。

この提案では検索パネルに引き続きアクセスできるため、ユーザーは、ビューを離れることなく、結果と同じビューで設定したフィルターパラメーターを確認できます。

3
AndroidHustle

手始めに、大きなフォームを同等のモバイルに変換する際に優れたインプットを提供するモバイルのフォームデザインについて Xブースに関するこの記事 を読んだかどうかはわかりません。以下に簡単に要約します。

  • ラベルの配置:モバイルフォームに水平ラベル(左揃えと右揃え)を使用しないでください。代わりに、垂直配置ラベルを使用してください。
  • 削除:不要な要素や機能を取り除き、ユーザーがタスクに集中できるようにします。可能な場合は、オプションのフィールドを省略するか、
    主要な用途がない要素。
  • Combine:さまざまな類似の入力フィールドを1つのフィールドに結合します。ユーザーが実行できること、およびフィールドに入力できることを明確にしてください。
  • 改善:モバイルデバイスの組み込み機能(GPS衛星による位置検出など)を活用して、モバイルフォームの入力を簡素化します。
  • 小さなステップに分割する:長いフォームをいくつかの小さなステップに分割して、モバイルフォームを使いやすくします。このアプローチは慎重に使用してください。また、ページのダウンロードが遅くならないように、各ページの不要な要素を減らしてみてください。
  • 適切な入力要素とメニューコントロールを使用します:フォームとその相互作用を簡素化できる別のタイプのコントロールに置き換えます。必須のコンテンツとフィールドに優先順位を付け、オプションのフィールドや、ごく少数のユーザーグループにのみ役立つフィールドを強調しすぎないようにします。
  • 適切なリスト選択を選択してください:リスト選択を提示するには、ロックされたドロップダウン(アルファベット順または非アルファベット順)と予測検索を開くという2つの主な方法があります。どちらにも長所と短所があります。フィールドと選択に基づいて、適切なリスト選択を選択します。
  • 適切なデフォルトを設定する:フォームが使用されるコンテキストに基づいて、必要に応じてデフォルトの選択をいくつか提供します。

つまり、複数のフィールドを1つに結合する方法はありますか。

例えば。エリア、リージョン、ディストリクトはすべて場所にドリルダウンされるため、おそらく1つのフィールドに結合できます。上記の要約で述べたように、おそらく、電話の[〜#〜] gps [〜#〜]機能を使用して、地域と他のフィールドを決定できます

それが不可能な場合、あなたのためのアプローチは、2ステップのプロセスでデータを取得することです。最初のステップのプロセスは、以下に示すようにモバイルフォームを表示します。

enter image description here

そして、それを埋めるユーザーには、以下に示すように結果を表示するグリッドビューが表示されます

enter image description here

ここで注意すべきことは、すべてのフィールドに初期値が表示され、編集可能であることです。 enter image description here

今、私はこのアプローチが最適ではないことを知っており、8列の表形式フィールドを表示する機能に強く疑っていますが、これはあなたが見ることができるオプションです。

(パラメーター内の)自由形式のテキストが結果コンテンツを直接更新できるようにするこのアプローチについての議論を本当に歓迎します。

4
Mervin