Krug Chapter 3
Billboard Design 101
and
Chapter 4
Mindless Choices
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 205
Software Usability and Design
5 Ways to Attract Drive-By Users
Users whizz by your website at 70 miles an
hour … don’t try to slow them down, try
to adapt to their habits
1.
2.
3.
4.
5.
1-Jul-16
Create a clear visual hierarchy on each page
Take advantage of conventions
Break pages up into clearly defined areas
Make it obvious what’s clickable
Minimize noise
© Jeff Offutt
2
(1) Create a Clear Visual Hierarchy
• Decide what is important (to the user!)
– Make important things bigger, brighter, and top left
• Example :
– https://www2.gmu.edu/
– What’s important?
• Use location, color, encapsulation, and nesting to
highlight important things
– http://www.cs.gmu.edu/~offutt/classes/205/sched.html
1-Jul-16
© Jeff Offutt
3
(2) Take Advantage of Conventions
• Conventions are commonly accepted ways to tell
users things without explicitly telling them
– Putting information in the world
– Shopping carts
– Button tables for navigation
• Some conventions become standards
– Light switch up means on
• Some designers like to be creative
– What’s good for users?
– New ideas are great, but be very careful
1-Jul-16
© Jeff Offutt
4
(3) Break Pages Up
• Users need to see and identify the different areas
on a web page immediately
– Without thinking !
• Consistency helps
• Borders and colors are important
• Example :
–
–
–
–
1-Jul-16
http://www.cs.gmu.edu/~offutt/classes/205/sched.html
Note the border around the schedule
The color backgrounds
The “new” star
© Jeff Offutt
5
(4) Make What’s Clickable Obvious
• Users need to know what they can click without
thinking
– Standard link colors
– Buttons that look like buttons
– Large pictures with blue highlighting are easy to miss
• Example : http://today.gmu.edu/
– What’s clickable? The green text!?!
– Some of the blue text is, some is not
• Example : https://www.myschoolbucks.com/
– What’s clickable?
– Most common action – adding money – how ???
1-Jul-16
© Jeff Offutt
6
(5) Minimize Noise
• Avoid extra information that users do not need
• Newspapers :
– http://www.cnn.com/
– http://www.washingtonpost.com/
– http://www.bbc.co.uk/
• Yikes !
– http://volgenau.gmu.edu/
– http://www.gmu.edu/
1-Jul-16
© Jeff Offutt
7
Krug Chapter 4
Mindless Choices
Counting Clicks
• On the web, speed of use is mostly about clicking :
– How many clicks
– How hard each click is
• Examples :
– University of Advancing Technology — How do you
take a class here?
– http://catalog.gmu.edu/ — How to find the SWE
minor?
1-Jul-16
© Jeff Offutt
9
Summary
Many web designers have no idea that they
should design for the user
Let alone HOW
1-Jul-16
© Jeff Offutt
10