web-dev-qa-db-ja.com

ユーザーに既存のエントリを選択するか、新しいエントリを入力するように伝える最良の方法

画面スペースが限られているため、モバイルデバイス用のWebページをデザインしています。 Webページは、ストアのリスト(ユーザーが以前に入力したもの)からストア名を選択するか、新しいストア名とストアに関する詳細を入力するために使用されます。

私の考えは、

1行目:以前に入力した店舗の名前のオートコンプリート/ドロップダウンリストのように機能するcomboxbox。ユーザーが入力を選択または開始すると、入力時にリストがフィルターされます。

2行目:テキスト「OR」(ユーザーが実行できる別のアクションを示すため)

3行目以降:新しい店舗に関する情報を取得するためのテキストフィールド。

したがって、このページには2つのアクションがあります。リスト内の既存のストアを選択すると、彼は完了したか、関連情報を含む新しいストアに入りました。

これを作成するための他の提案。どのUI要素を使用できるかわかりません。 UIにはjQuery Mobileを使用します。

5
Tony_Henrich

通常、既存のストアを選択することは、新しいストアを入力するよりも一般的であるため、同じページに両方のアクションを配置することは適切に見えません。

私はドロップダウンボックスを使用することをお勧めします(2ダース以上のアイテムがある場合はクイック検索フィルター付き)、最後のアイテムと一緒に

Select Store|v
ストアA
ストアB
新しいストアを追加...

そのアイテムを選択すると、ストアの詳細を入力するページが表示されます。

(jQuery mobileでコンボボックスを使用して筆記体またはクイック検索を実現できるかどうかはわかりませんが、最悪の場合は「通常の」コンボボックスにフォールバックできます)。

または、「新しいアイテムの追加」は、コンボ以外の個別のリンク/ボタンにすることもできます。これにより、初心者ユーザーは見つけやすさが向上しますが、解決済みの状態(つまり、店舗がすでに入力されている場合)の画面領域が盗まれます。

3
peterchen