- Welcome back.
Design, as the increasingly overused phrase attributed to Steve Jobs puts it, may well be about how it works, but sometimes we overlook the first part of the quote. Design is not just what it looks like.
So today, Emma Carter, a user experience designer at Thought Works and author of the bestselling book Beyond the Logo, asks how much impact does visual aesthetics really have on user behaviour and overall product experience?
Make Me Pretty.
Emma Carter - UX Design & Product Lead - ThoughtWorks
Visual design affects user behaviour and the overall product experience
Five text boxes. The first labeled: Speed up Data Perception. The second labeled: Retain Data for much longer. The third labeled: Trigger Pleasure. The fourth labeled: Guide Attention. The fifth labeled: Universal User Interface. Text underneath each caption explains the concept further.65
percent of the population are visual learners.
Faded background image of a busy pedestrian crosswalk.50
milliseconds
Faded background image of a user scrolling an iphone.Eighty million dollars
the value of colour number 0044CC
Slide background colour is a deep blueWhy?
Four text boxes labelled: How our brains work, psychological impact, brand connection, aesthetic usability effect.HOW OUR BRAINS WORK
Faded background image of a brain.Three infographics. The first is pink and reads: Forty percent of brain nerves are connected to the retina. The second is purple and reads: Ninety percent of everything that comes to our mind is given by visual stimuli. The third is orange and reads: Sixty-five percent of the population are visual learners. The percentages are all represented numerically. Beneath these, text reading: Our brain can capture images that the eye sees for as little as thirteen milliseconds, ten times faster than a wink. This means that we've evolved to absorb visual information at an absurd speed.
How our brains work
Black and white drawing of a brain with one area toward the back of the brain coloured green with the caption: Where pathway. An area lower down near the brain stem is coloured purple and has the caption: What pathway. An area at the back of the brain between the where and what pathways is coloured grey and has two arrows pointing outward toward the where and what regions.Visual Hierarchy
Building our visual world step by step
Stencil graphic of a brain with an arrow pointing up beside it. Text block reading: Higher areas. In parentheses the phrase:more complex. Three bullets underneath read: Neurons represent more complex visual features. Responding to contours and textures. Foreground or background object placement. At the bottom of the screen corresponding with the bottom of the arrow another text block reading: Lower areas. In parentheses the phrase: simple visual features. Two bullets underneath read: very basic visual signals; orientation of a bar or the direction an object is moving. Neurons respond mostly to input from one eye.WHAT AND WHERE
Stencil graphic of a brain with two arrows pointing outward from it. The top arrow points to text headed: Where. In parentheses the phrase: Top of the hierarchy. Two bullets underneath read: guiding eye movements. Integrating our vision with our body position. The lower arrow points to text headed: What. In parentheses the phrase: top of the hierarchy. Three bullets underneath read: inferior temporal IT cortex. Represents complete objects. Fusiform face area, specifically responds to faces.Top down processing
Black and white image of a checkerboard with two squares marked with the letters A and B. The edges of the board appear darker while the middle squares appear lighter. The letter A is on a white square but is in the shadowed, darker area. The letter B is on a black square but is in the lit, brighter area.Replay of prior slide with checkerboard.
Replay of prior slide with checkerboard. The two squares have been replicated outside the checkerboard and enlarged, and A clearly now can be seen as darker than B.
Being 'Iconic'
The science behind visuals
Side by side images of two orange juice cartons. One is coloured and high definition with images of oranges on the side of the carton and images of orange fruit beside it. A caption underneath reads: Thirty-three milliseconds. The other image is a black and white stencil of the carton with no graphics and simply the word: juice written on it with a stencil of a black and white orange fruit beside it. A caption underneath reads: Twenty milliseconds.Replay of prior slide comparing juice cartons graphics.
Side by side images of a video game control console. The image on the left is three dimensional, coloured, and shows all the control buttons in detail. A caption underneath reads: nineteen milliseconds. The image on the right is one dimensional, black and white, with simple abstract circles and a plus sign representing the control buttons. A caption underneath reads: fifteen milliseconds.
Reduce Visual Stress. Faded background image of the outline of a head with a brain stencil inside it.
Uber
The word uber is written in the form of the uber logo.Screenshot of Uber's old landing page. It has a row of menu options at the top and a text headline reading: Get there, your day belongs to you. Underneath the text is a banner image of a young, conventionally handsome man driving a car and smiling. The perspective of the photograph is an over the shoulder view of a blurred figure holding a smartphone, as if the driver of the car is looking at us as the viewer or blurred figure. A text box is overlaid on the right side of the banner with sign up options and buttons. Below the banner are three images with text underneath. The first image is an icon of a person with a location pin behind them. This graphic is captioned: easiest way around. The second image is of the bonnet of a car in front of a smartphone icon. On the screen of the phone icon is a location pin. This graphic is captioned: Anywhere, anytime. The third image is an icon of a piggy bank with a dollar sign imprinted on it. This graphic is captioned: low-cost to luxury. The background is white and all the text and icons are grayscale except two small bars with orange fill featuring sign up options. The banner image is composed primarily from a pale blue and grey colour palette.
Screenshot of uber's current landing page. The background is an image of a middle aged man sitting at a table laughing and holding a newspaper. His gaze is to the left of the screen. He sports a thick moustache. He appears to be in a cafe or office with white and blue wallpaper featuring an abstract floral design. He is wearing a blue shirt with an argyle patterned vest over top. The pattern on the vest has similar lines to the wallpaper behind him. A black horizontal bar and the top of the screen has a range of clickable menu options. A white horizontal rectangular bar is underneath the black bar and contains a row of simple icons with the following captions: earn, ride, eat, freight, business, transit, bike, fly. The icons are akin to symbols in simplicity. For example the business icon is an outline of a briefcase composed of one rectangle representing the case and a smaller rectangle on top representing the handle. A text box with black font over a solid white background is overlaid on the background image with the headline: Get in the driver's seat and get paid. A subheading in smaller font reads: Drive on the largest network of active users. A blue sign up bar in the same colour palette as the man's shirt and the wallpaper is below the headline text.
Replay of the old landing page image overlaid with a heat map. The map is hottest around the banner image of the smiling man and the sign up areas, and warmer on the text elements of the icon plus text areas than on the icons themselves.
Side by side zoomed in images highlighting the headline sections of the old and new pages after they were overlaid with heat maps. The headline on the old page is in smaller font than on the new page and the heat map is much cooler on the old page as compared to the new page. Two captions under the old page read: Users noticed the old headline after 1.5 seconds and spent three percent of their total time on the page looking at the headline. Two captions under the new page read: Users noticed the new headline after one second and spent eight percent of their total time on the page looking at the headline.
Side by side zoomed in images highlighting the faces of the two men in the old versus new pages after they were overlaid with heat maps. The heat map on the old page is very hot around the man's smile. The heat map on the new page is fairly cool across the whole face of the man.
Replay of the new landing page screenshot.
Side by side zoomed in images comparing the Sign Up buttons of the two pages. The old sign up button is bright red with all caps text reading: Sign up to drive. The new sign up button is dark blue with text reading: Sign up. Underneath the old button image are the captions: Four words, four signup buttons, five other call to action buttons. Underneath the new button image are the captions: two words, four signup buttons, three times more attention to sign up buttons.
Satisfying our senses and emotions
What is beautiful is usable.
Tractinsky, 2000.
Aesthetically pleasing design satisfies our sense and gives us pleasure.
Three text boxes. Box one has an eye icon at the top and is headed: Vision. Subtext reads: The most dominant sense in the majority of people. Key elements: color, shape, pattern, line, texture, visual weight, balance, scale, proximity and movement. Using these elements well will help us achieve good visual aesthetics. Box two has a music note icon at the top and is headed: Hearing. Subtext reads: Our ears are capable of perceiving a whole other level of aesthetic design. Sound aesthetics key elements: loudness, pitch, beat, repetition, melody, pattern, and noise. Using them well will create enjoyable 'music' for our users. Box three has a hand holding a heart icon at the top and is headed: Touch. Subtext reads: Skin is the largest organ in the human body. It helps us experience material aesthetics that are especially important for physical products.Image of the Metro Goldwyn Mayer film company logo featuring curved gold text and golden reels of film surrounding the head of Leo the Lion, MGM's mascot who famously roars at the beginning of their films.
First impressions matter.
When we perceive beauty with more of our senses we feel a deeper pleasure from the design.
Psychological impact.
Image of social media app icons on a smartphone screens with red index numbers showing number of new notifications.
Image of a hand taking a photograph on a smartphone of a half eaten jelly doughnut
Users who find a product that alleviates their pain will form strong, positive associations with the product over time... These bonds cement into a habit as users turn to your product when experiencing certain internal triggers.Nir Eyal, 2014
Interaction designs answer to our penchant for endlessly searching for novelty.Nir Eyal
'Mining' dopamine in the human brain is a core technique for driving digital consumptionGerald Moore
Psychological pleasure
Derived from completing a task or feeling in control and safe.
Screenshot of the Girlfriend Collective post-purchase page. A confident looking female model is silhouetted against a blue sky. Headline reads: Thanks Girlfriend. We did it. Subtext reads: With your help, we at Girlfriend Collective diverted six million post-consumer plastic water bottles from the landfill. And we're just getting started.
Creating Brand Connection
Screenshot of Hotel Tonight webpage featuring their logo suggestive of both a bed and the letter h. Background image of a man fully dressed in office attire jumping into a swimming pool in a luxury destination. Beside the image, text reads: The logo has boosted revenue by more than ten percent each year.
Refunds cut into the company profits by
four percent
Background image of a hand holding a smartphone with app view of the Hotel Tonight platform.Screenshot of the Hotel Tonight booking page featuring their logo half coloured in purple and half grey. Text above reads: trace the logo to complete your booking and agree to our Terms of Use. Underneath the logo is a hand icon with index finger pointing to a miniature icon of the logo captioned: Need to know.
Seventy five percent
Non-completion of the booking process dropped
Background image of a hand holding a smartphone with app view of the Hotel Tonight platform.It's become this iconic feature of HotelTonight...We now say, three taps and swipe to book a hotel tonight.Sam Shank, CEO of HotelTonight
If the user can't find the product, the user can't buy the product. Background image of a forest filled with trees.
Attractive plus Functional
Image of pink smoke rendering from graphics colour gradient software
