web-dev-qa-db-ja.com

ユーザーが独立して子を展開/折りたたむことができる場合の「すべて展開」の完全性

「任意の長さの」テーブルを表示するアプリケーションで、テーブルが「すべて展開/すべて折りたたむ」ボタンを含むヘッダーで構成され、テーブルの各行にローカルの展開/折りたたみボタンが含まれている場合を考えます。つまり、「すべて展開/すべて折りたたむ」ボタンは、リスト自体を展開および折りたたむのではなく、リストの各行の詳細を展開および折りたたむことです。

概略的に、これはすべての行が折りたたまれたリストです。ヘッダー行にはすべて展開アイコン（+）があり、各行には展開行アイコン（+）があります。

+ name   condition   type
+ fred       5         B
+ sally     23         C

Fredの横にある個別の展開行をクリックすると、リストにこれが表示されます。 （a）行の展開行アイコンがプラスからマイナスに切り替わり、折りたたまれていることを示します。（b）fredの詳細が元の行のすぐ下に表示されます。

+ name   condition   type
- fred       5         B
    Before Data    After Data
    foobar1        foobar2
+ sally     23         C

次に、「すべて展開」アイコンをクリックしたとします。すべてのアイコンが（以前の状態に関係なく）プラスからマイナスに切り替わり、次に押すとアイコンが折りたたまれ、各行のすぐ下に詳細が表示されることに注意してください。

- name   condition   type
- fred       5         B
    Before Data    After Data
    foobar1        foobar2
- sally     23         C
    Before Data    After Data
    chocolate      Vanilla with strawberries

ここで私の特定のシナリオと私の質問に：

  1. すべてのアイテムを折りたたみます。ヘッダー行とすべての行には、展開（+）アイコンがあります。
  2. すべて展開を押します。すべての行が展開されます。ヘッダー行とすべての行に折りたたみ（-）アイコンがあります。
  3. 「fred」行の折りたたみアイコンを押します。行アイコンが展開（+）に変わります。 ヘッダー行のアイコンはどうなりますか？

このリストには数十から数百の行が含まれる場合があることに注意してください。技術的には、すべての行が展開されているため、すべて折りたたみアイコンが表示されます。したがって、1つの行が折りたたまれている場合でも、すべての行が展開されているわけではないので、それでもすべて折りたたみを表示する必要がありますか？ 5つの行が個別に折りたたまれている場合はどうなりますか？または、（n-1）行が個別に折りたたまれ、単一の展開された行のみが残っている場合はどうなりますか？

すべて展開/すべて折りたたむアイコンボタン/アイコンで、ユーザーがこのデザインの制限内で合理的に期待することを実行できるようにしたい。個別の行で発生することは、すべて展開/すべて折りたたみボタン（1つの例外を除く）には関係ないはずです。ユーザーが5行を折りたたんだ場合でも、collapse-allは機能するはずですが、既に折りたたまれているため、これらの5行に対しては何もする必要がありません。 1つの例外は、ユーザーが最後の行を手動で折りたたむ場合、他のすべてを折りたたんだ後、折りたたみ-すべてに注意して、すべて展開に切り替える必要があることです。

それで、この視覚的なレイアウトの制限内で、それは合理的なユーザーエクスペリエンスですか？

usabilityuser-expectationlists
2
Michael Sorens

既存の最良の例の1つはGmailの例です。メールスレッドをお持ちの場合は、この小さなアイコン（下の画像）に気づいたかもしれません。それらには単一のアイコンがあり、すべて展開まで、すべてのスレッドが展開状態でない限り、すべて折りたたみに変わります。 。 enter image description here

2
Saurabh Kumar Suman

非論理的なデザイン

すべてを展開/折りたたむためにヘッダーのボタンを使用することを選択しました。

単一のボタンを使用することは、それがトグルボタンでなければならないことを意味します。あなたが主張したように、すべてのアイテムの状態を表すトグル（2つの状態）ボタンを持っていることはほとんど意味がありません-すべてのアイテムが同じ状態になるわけではない状態があります。

それに加えて、あなたはそれをアクションボタンにすることもできます-つまり、 state/action ambiguity に悩まされているということです。

したがって、これらすべての要件を1つのボタンに融合することは不可能です。正式な論理用語では、3つ以上の状態がありますが、それらを2つの状態にまとめるので、設計は非論理的です。

ユーザーストーリー

折りたたみ/展開ツリー/テーブルビューでは、これらは一般的なユーザーストーリーです。

ユーザーとして、次のことを行います。

  • 要約だけでなく詳細にも興味があるので、要約だけでなく、すべてのアイテムの詳細を表示します。
  • すべてのアイテムの詳細を非表示にします。これは、自分でかなりの数のアイテムを展開したため、ビューに収まるアイテムが少なくなり、要約に基づいて個々のアイテムを見つけるのが難しいことがわかったためです（階層フォルダービューの一般的なケース）。
  • 興味のある要約を見て、その項目を展開して詳細を（段階的に）開示できるようにします。
  • 特定のアイテムの関連性がほとんどないか、邪魔になるため、詳細を非表示にします。

より良いデザイン

これらはそれぞれ、次のユーザーアクションにマッピングされます。

  • すべて展開-ステートフルであってはなりません。
  • すべて折りたたむ-ステートフルであってはなりません。
  • Expand item-ステートフルでなければなりません。
  • 折りたたみアイテム-ステートフルでなければなりません。

概要

  • ヘッダーに+/-ボタンを提供しないでください。それは：
    • はっきりしない
    • あいまい
    • 非論理的（数学的意味で）
  • アイテムごとに展開/折りたたみを提供します。
  • 次の（トグルではなく純粋な）ボタンを提供してください：
    • すべて展開
    • すべて折りたたむ
1
Izhaki

可能であれば、2つの個別のボタンを使用することをお勧めします

投稿を参照してください： すべて展開/折りたたみ-結合または個別のボタン？

0
anglc