Colors and Categorization for a better user experience
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 landing page design
The similarity of the icons and colours made it hard to properly go through what each icon actually does.
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”
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 Page
Re-designed landing page with better categorisation
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 used 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 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.