Using Neuroscience to Design a Better Blog

The science behind good design has made leaps and bounds over the last 10 years.

Over the years, combinations of brain scans, eye tracking studies and surveys have been used to study how humans browse the Web.

So, how can you harness this knowledge to your advantage? Let’s look at some of the most notable studies on the subject and how you can apply that directly to your blog.

The First Five Seconds

According to Daniel Kahneman, a Nobel Prize-winning researcher, the brain has two different systems for making decisions. There’s the conscious system, where we think decisions through and make decisions carefully.

Then, there’s the “instant decision” brain. According to Kahneman, you tend to believe your first impressions, then take actions based on the desires those first impressions create.

We live in an “instant decision” culture. This is especially true of online reading. Technology trains us to quickly judge webpages, and then move on to something else if it doesn’t interest us. Remember, 17% of page views do last for more than four seconds.

In fact, other studies have shown that our average attention spans have been reducing over time and in this particular study, it is just six seconds.

How does that apply to your blog? It’s simple: You need to be extremely conscious of your blog’s first impression. Where do the eyes gravitate when someone lands on your blog for the first time?

What kind of information can someone glean at a glance? Can users tell what your blog is about without having to read carefully?

You have about five seconds to catch your reader’s attention. If you can’t present a compelling reason for why they should stay in about five seconds, they’re going to leave.

How Long Should a Headline Be?

The headline of a post is one of the most prominent parts of a page. If you have a header, the header should have a tagline that conveys your blog’s subject matter.

Alternatively, if it’s just a graphical header, it should be small and unobtrusive. The header shouldn’t compete with the post’s headline for attention.

A recent study by Outbrain illustrates how headline length can be linked to user engagement. The highest CTRs were witnessed for articles that had moderate headline lengths (16-18 words).

The Fold

That said, it’s easy to over-emphasize what’s “above the fold,” which refers to what is visible on the page without scrolling. Yes, in most cases what’s above the fold is what’s most important.

Yet, substance is just as important. As Bnonn Tennant found out, copy that goes far below the fold often out-converts those that try to keep selling points above the fold.

How can you marry these seemingly contradictory design philosophies? Simple: Make sure you catch users’ attention and create an impactful first five seconds. Then make sure your pages have true substance and your content is worthy of users’ attention and trust.

Write for People Who Scan

According to the F-Shaped pattern study, most people read Web content in a very specific way. First, they read the headline. Then they read the first sentence on the page. Then they jump down and either scan paragraphs or subheads.

What are people looking for? They’re looking for either entertainment or proof this page will benefit them in some way. In other words, they’re looking for dopamine. Aric Sigman’s presentation to members of the Royal College of Pediatrics and Child Health outlined the parallels between screen dependency and alcohol and drug addiction: The instant stimulation provided by all those flickering graphics leads to the release of dopamine, a chemical neurotransmitter that’s central to the brain’s reward system.

When you eat food that tastes good, it “feels” good to you because your brain releases dopamine. When you get a relaxing massage, it feels good because your brain releases dopamine.

Yet dopamine isn’t just the chemical your brain releases when you have something good. It’s also the chemical indirectly responsible for creating cravings. It’s the neurotransmitter that creates that “wanting” feeling – i.e., craving ice cream or wanting a massage.

When a user lands on your blog for the first time, their brain is asking, Is there something here for me? Is there a reward? Or should I leave?

Your page needs to be interesting enough for readers (while they scan through the content) that they’ll keep reading. In other words, the brain needs to interpret your content as entertaining or useful, right from the get go.

Here’s how to apply this to your blog:

• Again, nothing on your page is more important than your headline. Spend as much time as you need to really make it hit home. You can use the following three elements to create a great headline: self-interest, news and curiosity.


• Break your content into subheads. This makes it easy for readers to find separate pieces of information.


• Write relevant subheads and bold out important content. Your subheads should be strong enough to stop scanners in their tracks and make them start reading.


• The first few sentences of your article need to convey exactly why readers should keep reading. Tell them how they will benefit from reading your article here.

People also tend to focus on “breakouts” – things that break the flow of the page. For instance, an image will break people away from the F-shaped pattern and it may no longer apply. The F viewing pattern is mostly a general rough shape, and breakouts like images may cause aberrations.

Make Your Blog Simple and Familiar

In 2012, YouTube’s Senior User Experience Researcher Javier Bargas-Avila conducted a series of experiments designed to figure out what made users decide if a page is interesting or not.

The study found that users form an aesthetic judgment about your website between 17 and 50 milliseconds. That’s about 1/10^th the speed of your eye blinking.

Bargas-Avila found that what made users stick came down to two things: Visual Complexity and Prototypicality. Or, in layman’s terms, “Does the blog look simple?” and, “Does this blog look familiar?”

