web-dev-qa-db-ja.com

多くのはい/いいえオプション（チェックボックス）とコメントを表示する最良の方法

機能の一部を古いアプリ（UIのスクリーンショットしかない）から新しいアプリに移行していますが、この一部についてアドバイスが必要です。

現在のUIには、ユーザーがチェックできるかどうかに関係なく約60の独立したフィールドがあります（ただし、すべて1つずつ選択できるはずです）。それぞれが「はい」を選択すると、そのオプションのテキストボックスがポップアップします。単独（したがって、合計120フィールド）。これらのオプションは現在、長いリストのページに沿って実行されているだけです。

私の最初の考えは、各セクション（そのうち4つしかない）にアコーディオンパネルを使用して、ユーザー（現在は以前のUIをしばらく使用しており、少なくとも慣れているユーザー）を圧倒しないようにすることですが、これをすばやくスキャンして選択し、コメントを入力するために私ができることは他にもあるのではないかと思っています。

編集：現在のシステムのスクリーンショットenter image description here

私の新しいモックアップ（アコーディオンを使用）enter image description here

編集：ユーザーからの新しいアイデアユーザーに各オプションのテキストボックスが本当に必要か、またはセクションごとに1つ（10 -20チェックボックス）。彼らはそれで問題ないと述べ、チェックボックスの代わりに、「3つのオプションがあるドロップダウン：「レビューなし」、「影響-コメントを参照」、「影響なし」について質問しました。

それを考えると、「ドロップダウン」と言うときは単に「選択」を意味し、ドロップダウンの実装のみを知っているので、クリックを最小限に抑える（および3つのオプションすべてを一度に表示できるようにする）代わりにボタングループを考えています。 ;彼らは「ボタングループ」を要求することを知りません。

だからここに私の新しいモックアップがあります、あなたの考えを教えてください（そしてはい、私たちは頭字語がたくさんあります）： enter image description here

formsgui-designcheckboxeslong
7
redOctober13

このユースケースでは、すべてのケースを考慮することがユーザーの仕事のようです。それから、可視性は思い出させて、そしてポジティブです。アコーディオン/タブパネルは、余分なクリックを意味し、潜在的に非表示リマインダー

このUIは視覚的にうまく表示されていると想定します。フォントサイズ、間隔など。また、キーボードコントロールが最適であると想定します。

その後、いくつかのことができます

  • ユーザーがリストを下にスクロールすると自動的に同期する左側のセクションマーカー。また、セクションが特定の関心事である場合、高速ナビゲーションのアンカーを提供します。

  • [クリックしてコメントを追加]領域を表示します。ここでこの[[Enter]キーを押す]をクリックすると、ボックスが自動的にチェックされ、テキスト編集モードにすべて1回で移動します。

  • ユーザーが既知のレビュー要素にジャンプするユースケースを持っている場合は、ユーザーに入力を許可し、UIは一致するオプションだけをフィルタリングします。 http://caniuse.com/ と同様

これらの変更はいずれも、既存のユーザーのUIの「重大な」変更ではないことに注意してください。既存のUIでテスト済みの問題を示していないため、この操作の一貫性はプラス特にです。誤ってUIを改善しようとする誤った取り組みにより、UIを誤って悪化させたくありません:-)

4
Jason A.

これが私の提案です。よろしくお願いします。そしてここで私は2つのオプション、つまり修正の数のコメントを表示する「ページング」、または一度にすべてのコメントを表示する「もっと読み込む」ボタンを与えました。

enter image description here

2
Jasmin Javia

各レコードに60個のオプションのリストボックスとテキストボックスがあるマルチレコードグリッドを試すことができます。

同じオプションを2回入力しないようにしてください。オプションを選択すると、次のレコードのリストボックスにそのオプションが表示されません。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

1
DesignerAnalyst

他の回答から少しずつ、またユーザーからいくつかの追加のフィードバック（各セクションの最後にある単一のテキストボックスで問題ないと述べた）を取得し、さらに2つのモックアップを示します。ボタングループの使用enter image description here

ラジオテーブルの使用（Codepenで表示）enter image description here

0
redOctober13

私には別の提案があります。ただし、これが適切かどうかは、通常はオプションの「コメント」フィールドに入力される情報によって異なります。通常、これらのフィールドに入力したときに大量のデータが含まれている場合、この設計は適切ではない可能性があります。

60個のフィールドをカテゴリに分割し、列と行を使用してフィールドを論理グループに分割することをお勧めします。これが機能する1つの方法の簡単なモックアップがあります。

enter image description here

上記はほんの一例ですが、2つの行と列を使用して、フィールドを4つのカテゴリに分割しています。もちろん、より多くのカテゴリがあるかもしれませんが、あなたはアイデアを得ます。

デフォルトでは、ユーザーが「はい」を選択するまで、コメントフィールドはありません（OPの説明に従って）。

以下は、ユーザーが「はい」を選択したフィールドを検索する方法を示すモックアップです。

enter image description here

私のモックアップからわかるように、各象限に[保存]ボタンを追加しましたが、これを別の方法で処理することもできます。私のデザインでは、ユーザーが既にデータを保存している場合、またはユーザーの進行状況について何らかの視覚的な手掛かりがある場合、「保存」ボタンを「編集」ボタンに変更します。

うまくいけば、これは（他の回答と一緒に）考えるのに便利な食べ物になります。幸運を！

0
Monomeeth