Design pattern for sorting / ordering items in card view

When sorting anything either a Vertical or Horizontal list of items is preferred. (but not both)

A vertical list is my personal preference as many devices are built to easily scroll up and down (i.e. mouse wheel, smartphones, etc.) among other reasons.


First of all, this is a great question so go ahead and vote it up now.

Laying out content in bite-sized chunks (cards) that respond to look good and fit in any size space is a reality. People seem to understand the card layout pattern used by many popular sites such as Pintrest. Card layouts work well on any size display and consequently continue to grow in popularity.

Simply put, We are living in a responsive world and I am a responsive girl (or boy).

The problem is that anytime you try and sort items in a grid (vertical and horizontal at the same time) then someone is bound to interpret it wrong…

Dr. Fie Nogsh or Never Forget?

grid of beads

Below are some questions to ask when in a grid sorting situation…

1. Can I do the sorting automatically without any user interaction at all?

One reason that most people understand card layouts is that card layouts understand them!

For example, if you’re listing movies from a certain category then just make the movie that other people watched the most and/or rated the highest bigger than the others.

redbox

2. Can I replace sorting with filters and/or groups?

Perhaps it’s hard to find a lot of information on this topic is because there are better ways to get at the information besides sorting everything and then looking though all the items. If there is an option to type anything I want and instantly see items disappear that have nothing to do with what I’m typing then this is my preferred approach. Once I find the card I’m after you could provide additional options to see how many items come before and/or after in the list. In any case, make absolutely sure that sorting items in a grid is what you require.

3. Do I really need to sort on more than one key at a time?

Avoid sorting a grid on multiple keys at all costs! This would end up looking like a pivot table that no sane person can understand

If you must sort your content using both both rows and columns at the same time, however, then start in the top left corner and go to the right first before continuing on the next row like reading a book (top to bottom). There may be rare times when you would start at the right and go left first such as countries where they read right to left but it should be self evident that putting the first sorted item at the bottom is always wrong.

group card sort

Most of this information should really be self evident but various eye tracking studies show that the Top Left corner is where people look first so the key that you’re sorting on probably belongs there as well.

eye tracking study results

Try and eliminate as much information as possible so the order of the cards can be understood quickly. Only show the value you are sorting on (in this case carbohydrates) next to the most vital piece of information or even just a picture of the item. Additional info can be shown/hidden on hover/click…

mcdonalds menu


When sorting cards it is usually preferred to use either a Vertical or Horizontal layout but not both so for completeness I’ll discuss those below…


When sorting a list of cards vertically the key used to do the ordering should stand out from the card if possible so that it’s instantly clear why the top card is at the top and the direction to go next.

vertical list


There are few examples of sorting cards horizontally though it should be clear that the item to the far Left is the Most Popular and goes without saying. The popularity decreases (or stays the same) the further to the Right I go in the example below.

netflix most popular movies