May 11, 2017 // By Andrew Baizen
Card sorting has been around for a while and it is one of the best low-tech ways to visually organize or prioritize just about anything. When designing a website or application, one of the first things you need to do is to organize the content and features to figure out what the information hierarchy will be.
Where do you start?
Grab some index cards or sticky notes and write out all features or pages of content that you want have with a marker. Next, you want to get together a team of people that have a vested interest in helping to design the navigation. Then, assemble all of the cards on a large table. The goal is to have the group organize the cards into logical groups or categories. Depending on the application, you should look to have no more than around 7 groups. Once the groups are finalized, the team should give each group a name. Depending on the application, you may have subgroups, which would end up creating a three-tiered navigation, but it should be a goal to try to keep it to two tiers as it’s a preferred experience for mobile and responsive applications. This type of sorting is called Open Card Sorting since you let the testers decide what to call the groups. You can also conduct Closed Card Sorting where you already have predetermined groups and the testers have to place them into those categories.
Preparing the cards to be sorted and grouped into categories
I think what really makes this simple concept so successful is that there’s something about being able to see all of those cards at one time and be able to visually move and sort and group them. Even if they were all listed on a whiteboard and you tried to sort them in your head, it just wouldn’t be the same. It’s the ability to physically move and group that makes our eyes and brains compute the associations.
The project team debating how the cards should be categorized
Trying to Design a Home Page
When trying to design a home page, I’ve used a variation on the card sorting idea. Home pages often display various modules of content, especially corporate intranet sites. The best way to figure out how to organize and prioritize the modules is to start by creating a wireframe of what each module might look like and what data points each one contains. Next, create a PowerPoint slide for each module with the wireframe image and some basic requirements about the contents of the module. Print out each slide and now you can conduct a card sorting exercise with each module. This should be done with your team as well as a cross section of users that represent all of the user persona1 types. I prefer doing this in a one-on-one environment and usually only takes between 15 -30 minutes. The goal is to visually sort the modules in order of priority. This in turn helps the designer to design the placement and size of the module on the home page.
1 Personas are representative archetypes of the various users that will use your application.
Sample slide of a home page news module
The other great part of putting the wireframes on individual slides is the ability to talk to a user about the details of modules and being able to ask questions like, “Would you want to see 5 recent News stories or 10?” The fact that they can hold the paper in their hand and focus just on that specific piece of content, really focuses their attention. You could never get that type of reaction if you had a complete homepage wireframe because they are trying to figure things out in relation to the items around the module you are asking about, which is what we don’t want them doing. It really is a way to stay hyper-focused.
So easy an 8-year-old can do it!
Just to show how card sorting works in just about any setting, my eight-year-old daughter had to select her camp electives each week. She had to rank her top 5 choices for 1 elective in the morning and then another 5 choices for the afternoon elective and they couldn’t repeat. The total available electives was probably around 25. I could clearly see her struggling to rank them just by looking at the online form used to pick them because the choices were sitting in 5 dropdown menus. After a while I told her to go get some index cards so we could do some card sorting. We proceeded to write down all of the electives on index cards and then laid them out on the kitchen table. Next, she started placing the cards into two groups that we knew could only have 5 cards. Once she narrowed them all down she started to mess with the ordering of them. She’d hold the cards in her hands and say, “Do I want to do Ceramics more or Gymnastics?” It was so great to see how much easier this made it for her because she could hold two cards and decide, rather than staring at 25 choices and not knowing where to begin, or not being able to see all of the choices at once and thinking she is missing out on one that she can’t think of because she can’t see it.
It's Simple and Powerful
The card sorting exercise is simple, yet it has the power to allow a person to better process information to make a decision, prioritize the importance of multiple items, organizing items into logical groupings and more. Be sure to keep it in mind the next time you need to organize a list, prioritize a backlog of features, create a navigation hierarchy, or just make your list of daily tasks. It can be done with simple index cards, post-it notes, or you can check out an online card sorting tool.
Andrew Baizen is a Lead UX Designer out of Magenic's Boston office.