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?

4 Answers 4


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).

  • i am not sure about the larger item as the first. Showing the first as larger would give a different importance from a visual hierarchy perspective, but there is no logical reason for it other than it is first. People read top left to bottom right (in the western example given above), so they should gravitate to the top left anyway.
    – Darren
    Jan 2, 2014 at 11:59
  • @Darren they would start from the top left, but it would take some cognitive load to figure out the next item in the queue, especially if the grid was too uniform. I'm simply using scale to indicate direction and control focus to reduce cognitive load. Since this is a queue and not a normal grid of items, I think the 'up next' item does have certain importance. If I were to serve a queue of people (say in a restaurant) I would care about one person at a time: the next person in line.
    – myajouri
    Jan 2, 2014 at 12:31
  • True. But in this example we are presenting a list and the order is not as important - the user is free to skim all items equally. If we want weight the order could I suggest the addition of the detail that shows the order basis next to the item - i.e. price, popularity, rating, whatever applies, etc.
    – Darren
    Jan 2, 2014 at 12:43
  • If you look at the mockup in the question, the 'up next' item is indicated with a green background and a label. Reading the question, I got a strong impression that order in important here.
    – myajouri
    Jan 2, 2014 at 12:48

You can use Gestalt principle of proximity to create visual structure of the data:
enter image description here

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

  • Would the reading pattern change in areas where text is read from right to left?
    – Maz
    Dec 25, 2013 at 16:44
  • Sorry, @Maz, I have no such experience. Dec 25, 2013 at 17:48

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

enter image description here

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

enter image description here


enter image description here


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.

Xfinity lets user switch between a grid...

... and a list view.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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