1. Design and Implementation of Software for the Web
Prioritizing Web Usability Nielsen & Loranger : Chapter 3 Revisiting Early Web Usability Findings
Jeff Offutt
SWE 432
Design and Implementation of Software for the Web
This lecture is drawn from 632, Intro/Admin, Ch 1/Overview and Ch2/Theory.

2. Nielsen’s Top Ten Lists
Nielsen got famous by his “top ten lists” of web usability problems
This chapter describes the list in detail
19 September 2018
© Offutt

3. Eight Problems That Haven’t Changed Since 1994 (2006)
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
19 September 2018
© Offutt

4. 2011 Top Ten List Bad Search PDF Files for Online Reading
Not Changing the Color of Visited Links
Non-Scannable Text
Fixed Font Size
Page Titles With Low Search Engine Visibility
Anything That Looks Like an Advertisement
Violating Design Conventions
Opening New Browser Windows
Not Answering Users' Questions
Also problems in 2006
19 September 2018
© Offutt

5. 1. Bad Search Search engines need to be flexible
Typos, plurals, hyphens, …
Humans are not perfect!
Results must be prioritized
19 September 2018
© Offutt

6. 2. PDF Files for Online Reading
PDF is for printing
Not for reading online
19 September 2018
© Offutt

7. 3. Not Changing the Color of Visited Links
Users need to know where they’ve been
Navigation is the biggest problem in website design
19 September 2018
© Offutt

8. The knowledge in this chapter applies best to static websites
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
19 September 2018
© Offutt

9. 4. Non-Scannable Text TL;DR
You have less than two minutes to convince first time visitors to stay on your web site
19 September 2018
© Offutt

10. 5. Fixed Font Size Let users decide
People have a harder time reading small text as we age
Specify text in relative terms
19 September 2018
© Offutt

11. 6. Page Titles With Low Search Engine Visibility
index
Some of my colleagues
Home page ….
Welcome to my home page
New version of home
Paul Ammann
19 September 2018
© Offutt

12. 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
19 September 2018
© Offutt

13. 8. Violating Design Conventions
Don’t hide links with non-standard colors or lack of underlining
Creative navigation is risky
19 September 2018
© Offutt

14. 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 !
19 September 2018
© Offutt

15. 10. Not Answering Users' Questions
Price
How to return
Contact information (phone!)
Delivery time
19 September 2018
© Offutt

16. Usability on the Web has gotten a lot better
Summary
Usability on the Web has gotten a lot better
But is still far from good …
19 September 2018
© Offutt

17. 19 September 2018
© Offutt

18. The 2006 list is in the following slides
19 September 2018
© Offutt

19. 1: Links That Don’t Change Color When Visited
Users need to know where
they have been
they are
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
19 September 2018
© Offutt

20. The knowledge in this chapter applies best to static websites
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
19 September 2018
© Offutt

21. 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
19 September 2018
© Offutt

22. 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 !
19 September 2018
© Offutt

23. 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 ?
19 September 2018
© Offutt

24. 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
19 September 2018
© Offutt

25. 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
19 September 2018
© Offutt

26. 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 !
19 September 2018
© Offutt

27. 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
19 September 2018
© Offutt

28. Technological Change : Its Impact on Usability
Seven of the original problems are less important because of changes in technology (but still problems)
Slow download time
Frames
Flash
Low-relevancy search listings
Multimedia and long videos
Frozen layouts
Cross platform incompatibility
Better browsers, more bandwidth, other technologies
19 September 2018
© Offutt

29. Adaptation : How Users Have Influenced Usability
Six of the original problems are less important because of changes in user behavior (but still problems)
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
Complex URLs—users search more than they type
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?
19 September 2018
© Offutt

30. Restraint : How Designers Have Alleviated Usability Problems
Thankfully, designers seldom make these mistakes anymore
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
Made-up words
Outdated content
Inconsistency within web sites
Premature requests for personal information
Multiple sites
Orphan pages
Still potential problems with ignorant designers
19 September 2018
© Offutt