18

In a table design pattern there is usually a 'primary' key value which all the other values can be sorted by, and it is easy to sort or order the rest of the attributes associated with the item.

However, in a card design pattern this presents a real problem, especially when you want to compare multiple values.

I want to know if there is any standard patterns for using a card design pattern and then doing sort or ordering on the items. So for example where the primary key value is displayed on the card (e.g. top left, top right), and where secondary attributes are displayed so that it is easy to make comparisons when you are sorting or ordering the cards.

An example might be using a card interface to encapsulate a client record information, or a contact detail (e.g. business card), or even in social media applications to capture an event detail. This is in comparison to using cards for products and services as seen in many e-commerce websites and apps.

  • Can you provide an example of the use case that you are referring to and trying to improve? – Ades Dec 15 '14 at 10:28
  • @Ades updated my question to include some examples of use cases. – Michael Lai Dec 16 '14 at 12:13
7
+50

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.


Sorting Cards in a Grid

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

An example of sorting a grid from left to right and then top to bottom.

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


Vertical List Sorting (preferred)

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


Horizontal List Sorting

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

2

This might help

http://blog.intercom.io/why-cards-are-the-future-of-the-web/

Its from a year or so ago, but it does touch on a few key points regarding organization of cards.

In a card organization pattern, the information is typically sorted based on the user, where they are coming from, and any other information the user has provided ahead of time to sort the cards in a manner relevant to them.

As mentioned in the previous post, the standard for that dissemination of information would be top left, to bottom right. This would likely only apply to cultures and languages that read in this pattern though.

Hope that helps.

1

I am developing a card-like interface right now, and it's tested internally to have 100% success vs. our current data-grid design. I embarked down this path when it came to light that our primary use case was not comparing data across cards, but performing actions on each. I endeavored to retain some measure of alignment, which I think goes a long way toward enhancing readability. Here's a prototype (blurred to hide some data but also to abstract the problem space a bit!):

enter image description here

Points I made sure to emphasize during usability testing were:

  • Whether or not the primary key (at the top right of each card and a bigger font) was visible and clear. It was.

  • Whether the tags (colored rectangles) still were easily scannable between records. I aligned them all as opposed to say the tags you see on github to achieve some consistency. This was well received.

  • Whether the controls/actions to be performed on each record are clear, discoverable, and intuitive. This tested better than a split-pane master-detail grid with shared controls. On hover of a card, the buttons apply a more active state that begets action.

  • Whether it was evident one could sort and filter records. This was a little wishy-washy and needs better styling and design in it's current form.

  • Whether secondary information was comparable between cards. These are the remaining blurred out spots across the design. By locating them in the same place on each card, and coupling with sorting/filtering, it tested generally positive.

I've gone so far as to provide a very limited demo of how this card interface scales to a smaller viewport - and really there isn't much problem aside from the list growing vertically. This is the tradeoff one gets, but consistency is still key here.

One thing you will want explicit feedback on is whether or not people read the cards left to right (as I initially expected) or top down. I received feedback that the tags (the colored portions) should perhaps be located under the primary key. We will be iterating on both concepts soon with any luck.

Hope this helps. Far from a "best practice," but at least some real-world experience and considerations.

  • Nothing like real-world experience and considerations to help understand user concerns and behaviour! – Michael Lai Dec 16 '14 at 12:10

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.