web-dev-qa-db-ja.com

無制限の行を表示する必要があるフォームを作成するアプローチを推奨

ユーザーがデータを挿入する必要があるフォームWebページを設計しています。フォームの一部はメインフォーム情報ですが、入力された行数が不明な別の部分があります。

例を示します。ユーザーに好きな食べ物について質問するアンケートがあるとします。したがって、ユーザー情報のセクションが必要です。これが主な情報です。しかし、ユーザーが行ごとに1つの食品を入力するフォームの一部が必要です。各行には固定の情報/機能が含まれています。食品について(色、取る..など)。機能は、画像を含むドロップダウンメニューとしてエンコードされます。スケッチを見てください:

enter image description here

したがって、ユーザーは多くの行を作成する必要があります。各行は1組の緑色のボックスに対応します(つまり、1つの行には1つの食品の12の特徴の情報が含まれます)。

ユーザーは多くの行を作成する必要があるため、単純な解決策は、各行に同じ緑色のボックスを繰り返すことです。しかし、これはブラウザを爆破するので、悪い解決策です!

この設計/ UXの問題を解決するための優れたアプローチを推奨できますか?この状況に対する優れたUXソリューションは何ですか?このアプローチは、モバイル、タブレット、デスクトップでの使用に対応している必要があります。

6
Jack Twain

私はおそらくこのようなアプローチを使用するでしょう:

  1. 初期ビュー。

initial_view

  1. ユーザーは「+」を含むボックスを選択します。

enter image description here

このパターンは無限に繰り返される可能性があり、ディスプレイと入力タイプに適応させるのは簡単です。

特定の行数に達したときにパフォーマンスの制限に達した場合、ページあたりの行数を制限し、ユーザーが任意の数のページを行で埋めることを許可できます。

1
designheretic

アプリを集約するiPhone/iPod戦略は、この問題を解決するための優れたソリューションを提供すると思います。基本的に、ユーザーはアイテムを(特定の数まで)スタックすることでグループを作成でき、おそらくグループのスタックである「スーパーグループ」を作成することもできます。

ただし、ユーザーに無数のアイテムを提供する場合は、コンテンツを検索してユーザーに提示する効率的な方法があることを確認する必要があります。そうでない場合は、制限を設けるか、何らかの構造を作成することをお勧めします彼らがコンテンツを整理するために。

0
Michael Lai

最初の画像はモバイル用です。プラスアイコンを使用して複数の食品オプションを追加したり、既存の食品を検索したり、各食品セクションに複数の列を追加したりできます。さらに下にスクロールして、すべての食品を表示します

enter image description here Web、モバイル、タブのインターフェースはほとんど同じですが、各食品の複数の列を確認しながら水平スクロールできる点が異なります。

enter image description here

enter image description here

強いテキスト

0
sandeep gupta

まず、フォームを2つのステップに分割します。これにより、ユーザーが大きなフォームに入力する必要があるという認識を回避できます。次に、各行を折りたたみ可能な行(アコーディオンのようなもの)にすることができます。この場合、各機能はタグ形式で(マテリアルデザインコンポーネントのチップとして)追加されます。

フォームにコントロールの大きなグループがある場合は、それらを小さなグループに分類して分離する必要があることに注意してください。そうしないと、ユーザーが「無限」フォームに入力するのが退屈になる可能性があります。

0
user97554

「無制限」の行数にすべてアクセスできる必要がある場合は、AjaxまたはWinSocketの問題があります。必要に応じて、サーバーとの間でそれらをバッファリングします。サーバーは機能的に無制限の数のアイテムを保存できますが、すべてのブラウザはしばらくするとチョークしてフォールオーバーします。

0
MMacD