Prioritizing Web Usability
Nielsen & Loranger : Chapter 3
Revisiting Early Web
Usability Findings
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 432
Design and Implementation of
Software for the Web
Nielsen’s Top Ten Lists
Nielsen got famous by his “top ten lists” of
web usability problems
This chapter describes the list in detail
1 July 2016
© Offutt
2
Eight Problems That Haven’t
Changed Since 1994 (2006)
1.
2.
3.
4.
5.
6.
7.
8.
Links that don’t change color when visited
Breaking the back button
Opening new browser windows
Pop-up windows
Design elements that look like advertising
Violating web-wide conventions
Vaporous content and empty hype
Dense content and unscannable text
These have been problems for years, and still are
1 July 2016
© Offutt
3
2011 Top Ten List
1. Bad Search
2. PDF Files for Online Reading
Also problems in 2006
3. Not Changing the Color of Visited Links
4. Non-Scannable Text
5. Fixed Font Size
6. Page Titles With Low Search Engine Visibility
7. Anything That Looks Like an Advertisement
8. Violating Design Conventions
9. Opening New Browser Windows
10. Not Answering Users' Questions
1 July 2016
© Offutt
4
1. Bad Search
Search engines need to be flexible
Typos, plurals, hyphens, …
Humans are not perfect!
Results must be prioritized
1 July 2016
© Offutt
5
2. PDF Files for Online Reading
PDF is for printing
Not for reading online
1 July 2016
© Offutt
6
3. Not Changing the Color of
Visited Links
Users need to know where
they’ve been
Navigation is the biggest problem in
website design
1 July 2016
© Offutt
7
A Note on the Exception
The knowledge in this chapter applies best to
static websites
The book offers less information about UIs of
web applications
1 July 2016
© Offutt
8
4. Non-Scannable Text
TL;DR
You have less than two minutes to convince first
time visitors to stay on your web site
1 July 2016
© Offutt
9
5. Fixed Font Size
Let users decide
People have a harder time reading
small text as we age
Specify text in relative terms
1 July 2016
© Offutt
10
6. Page Titles With Low Search
Engine Visibility
index
Home page
https://www. ….
Welcome to my home page
New version of home
Paul Ammann
1 July 2016
© Offutt
11
7. Anything That Looks Like an
Advertisement
Users automatically ignore anything that looks
like an ad
Disguising content as an advertisement is a good
way to be ignored
1 July 2016
© Offutt
12
8. Violating Design Conventions
Don’t hide links with
non-standard colors or
lack of underlining
Creative navigation is risky
1 July 2016
© Offutt
13
9. Opening New Browser Windows
New windows break back buttons
• Violates user’s expectations
• Pollutes user’s work space
• Users can’t go back
• Obscures current window
Let users decide !
1 July 2016
© Offutt
14
10.
Not Answering Users'
Questions
Price
How to return
Contact information (phone!)
Delivery time
1 July 2016
© Offutt
15
Summary
Usability on the Web has gotten a lot better
But is still far from good …
1 July 2016
© Offutt
16
1 July 2016
© Offutt
17
The 2006 list is in the
following slides
1 July 2016
© Offutt
18
1: Links That Don’t Change Color
When Visited
• Users need to know where
1. they have been
2. they are
3. they can go
• Users go in circles if they lose the past !
• 74% of sites comply with guideline
– 26% still do not !
• Exception : Command-oriented functionality
– If users want to repeat actions, links can stay the same color
Navigation is the biggest problem in website design
1 July 2016
© Offutt
19
A Note on the Exception
The knowledge in this chapter applies best to
static websites
The book offers less information about UIs of
web applications
1 July 2016
© Offutt
20
2: Breaking The Back Button
• “Undo” support is a basic usability requirement
• Repeated back is faster than finding and clicking a link
– Second most used feature in web browsing
• Benefits :
– Back is always available
– Recognition is better than recall
– The back button is a large (and fast) target
• Ways to break the back button
– Removing it with JS
– Opening a new browser window
– Redirects embedded in web pages
Back is often disabled to make up for poor back-end
software design
1 July 2016
© Offutt
21
3: Opening New Browser Windows
• Opening a new window breaks the back button
– But does not keep users on your site
• Usability problems
–
–
–
–
–
Disrupts expected user experience
Pollutes user’s work space
Hampers ability to return to visited pages
Obscures window user is working in
Can make user believe links are inactive
• Users can always right click for a new window
• Exception
– PDF and similar documents
Let users decide !
1 July 2016
© Offutt
22
4: Pop-Up Windows
•
•
•
•
•
Pop-up blockers exist because users hate pop-ups
Many users close pop-ups before seeing the content
Closing a pop-up always requires the mouse
Most pop-ups contain information users do not want
Theoretical legitimate use for pop-ups
– Provide supplementary info while keeping workspace clear
– They should be non-modal … that is, users can keep working in
main window and ignore the pop-up
Why make users angry ?
1 July 2016
© Offutt
23
5: Design Elements That Look Like
Advertisements
• Users automatically ignore anything that looks like an ad
–
–
–
–
Basic self-defense—learned from watching TV
Includes anything shaped like a banner
Anything flashing
Anything that is too big
• Users usually look for text, not pictures
– Because that’s where most links are!
• Some users have advertisement blockers, which also
block images that are not advertisements
Disguising content as an advertisement is a good
way to be ignored
1 July 2016
© Offutt
24
6: Violating Web-Wide
Conventions
• Users spend most time on other web sites, so their
expectations for your site is set by other sites
– Do not try to influence global expectations unless you are a
global company
• Example: Zinc Bistro
– Only eggs are clickable, not “Lunch,” “Dinner,” or “Navigate”
• Things that look clickable should be clickable
• Do not hide links in weird places !
On the web, function trumps form
Be good, not cool
1 July 2016
© Offutt
25
7: Vaporous Content and Empty
Hype
• Basic marketing
– Sell the benefits, not the features
• Search engine optimization
– Concrete text leads to better rankings
• Example: Mont Blanc
– Cool videos, but what can I do ?
– Designed by artists with no input from engineers and no
understanding of users
Tell users what they want to know !
1 July 2016
© Offutt
26
8: Dense Content and
Unscannable Text
• Unpacking dense text is hard work
– Users are lazy … or at least busy
• Government sites are prime offenders
– Example: Social Security Answer Desk
– The current version is a little better than in the book, but still
written for college graduates … 27% in the US
• Web text should be short, scannable, and approachable
– Write half as many words for web as for print (or a quarter)
You have less than two minutes to convince first
time visitors to stay on your web site
1 July 2016
© Offutt
27
Technological Change :
Its Impact on Usability
Seven of the original problems are less important
because of changes in technology (but still problems)
1. Slow download time
2. Frames
3. Flash
4. Low-relevancy search listings
5. Multimedia and long videos
6. Frozen layouts
7. Cross platform incompatibility
Better browsers, more bandwidth, other technologies
1 July 2016
© Offutt
28
Adaptation : How Users Have
Influenced Usability
Six of the original problems are less important because of
changes in user behavior (but still problems)
1.
2.
3.
4.
Uncertain clickability—where to click?
Links that are not blue—as long as they are obviously links
Scrolling—users scroll more than in the past
Registration—users have accepted registration as being
valuable
5. Complex URLs—users search more than they type
6. Pull-down and cascading menus—JS is much better and users
have gotten used to them
Users have conformed to bad designs … is that good?
1 July 2016
© Offutt
29
Restraint : How Designers Have
Alleviated Usability Problems
Thankfully, designers seldom make these mistakes
anymore
1.
2.
3.
4.
5.
6.
7.
Plug-ins and bleeding edge
technologies
3D user interfaces
Bloated design
Splash pages
Moving graphics & scrolling
Custom GUI widgets
Not disclosing who’s behind
information
8.
9.
10.
11.
Made-up words
Outdated content
Inconsistency within web sites
Premature requests for
personal information
12. Multiple sites
13. Orphan pages
Still potential problems with ignorant designers
1 July 2016
© Offutt
30