Krug Chapter 1
Don’t Make Me Think !
And Designing Hyper Text
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 205
Software Usability and Design
What is Hyper Text?
Hypertext provides freedom from linear representations of
text
It makes certain ways of accessing information more
convenient
We often jump around when we read:
•
•
•
•
•
Technical papers
Textbooks
Newspapers
Encyclopedia
Tax forms
Hypertext makes this more convenient
1-Jul-16
© Jeff Offutt, 2010-2013
2
Formation of the WWW
The World Wide Web is a result of
the confluence of three
developments
Interne
t
1-Jul-16
World Wide Web
© Jeff Offutt, 2010-2013
3
Web Pages Shouldn’t Make Us
Think
We should immediately understand the
purpose
Jobs-o-Rama
Huh?
What is this?
Employment Opportunities
Jobs!
click
Jobs
1-Jul-16
Hmmm …
Is this a job?
© Jeff Offutt, 2010-2013
4
Can I Click It ?
Clickable buttons should look clickable
Results
What do I
do with this?
Hmmm …
I guess that’s a
button?
Results
Results
1-Jul-16
© Jeff Offutt, 2010-2013
click
5
Hypertext Engineering Design
Images & Navigation
1-Jul-16
© Jeff Offutt, 2010-2013
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
1-Jul-16
© Jeff Offutt, 2010-2013
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
1-Jul-16
© Jeff Offutt, 2010-2013
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 !!
1-Jul-16
© Jeff Offutt, 2010-2013
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
Remember: If you make mistakes, at best, people
will think you are careless, at worst, they will think
you are stupid
1-Jul-16
© Jeff Offutt, 2010-2013
10
Jakob Nielsen
• A web usability author and consultant
• A fun and useful website :
http://www.nngroup.com/
• We use his book in SWE 432, Design and
Implementation of Software for the Web
1-Jul-16
© Jeff Offutt, 2010-2013
11
Nielsen’s Top 10 Mistakes (2011)
1. Bad search
2. PDF files for online reading
3. Not changing the color of visited links
4. Text that users cannot scan
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
http://www.nngroup.com/articles/top-10-mistakes-web-design/
1-Jul-16
© Jeff Offutt, 2010-2013
12
1. Bad Search
• Search engines must support the imprecision of human
users
• Instead of strictly looking for the literal strings users
enter, they must
–
–
–
–
Handle typos
Look for plurals
Look for hyphens
Allow for misspellings
• In PatriotWeb’s student search, a stray space on the end
of the name causes the search to fail
– We pick up extra spaces when copying and pasting
– “Nguyen ” vs “Nguyen”
1-Jul-16
© Jeff Offutt, 2010-2013
13
2. PDF Files for Online Reading
• Users browse HTML documents and dislike PDF
– It breaks their flow
– The text is laid out for paper, not screens
– PDF is a huge wall of text
• Offer PDF for large documents that users may
want to print
• Example:
http://www.cs.gmu.edu/programs/undergraduate/acs
– Compare:
• BS ACS in Bioinformatics
• BS ACS in Software Engineering
1-Jul-16
© Jeff Offutt, 2010-2013
14
3. Not Changing the Color of
Visited Links
• Users need to know what they’ve been
• … to decide where to go next
1-Jul-16
© Jeff Offutt, 2010-2013
15
4. Non-Scannable Text
• A wall of text is deadly on-screen
– Intimidating, boring, painful to read
– Write for the web, not paper
• HTML writers should use
–
–
–
–
–
1-Jul-16
Subheadings
Bulleted lists
Highlighted keywords
Short paragraphs
A simple and direct writing style
© Jeff Offutt, 2010-2013
16
5. Fixed Font Size
• Browsers have default font sizes
– Users can increase and decrease
• CSS style sheets let HTML writers to specify fonts
– Usually too small
– Reduces readability for users over 35
• Let users and browsers decide
• Specify fonts relative to the current default:
– font-size:90%
1-Jul-16
© Jeff Offutt, 2010-2013
17
6. Page Titles With Low Search
Engine Visibility
• Users find websites by searching
• The page title is the most important way to attract users
• Page titles are used
–
–
–
–
By search engine indexers
By search engine result pages
As the default entry in bookmarks
As the label in browser tabs
• Examples
– http://cs.gmu.edu/~pammann/
– http://cs.gmu.edu/~dbarbara/
– http://cs.gmu.edu/~tmaddox/
1-Jul-16
© Jeff Offutt, 2010-2013
18
7. Anything That Looks Like an
Advertisement
• Selective attention is powerful
– Users have learned to ignore ads
• Users also ignore things that look like ads
• Avoid making content look like ads
– Banners
– Animated text or images
– Pop-up windows
1-Jul-16
© Jeff Offutt, 2010-2013
19
8. Violating Design Conventions
• Consistency is power : Inconsistent behavior will
confuse users
• Examples:
– Do not override the default color in a link
– Do not highlight non-link text with blue and underlines
1-Jul-16
© Jeff Offutt, 2010-2013
20
9. Opening New Browser Windows
• Users want to be able to control the browser
windows they have
• Opening new browser windows disables Back
buttons
– This is the most common tool for users to return to
your site
1-Jul-16
© Jeff Offutt, 2010-2013
21
10. Not Answering Users’
Questions
• Web users are goal-driven
– They visit a site because they have a goal to accomplish
• If the website does not answer users’ questions,
they cannot achieve their goal
• The information has to be present and visible
–
–
–
–
1-Jul-16
Price
Contact information (to a real person!)
Return information
…
© Jeff Offutt, 2010-2013
22
10 Web-site Design Tips
1. Keep graphics and other bandwidth-intensive
design elements to a minimum (speed)
2. Make search easy to find (speed)
3. Keep content current (learn, errors)
•
Make archives of previously published content
available
4. Don’t use frames (speed, errors)
•
Navigation, bookmarking, printing, slower
5. Minimize the need to scroll (speed, learn)
1-Jul-16
© Jeff Offutt, 2010-2013
23
10 Web-site Design Tips (cont)
6. Structure content into hierarchies, but don’t
make things too complex (learn)
7. Put your company’s name and logo on every
page (speed)
8. Key functions such as shopping carts and help
buttons should be easy to find (speed)
9. Avoid pop-ups that open new browser windows
(errors)
10. Links to pages not yet seen should be blue; links
to pages already viewed should be red or purple
(learn, errors)
1-Jul-16
© Jeff Offutt, 2010-2013
24
Summary
HTML must be designed,
not just written
1-Jul-16
© Jeff Offutt, 2010-2013
25