0

I'm looking for alternate layout/UX ideas for presenting an item queue component.

The data and behavior I'm to present is a linear queue, a stack of items -- digits, letters, small images. A collection of small things.

The queue can hold typically between 3 and 6 items at a time.

If an item is added to the queue when it has already reached its maximum capacity, the item which was added first should be pushed out (deleted) and the new item added to the end of the queue.

So if I have this arrangement at first for a queue of 4:

ABCD

...and I want to push an "E", then this is what I should get:

BCDE

So far this is fine and straightforward, but I wonder if there's any other way to visually arrange the items: instead of the linear layout could I use a grid perhaps? For example if I have a queue of 6, can I show it like this?

AB
CD
EF

...and if I push a "G", then of course this is what I should see:

BC
DE
FG

But I'm not sure just how user-friendly this is.

I can use visual animation to indicate where each item was relocated, and I can perhaps fade out or shrink the item that gets discarded, but I'm concerned that this might be just too busy, too many things would change at once.

Does anybody have any recommendations for me?

Extra details:

This UI component is for a video game. The items in the queue have random importance for the user, based on ever-changing circumstances -- the user wants to be able to know exactly which items are there and in what order. The capacity of the queue never changes once a component is instantiated, so the gist is that the user needs to be aware that once a new item is added to the queue, it might push out the oldest item if the queue's capacity has been reached and also need to be able to understand at a glance the current order of the items.

  • 2
    As a first thing, you should describe the context better. Right now we have no idea what the user is looking at and how important it is to him. Is the first or last item more interesting? Or do users want to see all items in the queue at once? -- It's hard to give any advice without knowing those things. – Big_Chair Nov 21 '19 at 14:04
  • do you have some mocks showing more context and UI here? Let's see as much of your thinking and constraints, and the community is more likely to help find an answer helpful to you, and to others who encounter a similar situation. – Mike M Nov 21 '19 at 14:18
1

If the player needs to know at one glance in what order the items are, one line (horizontal or vertical) is the best bet.

A grid will add cognitive load to figure out how the items will move up, unless there is an underlying snake-like visual (still more complex than a single line). The only reason we can anticipate how your grid example will move is because we all know the order of letters in the alphabet. If you replace the letters by symbols, then there is no way to guess how it's going to behave. It could have been

AD

BE

CF

And adding G would give

BE

CF

DG

In the 1st example in your message, the top right item will disappear when 2 new items are added, in the 2nd example, the top right item will disappear when 4 new items are added.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.