The magic behind UX (and vice versa)– Pt. I
A brief comparison between the art of creating the impossible and the discipline of crafting the possible.
As a child, I remember not feeling particularly mesmerized the first time I saw a magic trick. Rather curious. How something that could not be possible, be real? At least for a moment. How did it work? What are the parts that allowed that to happen? I wanted to know all the secrets, and at the same time never discover the mystery. So, from time to time, I revisited this place of unfounded beauty and senseless belief, voluntarily falling for it every time I could.
Long story short, I ended up learning a few of those secrets along the journey, and almost 20 years after during a trip to Scotland, I fell in love with magic –again.
So I bought a few new tricks in a small magic shop deep in Edinburgh. Practiced them. Performed before an audience –my girlfriend (and she didn’t leave me because of it). I was that 8-year-old magician again. The only difference (apart from a few gray-colored hairs on my head) was that I am not a child anymore. I am –objectively– a grown-up. One that is now dedicated to solving other kinds of mysteries like how can we make technology better for people, for example.
Suddenly, I found myself dedicating hours after hours practicing each new trick I bought. And I enjoyed it. Remembering my childhood dreams and reconnecting with how wonderful is to see someone being left wordless after something unexplicable just happened before their eyes. I was lost, again. And it wasn’t a long time before I started thinking: if I’m so deeply involved with this craft… Why did I become a product designer and not a magician?
I have a lot of answers to that question but after some thought, I realized that maybe magic and design are not so different from each other.
And here’s why.
#1 — People’s attention is in your hands
And it’s your responsibility where you direct it towards.
One of the first principles of magic is misdirection. The ability to direct and re-direct people’s attention wherever you need them to focus on –and far from where you don’t. You can have enough skill to know how to disappear a coin, but it doesn’t matter if you can’t guide the crowd to watch the correct hand.
A lot of UX parallelisms can be done with this, but one is fundamental: attention.
Attention is a limited resource and people use it as efficiently as they can. That’s where the phrase “the users don’t read, but scan” comes from. We only have a couple of seconds before the user that just arrived at our product’s landing ultimately decides if the information displayed is valuable or not. As if it wasn’t enough, even after we caught their attention, we humans have a finite amount of our thought capacity available for a given task –we are going to go back to this in a minute.
So, as designers, we have just a few –quick and limited– movements that will determine if our audience decides to gather around and clap at the end or keep walking.
To land our trick properly, we know that the best use of some specific practices can help us. It is through visual hierarchy, usability affordance, and the right design principles that we can seize most of those scarce seconds of focus we have to achieve a goal.
But having covered that, knowing how to manipulate people’s attention can turn you into a charming street magician, or a vile pickpocket. An example:
- On one side your goal is to retain users, and on the other side you know the common pattern for primary buttons is to hold the main action (usually in a positive sense, as a confirmation of the user’s last action) as they drive more attention for having a higher visual hierarchy.
- The charming UX magician will probably use that knowledge to highlight the product’s gifts and value and in the worst case just stay consistent with the design system and allow users to have unbiased freedom.
- The UX pickpocket will put a big, bright button under the “Are you sure you want to unsubscribe?” that in the best case will read “No” (misleading the confirmation of the user’s action) and at worst: a large, bold “No thanks, I DON’T WANT TO BE COOL” –probably not the exact copy, but you get it– with nothing but a bag of guilt and remorse for the person reading it. An absurd attempt to trap the user, that often results in nothing but an extra step to finally unsubscribe. And just as a reminder, these practices are now illegal in India, for example.
So not only is it great to know how to capture and sustain people’s attention through good UX, but also it’s mandatory to be responsible for where we direct it.
#2 — Time your beats (or properly dose your information)
How you keep your user’s attention.
In any magic trick, each key moment when something is happening –whether the crowd is aware of it or not– is called a beat. Why a beat? because they follow a rhythm. A certain cadence. Think about these two ways to do the same trick (it’s okay if you don’t watch the video, but it’s amazing!):
- #1 — The magician borrows a ring. Puts it in one hand. Closes it for a moment, then opens it again, but empty. Opens the other hand and the ring has appeared there.
- #2 — The magician borrows a ring. Explains how this is his favorite trick to perform and as he/she closes their hand with the ring, asks for a member of the audience to hold him/her by the wrist, just to ensure no sleight of hand is involved. He/she then asks for another person to hold the other hand, which is empty. A brief pause takes a moment. Deep breathing occurs. And as slow as it can be done, the empty hand closes as the ring hand opens. One soft movement shows that the ring is gone. Another one turns the other hand and in the final beat, the magician shows how the ring is now, on the palm that was supposedly empty.
Pretty cool, right? Same effect, different pace, different result. Different beats. But what does this have to do with UX? Let’s talk about information dosage and cognitive load.
Information dosage refers to how and when we display pieces of information to the user. As our attention and memory are limited, it’s best to break down complex streams of information into simpler and easy-to-understand blocks. A good example of this is Typeform and its step-by-step questionnaires. Leaving space for the user to focus (pay attention) on one thing at a time (dosage) allows them to not feel overwhelmed.
When we talk about overwhelming the user, we usually refer to stressing their capacity to retain and perform tasks because of an elevated amount of information. This brain capacity is called cognitive load. Each time we perform a task we exhaust our capacity to keep focus and execute uninterruptedly. For us humans, it’s often better to do something, take a break, then continue. Same for our users, they engage better with long tasks when they’re broken down into smaller steps that can allow both their attention to fixate and memory to retain smaller portions.
Of course, there are exceptions (like a long form that requires recalling a value from a previous step), but good practice for us designers is to keep an eye on these psychological ways of working to figure out what is the most valuable information needed and at which point during the user journey it’s required.
Like in the coin trick example, pacing every beat of information contributes to the whole process and, most importantly, enhances the experience in a way that’s effective and efficient.
#3 — Read your audience
And figure out what’s the best way for them to succeed.
Street, big stage, physical, mentalism, kids, social events, special FX, close-up. All of these are only a few of the different kinds of magic that exist. It’s not the same to perform street, close-up magic like David Blaine than to disappear the Statue of Liberty like David Copperfield. And a better example perhaps is that you probably don’t want Chris Angel at your little cousin’s 8th birthday –although I’m not sure, kids can be wild. Every one of these niches has a unique way of delivering for a unique audience. Each one reads and uses not only the spectator's actions and behavior but also the environment that surrounds the effect.
Perhaps this is an obvious one, but you can’t have proper UX if you don’t know your users. And I’m not talking about their likes, dislikes, or demographics. Rather: how do they behave? In which context? What are they expecting from your product? How can you read their insinuations and actions? Apart from their words. Here is where analytics and data-driven design* take the spotlight. Both are a good way to read what’s happening around your user and execute based on a more comprehensive and less biased foundation.
A good designer and a good magician have one thing in common: they know how to read people. Same way as magic performers read and use not only the spectator’s behavior, but the entire room in order to create an atmosphere, UX and Product Designers should be able to synthesize conclusions and take action from the whole set of tools, results, readings and pieces of data around your user’s activity.
Read rooms, not only people.
*I have an opinion on if the differentiation between design and data-driven-design is correct, as you shouldn’t be doing UX without any proper data, but let’s put a pin on that and save it for other post.
Thank you for reaching this far. If you liked it, you are invited to subscribe and stay tuned for part II, where I talk about the two most beautiful concepts in this blog: stories and perception.
See you soon.
Best,
Carlos.
