web-dev-qa-db-ja.com

スクロールせずに単一のページでより多くのデータを管理するいくつかの方法は何ですか?

皆さんおはようございます。

ex =の場合、1ページに10列以上を管理する必要があります enter image description here

それは学生が教師にフィードバックを与えたいと言っているアプリケーションであり、フィールドによると学生は答えなければならない。

上記は私の仕事ですが、ユーザーに見せている反復的な仕事だと思います。例:SR.No 1(間違いによるすべて1)を参照してくださいが、最初の行を参照してください、そのコメント、管理応答、項目(つまり、特定のユーザーへのタスク割り当て)、添付ファイルはすべての行に共通の列なので、組み合わせることができると思いますそれらのすべてを右上隅に配置して、ユーザーがそこに回答を提供したい場合や、質問が変更された場合にその質問に対して空白になるようにします。

どんな準備済みのデザインも私を助けます。私の問題を解決するものを提案してください。前もって感謝します。

1
user43589

1.少ないほど良い

1つのページにより多くのものを収めようとすることは、優れたUXを提供することの目標ではありません。手元にある主要なタスクが何であるかを理解し、それだけを示します。まれに追加の詳細が必要な場合は、ユーザーがshow advanced optionsトグルボタンをクリックして要求するまで、それらを非表示にします。

「完璧を達成するのは、追加するものがない場合ではなく、取り除く必要がない場合です。」

-アントワーヌドサンテグジュペリ

2.ページのサイズは固定です

あなたは単一のページにそれだけを合わせることができ、ウェブアプリケーションを設計するとき、私たちはそれが何であるか確信することができません サイズは です。あなたは単一のページに最も関連性のある情報を表示することについて正しい考えを持っています スクロールなしで しかし、ユーザーが好きなものを入力できる場合、それは不可能です。

3.データのグループを展開/折りたたむ

1つのページに収まるよりも多くのコンテンツがある場合は、ユーザーが一度に1つずつ作業できる expand/collapseコンポーネント を使用してデータをグループ化できます。

accordion

4.スクロールする必要がある場合は、垂直にスクロールします

上記のすべての方法を使用した後でも、スクロールが避けられない時が来ます。特に、ユーザーがさまざまな長さのメモを入力できる場合。

コンテンツを適切な幅でラッピングしてから垂直にスクロールすると、ほとんどのデバイス(タッチスクリーン、マウスホイールなど)で最高のエクスペリエンスを提供します

2
DaveAlger

ユーザーはすべての質問に対してすべてのフィールドに入力する必要がありますか?そうでない場合は、プログレッシブ開示を使用して、ユーザーの初期認知負荷を少し軽くすることを検討してください。

たとえば、画面の初期状態が質問のリストとコメント用のテキスト入力ボックスだけだった場合、ユーザーにはタスクが非常に明確になります。ユーザーが質問に回答することにした場合、コンプライアンス、添付ファイルなどの追加の入力オプションを表示できます。

enter image description here

1

データが表形式で表示されているとしましょう。繰り返し列のデータは、表形式のデータの上のパネルに1回だけ表示でき、個別の列は表形式で表示できます。表形式で表示される列の数は、画面で使用可能な水平方向のスペースによって制限されます。ユーザーを水平にスクロールさせるのではなく、下のパネルに追加の列を配置します。このパネルは、ユーザーが表形式のデータのレコードを選択するたびに、対応するデータで更新されます。 enter image description here

0
rags

水平の列を使用しないのはなぜですか?見た目は繰り返しが少なく、場所を取りません。また、見た目が悪くなり、整理されているため、目の不快感もありません。

BrightsideのInternational Student Calculator の例を見てみましょう。ここに表示されているように、入力して水平列に表示します。1つは収入用、もう1つは結果用で、各列に質問があります。私のアイデアは、レイアウトをこれに似たものに変更し、教師の名前が含まれる列に変更し、その下に生徒がそれらの質問であることを示します。すべての列が完了すると、「送信」または「下の画像を参照してください:

Finished Form Example

ここで、列が多すぎるとしましょう。お互いを乱雑にするのではなく、常にそれらを配置する解決策があります。このため、例として Trello by Fogcreek を使用します。Trelloも列を使用してボードを整理しますが、追加するボードが多すぎると、右側に列が追加され続けます。ボードが表示されなくなるまでは、悪く見えるかもしれませんが、そうではありません。Fogcreekの人々は、インターフェイスで素晴らしい仕事をしているので、下の画像:

Trello columns example

では、右側に非表示の列があることをユーザーに通知するために何をしましたか?シンプル!

列を完全に非表示にすることはしませんでしたが、画面に表示されていない他の列があることをユーザーに知らせるために、その一部を表示しています。

また、水平スクロールバーが常に表示されるようになっているため、右側に表示されていない他の列があることをユーザーは確認できます。優れたユーザーエクスペリエンスのもう1つのことは、スクロールバー自体であり、背景から色が目立ちます、これはユーザーに気付かせます。もう1つはサイズです。サイズが通常のスクロールバーの場合、色だけでは効果がないため、サイズを大きくして見えないようにしました。

プログラムに行く生徒は、多くのフォームに記入することを期待しているため、このページに到達する前に、先生がコメントして採点することを「常に」認識している必要があります。

水平方向のページ作成の流動性に加えて、作成は複雑になりますが、エンドユーザーのために、反復性を取り除き、ページに「楽しい」要素を追加します。

流動性の例としては、学生の以前の回答に合わせてデザインを適応させることが挙げられます。

1.Xに与えるスコアはどれくらいですか? X> 7:2.この先生のクラスで一番好きなことは何ですか? X <4:2.クラスで一番気になっていることは何ですか? X> 7の質問はコメント用のテキストフィールドに、X <4はクラスで生徒が嫌う最も一般的なもののドロップダウンにしてください(材料は難しい、退屈な環境です...)。

その他.....編集:このプロトタイプを作成していただきありがとうございます。あなたの問題に直面している他のコミュニティメンバーや訪問者に役立つと思います。

Mock up created by the OP, please delete if it is not allowed for public

もう1つは、提供された小さな領域で長いテキストを処理する方法です。私が今考えている解決策は、300文字でコンテンツを削除し、その最後に「もっと」ボタンを追加することです。ユーザーがそれをクリックすると、同じボックスまたはモーダルに追加のコンテンツが表示されます。 「Less」ボタンを追加してコンテンツを非表示にし、UIを台無しにしないことを忘れないでください。私が提案するもう1つのことは、[もっと見る]ボタンと一緒に、残りの単語数を追加することです。これにより、ユーザーがモーダルを使用する場合、ユーザーがどれだけ多く読むかを知ることができます。余分なコンテンツが同じエリアに表示されないこと、およびユーザーをフリークアウトしないことを示す小さなアイコンを追加することをお勧めします。

0
SAFAD