UX design psychology #1: making products that hook your user’s brain
How to weave cognitive psychology into ultimate product design.
Why do drivers lower their radios when searching for an address if all they need is a healthy pair of eyes?
This strategy seems nonsensical at first, but only when not under the light of cognitive psychology: the science investigating how humans process sensory stimuli to respond and generate knowledge out of it.
Understanding cognition is a must for you, UX designer, wanting to design products your users simply won’t be able to get out of – and here’s an easy way to do so:
Edit: there’s a very special tip for you by the end of this article!
1] Cognitive Attention in UX Design
Why do you close your eyes when trying to remember stuff?
Attention is about selecting sensory stimuli (visual, sound, smell, etc.) while ignoring other stimuli — just like that apparent nonsense in the image above.
We are talking about our most limited resource; so limited even gold fish has higher attention span than we do, so ux designers should care to deliver just the right amount of information a user needs.
The attentional process is divided into two processes:
Top-down Attention: when you are actively looking for something.
A driver lowering the radio is simply filtering out irrelevant stimuli, such as music, in order to focus on the visual stimulus he needs at the moment.
From this you conclude that users are trying to satisfy specific needs most of the time, so it’s your duty to offer them exactly what they need without exhausting their attentional resources. Here are some examples:
- Using information architecture (hint: MoSCoW Method) so your products will deliver exactly what the user needs.
- Breaking your content into small chunks so users won’t suffer of cognitive overload — like when you are faced with a huge wall of text instead of paragraphs, for instance.
- Getting rid of the clutter, like random animations, loud background music, and anything that sips your users’ cognitive resources.
Pro tip on attention: ask yourself what do your users need and if that feature X helps them achieve it. If not, you should probably cut it.
Bottom-up Attention: when stimuli comes to notice unexpectedly.
I just told you to avoid this but we all know it: sometimes business objectives will be above your users’ needs, so you will have to find a way of forcing them to check what you have to offer.
We could sum up bottom-up attention by saying it is a matter of making features of your design system inharmonious so the user’s brain will perceive it as a potential threat. Here is a natural example:
It didn’t take you a second to notice that frog, right? But did you notice the second one camouflaged right below it?
If you missed it, that’s because our pattern-seeking brains scans for dissonant information in the environment to make value judgements, thus being often fooled by whatever fits so well with its background.
So here’s how that poisonous frog caught your attention:
- The frog’s green colour contrasts to the bark’s brown.
- It has significant size relative to the environment, being just big enough so you don’t mistake the frog for a piece of wood.
- Depending on the species, there would be unexpected sounds and smell.
- It would probably be moving, making your brain even more terrorised.
Now think of your browsing habits: animated banners draw your attention to sidebar ads; auto-played videos are the most attention-drawing content on newsfeeds; and the more contrasting a post is (be it in colour or content), the more you are likely to pause and check it.
Have these design elements in mind and you’ll easily develop features your users cannot miss although they would love to.
2) Language in UX Design
To whom it may concern, herein lies sine qua non sagesse on the subject of human-computer interaction.
Did that phrase bother you? That’s because there’s nothing natural about it: it’s just purple prose a poor writer would use to add some fake greatness to his mediocre writing.
Purple prose goes back to when purple dye was so expensive it was restricted to nobles, leading peasants to spend a small fortune on purple patches only to weave it into their rags and signal a fake superior status to neighbours.
Do you want to be that guy? I don’t think so, thus you should research your users’ daily language to design easily digestible content instead of alienating language that will overload your customer service.
Pro tip on ux language: make everything objective and obvious.
- Don’t say “expiring soon”, but “expiring in an hour.”
- Don’t say “authentication”, but “login”.
- Don’t say “funds”, but “money”.
Also have in mind that sounds and symbols are also language, meaning you should follow your users’ convention when designing those. There is no sense on designing an amazing, unique icon only your colleagues understand.
A second pro tip would be to simply ask yourself if you are really trying to communicate or to show off.
REMEMBER: Proving your value in ux design is better done by satisfying your users’ needs than by useless creative efforts.
3] Cognitive Memory in UX Design
Do you even remember my purple prose on point 2? It was as big and highlighted as this text, so…
So you still can’t recall it anyway. Humans evolved in hostile environments that were all about surviving one more day, so your brain evolved to register just what it deems essential for your survival.
Of course that doesn’t mean you can’t memorise useless stuff like purple prose; it just means you need to learn how to transform a working / short-term memory into a long-term one.
Working memory: info that do not last due to its little relevance.
That’s a bad definition, but my point is that having your brain counting how many leaves there are in a plant won’t help you avoiding a poisonous frog on it, thus your brain registers it just long enough so you get out of harms way — saving brain storage for the frog itself, which you certainly remember.
Take your users’ limited memories in consideration so you won’t be requesting them to remember stuff they barely learned, like those twenty shortcuts of an app they have never used.
In such cases, you should either add redundancy to what has to be remembered, like Figma’s toolbar, or repeat it often as when softwares show text bubbles with with a shortcut above the selected tool.
Long-term memories: short-term ones that were rehearsed or significant enough.
Great ux design relies on leveraging your users’ long-term memory so they won’t have to reinvent the wheel when interacting with your system.
That means doing user research to deliver convenient info they’ll need little to no effort decoding. It also means not only following their design conventions, but staying true to the rules you’ve established, so..:
- Don’t change an item location out of nowhere.
- Don’t change your features’ names.
- Repeat crucial info every now and then.
If something has been working in a particular way, it has to remain that way unless you have a remarkable reason to change it.
“But I have to do it!” — no problemo, bro; just remember your feature just became short-term memory to most of your users, so now you have to treat it just like I taught you earlier.
Pro tip on memory: long-term memories are easier to build when based on previous knowledge (e.g., using a wallet icon as a Funds button) or when combining multiple senses, such as a success sound after an action.
4) Reasoning in UX Design
Today is the 10.600th day I wake up, thus I will obviously wake up again tomorrow morning, right..?
Although I’m growing ever-suspicious of this, the cognitive process of evaluating and generating logical arguments to make sense of the world (i.e., reasoning) says that I will wake up another day waiting for a job offer.
Reasoning regards connecting dots we call premises to make hypothesis of how things will unravel — and considering we already learned our memory and attention-span are limited, your ux design should consider your users’ unwillingness to be trained from scratch as he joins your product.
Let’s take a search bar as an example:
- They are often placed on the upper-right corner, so placing it at the bottom would render it useless.
- They are activated by a click, so you can’t expect people to try shortcuts.
- Users will try to start the search by clicking enter, so expecting they will ctrl+enter instead makes no sense.
I’m not suggesting you shouldn’t innovate, but that any innovation should be connected to your users’ background. Here are some possible solutions:
- The user places the mouse over the search icon and there it stays; maybe you could make it activate by itself after a second.
- A search string has been typed but the user is tapping everything but enter and letters; maybe you should auto-enter it. (Highly questionable [I’m just opening your thought-horizon here].)
- The user is scrolling through the results and not clicking anything; maybe a text box could suggest a new search.
What you cannot do, for instance, is automatically reload the page with a new search without having your user’s approval, making an alleged innovation into a disrespectful feature.
5) Problem-solving in UX Design
How do I find my LinkedIn connections? The search bar?
Problem-solving is the cognitive process of developing strategies to reach particular goals in contexts we call problem spaces. Such space is divided into three parts, called the initial, intermediate and goal state.
A good problem space would be visiting sometime in another town.
1] Your initial state is deciding how you’ll do that: should you drive, catch a bus, or order an Uber instead?
Consider we picked Uber, what matters most now: is it car model? Driver’s ethnicity? A complete report of your route?
None of these: I need to know if there are any rides available and at what cost, so my attentional resources should be drawn towards that.
2] Now I’m on the back seat (intermediate state) and the driver is displaying some abusive behaviour towards me. Should I talk back at the risk of being attacked? Should I open the door and roll like a hay bale?
Both are very dangerous behaviours, so Uber could provide me with an emergency button: as soon as I tap it, my location and route would be sent to nearby cops who would start a chase.
It could even include spoken codes so an abusive driver wouldn’t catch you typing, or even prompting feedback in case my driver mysteriously decided to ignore the proposed route following a contradictory path.
3] Since none of those options are available, my only choice is hay bale mode… The goal state is simply how I survived it all and, if Uber is kind enough, they are now paying for all my health costs.
As you can see, at this point we are already tying together everything we have learned earlier into a cohesive, logical user experience, so there’s no secret here:
Simply sit back and think of what your users’ goals are and how terribly wrong it can go during the initial and intermediate states.
The goal is to make your app (or feature) your users’ preferred initial state and ensure things win run well during the intermediate phase.
6] Decision-making in UX Design
DID I JUST TAP TO SEND TO ALL?!
Decision-making may sound remarkably similar to problem-solving, but it differs in that the previous process was about developing solutions, whereas this one is about picking an available one.
If we go back to our Uber example, we could consider a female passenger particularly worried about her safety at midnight. She now gets to choose whether she waits until morning or risk being assigned a male driver she never heard of — both blatantly unpleasant options.
Uber could solve this by providing her with a special feature to request female drivers only, or at least making sure only outstanding male drivers are assigned — reducing the loss of revenue to female-only apps such as Lady Driver.
From this you can see the decision-making is highly emotional: women are likely to pick other women no matter how well-rated male drivers might be, meaning that female users are not being lost for a bad service they had, but a terrible one they could have.
That’s because Prospect Theory shows us humans abhor losses (and bad outcomes in general), so the mere thought of its occurrence is enough to make you lose thousands of users in a glimpse.
Pro tip on decision-making: make your interactions as forgiving as you can.
Every potentially damaging action should be backed somehow, such as by adding a confirm box to send to all buttons or even allowing to edit images of a post instead of being forced to delete it (thus losing all of your friends’ reactions).
I would sum this up by telling you to think of how users are likely to be feeling while using your app and thus making it so tolerant to errors that they will see it a safe haven, leading them to grow ever more fond and loyal to your brand.
Edit: I just came across Leandro Lima’s article on Cognitive Walkthrough: a framework to apply everything I just taught you without relying on your faulty short memory. Click here to check it while I don’t dig that framework deeper :)
Seeking a mentor?
Starting a new career is not easy: our lack of experience is hit by an insurmountable wave of content that makes us feel like we need to memorise an encyclopedia before working. It’s an awful feeling, I know.
I’m no mentor, but having accomplished a thing or two as a designer, writer, and digital marketer (and now working as a product designer at fashion giant), I know a thing or two about career shifts in order to aid you.
How about you follow me here or connect with me on LinkedIn so we can take this conversation forward? I’ll be happy to provide you with any assistance you might need! : )
