Presentation given to NC State University web designers. Usability overview. This includes presenter notes.

1. Usability for the Web
Making Your Sites More Awesomer
by Jen Riehle
1

2. 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

3. What is usability?
2

4. Elements of Usability
Usefulness
Effectiveness
Learnability (...and Memorability)
Satisfaction
3
“Intuitive” is a word used for usable site- synonymous with “learnable”

5. What usability isn’t
Accessibility
Accessibility is having access to the
things one needs to complete tasks.
Accessibility helps facilitate usability.
4
NOT talking about “accessibility” as in 508 compliance.

6. What usability isn’t
webpagesthatsuck.com; 2009
http://www.belladesoto.us/
http://www.georgehutchins.com/
http://www.historianofthefuture.com/
5

7. 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

8. 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.

9. 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

10. More Testing Tips
Test 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 possible
If 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

11. Benefits
Reduced long-term development costs
Reduced support costs
Increased user efficiency
Increased user satisfaction
10

12. 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

13. 12

14. Five Second Test
What did you see?
General impressions?
http://fivesecondtest.com/
13
Is it pretty?

15. 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

16. 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.

17. 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!

18. 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

19. Knowledge
Knowledge in the world
Knowledge in the head
18

20. 19
Knowledge in the head is also instinctual.

21. Knowledge in the head
Natural mapping
Visual connections
Constraints
Affordances
20

22. Natural Mapping
21
Web examples:
- form text
- text with related images

23. Natural Mapping
21
Web examples:
- form text
- text with related images

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

25. 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

26. 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

27. Constraints
Industry-imposed (design standards)
Client-imposed (“I like rainbows”)
University-imposed (campus branding)
And many others...
24
Site-specific constraints
Ex.the type of site you’re on makes “Horticulture” mean different things
Browser constraints; Skill constraints

28. 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

29. 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

30. 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.

31. The Facts of Life
We 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

32. 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

33. 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.

34. 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 undefined
Pop-up menus may be missing a landing page

35. 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

36. 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.

37. 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

38. Usability Maxims
Know the user. You are not the user.
34

39. Usability Maxims
Know the user. You are not the user.
34

40. Usability Maxims
Things that look the same should act
the same.
35
Or say the same thing

41. Usability Maxims
Things that look the same should act
the same.
35
Or say the same thing

42. Usability Maxims
Make the information available in
simple, natural, logical ways.
36

43. Usability Maxims
Make the information available in
simple, natural, logical ways.
36

44. Usability Maxims
Everyone makes mistakes so every
mistake should be fixable. Quickly.
37

45. Usability Maxims
Everyone makes mistakes so every
mistake should be fixable. Quickly.
37

46. Usability Maxims
The user should always know what’s
happening.
38

47. Usability Maxims
The user should always know what’s
happening.
38

48. Usability Maxims
Keep it simple. Don’t overload the
users’ buffers.
39

49. Usability Maxims
Keep it simple. Don’t overload the
users’ buffers.
39

50. Usability Maxims
Eliminate unnecessary decisions and
illuminate the rest.
40
Aim for the shortest distance (pages; clicks) to get to the users goal.

51. Questions?
Thanks!
41