Like many users before me, I stared at my rat’s nest of Delicious bookmark tags one day and realized the futility of tagging all these links with words and phrases I’d never actually recall. At that point, I gave up on taxonomy and tried a new tactic: filing bookmarks into only two folders: Beautiful and Useful.
The beautiful examples were inspiring, artistic, and aesthetically gorgeous. The useful examples offered new functionalities, potential savings of time, and clever solutions.
This dichotomy approach failed, too, as I realized that there’s a sometimes complicated interplay between beauty and utility.
The ancient Greeks famously said that “Beauty is in the eye of the beholder.” This is a good thing, because it increases the chances that we find someone who loves us.
It’s less great for web designers. We may design things that others don’t like. We may like things as users that designers do not.
In the 1990s, web designers adopted architecture’s ‘Form follows function’ mantra and adapted it to ‘form follows content.’ The form comes after the information, the data, the content of a digital transmission.
This approach created an “almost historical tension” in the field of Human Computer Interaction. The dominant attitude at the time held that usability ruled above all else. Aesthetics were secondary to getting shit done. Jacob Nielsen argued that users don’t care about design for design’s sake; they just want to get in and get out. Javier points to Nielsen’s own website, recently taken down, which paid very little attention to aesthetics.
But in psychology, we know that beauty is very important.
“What is beautiful is good” is a famous study by Dion in 1972 finding that we ascribe positive traits to attractive people (and vice versa for unattractive people). We stereotype, and we succumb to the halo effect, where our immediate perception of beauty clouds later judgements.
So why should we ignore surface beauty?
In 2000, Tractinsky, Katz and Ikar changed this attitude. They experimented with the aesthetics of ATM machines, altering UI layout and usability factors. They intentionally made ATMs more cumbersome than they previously were (ugh).
Subjects rated the beautiful interfaces as beautiful AND usable. Subjects’ usability ratings were influenced MORE by aesthetics than usability. The study isn’t perfect, but it changed the course of the field and prompted important research (and gave visual designers new ammunition).
But this is where aesthetics and usability are intertwined. The study changed the placement of interface elements themselves, the “beautiful” examples were still ugly, and “usability” was defined only by how long it took subjects to proceed through their tasks.
Usability and beauty are intertwined
Javier’s psychological research introduced a new paradigm to manipulate and study the relationship between aesthetics and usability. They started with web designs that were pre-vetted as beautiful and paired them with ugly designs. But they only altered non-functional aspects, like page background, while preserving usability factors like readability.
Usability was manipulated through the information architecture of the e-commerce site. Tasks like finding and buying a pair of shoes were made slightly more maddening.
They found that interface aesthetics didn’t affect subjects’ perceived usability. AND subjects actually lowered their score of the aesthetics of the site after experiencing its poor usability.
The team found that our affective state alters our perception of aesthetics as well as usability. Low usability makes us angry, and that frustration shows up in our ratings of aesthetics (even when the designer did a great job!).
They concluded that we don’t lose our judgement capabilities just because an interface is beautiful. There is a relationship between usability and aesthetics. You can’t just ignore aesthetics, as usability experts argue, and you can’t expect great aesthetics to carry a poor user experience.
Herzberg’s 1964 motivation-hygiene theory posits that certain hygiene factors establish floors, like your job paying you enough money to buy food, whereas additional motivational factors like massage chairs make work more attractive and improve your experience. If you have both, you end up with an awesome experience. Javier says this is what beautiful, useful user experiences can deliver. He refers to the “hedonic quality” and the “pragmatic quality” of a user’s experience. In short, we desire both usability and beauty in our products, and will alter our behavior (buying or not buying that pair of shoes) based on whether that balance has been accomplished.
Q: How does gender play into these findings? Youth?
A: There were no gender effects in their research sample. Javier found that the younger you are, the more critical you are of the experience. Older people are more likely to blame themselves, whereas young people are less forgiving of poor design.
Erhardt: How does this practically impact your product design process?
A: There are methods where you flash people with A/B tested screenshots of your design for snap ratings. Javier says to choose the designs that create an immediate positive first impression. Not all designers like to test their designs and accept the results over their instincts.
Erhardt Followup: Does that mean you’re immediately prioritizing aesthetics over usability?
A: You can test in parallel and establish usability is functional before the aesthetics are tested.
Q: Will we ever be able to computationally generated pleasing design?
A: Yes…but it might stop short of perfect, like Google’s automatic language translation. The algorithm won’t be perfect. But if we learn about certain factors, like visual complexity, colors, font sizes, and placement, you can totally think of algorithms that can incorporate those findings.
Q: What are the paragons of usability and beauty? What websites?
A: I can give you my personal opinion and that shouldn’t be held as a standard.
For me, Google Search is an example of an awesome product. You can get what you want really quickly. You don’t consider it the most beautiful site on the web, but it’s not the worst. A website I don’t like that much is eBay, where I always struggle to accomplish the right tasks and it’s not aesthetically pleasing to look at.
Q: What about sites like Optimizely?
A: We’re skeptical because they’re not transparent about what they’re measuring. Google also doesn’t allow us to upload our assets to third party sites. There are many inexpensive tools with which you can run tests yourself.
Q: Any universal features or elements that predispose people to find something
A: Prototypicality: does a website look like it’s designed like a typical website to do what it’s supposed to do. Is it clearly a shopping site? There’s a lot of data on placement of objects. If you design a shopping cart that doesn’t look like a shopping cart, it will have a negative influence.
Javier Bargas-Avila holds a PhD in Cognitive Psychology and works as Senior User Experience Researcher & Manager at Google (Switzerland). Before joining Google he was the manager of the HCI lab at the University of Basel (Switzerland) from 2004 to 2011. He published over 20 peer reviewed papers in HCI journals and conferences covering topics such as user satisfaction, mental models in website perception, first visual impression of websites or webform usability. Since 2011 he is part of the YouTube UX research team, where he currently focuses on internationalization, monetization and analytics.
Specialties: user studies, usability studies, user experience, experimental studies, cognitive psychology, online surveys, online experiments, user satisfaction, web form usability, aesthetics, usability.