Top 10 Usability Guidelines for Blogging

Brian Sullivan.

@BrianKSullivan @bigdesign

Hi, my name is

#UXblog

My Friends and I run the Big Design Conference.

Nathan Shedroff

Todd Zaki Warfell

Chris Fowler

Brandon Oldenburg

Bill Scott (VP, PayPal | Author, Design Web Patterns)

Eric Reiss (CEO, FatDUX | Author, Usable Usability)

Stephen Anderson (Author, Seductive Interactions)

Sharon Rush (Executive Director, Knowbility)

Dan Willis (UX Director, Marriott International)

Jeremy Johnson (UX Director, Travelocity)

Eric Swayne (Dir. of Customer Insights, Golin Harris)

And lots more….

Other Notable Speakers

Step Up to the Mike

Do you have what it takes to be the next….

Big Design Idol!

Submissions open up on April 1st.

What is Usability?

Classic Definitions of Usability

Usability assesses how easy your site,

app, or blog is to learn and use by your

customers. (Jakob Nielsen)

The usability of a website is based upon

whether people can find the information

they need. (Jared Spool)

Usability is based on whether you are

meeting your business and user goals

with your product. (Brian Sullivan)

Five Planes of User Experience

The Strategy provides an overview of what you

want to get out of your blog and what do your

customers want to get out of it. From a business

view, the strategy plane is interested in Return on

Investment (ROI) for a product.

• User Needs: externally derived goals for your

blog, which are identified through web analytics,

interviews, and testing.

• Site Objectives: business, creative, or other

internally derived goals for the site.

Goals:

Earn money from patron

Impress other artists

Users:

Patron: impress peers

Other artists: to make

Michelangelo jealous

Other viewers: enjoy

the artwork

Usage Contexts:

Private Gallery

Public Gallery

Strategy

The Strategy Plane

The Scope plane transforms your strategy into

requirements. What features does your blog need

to meet your customer requirements?

• Functional Needs: defines the “features” you

need for your site, such as a shopping cart, sign

up form, or download features.

• Content Requirements: defines your content

elements required to meet customer needs, such

as large bandwidth for video blogs.

Render a portrait of a

woman:

Shall be facing the

viewer

Shall be attractive

Shall have dark hair

Shall be in an

interesting outdoor

setting

Show an intriguing

smile

Show a little cleavage

Scope

The Scope Plane

Your blog has some overall Structure. The

Structure plane gives shape to how the overall

pieces fit together, behave, and interact.

• Interaction Design: development of application

flows to facilitate user tasks and defining how

the user interacts with site functionality

• Information Architecture: structural design of

the information space to facilitate intuitive

access to content

Structure

The Structure Plane

The Skeleton plane lies just below the surface.

The Skeleton helps people to easily understand,

learn, and use something.

• Interface Design: how the design of interface

elements facilitates user interaction with

functionality

• Information Design: how the presentation of

information facilitates understanding

• Navigation Design: how the design of GUI

elements helps the user's navigate through the

information architecture

Skeleton

The Skeleton Plane

Surface

As its name suggests, the Surface plane describes

the basic finished project. We could use visual

design techniques to describe the Mona Lisa.

From UCD perspective, we are primarily

concerned with Visual Design, such as the

graphic treatment of GUI elements (the "look" in

"look-and-feel"), the visual treatment of text,

graphic page elements and navigational

components.

The Surface Plane

Good Blogs Require Thinking

We’ll re-visit each of the planes in the next hour.

Nielsen’s 10 Heuristic Guidelines

Nielsen’s 10 Heuristic Principles

Slide 22

1. Feedback: Visibility of System Status

2. Metaphor: Match Between System and Real World

3. Navigation: User Control and Freedom

4. Consistency: Consistency and Standards

5. Prevention: Error Prevention

6. Memory: Recognition Rather than Recall

7. Effort: Flexibility and Efficiency of Use

8. Design: Aesthetic and Minimalistic Design

9. Recovery: Recognize, Diagnose & Recover from Errors

10.Help: Help and Documentation

23

1. Feedback Principle

24

2. Metaphor Principle

25

2. Metaphor Principle

26

3. Navigation Principle

27

3. Navigation Principle

28

4. Consistency Principle

29

4. Consistency Principle

30

5. Prevention Principle

31

5. Prevention Principle

Wikipedia Auto-focus

Google auto-recommend

32

6. Memory Principle

33

6. Memory Principle

Can someone tell me why this

would aid your memory?

What’s on the head’s side of a penny?

How many ways can you identify these pennies?

Recall Recognition

“Recognition is

easier than recall.”

39

7. Efficiency Principle

40

7. Efficiency Principle

“Buy Now with 1-Click” is very efficient

and scary on Black Friday, Cyber Monday,

and any day of the week.

41

8. Design Principle

42

8. Design Principle

43

9. Recovery Principle

44

9. Recovery Principle

45

10. Help Principle

46

10. Help Principle

Embedded Video

Tool Tips

Nielsen’s 10 Heuristic Principles

Slide 47

1. Feedback: Visibility of System Status

2. Metaphor: Match Between System and Real World

3. Navigation: User Control and Freedom

4. Consistency: Consistency and Standards

5. Prevention: Error Prevention

6. Memory: Recognition Rather than Recall

7. Effort: Flexibility and Efficiency of Use

8. Design: Aesthetic and Minimalistic Design

9. Recovery: Recognize, Diagnose & Recover from Errors

10.Help: Help and Documentation