Designing With Usability In Mind

Cenergy Interactive: Designing with Usability in Mind

What is usability?

Usability is the measure of the quality of a user’s experience when interacting with a product.

The 5 E’s Usability Effective Easy to Learn Error Tolerant Engaging Efficient [1] “Using the 5 E’s to Understand Users” Whitney Quesenbery  2002-2004

how the heck do we do all that?

Define Objectives

what are the goals of the site?

will we be able to measure effectiveness?

what do we want the users to do?

Know the User

Know thy user!

“ Designers who spend more time thinking about the users are the ones that end up with more usable designs.”

someone smart? (I forgot)

Who is your primary audience?

Audiences have different needs

A design for all

Gathering Data: Field Research

Conduct 1 on 1 interviews with users in target group

User environment can yield important clues

Use a consistent interview team

Don’t ask straight out….analyze!

Use research that’s available

Personas

Model of a typical user, a “common case”

Based on observed behavior patterns and objectives

Represent the needs of many

Why Personas?

Determine what a site should do and how it should behave

Communicate with stakeholders, other MKT companies, clients

Measure a design’s effectiveness

Get people committed to a design

Developing a Persona

Identify variables for the common case

- map interviewees to variables

Identify characteristics and goals

Develop narrative

Map against variables Tech savvy Tech Unskilled High Brand Consciousness Low Brand Consciousness Info Only Entertainment User 1,3,4 User 2 User 1, 2, 3 User 4 User 1, 2 User 4 User 3

What’s next?

Defining a structure/navigation based on that user.

Why is navigation important?

Navigation is a tool for the user

- Find information quickly

- Move between tasks easily

- Increased confidence = better experience

Navigation is a tool for the brand

- Drive users to important tasks

Step 1: Identify your audience

Use your personas!

Who is your primary audience?

Are there secondary audiences?

Step 2: Gather Resources and Tasks

Define tasks for your primary audience

- Your goals research is key!

Collect supporting resources

- e.g. job postings, logo downloads, etc

Step 3: Choose a Grouping Strategy

Consider the following items. How would you group these?

Grouping Strategies

Did you pick size? Shape? How about color?

How do you know which one to use?

- Everyone does it differently!

- Your primary audience decides

Best Practices

Keep it SIMPLE!

Design for Scent by using trigger words

Use Seducible Moments to drive user action

Plan for growth

Navigational Hazards

Ignore the three-click rule

Search-dominance?

Watch for off-site links

What’s next?

Creative Design

A Designer’s Guidelines

Know thy user! “Designers who spend more time thinking about the users are the ones that end up with more usable designs.” - Jared Spool

Design with scent

Persuade the user

Follow these usability best practices…

Visual Design

A professional looking design: - lends credibility, builds trust - can appropriately serve the user - will match current branding initiatives

Content

“ Ultimately, users visit your website for its content. Everything else is just the backdrop" (Nielsen)

Not providing the content the user is seeking = ultimate failure

Content tips

Write for reader, not the client

Trigger words

Cute and clever…but clear?

Provide substance/positioning

Make it memorable

Content

“Seducible Moments” - after completing a task

Write for “scan-ability”…less is more

use shorter paragraphs

bulleted lists

highlight key words

Content

function 1st.. form 2nd..

Include page titles/breadcrumbs

1:1 marketing

Interactivity/Functionality

Take advantage of the medium

- break away from a static page!

Engage your users

Page Layout

Visual Hierarchy

Avoid Clutter!

Visual Design: Be Consistent

User feels at ease

Find things quicker and confidently

Placement & function of nav and elements

- fonts (type, size, style)

Visual Design: Consistency

Inconsistency creates more “work”

Frustration: gets lost or leaves

“ Unprofessional feel”: seen as lower quality brand

“ Patchwork Quilt”: am I on the same site?

Visual Design: Imagery

Represent your brand accurately

Be unique to your brand

Common Mistakes: - Imagery that appears “posed”

Common mistakes: - Imagery that appears “posed” - Imagery that’s cliché in the specific brand - Dated imagery (hair/fashion/bldgs) - Use of stock imagery

Performance

QA all platforms and browsers

Usability test

Usability Testing

The 5 E’s Usability Effective Easy to Learn Error Tolerant Engaging Efficient [1] “Using the 5 E’s to Understand Users” Whitney Quesenbery  2002-2004

Why test?