In this article, you will follow the evolution of how we came up with a feature design decision with some psychological rules, with user and business goals in mind.
Context
We are aiming to design an “educator endorsement feature” for a piece of study guide that aims to support student study a concept. The study guide with educator endorsements indicate the quality of a content so the student users would gain trust to the study platform.
In summary, adding the feature would..
- ..enhance the credibility of the reading content.
- ..gain trust in content-viewers.
- ..enhance a positive brand awareness for Course Hero with our users.
A couple of iterations happened in the design process. In this article, I am just going to pick no.3 to explain the rationale underneath our final decisions.
Design iteration 1— Placements of the endorsement feature.
Design iteration 2 — What copy works better?
Design iteration 3— How many endorsement avatars should we show?
Design iteration 4 — Interaction choice for the case when with multiple educators.
So, here we come the design challenge-
How many avatars should we show to our users?
How would you decide how many featured avatars to show here when the content has, for example, say 12 recommenders? Will you base on your intuition to make a decision? Or quickly browse through the similar features that other products in the market had used and make your final call?
It seems like a pretty minor question to solve, but it bothers me if I am going to pick one out of no reason. Due to the reason that “each design decision needs a reason”, I listed out all the possibilities to visualize my struggle:
First, I would like to bring up a concept naming “Subitizing”. It is to describe the perception of a small number of items and to reflect the notion of one’s sudden perception of small numbers, which usually relates to the processing of one to four items.
Psychology experiments found that the numbers within this subitizing range are perceived more rapidly and accurately than quantities larger than four. When exceeding four, the reaction time and attention needed for humans to count the quantities increases.
What also associate with subitizing is the concept of “subset” and “perceiving the total number of items”. Take a look at an example:
When perceiving these shapes by “subset”, one will respond 2 (types) while when perceiving by “total number of items”, one will respond 4 (items).
How understanding these concepts helps us to make design decisions? Let's also take into account the user experience when users land on the page, as designers, what should be kept in mind as design principles?
1. Not interrupting the reading experience: Users are here to read the content, which means, most of their focus should be placed on the flow of reading and other elements will be regarded as distraction unless they assist the reading experience.
2. Clear indication: “Should I trust this source?” Users are brought to this website after browsing many of the potential candidates on the Google search result page. In that regard, the design wants to seamlessly help the users spot the credibility of the site and continue their reading flow.
Okay, so what? You might be questioning how these concepts matter.
For business goals, we want to introduce a sense of trust to users. The larger the number of recommenders, the more credible the content likely to be a trustworthy source.
Easy, here you go the solution! Okay.. of course, this seems a bit too long and the whole page becomes out of balance. It overweights users’ attention over the title which likely will interrupt their reading experiences. Not a good idea.
Bringing back to the list of options here:
Consider the real situation when user lands on the page, the feature could only catch users’ attention for, say, less than 1 second before they move on to read the content. How could the feature be designed in a way that users get that there are plenty of recommenders and somehow quickly perceive the approximate amount of recommenders?
For creating a sense of abundance, I want to narrow my choices into these three options. The reason simply being that showing more avatars helps to achieve that purpose.
Based on the principle of Subitizing, any amount less than 4 will require little to no effort for users to count.
Final Design
Fianlly, we picked the 4-avatar option that’d maximize business goal, and take advantage of the norm of how human perceive.
By rule of “Subitizing”: when percieveing items over 4, the sudden perception of small numbers will slow down. As a result, we believe showing 4 avatars plus one “more” figure avatar would stimulate just enough feeling of abundance to deliver trust and presence on the page to users.
Also showing 3 subsets holds the “under 4-item rule” which we think the decision would minimize users attention to our best ability and maintain the flow in the main task: focus and read the content.
Final thoughts
To be honest, it sounds a bit daunting if each design element were to go through such detailed reasoning, right?
It doesn’t take as much time to write this article comparing to think through all this logic and rules when designing the feature (laugh), sometimes, it takes more intuition. However, intuition does come from practice, reasoning and observation. You will find it fun and rewarding as a product designer. Afterall, we are the one who are capable to detect small interaction and visual details to make huge difference in the user experience, I find it quite fascinating ;)
Thank you for reading.
