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.


The Psychology behind Web Design – Part I: Why?

December 1, 2010

by Dionne Aiken

When browsing through websites, ever ask yourself “Why?” Why is the navigation at the top or on the left and then again at the bottom of the page? Why are all the links a certain color? Why does the overall website look and feel the way it does? These answers should be driven by conscious and purposeful decision, taking into account the user experience and psychological considerations, and not just because “I think the color blue and shiny Web buttons are cool!” (Although I must admit I’m a sucker for shiny Web buttons, myself!)

Basic design and psychological principles play a critical role in the push and pull of information between businesses and consumers by impacting the user experience in a way that generates calls to action and thus translates to business results.

An excellent article written by Andy Rutledge titled “Design Psychology” further attests to this as it goes through an extensive explanation of the psychology behind design and why individual subjective preferences should take a backseat to proven design principles and user expectations.

Similar to a step in our very own corporate philosophy “Analyze the Big Picture,” a video interview with Lance Loveday of Closed Loop Marketing and Eric J Hansen of SiteSpec  stresses the importance of a re-focus on overarching business goals to bridge the gap between developers, designers and decision-makers to boost ROI and business results. Throughout the interview they also make the connection between effective Web Design and ROI.

Here are additional articles written on the topic of psychology and Web design that further explain the “whys” behind the design decisions:

http://abduzeedo.com/psychological-study-web-designs

http://www.webdesignerdepot.com/2010/05/the-psychology-of-web-design/

As shown in the examples above, good design decisions take into account the user’s psychology, basic design principles and objective data, and lead to better Web experiences, user action and thus translate to business results.

In an upcoming post, I’ll explore the “Hows” behind implementing good Web design based on users’ psychological needs, so … stay tuned!


NYTimes.com Transcends our Concept of “The Newspaper”

August 6, 2010

by Dionne Aiken

Visited nytimes.com lately?  Maybe you logged on during the World Cup

or to track the oil spill.  Well if you haven’t logged on lately you’re missing out.

In such a dynamic information arena, where consumers can get “info-on-demand,” via the Web, smart phone and tech devices in a matter of seconds, some newspapers continue the struggle to keep up – others, like The New York Times, remain forerunners by taking advantage of this dynamic platform.  They grab the reigns and race ahead transcending our concept of the newspaper and news delivery.

In a recent interview, Steve Duenes and Archie Tse from The New York Times graphics department talk about the extensive work that goes into creating all the graphics on the news site.  When you think about the size of the site, the amount of information and small window of turnaround time, this begins to look like a daunting task fit only for a magician.

Duenes & Tse say that starting with a simple (yet sophisticated) foundation is critical in creating graphics that are sustainable but also expandable so that as information is added they hold up over time.  This process involves a lot of painstaking work and sorting through data to effectively communicate data, stories and messages in the clearest manner possible.

The end result?  Their graphics direct in amazing story telling.

From climate changes timelines, to carbon dioxide emissions

interactive tours though Broadway

or the number of Frisks in NYC.

For journalist, editors, and designers alike message delivery and how we tell our story is an important task.  It’s just data but it really all depends on how you look at it.


Don’t Give Me the Run Around!

June 28, 2010

by Dionne Aiken

Confused about all the Search Engine Optimization buzz but want to get your site top ranking?  There are experts around every corner, but when it comes to your website, there’s a basic rule of thumb:

Don’t give people the run around.  Tell them what you do, be clear and concise, and make it super easy for them to access information.

This is the general idea behind what search engines are looking for when they rank websites.   Matt Cutts, software engineer for Google, offers valuable tips on how to make your site more optimized:

  1. It’s a common error to place more emphasis on meta tags than actual original content. This actually works against SEO. You must have original content and actual text on your site pages.
  2. Don’t just use fancy terms or generic overused terms. Think about what users will actually type and search for.
  3. The easiest way to generate content on a site without doing any work is to add the ability for users to leave comments.
  4. Don’t just add a bunch of links to your site – have a link strategy. Look at where people are online, where the conversations are, and link to/connect to them that way.
  5. If you use WordPress, Drupal, Joomla or any other similar CMS tool you must always keep it patched/updated with the most recent version or you will get hacked. Hackers and Spammers can then inject code into your site that can cause all those annoying pop- ups, and thus cause your ranking to go down.

He offers a ton more advice in his hour-long review session.

So if you think about keywords, title tags, descriptions, original content, user-generated content, link strategies and campaigns, etc.,  all this contributes to the ultimate goal of just telling it like it is and meeting peoples’ expectations without all the fluff, padding or trickery.

Search engines will love you – you’ll stick around for a while and ultimately you’ll get that higher ranking you’ve been “searching” for.


Much More Than Just Good Looks …

August 27, 2009

by Dionne Aiken

eBizMBA.com highlights the top 10 best Flash Web sites of 2009.  When you have a moment, check it out.  You’ll see some really neat sites!  But, there’s more to a good Web site than being really, really, really good looking.

The layout and presentation of information is key.  In general, information should be organized and presented, taking into account the users’ intuitive processes and actions.  In short, it is important to understand how and what users will access, and navigate on your site.

At Curley & Pynn, we ask four questions to help understand what drives a target audience:

  • Who do you want to reach?
  • What do they know about you?
  • What do you want them to know?
  • What do you want them to do?

The answers to these questions can also help shape how you present the information on your Web site.

For example, the home page is the point of entry where you must grab and keep users’ attention and further pull them into your Web site.  You don’t want to overload users with too much information, links and clutter.  Instead create “zones” or sections that group and highlight key items that you want to call to your audiences’ attention like news feeds, blog updates or maybe a new product or service, and then allow them the option to click to learn more.

Apple does a good job of this by highlighting key items on their home page such as product announcements and headlines, breaking them into zones and then allowing the user the choice to navigate to desired areas of the site to access additional information.

 

 

We see the same thing with the Dell home page:

This idea of grouping and gradually revealing information is best defined by the term Progressive Disclosure.  Progressive Disclosure is the separating of information into multiple layers and only presenting layers that are necessary or relevant.

By only presenting the necessary and relevant information first, you provide users with a quick snapshot of what they need to know and put them in the driver’s seat.

When it comes to Web site design, good looks will only get you so far.  Information presentation is what helps connect your audience to your message.


Follow

Get every new post delivered to your Inbox.

Join 47 other followers

%d bloggers like this: