web-dev-qa-db-ja.com

ユーザーフレンドリーなアイテムキューコンポーネントのレイアウトとプレゼンテーションを見つけるための助けが必要

item queueコンポーネントを表示するための代替のレイアウト/ UXのアイデアを探しています。

私が提示するデータと動作は、数字、文字、小さな画像などのアイテムのスタックである線形キューです。小さなもののコレクション。

キューは通常、一度に3〜6アイテムを保持できます。

アイテムがすでに最大容量に達しているときにアイテムがキューに追加された場合、最初に追加されたアイテムがプッシュアウト(削除)され、新しいアイテムがキューの最後に追加されます。

したがって、私が最初にこのキューを4のキューに配置した場合、

ABCD

...そして「E」をプッシュしたい場合、これは私が取得する必要があるものです:

BCDE

これまでのところ、これは問題なく簡単ですが、アイテムを視覚的に配置する方法は他にあるのでしょうか。線形レイアウトの代わりに、グリッドを使用できますか?たとえば、6のキューがある場合、次のように表示できますか?

AB
CD
EF

...そして「G」を押すと、もちろんこれは私が見るべきものです:

BC
DE
FG

しかし、これがどれほどユーザーフレンドリーであるかはわかりません。

ビジュアルアニメーションを使用して、各アイテムが再配置された場所を示すことができます。また、破棄されるアイテムをフェードアウトまたは縮小することもできますが、これは多すぎる、多すぎることが心配です。すぐに変更されます

誰か私に何かアドバイスはありますか?

追加の詳細:

このUIコンポーネントはビデオゲーム用です。キュー内のアイテムは、刻々と変化する状況に基づいて、ユーザーにとってランダムな重要性を持っています。ユーザーは、どのアイテムがどの順序であるかを正確に把握できるようにしたいと考えています。コンポーネントがインスタンス化されると、キューの容量は変更されないため、要点は、新しいアイテムがキューに追加されると、キューの容量に達し、また、アイテムの現在の順序を一目で理解できる必要があります。

1
Wabbitseason

プレーヤーがアイテムの順序を一目で把握する必要がある場合は、1行(水平または垂直)が最適です。

グリッドは、基本的なヘビのようなビジュアル(1行よりもさらに複雑)がない限り、アイテムが上に移動する方法を把握するための認知負荷を追加します。グリッドの例がどのように動くかを予測できる唯一の理由は、すべての人がアルファベットの文字の順序を知っているためです。文字を記号に置き換えた場合、それがどのように動作するかを推測する方法はありません。だったかもしれない

広告

BE

CF

そしてGを追加すると

BE

CF

DG

メッセージの最初の例では、2つの新しい項目が追加されると右上の項目が消え、2番目の例では、4つの新しい項目が追加されると右上の項目が消えます。

1
celinelenoble