Colors and Categorization for a better user experience

James TKJ
James TKJ
Jul 23, 2017 · 4 min read
Image from uxmatters.com

I work closely with teachers and recently I had the chance of seeing an application that they use for attendance taking, along with other administration stuff.

When the app launches, I was taken to this Hub-based home screen where 12 circular greyscale circles with almost identical icons greeted me. The first impression that hit me was how it took a while to make sense of all the icons and what they do.

Although the icons were arranged in a neat 3 x 4 hub, the similarity of the icons and colors still made it hard to properly go through what each icon actually does.

It dawned on me that Information Architecture (IA) is lacking in terms of how these icons could be better arranged and sorted out by groupings and order.

The current landing page

What I set out to do

Before the re-design of the landing page, I did consult some teachers (from across difference levels and subjects) which shortcuts they use the most often and which they rarely use on a daily basis.

— Teachers reported the “Mark Attendance” and “View Today’s Attendance” were the most used functions daily. “Absentees” function was used once or twice weeky.

— The least use were “Lighning/PSI”

Instead of all greyscale, use colours to group the functions

Based on the results, I decided to group the functions based on their functionalities and also use a specific color for each group. This should help to achieve a visual hierarchy and divides the page down into digestible sizes for human memory. Reducing cognitive load is always a good thing for the users. In addition, the top down order will be arranged in terms of importances; from the most used functions to the least used.

As for the shape surrounding the icons, I still stick with the circular shapes as they are easier on the eyes and allow for faster cognitive processing. They also help direct users’ focus to the icons inside of them.


The re-designed landing page

Re-designed landing page with better categorization

After the re-design

The functions are now grouped according to functionalities. E.g. all functions related to attendance is grouped together and everything related to communciations is grouped together under another group. All the groups are differentiated by a specific color. As attendance related activities are used often daily, they are placed at the top with a red color to indicate importance. The least used feature is placed at the buttom. A blue color was chosen for Communication as the color, in a way, signifies trust.

Testing and reaction

I showed the redesign landing page to a couple of teachers, age range varies from 25 to 35. I sum up the most commonly said things about the new design:

  • The colors help to divide the categories
  • The colors make it easier to see the headings compared to the old design where every icon has the same color
  • Categories help in the redesign, whereas the old design simply chucks everything together
  • Labeling of functions is useful

I also tested timings on how fast the users were about to locate the specific functions. On the old design, teachers were able to locate the commonly use functions like “Mark Attendance”, “Absentees”, all within 1 sec or so. That is attributed to the fact they use those functions daily and are used to it. But when I ask them to locate the other functions, that’s when they start to struggle. Most took an average of 3 to 4 seconds.

When it comes to the new design, users were about to find the required function within a second or less. That applies to any function that was called out to them. Interestingly, attendance-taking functions had the fastest reaction time among the users.

In closing

In all, usage of colors and categories for grouping do help users to find things quicker. It also highlights that the tendency to classify and categorize things is a deeply ingrained aspect of human nature. In all, the redesign of the landing page is a positive one for the user experience as it reduces the cognitive load needed to find a specific function.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade