Designing a Brain-Friendly Website

by Q7 Associates

1

CONTENTS 2 Layout & Navigation 4 Images 6 Content 8 Font 11 Color 12 Music, Banner Ads 13 E-Commerce

1

2

LAYOUT & NAVIGATION A few years ago a study was done to track users’ eye movement on various website designs. The eye-tracking process used heatmaps to indicate areas that received the most attention. The end result found that individuals read websites in an “F” pattern.

Website visitors are used to being able to find certain features in certain places. For example, they’re used to finding logos and taglines in the top left of a page, and menus in the top right. They’re also used to being able to find an About page and a Contact page if they want to learn more about the organization or get in touch.

Multiple tests have shown that users have no problem scrolling down below the fold. Surprisingly, they will browse even further down if the length of the page is longer. Another great test from the folks at ContentVerve showed that moving the call-to-action far below the fold actually boosted conversions by 304%.

Heatmaps from eyetracking studies: The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations. Green boxes were drawn on top of the images after the study to highlight the advertisements. Nielsen Norman Group

3

IMAGES Keep it real: Fake emotions look fake: we are very good at detecting false attempts to manipulate us. Thus, many of the computer systems we interact with-the ones with cute, smiling helpers and artificially sweet voices and expressions-tend to be more irritating than useful.

Logos and pictures stand a better chance of being perceived if placed on the left. Statistical information is best served on the right side of the screen.

People interpret information on different parts of a screen with different sections of their brains.

Stimuli in the left visual field are interpreted by the right frontal lobe, while stimuli on the right are picked up by the left frontal lobe.

Visuals are an important part of a site’s overall design, but most pages can be optimized by including images that serve as visual cues for where visitors should look next.

Human beings have a natural tendency to follow the gaze of others, and we have been coached since birth to follow arrows directing us to where we should be looking/going.

4

Image source: www.rosewaterfilm.com`

5

6

CONTENT The typical human brain can hold about seven pieces of information for less than 30 seconds! If something does not happen in that short stretch of time, the information becomes lost. (think of your social security number or phone number).

The amount of time spent reading online content is rapidly declining. On an average visit, users read half the information only on those pages with 111 words or less. In the full dataset, the average page view contained 593 words. So, on average, users will have time to read 28% of the words if they devote all of their time to reading. More realistically, users will read about 20% of the text on the average page. http://www.nngroup.com/articles/how-little-do-users-read/ Solution: Keep content short and simple and break information down into sets of 3.

Since individuals read Web pages in an “F” pattern, they’re more inclined to read longer sentences at the top of a page and less and less as they scroll down. That makes the first two words of a sentence very important.

Although every surfer glides across the web, most people may take another 10 or so seconds to make their choices. People normally read lists prior to making a decision, so putting the things that are most important in terms of navigation isn’t always necessary - one reason why contact has made its way to the end of the list.

The journey your eyes take when looking at a website is known as a scan path. Right now you’re following a scan path as you read, along one line, and down to the next.

The Internet is different. With so much information, hyperlinked text, videos alongside words and interactivity everywhere, our brains form shortcuts to deal with it all — scanning, searching for keywords, scrolling up and down quickly. This is nonlinear reading, and it has been documented in academic studies. Some researchers believe that for many people, this style of reading is beginning to invade when dealing with other mediums as well.

“We’re spending so much time touching, pushing, linking, scroll­ing and jumping through text that when we sit down with a novel, your daily habits of jumping, clicking, linking is just ingrained in you,” said Andrew Dillon, a University of Texas professor who studies reading. “We’re in this new era of information behavior, and we’re beginning to see the consequences of that.”

Your eyes typically move across a page between 7-9 letters before needing to pause to process what you’re reading. Line length, how far your sentences stretch across the page, should be between 5075 characters.

Image Source: www.onepagelove.com/alchemy

7

FONT Larger font sizes can elicit a stronger emotional connection - 16pt font is the new 12pt font.

So how can you design your words to help elicit positive feelings in people? Here’s a few techniques from typography experts that you might find useful:

1. CHOOSE AN ANCHOR FONT

Type designer Jessica Hische recommends first selecting a typeface for the content that is most prevalent in your project (most likely your body copy).

This will be the typeface that you base your other font decisions on like headlines and subheads.

There’s four main categories of fonts to choose from:

SERIF FONTS Letters with short lines coming off the edges.

Viewed as more formal and traditional. Best suited for print.

SANS-SERIF FONTS Letters without serifs. Viewed as informal and playful. Best suited for digital.

SCRIPT FONTS Resembles handwriting and often used in formal invitations. Not ideal for body copy.

DECORATIVE FONTS Informal fonts viewed as original. Best suited for headlines but not body copy.

This is a serif font This is a sans-serif font

This is a script font This is a decorative font

2. PICK A FONT SIZE BIGGER THAN 12 PT

In 1929, a study was conducted called the “Hygiene of reading.” One thing researchers were trying to determine was which font size would be best for reading. The study looked at 6pt, 8pt, 10pt, 12pt, and 14pt type sizes.

The researchers concluded that a font size of 10pt font is the most efficient for reading but a lot has changed in how we consume content today compared to the 1920s.

8

However, as more reading shifts to digital and screen resolutions improve, the way we read content is changing. Many designers mention that 16pt font is the new 12pt font. A recent study has also shown that larger font sizes can elicit a stronger emotional connection.

Medium has one of my favorite reading environments online and they use a 22pt font size. Several of my other favorite websites have adopted a font size over 20pt for their content: • Medium – 22pt • 37Signals: Signal vs. Noise – 22pt • Zen Habits – 21pt

While having a huge font over 30pt most likely wouldn’t make sense, many blogs have font in the 10pt12pt range. Try increasing your font size. If you’re using 12pt font, try increasing to 16pt font. If you’re using 18pt font increase to 22pt. You can feel the difference.

3. WATCH YOUR LINE LENGTH

The line length is how far your sentences stretch across the page. The ideal line length should be between about 50-75 characters.

If the line length is too short, your reader’s rhythm will break because their eyes must travel back to the left of the page too often.

9

FONT (cont’d) A line length that is too long makes it hard to find where lines of text start and end. It can make it difficult for your reader to get to the next line without accidentally jumping to the wrong place.

Research shows that your subconscious mind gets a boost of energy when jumping to a new line (as long as it doesn’t happen too often) but this energy dwindles as you read over the duration of the line.

Here’s the line lengths from the sites mentioned above: • Medium – 75 characters • 37Signals: Signal vs. Noise – 76 characters • Zen Habits – 78 characters

4. MIND YOUR SPACING

Adequate spacing between letters is important for your readers to be able to move through sentences fluidly. The tighter your letters are together, the harder it is for people to identify the shapes that make up different letterforms.

When people read something in a difficultto-read font they unwittingly transfer that sense of difficulty onto the topic they’re reading about [Drake Bennett, Easy = True, 2010]. This has been proven in studies where participants were asked to rate the difficulty of a workout regiment. The regiment typed in less legible font was perceived as more difficult compared to the same regiment typed in a simpler font. Surprisingly, a questionnaire presented in a less legible font is more likely to have people answer it less honestly that if it is written in a more legible one.

Bonus Tip: Not only is high contrast important, but you also want to use reverse type sparingly.

(Reverse type is white text on a black (or color) background instead of black text on a white background.) According to the study, below is a list of the comprehension level for different colors and backgrounds: • • • •

10

Black text on white: 70% good, 19% fair, 11% poor White text on black: 0% good, 12% fair, 88% poor White text on purple: 2% good, 16% fair, 82% poor White text on royal blue: 0% good, 4% fair, 96% poor

COLOR Colors can control an audience and provoke them to certain behaviors.

35% of women identify blue as their favorite color, purple 23%, green 14%. 33% identify orange as their least favorite color, brown 33% and gray 17% Men like blue, green and black best with purple, orange and brown being the least favorite.

Color can also be hugely influence a consumer’s mood and attitude. It is often the last reason to buy a product, but it’s the first thing a consumer sees. Products presented against a red background are less liked than products presented against a blue background. The preference for blue is somewhat global; crosscultural studies have shown a consistent preference for blue in Eastern as well as Western countries.

11

MUSIC Just don’t. Unless you are building a music site, people normally already have music going while they surf the web. The music on websites just becomes distracting.

BANNER ADS Banner ads are on the outs. “Clickthrough rates are now averaging less than 0.1% and you’ll hear the words banner blindness thrown about with abandon,” Haile says in TIME. According to user testing by the Nielsen Norman Group, no matter what the engagement level, people ignore banner ads. They say, “If users are looking for a quick fact, they want to get done and aren’t diverted by banners; and if users are engrossed in a story, they’re not going to look away from the content.”

Which brings me to my next point -- if the solution is to create quality, engaging content, banner ads could be even less effective.

12

E-COMMERCE

MRI (Magnetic Resonance Imaging) studies have shown that our frontal cortex is highly active when we think about waiting for something. To better appeal to customers, remind them that your product (or service) can solve their pain points fast. Focusing on quick arrivals, fast shipping, and “instant gratification’ can be just the incentive customers need to buy. ​ Phrases/Words that encourage online purchasing: http://www.neurosciencemarketing.com/blog/ articles/magic-word-ecommerce.htm

Scarcity

If you’ve ever bought airline tickets on Kayak, you’ve undoubtedly seen the little alert telling you “Only 1 ticket left at this price!” Nothing kicks you into buying mode like the fear of paying more for the same product or missing out on it altogether.

Among the most effective tactics advertisers can use is tapping into our social insecurities. It makes sense; we go to doctors, hairstylists and restaurants based on our friends’ recommendations, and we’re just ask likely to buy something because it’s gotten the stamp of approval by someone we know and admire.

“The more people who approve of something, the more likely we are to like it, too” says Andrews.

13

E-COMMERCE (cont’d)

Just look at Facebook and its snowball “liking” effect.

Even saying something as simple as “Nine out of 10 people choose Tide” or “The majority of people prefer Wonder Bread” works exceptionally to influence human behavior, Andrews adds. So much for individuality.

Could one tiny line of text on a product page increase your sales? A recent A/B test published by WhichTestWon says yes.

WhichTestWon encourages readers to guess which version of a page or ad performed better before they reveal the answer, and often the readers (mostly conversion optimizers) are quite evenly split. This time, 90% guessed that adding a small line of text to an ecommerce product page would increase sales. And, they were right.

So, despite the fact that almost all of these web marketers knew that the small change would help, very few websites actually use this approach.

So what was the powerful line of text?

The change that increased revenue by 9% was the addition of a small countdown timer showing how much time was left for next-day delivery. The only difference between the two pages was the inconspicuous line of text.

Nine percent sounds like a modest increase, but if an ecommerce firm realizes that revenue gain across its entire site, the impact on profit can be substantial.

Another test previously described by WhichTestWon showed that adding a timer more than tripled form completion. In that case, the comparison was a more vague “Offer ends soon” message.

Imagine getting three times as many leads or subscriptions with a small site change!

14

The information contained within was gathered from the following sources:

•

http://www.ironpaper.com/webintel/articles/web-design-statistics-2015

•

http://www.neurosciencemarketing.com/blog/articles/magic-word-ecommerce.htm

•

http://thenextweb.com/dd/2013/12/23/science-behind-fonts-make-feel/

•

Why We Buy: The Science of Shopping--Updated and Revised for the Internet, the Global Consumer, and Beyond- by Paco Underhill

•

http://socialmouths.com/blog/2012/11/09/how-to-convert-more-customers-using-psychology/

•

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

•

http://www.washingtonpost.com/local/serious-reading-takes-a-hit-from-online-scanning-andskimming-researchers-say/2014/04/06/.html

•

http://blog.pickcrew.com/the-science-behind-fonts-and-how-they-make-you-feel/

•

https://blog.kissmetrics.com/eye-tracking-studies/

© 2015 Q7 Associates, all rights reserved.

15