Krug Chapter 1 Don’t Make Me Think ! And Designing Hyper Text Jeff Offutt https://www.cs.gmu.edu/~offutt/ SWE 205 Software Usability and Design

The World Wide Web is a result of the confluence of three developments Formation of the WWW The World Wide Web is a result of the confluence of three developments Fast Computers World Wide Web Internet Hypertext Theory 7-May-19 © Jeff Offutt

Web Pages Shouldn’t Make Us Think We should immediately understand the purpose Huh? What is this? Jobs-o-Rama Hmmm … Is this a job? Employment Opportunities Jobs! click Jobs 7-May-19 © Jeff Offutt

Clickable buttons should look clickable Can I Click It ? Clickable buttons should look clickable What do I do with this? Results Hmmm … I guess that’s a button? Results click Results 7-May-19 © Jeff Offutt

Hypertext Engineering Design Images & Navigation Use images for navigation, buttons, & page titles Always use ALT tag (508 compliance) Use small images (fewer bytes) Animation is usually annoying The web page is shouting at you and distracting you Navigating within pages Avoid horizontal scrolling Use intra-page links to keep users’ hands on the mouse Put essential content on top 7-May-19 © Jeff Offutt

Hypertext Engineering Design Laying Out Pages Put search boxes on the front page (speed) Do not use frames (SS, errors, speed) Confuse navigation Bookmarks do not work Make printing hard Browsers render them differently Slower Use <DIV> to partition web pages On site maps, “low light” current page 7-May-19 © Jeff Offutt

Hypertext Engineering Design Navigation Anchors Make clickable items obvious Use standard color (blue) and underline Do not use blue and underline for emphasis Highlight clickable items with mouseover Navigation should be on the top or the left Make navigation buttons small A link traversal should be ancillary “Click here” is intrusive–control interferes with content Anchors should fit into the content naturally 7-May-19 © Jeff Offutt

Hypertext Engineering Design Navigation & Links Each browser displays HTML differently KISS – Keep It Simple Stupid The JavaScript DOM has a lot of incompatibilities Do not to get too fancy Browsers behave differently with broken HTML IE tends to be more “forgiving” of mistakes Firefox tends to conform better to standards Chrome seems to be kind of random Must test with multiple browsers !! 7-May-19 © Jeff Offutt

Hypertext Engineering Design Grammar & Spelling Follow basic principles of communication: Simple, direct style Thorough proofreading for confusing grammar and misspellings Avoid colloquialisms, slang, culturalisms If you make mistakes, users will think you are careless or ignorant 7-May-19 © Jeff Offutt

Jacob Nielsen’s Top 10 Mistakes http://www.nngroup.com/articles/top-10-enduring Unexpected locations for content They can’t use it if they can’t find it Competing links and categories Different paths to the same destination confuses uses Islands of information 10 useless pages for one useful page Repetitive links Repetition wastes time Hidden fees and prices Reveal costs up front 7-May-19 © Jeff Offutt

Nielsen’s Top 10 Mistakes (2016) Stranding Users on Microsites How to get back? Poor Search Results Flawed Filters and Facets Must consider what users really want Overwhelming Users with Information What really matters? Hidden Links Users have been trained to ignore advertising 7-May-19 © Jeff Offutt

Web-site Design Tips Make search easy to find (speed) Keep content current (learn, errors) Make archives of previously published content available Minimize the need to scroll (speed, learn) Structure content into hierarchies, but don’t make it too complex (learn) Key functions such as shopping carts and help buttons should be easy to find (speed) Avoid pop-ups that open new windows (errors) 7-May-19 © Jeff Offutt

Most people write HTML pages effective user interfaces and Summary Most people write HTML pages Good engineers design effective user interfaces and implement in HTML 7-May-19 © Jeff Offutt