ユーザーが複数のデータセットを入力できるようにUIを設計する方法
これらの特性を持つインターフェースの実行方法を理解するのに問題があります。
- ユーザーがデータの複数のセット（「ケース」）を入力できるようにします。最小値は1で、制限はありませんが、12はおそらく最大値です。
- ユーザーは通常、事前に必要なケースの数を正確に知っています。
- それにもかかわらず、ユーザーが注文に満足するまで、ユーザーがケースを注文して再注文できるようにすることは良いことです。これには、ケースの削除と挿入が含まれます
- ユーザーは
selectケースを1つだけ「メイン」ケースにすることができます。これは非常に重要です。
それについてだと思います。
現在のインターフェース：
HTMLとJSだけを使用して、次のユーザーインターフェイスを用意しています。
正直に言うと、それは少し不格好でぎくしゃくしていて、「しっかりとした」感じがありません。それは使用するのにかなり満足できるものではありません、それはバラバラになりつつある古い車を運転するような感じで、あなたはそれを適切に操作するためにいくつかの知識とスキルが必要であり、あなたが望む方法でそれを動かすには何をクリックするかを知っています。しかし、それは機能し、それは仕事をします。
直感的にわかりにくい点を説明するには...
- ユーザーは条件の下でデータを入力します。常に5つのデータ部分があり、それらはセットの一部です。
- ユーザーは
Add Caseボタンをクリックして新しいケースを追加できます。新しいケースは{前の最後のケースの数+ 1}として番号が付けられ、条件ボックスの右側に、ユーザーがすでに条件に入力した情報が表示されます。ボックス。ユーザーは入力したケースを編集することはできませんが、Xキーを押すと削除できます。 - ユーザーは、ケースのXの上にある[選択]チェックボックスをクリックして、ケースを
Mainに選択できます。おそらくラジオボタンになるはずですが、コード化された方法では、チェックボックスであり、クリックするとAJAX=リクエストがサーバーに送信され、$_SESSIONvarが設定されますこのケースがMainであることを示します。
注：この特定のフォームは、大きなフォームの一部です。
現在のUIは機能しているものの、明確ではなく、使いやすく、使いやすいとは言えません。
質問：
この質問で私が探しているのは、ユーザーと開発者の両方に役立つUIのデザインと機能です。
つまり、
- ユーザーにとって意味がある-ケースを追加、編集、削除し、場合によっては並べ替える場所と方法を合理的かつ明確にします。
- 簡単にし、
Mainケースを示す方法を明確にする - 開発者にとっても簡単にします。つまり、ラジオボタンを使用できるもののチェックボックスはなく、AJAXまたはSESSION変数がなければ、そのような複雑さの必要がない場合に限ります。
私が今やろうとしているのは、HTMLフォームに必要な最小限のセットを使用して、必要なすべての情報を取得し、セッション変数に物を保存することなく、単一のSubmitクリックで送信することです。それは今やっています。また、ケースを水平方向ではなく垂直方向に拡張し、単一の編集可能なウィンドウではなく、すべてを編集可能にすることもできます。また、どうすればそれらを並べ替え可能にするかわかりませんが、後で別の質問に入れることができます。再注文可能性は、使用できる多かれ少なかれ痛みのない標準機能だと思います。これが利用されるブラウザはMozilla Firefox（最新バージョン）です。
私はこの質問を見て、いくつかのスケッチを作成し、気が散り、@ dan1111が修正の大部分を説明していたことを確認するために戻ってきました。公平に言えば、ここで行われていることは、いくつかの設計規則の適用だけです。
最大のバリエーションは、ケースの追加/編集に関するものです。入力がテーブルのデータを反映するように提案しました。これは編集モードとしても使用できます。
開発者にとって物事をより簡単にすることについてのあなたのポイントについて：もちろん、目標は物事を開発者を含むすべての人にとって同じように明確かつ単純にすることですが、実際はWebが進化し、テクノロジーの潮流が高まるにつれて、優れたユーザーを提供するということです多くの場合、エクスペリエンスには、チェックボックスやラジオボタンよりも洗練されたコントロールや入力の利用が含まれます。これは完全に要約されています エベレットマッケイの優れた一連の記事「プログラマーのように設計しないでください」 、これをご覧になることをお勧めします。
いずれにしても、提案されたUIのワイヤーフレームは次のとおりです。
いくつかの提案：
- ケースは列ではなく行である必要があります。 bdimagについてはすでに述べたように、現在の形式では、特に任意の数のケースを追加できる場合に、いくつかの表示の問題があります。さらに、ケースを行にすることは、ユーザーにとってより直感的だと思います。
- ポップアップオーバーレイでのケースの追加/編集。テーブルの左側に表示されるため、現在の「ケースの追加」機能は混乱しますが、新しいケースは右端に追加されます。これを、ウィンドウに重なって表示され、新しいケースを追加するためのフォームを持つdivに置き換えることをお勧めします。同じフォームを使用して、既存のケース値を入力するだけで、ケースを編集できます。各行に編集ボタンを配置するだけです。
- 並べ替え用に「上に移動」ボタンと「下に移動」ボタンを使用。並べ替えがあまり一般的でない場合は、これで十分です。ドラッグアンドドロップインターフェイスが理想的な実装ですが、作成ははるかに複雑になります。ケースを追加または編集するときに、位置のオプションを使用することもできます。
- 単一のケースを選択するためのチェックボックスを廃止。すでにご存じのとおり、これは直感的ではありません。ラジオボタンを使用できます。ただし、メインのケースを選択するには、各行にある通常のボタンを使用します。ラジオボタンをクリックしてもすぐに重要な変更が行われるとは思いません。
- アクションを小さな画像アイコンとしてスタイル設定する。 HTMLフォームのボタンは見苦しく見えます。この問題は、行ごとに3つのボタン（削除/編集/メインの選択）がある場合に悪化します。したがって、これらには小さな画像を使用してください。 Xやゴミ箱は削除のパラダイムですが、鉛筆はしばしば編集を意味します。 「メインの選択」に最適なアイコンは何かを判断するために、いくつかの検討が必要になる場合があります（特定のアプリケーションによって異なります）。