What is the best way to display a queue of items in a large space?

Question

In a desktop web application I am working on, I was considering several designs for an ordered queue of items. My initial design was:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Unfortunately, because the items are relatively narrow, the majority of the width of the screen remains unused. So, I considered another option:

^{download bmml source}

This grid option will fill all of the space, however, I am worried that, even if users know (because it is indicated) which item is up next, whether it will be clear what the ordering of the items will be, since it is concievable (to use the numbering of items in the diagram) that users will expect item 10 to be up after item 1. I don't think this problem is present in the first design (so long as Item 1 is indicated as up next), since there is only one path from which items may "flow in" to the up-next placement.

My question is: which of these designs (or is there a better design out there) is best to display an ordered queue of items with the visual constraints I mentioned. Additionally, should the ordering of items in design 2 be changed for right-to-left languages, to ensure a more natural mapping?

Answer 1

You could change the item size to indicate which item is up next and the flow direction of the queue. This would help guide the viewer's focus, and create visual contrast which will break the uniformity of the grid.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Because the first row of items stands out as a row, it suggests that items are arranged in rows and not columns (therefore the flow is horizontal). And since the first item on the fist row is bigger than the rest, it acts as a clear starting point (and suggests that the direction of flow is left to right).

If you go this way, I would get rid of the "Up next", and possibly show the item names on hover only, especially if the main purpose of the name was to indicate sequence.

To answer the second part of your question: I think the order of items should definitely be flipped for right-to-left languages. The natural reading order in such languages is top-right to bottom left. So it makes perfect sense for your content to start at the top-right part of the page, otherwise it would feel reversed to RTL readers (speaking from personal experience having worked on RTL interfaces, and as a speaker of an RTL language).

Answer 2

You can use Gestalt principle of proximity to create visual structure of the data:

Also you could reduce information overload with disclosure pattern. Single line assumes only one reading pattern, left-to-right:

Answer 3

First of all, grid is not that bad solution if natural read order works.

You can easily enforce correct order by highlighting rows in some way. For example:

Or:

Answer 4

You could consider letting users switch between views. As far as a default view is concerned, I would tend to agree with Renat Gilmanov's assumption that there is a natural reading order.