web usability: making your sites more awesomer
DESCRIPTION
Presentation given to NC State University web designers. Usability overview.This includes presenter notes.TRANSCRIPT
![Page 1: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/1.jpg)
Usability for the WebMaking Your Sites More Awesomer
by Jen Riehle
1
![Page 2: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/2.jpg)
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
![Page 3: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/3.jpg)
What is usability?
2
![Page 4: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/4.jpg)
Elements of Usability
Usefulness
Effectiveness
Learnability (...and Memorability)
Satisfaction
3
“Intuitive” is a word used for usable site- synonymous with “learnable”
![Page 5: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/5.jpg)
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.
![Page 6: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/6.jpg)
What usability isn’t webpagesthatsuck.com; 2009
http://www.belladesoto.us/
http://www.georgehutchins.com/
http://www.historianofthefuture.com/
5
![Page 7: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/7.jpg)
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
![Page 8: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/8.jpg)
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.
![Page 9: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/9.jpg)
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
![Page 10: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/10.jpg)
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
![Page 11: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/11.jpg)
Benefits
Reduced long-term development costs
Reduced support costs
Increased user efficiency
Increased user satisfaction
10
![Page 12: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/12.jpg)
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
![Page 13: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/13.jpg)
12
![Page 14: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/14.jpg)
Five Second Test
What did you see?
General impressions?
http://fivesecondtest.com/
13
Is it pretty?
![Page 15: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/15.jpg)
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
![Page 16: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/16.jpg)
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.
![Page 17: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/17.jpg)
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!
![Page 18: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/18.jpg)
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
![Page 19: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/19.jpg)
Knowledge
Knowledge in the world
Knowledge in the head
18
![Page 20: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/20.jpg)
19
Knowledge in the head is also instinctual.
![Page 21: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/21.jpg)
Knowledge in the head
Natural mapping
Visual connections
Constraints
Affordances
20
![Page 22: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/22.jpg)
Natural Mapping
21
Web examples:- form text- text with related images
![Page 23: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/23.jpg)
Natural Mapping
21
Web examples:- form text- text with related images
![Page 24: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/24.jpg)
Visual Connections
22
Connections we make unconsciously based on the position, color, shape, design of an object or collection of objects
![Page 25: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/25.jpg)
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
![Page 26: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/26.jpg)
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
![Page 27: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/27.jpg)
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
![Page 28: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/28.jpg)
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
![Page 29: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/29.jpg)
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
![Page 30: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/30.jpg)
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.
![Page 31: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/31.jpg)
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
![Page 32: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/32.jpg)
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
![Page 33: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/33.jpg)
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.
![Page 34: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/34.jpg)
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
![Page 35: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/35.jpg)
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
![Page 36: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/36.jpg)
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.
![Page 37: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/37.jpg)
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
![Page 38: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/38.jpg)
Usability Maxims
Know the user. You are not the user.
34
![Page 39: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/39.jpg)
Usability Maxims
Know the user. You are not the user.
34
![Page 40: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/40.jpg)
Usability Maxims
Things that look the same should act the same.
35
Or say the same thing
![Page 41: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/41.jpg)
Usability Maxims
Things that look the same should act the same.
35
Or say the same thing
![Page 42: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/42.jpg)
Usability Maxims
Make the information available in simple, natural, logical ways.
36
![Page 43: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/43.jpg)
Usability Maxims
Make the information available in simple, natural, logical ways.
36
![Page 44: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/44.jpg)
Usability Maxims
Everyone makes mistakes so every mistake should be fixable. Quickly.
37
![Page 45: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/45.jpg)
Usability Maxims
Everyone makes mistakes so every mistake should be fixable. Quickly.
37
![Page 46: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/46.jpg)
Usability Maxims
The user should always know what’s happening.
38
![Page 47: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/47.jpg)
Usability Maxims
The user should always know what’s happening.
38
![Page 48: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/48.jpg)
Usability Maxims
Keep it simple. Don’t overload the users’ buffers.
39
![Page 49: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/49.jpg)
Usability Maxims
Keep it simple. Don’t overload the users’ buffers.
39
![Page 50: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/50.jpg)
Usability Maxims
Eliminate unnecessary decisions and illuminate the rest.
40
Aim for the shortest distance (pages; clicks) to get to the users goal.
![Page 51: Web Usability: Making Your Sites More Awesomer](https://reader038.vdocuments.mx/reader038/viewer/2022110118/55532165b4c905a7778b4d12/html5/thumbnails/51.jpg)
Questions?Thanks!
41