The Psychology behind Web Design – Part II: How?

December 3, 2010

by Dionne Aiken

In “The Psychology behind Web Design Part 1” I briefly touched on why psychology is so important to web design in that it not only enhances the user experience but also drives calls to action and thus business results.  But how do you get there?

Here are the “Hows” behind design considerations taking into account the user experience and psychological needs (click on each item to jump to a section):

  1. Trust
  2. Familiarity
  3. Purpose
  4. Imagery
  5. White Space
  6. User Flow & Information Hierarchy
  7. Color Psychology and Symbolism
  8. Logo & Brand Consistency

Trust

Safety is the second fundamental human need as defined by Maslow’s Hierarchy of Needs. By meeting this basic need you can build trust with your users. The bottom line is that people spend time on sites they trust. To build trust, consider the following:

  1. Design Integrity The overall look of the site must be of a certain level of design integrity to make a good first impression and build credibility. This is an extension of your brand. If your site appears unprofessional, users may see your entire business entity as such and it could deter users. (This includes technical considerations also; for instance, adhering to Web standards and best practices, providing working links, proper coding structure, and good overall functionality.)
  2. Don’t Get Too Personal Too Soon Don’t ask for personal information up front or in ways that are counter-intuitive or inconsistent with the user expectations. If these request disrupt the user flow, are abrupt, unexpected or out of place they become a deterrent. Find intuitive ways to integrate these requests seamlessly into your website where they make the most sense.
  3. Use Trustworthy Indicators  Adding testimonials from noteworthy clients, reviews, seals of approval, recognizable affiliations, certifications and other trustworthy elements add value to your site and help establish a sense of trust with visitors.
  4. Deliver A website, no matter how superb, is only as good as the actual business entity itself. The business entity must deliver on their product and services to meet customer expectations.

^top

Familiarity

When you go into a grocery store you expect to see aisles of groceries and signage on each aisle that tells you where things are located. You expect shopping carts, registers, entry & exits to be at the front of the store. The same holds true for a website. Once your audience is introduced to your website, there are certain expectations of where “signage,” items and locations of said items should be.  Consider the following to assist with placing elements in a manner that will assist with user familiarity:

  1. Don’t Send People on a Wild Goose Chase Off the bat, people want to know what you do and how to contact you … don’t make people search or guess for these key pieces of information. Tell them up front or offer clear ways to access them, i.e., “About Us” or “Contact” pages or even listing a phone number or address in the header or footer on all pages of the site will help too.
  2. Provide Road Maps People want to know how to get from point A to point B and where they are in the site at all times. Have clear navigational elements that stay consistent throughout the site and strong indicators or “you are here” landmarks that show users what page they are on. This can be done with basic design elements, or even a breadcrumb. It also helps to include a sitemap somewhere on the site that lists all the links to your pages. You can have a separate page or section dedicated to the site map and then link to it or, if the site map is small enough, you can add it to the footer so it’s present on all pages of the site. Providing good road maps and directional indicators or “signage” not only helps users navigate your site but also helps search engine crawlers crawl your site pages and links and thus boosts SEO.
  3. Above the Fold Because we are taught to read from left to right and top to bottom in our Western culture, it is good practice to place all of the important website elements in the “top fold” or “above the fold.” Logo, branding elements, header, navigation, search fields and so forth should at the very least be visible in the top 800 by 600 pixel-area of your Web page to ensure that users can easily and immediately view/access them. This isn’t set in stone but you should take into account factors such as varying screen resolutions, multiple stacked toolbars, browser window sizes and so forth when considering your top fold real estate. Creating layouts that auto center with the user’s window or fluid layouts can also assist with making sure key elements get the exposure they need.
  4. Design Consistency  Design things and place things in an intuitive manner. How many times have you gone to a website and clicked on what you thought was a link or button only to find that it wasn’t a link at all? If all the links on your website are blue, bold and underlined, don’t make your headings blue, bold and underlined, especially if they aren’t links! Make sure you have specific design treatments for each recurring element on your site and that the same approach is carried out throughout the entire site. Design consistency and intuitive placement of items, will help users get familiar with your site.

^top

Purpose

A great quote from Andy Rutledge’s article best sums the purpose of website pages:

“In a very general sense, the purpose of a site’s index page is to convince visitors that they should venture further into the site – and compel them to do so. In order to do that the page must engage in advisable psychology (through design and copy) while avoiding distracting and irrelevant purposes that run counter to the primary function of the page. The index page must not attempt to dump the entire site’s content into the viewer’s eyes in one fell swoop. Rather, the page must make a concise and clean first impression; an impression focused on a specific rather than all-encompassing purpose.” – Andy Rutledge

Each page should be specific to its functional purpose. The home page should introduce, attract and direct. The internal pages are where you want to deliver your actual content and pull users further into other pages and areas of your site.

^top

Imagery

Careful image selection and treatment will support the content on your website and reinforce an overarching concept. Images should also be contextually appropriate and purposeful. If not, they will detract and lessen the impact of your messages.  

White Space /Breathing Room

“In a very general sense, a contextually inconsistent environment, clutter and cramped quarters tends to encourage a lack of interest while open space and a consistent context in the environment tends to encourage interest and openness to suggestion.” – Andy Rutledge

By grouping things logically and allowing adequate spacing amidst and between copy, you allow users to focus and read your content and thus pull them into your site.  An article published by Smashing magazine gives more examples of ways to incorporate white space into your layouts with additional links and resources.

^top

User Flow & Information Hierarchy

Here is an example of a home page layout that has strong information hierarchy and thus strong indicators for user flow of accessing information:

Hierarchy in Web Design

 http://www.onextrapixel.com/2010/06/24/a-closer-look-at-hierarchy-in-web-design/

Use strong design elements and employ basic design principles to highlight important areas and elements, support the message, and to direct the viewer’s eye and user flow.

^top

Color Psychology and Symbolism

Understanding the psychology behind the use of colors will make for better design decisions and will help better communicate and support your brand and messages.  For example, use blues to communicate security or yellow to communicate happiness.  There are many resources that talk about color and the psychology behind different colors*:

http://www.pepfx.com/articles/web_design/webdesign_colors.php

http://www.pantone.com/pages/pantone/Pantone.aspx?pg=19382&ca=29

*It is important to note that the above is in reference to colors in our Western society, the meanings people associate with different colors may vary across different cultural and geographical boundaries.

Logo & Branding Translation/Consistency

When you land on a company’s website is should be the same feeling as if you were to walk into their office building.  The website should be an extension of their brand, not an afterthought.  There is a certain lifestyle, a point of view, a culture, an attitude and aura associated with and unique to each company.  It is the designer’s goal to make sure all these elements carry over and are communicated in the look of the site.

^top

By addressing these key points, you can tap into the user’s psychology and create better web experiences.  In the long run, this will contribute to more calls to action and drive business results.


Follow

Get every new post delivered to your Inbox.

Join 46 other followers

%d bloggers like this: