Website Navigation and Design For eMarketing : Understanding User Behavior Online October 19, 2005

Identify How to Best Serve Your Users Research Tactics Prioritize Your Audience Segments Understanding User Behavior Online Where They Look What They Expect Why They Scroll How They Read How They Find Information How They Navigate Agenda

Identify How to Best Serve Your Users

Research Tactics

Prioritize Your Audience Segments

Understanding User Behavior Online

Where They Look

What They Expect

Why They Scroll

How They Read

How They Find Information

How They Navigate

Knowing Your Audience: Research Tactics Contextual interviews in users’ workplaces and homes captures information about daily activities, attitudes, and needs Camera studies allow people to interpret their environment and activities when we can’t be there Focus groups solicit opinions and preferences from in-person samples of customers Surveys capture quantitative data about usage and preferences Collaborative design , such as collaging, actively engages customers Card sorting captures customer feedback about categorization and labeling Traditional techniques solicit opinions Interactive techniques observe behaviors

Prioritize Your Audience Segments The choice of which customers to prioritize is a business decision

The choice of which customers to prioritize is a business decision

Focus on the most valuable customers Inflexible Destination Very flexible Destination Inflexible Schedule Very flexible Schedule                        Date Shufflers Date Explorers Destination Seekers Know-it-alls

Retail case study: Let’s go shopping!

Retail Industry Case Study All shoppers are different… in predictable ways The Insight… 1-on-1 interviews and other research revealed patterns in their perceptions, behavior, objectives and tasks The Research and Analysis… How to cater to the various types of shoppers: those who love shopping, those who hate it, those who are good at it, and those who are terrible at it The Problem…

How to cater to the various types of shoppers: those who love shopping, those who hate it, those who are good at it, and those who are terrible at it

Experienced “ I love your hand soap, and I’ve just run out…” Likely to be a repeat customer who has been to the site before Wants to be able to get right to her product Wants the site to remember who they are Functional “ I’m looking for a gift basket of bath products…” Has a need but isn’t sure what will meet it Appreciates consultative selling Responds well to “solution set” cross-selling/upselling Surgical “ I want a new blusher…” Knows what they want, but unsure if you sell it online Wants to find the solution easily and quickly Appreciates product comparisons Recreational “ I work hard— I deserve a treat!” Not looking for anything specific Receptive to new ideas, expert advice, trend content Enthusiastic user of compelling “viral” features There are 4 Different, but Predictable Shopping Modes

Experienced

“ I love your hand soap, and I’ve just run out…”

Likely to be a repeat customer who has been to the site before

Wants to be able to get right to her product

Wants the site to remember who they are

Functional

“ I’m looking for a gift basket of bath products…”

Has a need but isn’t sure what will meet it

Appreciates consultative selling

Responds well to “solution set” cross-selling/upselling

Surgical

“ I want a new blusher…”

Knows what they want, but unsure if you sell it online

Wants to find the solution easily and quickly

Appreciates product comparisons

Recreational

“ I work hard— I deserve a treat!”

Not looking for anything specific

Receptive to new ideas, expert advice, trend content

Enthusiastic user of compelling “viral” features

There are also Different Levels of Skill “ I do like trying on clothes and experimenting with different styles. I suppose I like trying to create a look that people who know me will see me reflected in the clothes.” (Susan, Rochester) “ I’m not good at mixing and matching, I just don’t know how to do that… I need help with it.” (Colleen, Chicago) Others feel at a loss when it comes to making an outfit that looks good on them and inspires confidence Bad Some people have developed their own personal sense of style and dress confidently Good

And also a Love/Hate Preference for Shopping “ I almost never buy an outfit already pulled together. I love to shop and usually make many trips to put an outfit together. I like trying to find pieces from a variety of source and especially like to find a good bargain!” “ I have always hated shopping. Even when I was financially secure, I hated spending a lot of money on clothes…I would shop out of desperation with no idea what I was looking for…” Others would rather have all their teeth pulled than go shopping. Hate Some people love to shop – they go frequently, trolling for ideas and bargains. Love

Retail Personas = Mode + Skill + Preference Hate Shopping Outfit Confident Love Shopping Eclectic Most confident – doesn’t mean they are objectively fashionable, but have own sense of style More fluid wardrobe, shop for bits consistently, shop for fun Pride of the hunt Hapless Needs help learning how to put outfits together for different occasions Needs help with fit Needs ways to get the right thing, quickly Shopping can become more enjoyable when the results are better Outfit Challenged Systematic Creates mix and match wardrobe to make shopping and dressing easier Shops at fewer stores, based on where they have been successful Needs help getting out of a rut Needs to make shopping fun Hopeful Needs help learning how to put outfits together for different occasions Needs help with fit or problem areas Shopping is enjoyable, especially when hunting for “bargains” – good value

Eclectic

Most confident – doesn’t mean they are objectively fashionable, but have own sense of style

More fluid wardrobe, shop for bits consistently, shop for fun

Pride of the hunt

Hapless

Needs help learning how to put outfits together for different occasions

Needs help with fit

Needs ways to get the right thing, quickly

Shopping can become more enjoyable when the results are better

Systematic

Creates mix and match wardrobe to make shopping and dressing easier

Shops at fewer stores, based on where they have been successful

Needs help getting out of a rut

Needs to make shopping fun

Hopeful

Needs help learning how to put outfits together for different occasions

Needs help with fit or problem areas

Shopping is enjoyable, especially when hunting for “bargains” – good value

Identify How to Best Serve Your Users Research Tactics Prioritize Your Audience Segments Understanding User Behavior Online What They Expect Where They Look Why They Scroll How They Read How They Navigate How They Find Information Agenda

Identify How to Best Serve Your Users

Research Tactics

Prioritize Your Audience Segments

Understanding User Behavior Online

What They Expect

Where They Look

Why They Scroll

How They Read

How They Navigate

How They Find Information

What They Expect Homepages generally offer the greatest degree of flexibility for layout and content promotion Depending on the nature of the site and the target audience, users have certain expectations and tolerance for how information is organized

Homepages generally offer the greatest degree of flexibility for layout and content promotion

Depending on the nature of the site and the target audience, users have certain expectations and tolerance for how information is organized

What They Expect Lower level pages typically employ limited and more consistent content layout templates Web pages should be designed to best present information according to the purpose of the site / content, yet… A large percentage of sites employ a 2 or 3 column layout, where: Primary site navigation is located on the left, top or both Content is placed in the center Secondary or contextually relevant links or content are positioned in the far right column Users have been trained to expect these types of content relationships

Lower level pages typically employ limited and more consistent content layout templates

Web pages should be designed to best present information according to the purpose of the site / content, yet…

A large percentage of sites employ a 2 or 3 column layout, where:

Primary site navigation is located on the left, top or both

Content is placed in the center

Secondary or contextually relevant links or content are positioned in the far right column

Users have been trained to expect these types of content relationships

Where They Look Source - Eyetrack III research On an eye tracking study performed on online news sites, researchers noticed a common pattern amongst participants' eye movements across several news homepage designs * This pattern is not true of all sites/designs. Different sites will yield different patterns. A: How effective is my page layout? Are users looking where I want them to look? Q:

On an eye tracking study performed on online news sites, researchers noticed a common pattern amongst participants' eye movements across several news homepage designs

* This pattern is not true of all sites/designs. Different sites will yield different patterns.

How effective is my page layout? Are users looking where I want them to look?

Where They Look Habit and design dictate where users go Good information architecture and strong visual design are key to leading the user’s eye around the page Content positioning and relationships Relative weight / volume / size Use of color, typography, imagery and iconography Sparing use of animation / movement

Habit and design dictate where users go

Good information architecture and strong visual design are key to leading the user’s eye around the page

Content positioning and relationships

Relative weight / volume / size

Use of color, typography, imagery and iconography

Sparing use of animation / movement

Why They Scroll Defining “ the fold ” The "fold" is an analogous reference to a newspaper folded at its mid-point. On a computer screen, the fold is the point where content is no longer visible without scrolling Most websites, including pmusa.com, are built to be viewed at a minimum display resolution of 800x600 – long held the standard, but is evolving The Fold The Fold The Fold 800 x 600 1280 x 1024 1024 x 768

Defining “ the fold ”

The "fold" is an analogous reference to a newspaper folded at its mid-point. On a computer screen, the fold is the point where content is no longer visible without scrolling

Most websites, including pmusa.com, are built to be viewed at a minimum display resolution of 800x600 – long held the standard, but is evolving

Why They Scroll Computers are capable of displaying a variety of video resolutions (i.e. a physical number of pixels wide x high) About 67% of computers in the US employ a video display resolution greater than 800x600 - this number is increasing daily

Computers are capable of displaying a variety of video resolutions (i.e. a physical number of pixels wide x high)

About 67% of computers in the US employ a video display resolution greater than 800x600 - this number is increasing daily

Why They Scroll With the adoption of larger display resolutions, the need to scroll diminishes Users are willing to scroll when they… Don’t see what they’re looking for on the page, but assume it’s there Are compelled by the content and it’s obvious there’s more below “the fold” They may not scroll if… The page layout visually suggests, “there’s nothing else below this point (fold)” Microsoft Commerce Server Product Overview

With the adoption of larger display resolutions, the need to scroll diminishes

Users are willing to scroll when they…

Don’t see what they’re looking for on the page, but assume it’s there

Are compelled by the content and it’s obvious there’s more below “the fold”

They may not scroll if…

The page layout visually suggests, “there’s nothing else below this point (fold)”

