Usability for the WebMaking Your Sites More Awesomer

by Jen Riehle

1

What is usability?

Usability is the absence of frustration.The user can use the product to do what they want, the way they want, without hinderance, hesitation or questions.

2

What is usability?

2

Elements of Usability

Usefulness

Effectiveness

Learnability (...and Memorability)

Satisfaction

3

“Intuitive” is a word used for usable site- synonymous with “learnable”

What usability isn’t

AccessibilityAccessibility is having access to the things one needs to complete tasks.

Accessibility helps facilitate usability.

4

NOT talking about “accessibility” as in 508 compliance.

What usability isn’t webpagesthatsuck.com; 2009

http://www.belladesoto.us/

http://www.georgehutchins.com/

http://www.historianofthefuture.com/

5

Usability Testing: Early Development

Parallel Design with rapid prototyping

Task Analysis

Activity Analysis

Tree-testing and card-sorting

6

First two done by designer; last two done with test participants

Usability Testing: Mid-Development

Focus Groups or subjects-in-tandem

Questionnaires/ Surveys

Advanced Usability Testing

7

May record their faces, the screen, mouse movement, eye movement, etc. to collect data

Monitor the user while they do tasks. Preferably done remotely, in the participants natural habitat.

Usability Testing:Late Development

Cognitive walkthrough

Benchmarking

Questionnaires/ Surveys

8

Cognitive walkthrough - verbalization of interaction with the site- preferably done with users new to the site/ product.Benchmarking - measure: 1. time to do tasks 2. time to fix errors 3. time to learn 4. general site functionality; can be used to compare to other sites

More Testing TipsTest your users

Test the right pages, not the easy pages

Get the most accurate results possible

Don’t take too long

Don’t judge the user

You don’t have to test 100’s of people!

9

Users. Not the client. Designers do not give the test.Based on location and collect as much data as possibleIf the product doesn’t work it’s your fault, not theirs. 5 test participants will find 80% of your problems; from there adding people might reinforce your data but probably won’t find a whole lot of new issues

All this takes time and, if done properly it takes money

Benefits

Reduced long-term development costs

Reduced support costs

Increased user efficiency

Increased user satisfaction

10

Let’s give it a shot...

Let’s try a five-second usability test, shall we?See what you can remember about this website after 5 seconds.

11

12

Five Second Test

What did you see?

General impressions?

http://fivesecondtest.com/

13

Is it pretty?

Why is pretty > usable?

If design were ruled by aesthetics the world would be prettier but less comfortable; if ruled by usability it would be simple but boring.

Perception that prettier things are easier to use and better quality

Simple design does not mean simple to use

14

Why is pretty > usable?

“pretty” wins awards

Designers like “pretty”

Clients like “pretty”

“pretty” makes us happy and we want to come back

15

Designers spend a lot of time looking at their website and they want it to be pretty. That time with the site can allow otherwise obvious usability issues to be easily over-looked

Clients like pretty but they’re not always the target audience and often suffer from the same usability blindness the designers have

Remember, one element of usability is satisfaction. A user won’t use your site if they don’t like it.

What do the studies say?

Fitt’s Law: model of human movement- don’t make ‘em move too far to get to those links

Inverted Pyramid: Put the conclusion at the beginning of the content- let people know what you’re writing about

16

We’re lazy!

What do the studies say?

3-Click Rule: new sites get three clicks to find content

2-Second Rule: response time expected of a click

7+/-2 Principle

17

Knowledge

Knowledge in the world

Knowledge in the head

18

19

Knowledge in the head is also instinctual.

Knowledge in the head

Natural mapping

Visual connections

Constraints

Affordances

20

Natural Mapping

21

Web examples:- form text- text with related images

Natural Mapping

21

Web examples:- form text- text with related images

Visual Connections

22

Connections we make unconsciously based on the position, color, shape, design of an object or collection of objects

Constraints

Limitations or restrictions we must work with to complete our tasks

23

Can be used intentionally, for example to help someone know how open a door properly (push/pull).Can also be used poorly- a handle on the right side of a coffee mug makes lefties mad

Constraints

23

Can be used intentionally, for example to help someone know how open a door properly (push/pull).Can also be used poorly- a handle on the right side of a coffee mug makes lefties mad

Constraints

Industry-imposed (design standards)

Client-imposed (“I like rainbows”)

University-imposed (campus branding)

And many others...

24

Site-specific constraintsEx.the type of site you’re on makes “Horticulture” mean different things

Browser constraints; Skill constraints

Affordances

Possibilities which are perceivable by a user based on their goals, beliefs, values and past experiences.

25

Possibilities which are readily perceivable by a user based on their goals, plans, values, beliefs and past experience

Affordances

Possibilities which are perceivable by a user based on their goals, beliefs, values and past experiences.

What do you expect out of your webpages?

25

Possibilities which are readily perceivable by a user based on their goals, plans, values, beliefs and past experience

Affordances

Search

Footer

Header links home

Something underlined is a link

Login link in the upper right-hand corner

26

Our expectations of a website based on past experience

We get frustrated when things aren’t there or don’t behave as expected.

The Facts of LifeWe want a search tool

We ignore banners and ads

We don’t read pages, we scan them

We don’t read instructions, we muddle through

We don’t choose best option, we choose the first one

27

We do focus on faces and eyes; flashing images and text actually defer us now

Designing for Error

Minimize the common causes of error

Make it easy to discover errors early

Make it possible to undo errors - easily

404 page... or a 301 redirect

28

Cater to affordances!Open links in a new window is hard to undo

Common Web Application Mistakes

Inconsistent icons, controls, naming conventions, etc.

No perceived affordances

No feedback

No default values

Unhelpful error messages

29

Features without explanation- cool tools like drag and drop options may not be obvious.

Common Info Architecture Mistakes

Search and site structure not integrated

Too many top-level links

Missing category landing pages

Made up Menu Options (mystery-meat)

30

Search results drop you somewhere undefinedPop-up menus may be missing a landing page

Common Mobile Website Mistakes

Not having one

Not designing for the mobile platform

Not testing on multiple devices

Missing the point of the audience

Over-complicating things

31

Common Form Mistakes

Using the wrong input for the task

Not enough room to type

Looooong forms

Convoluted information handling

Non-descriptive or poorly-placed labels

32

Search box should ideally be 27 characters wide - that’s wide.

Make the required fields clear to the user.

Common Web Design Mistakes

No search/ bad search

Not changing the colors of visited links

Non-scannable text

Fixed font size

Violating design affordances

33

Blue is still the best color for links.

Affordances: a title on every page, consistent layout, useful headings

Usability Maxims

Know the user. You are not the user.

34

Usability Maxims

Know the user. You are not the user.

34

Usability Maxims

Things that look the same should act the same.

35

Or say the same thing

Usability Maxims

Things that look the same should act the same.

35

Or say the same thing

Usability Maxims

Make the information available in simple, natural, logical ways.

36

Usability Maxims

Make the information available in simple, natural, logical ways.

36

Usability Maxims

Everyone makes mistakes so every mistake should be fixable. Quickly.

37

Usability Maxims

Everyone makes mistakes so every mistake should be fixable. Quickly.

37

Usability Maxims

The user should always know what’s happening.

38

Usability Maxims

The user should always know what’s happening.

38

Usability Maxims

Keep it simple. Don’t overload the users’ buffers.

39

Usability Maxims

Keep it simple. Don’t overload the users’ buffers.

39

Usability Maxims

Eliminate unnecessary decisions and illuminate the rest.

40

Aim for the shortest distance (pages; clicks) to get to the users goal.

Questions?Thanks!

41