Design and Implementation of Software for the Web 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 This lecture is drawn from 632, Intro/Admin, Ch 1/Overview and Ch2/Theory.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19 September 2018 © Offutt

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

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

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

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

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

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

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

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

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

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

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

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

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