1. Krug Chapter 1 Don’t Make Me Think ! And Designing Hyper Text
Jeff Offutt
SWE 205
Software Usability and Design

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. Jacob Nielsen’s Top 10 Mistakes
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

11. 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

12. 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

13. 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