• Visual Complexity: The more complex/cluttered a webpage is, the less likely users are to stick around. Blog owners often want to add all kinds of widgets, features and functionality to a blog. Yet, the study shows that simple is better. Have just one or two main draw points. The rest of your design should funnel attention to those draw points, rather than compete for them.


• Prototypicality or familiarity: People have a certain expectation of what a blog should look like. If your blog varies widely from the convention, you’ll break rapport with your readers. For example, Amazon “trains” users on how ecommerce websites “should” look like. Veering too far from that norm can result in confusion for users. What’s the “Amazon” in your category?

Simplicity is important. This is evident from the design experiment I did on the AdPushup blog:

This is the AdPushup’s blog’s old design. Now take a look at the new design:

The aim was to make the design simpler and to remove the clutter. A lot of inspiration came from Paul Stamatiou, who has done a fantastic job at creating a minimalistic blog. The result: 57.14% improvement in average time spent on site and 14% reduction in bounce rates.

We can also take the case of the online tie retailer Skinnyties.com, who redesigned their website in October 2012.

Before:

After:

Just by designing a website that looked simpler and followed the traditional ecommerce website layout, these are the results they saw:

In another study titled “Determinants of Web Page Viewing Behavior,” researchers found that complex website designs tended to increase “unexpected paths.”

In other words, on simple blogs, people tended to follow a predictable eye pattern. They look at the headline, the first sentence, scan the page and then decide if they want to read. On complex blogs, this pattern can be unpredictable.

This happens because readers don’t know where they’re supposed to go. Where’s the navigation? Where’s the next page? What’s this site about? Complexity often comes from the desire to be creative, but more often than not it just results in confusion.

Of course, it’s fantastic to express creativity. Just make sure you keep your blog simple in the process. And make sure the overall structure is similar to the general norm. Within those two guidelines, there’s still plenty of room for creativity.

Apple understands this well and uses images to keep the design simple yet informative.

Image Source: Hubspot

The Scientific Reason Why Simple Is Better

The primary reason why less visually complex websites are perceived as more beautiful is because we don’t require our eyes and brain to work as hard to decode, process and store the data.

To learn more about this, watch this video that explains how our eyes communicate with our brain.

Design to Promote Discussions

Websites like Medium give an option to comment on individual paragraphs, which actually makes more sense, as readers generally want to comment on individual lines and thoughts instead of commenting on the entire article.

What Font Should You Use?

Typography is an important part of your design, and there’s a lot of conflicting information about what font you should use. Fortunately, science is here to help.

In a joint study by IBM and Google, researchers conducted a comprehensive study titled “Study of How Font Size and Type Influence Online Reading.” The study was conducted by asking subjects to read a number of science news articles written at an eighth-grade level.

The study included both men and women and spanned a large age range. The study also included readers for whom English was not their first language. The results were adjusted for all these factors.

Here’s what the study found:

• On small fonts, people tended to spend more time on each fixation (“gulp” of an eye, usually a group of three to six words). This was most likely because words were more difficult to make out, which meant people had to spend more time and energy on each word. Fonts sized 10 and below had this problem.


• On larger fonts, people had smaller and more frequent fixations. That means they were taking in fewer words per “visual gulp.”


• The serif font, Georgia, was read 7.9% faster than the sans serif font Helvetica, although this difference is not significant.

Master the Use of White Space

Researchers from Wichita State University conducted a detailed study on white space. Eighty-nine percent of the participants were active Web users who surfed the Web daily.

Eleven percent of the group used the web for 25-plus hours a week and 26% read for at least seven hours a week. The reading text was taken from SAT and ACT practice exams.

The researchers had participants read passages with a lot of margin (white space) around the text, as well as varied the text in between lines of text. Here’s what the study found.

• Space between lines of text did not affect reading speed or comprehension. However, after the study, participants reported being less satisfied with pages that had less spacing between text. In other words, people can still read poor spacing – they just won’t like your site as much.


• No or low margin text was read faster, but had lower comprehension. Putting a good amount of white space around your text gets people to read a little slower, but makes them understand the material a lot more.

Use Science to Inform Design

We’ve discussed some important elements of a blog’s design. We’ve talked about catching attention to cater to short attention spans. We’ve talked about breaking up your site and making it scannable. We’ve covered the optimal fonts and spacing for improving readability. You’ve learned about people’s affinity for the simple and familiar.

These guidelines aren’t just based on vague “design principles,” but hard science and data backed studies. Use them and harness them, and you’ll have a blog your users will love.

About the Author: Ankit Oberoi is a co-founder at AdPushup, a startup focused on helping publishers and bloggers optimize their ad revenues. You can reach him on Twitter @oberoiankit.

Using Neuroscience to Design a Better Blog