The Science of Website Design

When designing a new website there is often too much time spent on the art of the design and not enough time on the science of website design. Everything from layout to font choice should be guided by user testing to ensure that the website doesn’t only look good, but also function at its best.  Science of Website Design

We are all familiar with the scientific term color theory, but how much science really does go into that? The answer is a lot. There are many reasons to study color theory. Art, print design, and interior design to name a few. Web design is another variation of print/graphic design which incorporates many of the same ideas.  Science of Website Design

As designers, we think about which colors fit best with a specific branding or company. The type of website and subsequent content also structures how a navigation menu should be organized. The page layout is directly influenced by how your content should appear. Once it is  understood what needs to be prominently displayed all the other stuff falls into place naturally.

EYE-TRACKING STUDIES CAN REVEAL WHERE YOUR VISITORS ARE FOCUSING – AND WHAT THEY’RE MISSING

Want to know if your visitors are focusing where you want them to? Eye-tracking technology will actually follow people’s eye movements as they view the page, providing a gaze map which tells us where they look and where they stop. Data from multiple users is then combined to give you an overall picture of where they focus most. Typically, people start by scanning the main sections to see what the site is about, they pay the most attention to the top section of the site, particularly the upper left corner. If you have many photos, lots of text, or a multiple column layouts, you may find that your readers may react differently to your content.

RED IS BETTER THAN GREEN FOR CALL-TO-ACTION BUTTONS

Science of Website DesignThis may not be the case across the board, but that’s what one study from the website CareLogger found through A/B testing. The simple change increased their user sign-ups by 34%. It may have to do with contrast. Green may match better with the rest of your site, but that can actually be a detriment. It may blend in a little too well. Choosing a color that sticks out from the rest of the design can draw your user’s attention to it.  Science of Website Design

PHOTOS OF HUMAN BEINGS PERFORM BETTER THAN GRAPHICS

Two separate A/B studies found that images of people can make a difference for your conversion rates over other types of graphics. The site Medalia art found that when they swapped pictures of the paintings they were selling for photos of the artists, visitor engagement improved by 90%. The website EmptyMind replaced a large phone icon for the contact us page with a photo of the site owner, and conversion rates jumped 48%. Why? It may have to do with people emotionally connecting with another human being.  Science of Website Design

YOU HAVE SECONDS TO GET YOUR VISITORS’ ATTENTION

Studies have found that on average, people make decisions about the page they are visiting within three seconds – or less! That means you only have this short window to convince them to stay on your site or to take the action that you want them to take. When designing, take a step back and look at what information you can glean from the site in that short period of time. Is it clear what the site is all about? Are you drawing attention to the right things? Science of Website Design

THE SCIENCE OF PERSUASION IN WEB DESIGN…  PERSUADE ME, BUT DON’T FORCE ME

Whether negotiating a million dollar business deal or convincing a toddler that playing with a sharp knife is bad,  we have all tried to convince someone that our opinion is the right one. Persuasion is an innate human skill that we regularly use, sometimes without even knowing. 

Captology (Computers As Persuasive Technologies) is a new discipline that has increased as we continue to replace humans with computers. In captology, persuasion is defined asthe attempt to change attitudes or behaviors or both. When designing persuasive websites we are looking for a voluntary and planned change in an attitude or behavior.  There are many ways to achieve this. Here I will introduce the three common approaches.

  • Simplify and Guide Me – Websites are perfect persuasion tools because they are good at using large amounts of data and performing complex calculations! Any website that makes a complex task easy is naturally more persuasive. The more a website is persuasive, the more successful it will be at achieving its goals.

    You might say simplifying and guiding users on websites is not an unusual design suggestion. Good usability is promoting “persuasive web design”, as well as simplifying. Captology contains several principles that persuade through guiding users. Science of Website Design

    For example the power of customization… When buying something on Amazon and it suggests “Other people also bought….” or “Amazon Recommends…”. This customization guides users to new products that they may not have considered. It’s one of the most basic persuasive tools implemented on the web, and it works, because it’s customized for the individual! Science of Website Design

    Another captology principle that can help make a website persuasive is the power of suggestion. Imagine a process on a website that requires several steps for purchasing a product or registering online, etc. At appropriate points during their online experience, users of the website will be more open to suggestions than others.

    For example, having just booked a flight to New York perhaps the website could offer good rates on car hire? Just before clicking the confirm button for the “standard package” perhaps the website could inform me of benefits of the “deluxe package”. Up-selling is a common technique in e-commerce but how many site designs consider the “when” as well as the “how”? Could your website apply this customization better?

  • Let Me Explore, Rehearse & Learn – Sometimes a website will want to educate you about a complex issue. Imagine a charity website that is designed to raise money to protect a rainforest. No matter how simple the website is or how much information or pictures there are on the site,  most people will not grasp the relationship between their money and the impact that their donation will have. The best way of learning something, is to do it yourself. This is where the persuasive power of websites can be put to good effect. Websites are very good at allowing people to simulate and rehearse actions.

    In our rainforest example, the website could have a tool where a user could type in a monetary value and it would visually show them how many trees, animals or acres would be saved. Research suggests that allowing people to practice behaviors & experience their outcomes without risk can increase the chances that a desirable behavior will be adopted. This behavior could be to donate to a charity, vote for a particular issue or stick to an online weight loss program.

  • Form a Relationship with Me – How many times have you heard someone say “I am going to kill my computer?” Research has found that we often associate human characteristics to computers. These social responses to computers are often automatic. As a result, people often treat an interaction with a computer as a social experience! Websites can be made to take advantage of this!

    Websites can be made more persuasive by including virtual social actors. One of the most famous of these is “Ask Jeeves” (www.ask.com). The virtual butler Jeeves was intended to give an air of worldly knowledge to the website. It was a deliberate design decision to make the character an older English gentleman who people would trust. 

    The success of virtual social actors is tied closely to the concept of trust. The character Jeeves works because we naturally associate knowledge with age and experience, therefore we inherently trust the older gentleman character that Jeeves portrays. The concept of trust in a website is critical to the persuasive power of your website. If your website is not trusted then your efforts at persuasive design will all be in vain. 

    The virtual character Jeeves was eventually dropped from the website when it changed its name from askjeeves.com to just ask.com, but the character proved so successful that ask.com reintroduced it in 2009. Another website that has successfully used virtual social actors is Ikea. Their virtual sales assistant even went so far as to have tailored hair colors depending on the global market that Ikea was targeting. Virtual social actors can be particularly effective on younger age groups. However, be careful. There is a thin line between persuasion and irritation.

  • Don’t Manipulate Me – There are multiple ways in which persuasive techniques can be used during web design. Writing persuasive content is entirely different than writing manipulative content! Keep in mind and always ask yourself, “Are you happy with this use of persuasion? Is it ethically right?