How they read Web usage is typically motivated by the desire to save time Users are only interested in a fraction of what’s on the page and know they don’t need to read everything Scanning is a behavior common to everyday interaction with newspapers, magazines, and books *Source: Don’t Make Me Think , Alertbox column Users don’t read pages, they scan them

Web usage is typically motivated by the desire to save time

Users are only interested in a fraction of what’s on the page and know they don’t need to read everything

Scanning is a behavior common to everyday interaction with newspapers, magazines, and books

Users don’t read pages, they scan them

How they read To help users scan, web pages should employ: *Source: Don’t Make Me Think , Alertbox column Use significantly less words than in conventional writing Half the word count Users will skip over additional ideas if they are not caught by the first few words in the paragraph One idea per paragraph Start with the conclusion Inverted pyramid style Lists break content into small, easily digestible points Bulleted lists “ Clever" subtitles don't necessarily help users find information quickly Meaningful sub-headings Hypertext links, typeface variations, and color serve as highlighting Highlighted keywords

To help users scan, web pages should employ:

How They Read Text size influences how people relate to information People tend to skim larger text And read smaller text People are less likely to read a descriptor blurbs when: There is a large size difference between headline and blurb Headline is underlined (visual separation ) *Source: Eyetrack III

Text size influences how people relate to information

People tend to skim larger text

And read smaller text

People are less likely to read a descriptor blurbs when:

There is a large size difference between headline and blurb

Headline is underlined (visual separation )

How They Navigate Users tend to prefer fewer clicks: a broader, shallower site architecture is a good starting point. More choices means… Better exposure to breadth of site or section Better chance of recognizing desired keyword Less chance of choosing the wrong one The myth of “7 +/- 2” - Recognition vs. recall Fewer levels means… Less complex navigation system Faster site (user perception) Faster navigation back up the hierarchy “ The 3-click rule” serves as a good guideline but isn’t mandatory *Source: Usability News

Users tend to prefer fewer clicks: a broader, shallower site architecture is a good starting point.

More choices means…

Better exposure to breadth of site or section

Better chance of recognizing desired keyword

Less chance of choosing the wrong one

The myth of “7 +/- 2” - Recognition vs. recall

Fewer levels means…

Less complex navigation system

Faster site (user perception)

Faster navigation back up the hierarchy

“ The 3-click rule” serves as a good guideline but isn’t mandatory

How They Navigate People frequently rely on the Back button People expect links to take them somewhere, and buttons to perform an action Learn More >

People frequently rely on the Back button

People expect links to take them somewhere, and buttons to perform an action

Learn More >

How They Navigate Search vs. Browse? Which method a user employs is influenced by the following: How well the site is designed Good information and visual design provides cues and “information scents” that guide users to the content they’re interested in How big or complex the site appears Sites with many content categories or appear very deep may overwhelm user’s ability to “know” or evaluate where information might reside

How well the site is designed

Good information and visual design provides cues and “information scents” that guide users to the content they’re interested in

How big or complex the site appears

Sites with many content categories or appear very deep may overwhelm user’s ability to “know” or evaluate where information might reside

How They Navigate Certain information tends to be more searchable Information which is discrete, known, or with standardized attributes Books: title, author, etc. CDs: album title, song, artist Certain tasks tend to encourage searching Seeking specific item or piece of information Looking for any answer (fast) vs. the best answer (thorough)

Certain information tends to be more searchable

Information which is discrete, known, or with standardized attributes

Books: title, author, etc.

CDs: album title, song, artist

Certain tasks tend to encourage searching

Seeking specific item or piece of information

Looking for any answer (fast) vs. the best answer (thorough)

How They Find Information Users don’t figure out how things work, they muddle through *Source: Don’t Make Me Think Most users don’t care about the nuances or intricacies of a system, product, or application as long as it’s usable When users find something that works, they stick to it even if it’s inefficient Users tend not to look for a better way, but will adopt one if they stumble across it

Users don’t figure out how things work, they muddle through

Most users don’t care about the nuances or intricacies of a system, product, or application as long as it’s usable

When users find something that works, they stick to it even if it’s inefficient

Users tend not to look for a better way, but will adopt one if they stumble across it

How They Find Information Why? Time is scarce – it takes more time to consider all the options than to guess intelligently There’s usually not much of a penalty for guessing wrong – the Back button is always close by *Source: Don’t Make Me Think Users don’t make optimal choices, they choose the first reasonable option

Why?

Time is scarce – it takes more time to consider all the options than to guess intelligently

There’s usually not much of a penalty for guessing wrong – the Back button is always close by

Users don’t make optimal choices, they choose the first reasonable option

Figure out who your customers are Figure out how they want to use your website Don’t assume they WANT to be on your website Make the website easy for them to use!

Figure out who your customers are

Figure out how they want to use your website

Don’t assume they WANT to be on your website

Make the website easy for them to use!