Cooper Part III
Interaction Details
Designing For the Web
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 20
Formation of the WWW
The World Wide Web is a result of the
confluence of three developments
Internet
1-Jul-16
World Wide Web
© Jeff Offutt, 2014
2
Evolving Web UI Abilities
• 1990s : Simple text documents
• Early 2000s : HTML allowed complete UIs to be built, but
with limited controls
– User experience was very different from using a desktop GUI
– The request-response cycle was always apparent
• Late 2000s : HTML5, CSS3, AJAX, and other technologies
allowed much richer UIs to be built
– Designers could hide the request-response cycle
• 2010s : These technologies have matured and lots of prebuilt UI development tools are free
– Web UIs can now almost match desktop GUIs
1-Jul-16
© Jeff Offutt, 2014
3
Outline
1. Page-Based Interactions
2. The Mobile Web
3. The Future
4. Krug : Don’t Make Me Think
5. Nielsen’s Top 10 Mistakes On the Web
1-Jul-16
© Jeff Offutt, 2014
4
What Is a Page ?
• Web Page : Data that fits in one browser screen
– Static Web Page : A web page whose HTML exists as a file on a
computer
– Dynamic Web Page : A web page that is created as needed by
software
• Pages and screens in traditional GUIs are similar, but not
quite the same
• Web Site : A number of web pages that are semantically
related and physically linked
• Landmark : Semantically important nodes that are linked
to many nodes
1-Jul-16
© Jeff Offutt, 2014
5
Web UI Navigation is Different
• Each page is addressable
• Lots more navigation possibilities
– GUI-like “go” or “submit” buttons
– Traditional HTML <A> links
– User controlled (back, refresh, forward, URL rewriting)
• Primary navigation : The main ways designers expect users
to navigate, built into the software
–
–
–
–
1-Jul-16
Often a persistent row of buttons or links on the screen
Top : Clearer but a limited number
Side : More places, but intrusive and less clear
Left navigation is often hidden until the user mouses over
something
© Jeff Offutt, 2014
6
Dynamically Appearing Navigation
• Navigation controls often appear when the user mouses
over
– Drop down menus from top navigation (http://volgenau.gmu.edu/)
– This can be a problem on small screens
– Experts do not agree whether the “Hamburger” control is clear
to users
• Primary navigation should be based on a tree model
– Most users can easily visualize trees
– Other navigation controls can violate the strict tree syntax
Use persistent headers to maintain context
1-Jul-16
© Jeff Offutt, 2014
7
Secondary Navigation
• A few links at the top of a screen is not enough for
complicated web apps
– Experts will be able to remember 3 or 4-step navigation paths
– Beginners and intermediate users have trouble finding things that
are three steps away
– Search helps, but beginners may not know what to search for
• Flat and compact navigation helps users
– Items that are deeper in should be only for expert users
• Fat navigation allows submenus to drop down when users
click on primary navigation
• Breadcrumbs help users remember where they are
Breadcrumbs with lateral links speed
navigation
1-Jul-16
© Jeff Offutt, 2014
8
Content Navigation
• WUIs allow users to navigate through content
– Pictures, newspaper articles
• The relationships may be associative instead of linear or
hierarchical
• Usually presented as listings, galleries, or grids
• New content needs to be highlighted
– Font size, color, position, visual flags, …
– http://www.cs.gmu.edu/~offutt/classes/632/sched.html
• We sometimes want to let users decide how to organize
the content
– date, author, grouping, …
1-Jul-16
© Jeff Offutt, 2014
9
Searching
• Most people are not good at searching
– May be related to logical thinking or perhaps computer-semantic
knowledge ?
– May be related to verbal ability ?
• Auto-complete helps users refine their search thinking
• Disambiguation (auto-suggest) is when the search engine
guesses what you mean
– “softare” … “did you mean ‘software’?”
• Faceted search offers attributes to search users
– yelp
Auto-complete, auto-suggest, and faceted
search help users find things faster
1-Jul-16
© Jeff Offutt, 2014
10
Filtering
• Filters start by presenting all items or all information
– Users filter by defining things they do not want
• Filters vs. search
– Search starts with nothing and often results in nothing
– Filtering starts with everything and usually results in something
• Controls on Mason’s catalog are clumsy, but support
filtering for courses
– http://catalog.gmu.edu/content.php?catoid=25&navoid=4962
• Searching is primarily for experts
• Filtering helps all users
1-Jul-16
© Jeff Offutt, 2014
11
Scrolling
• Scrolling is more common in WUIs than GUIs
• Horizontal scrolling is confusing
• Persistent navigation should stay available even when we
scroll
– Not like this: http://www.cs.gmu.edu/~offutt/classes/632/sched.html
– More like this: http://cs.gmu.edu/~offutt/
• Inner and outer scroll bars can fight each other
– The New Post screen in Piazza
Make scrolling an engaging experience
1-Jul-16
© Jeff Offutt, 2014
12
Paging vs. Scrolling
• Paging puts discrete chunks of content on separate pages
– Requires navigation to other pages
– Tiresome if the number of items per page is too small
– Searching within content is difficult
• Full-content scrolling puts all the content on a single page
– Newspapers
– Sometimes dozens or hundreds of items
– Easier to search, fewer screens, less navigation
• Infinite scrolling adds new content as the user scrolls
– Facebook, newsfeeds
– Screen-reader navigation has difficulty (accessibility)
– There is no bottom of the page
1-Jul-16
© Jeff Offutt, 2014
13
Outline
1. Page-Based Interactions
2. The Mobile Web
3. The Future
4. Krug : Don’t Make Me Think
5. Nielsen’s Top 10 Mistakes On the Web
1-Jul-16
© Jeff Offutt, 2014
14
Responsive Design
• Designers now have to design for different screen sizes
• Responsive design helps let screens adapt
– Design screens on a modular layout grid
– Different content areas can resize automatically
– At certain screen widths, the layout changes
• Designing for different breakpoint layouts is challenging
– But only one design is needed
• The other alternative is to have different mobile versions
– This allows the controls to be specialized to touch screens
1-Jul-16
© Jeff Offutt, 2014
15
Outline
1. Page-Based Interactions
2. The Mobile Web
3. The Future
4. Krug : Don’t Make Me Think
5. Nielsen’s Top 10 Mistakes On the Web
1-Jul-16
© Jeff Offutt, 2014
16
The Future
Cooper says that browsers will
continue to get better at supporting
usability
1-Jul-16
© Jeff Offutt, 2014
17
Outline
1. Page-Based Interactions
2. The Mobile Web
3. The Future
4. Krug : Don’t Make Me Think
5. Nielsen’s Top 10 Mistakes On the Web
1-Jul-16
© Jeff Offutt, 2014
18
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, 2014
19
Can I Click It ?
Clickable buttons should look clickable
Results
What do I
do with this?
Hmmm …
I guess that’s a
button?
Results
click
Results
1-Jul-16
© Jeff Offutt, 2014
20
Layout and Text—Single Pages
• Reading from paper is easier than from screen
– Don’t use as much text on screens
• Organize text to let users get the summary first
– Keep it short
– Use the pyramid structure
• First a summary paragraph
– who, what, when, where, why, and how of the topic
• Later paragraphs give more detail
• People browse web pages, they don’t read
1-Jul-16
© Jeff Offutt, 2014
21
Layout and Text—Images
• Images can be used for
•
•
•
•
Title of the page
Illustrations
Navigation
Buttons
• Limit number of images for users with lowbandwidth
• Always use ALT attribute to provide a text
alternative
• Use small size images
1-Jul-16
© Jeff Offutt, 2014
22
Layout and Text—Animation
1-Jul-16
© Jeff Offutt, 2014
23
Layout and Text—Writing
• Follow basic principles of communication:
–
–
–
–
Simple, direct style
Thorough proofreading for confusing grammar and misspellings
Use a spellchecker !
Avoid colloquialisms, slang, and culturalisms
• Text on a screen is more difficult to read
– Lower resolution
• Use 10 or 12 point font (14 for older readers)
– Stick to standard font types, don’t change too much
• Remember: If you make mistakes:
– At best, people will think you are careless
– More likely they will think you are ignorant
1-Jul-16
© Jeff Offutt, 2014
24
Connecting With the Rest of the
World
• Remember that users do not always come in
through the “front door”
– Bookmarks, URLs emailed from friends, search
engines
• Each page should have:
– Clear identifiers to indicate its context
– Titles that are meaningful without the context
– Navigation to other pages in the website
• Every page must have a meaningful <TITLE> tag
1-Jul-16
© Jeff Offutt, 2014
25
Connecting With the Rest of the
World—Browser Compatibility
• Each browser displays HTML differently
– KISS – Keep It Simple Stupid
• The JavaScript DOM has many incompatibilities
– Try not to get too fancy
• Browsers behave differently with broken HTML
– IE tends to be more “forgiving” of mistakes
– Firefox family tends to conform better to standards
Must test with multiple browsers !!
1-Jul-16
© Jeff Offutt, 2014
26
HTML Design Hints
• Put searches on the landmark front page (speed)
• Do not use frames (SS, errors, speed)
–
–
–
–
They confuse navigation
Bookmarks do not work
They make printing hard
Browsers render them differently
• <iframe> has fewer disadvantages
– Use CSS with <div> tags for robust layouts
– For single pages, <table> works well, but is deprecated
• On site maps, “low light” current page
• Remember the page may be too big for one screen
– Put navigation buttons on top and bottom
– Put action buttons on top and bottom
1-Jul-16
© Jeff Offutt, 2014
27
Outline
1. Page-Based Interactions
2. The Mobile Web
3. The Future
4. Krug : Don’t Make Me Think
5. Nielsen’s Top 10 Mistakes On the Web
1-Jul-16
© Jeff Offutt, 2014
28
Jakob Nielsen
• A web usability author and consultant
• A fun and useful website : http://www.useit.com/
• We use his book, Designing Web Usability, in SWE 432,
Design and Implementation of Software for the Web
1-Jul-16
© Jeff Offutt, 2014
29
Search Failures
Users only find information they are searching
for on web sites about 42% of the time
When given an interactive task, they can only
accomplish the task about 26% of the time!
1-Jul-16
© Jeff Offutt, 2014
30
URL Design
• Unfortunately, we must type and remember URLs
• Help the users avoid typos :
– Do not use upper case in domain, directory, or file names
– Underscores require the shift key – hyphens are better, but not
much
– Avoid zeros (0 or O?) and ones (1 or l)?
– Do not add unnecessary directories
– Choose short, common words
– Use standard abbreviations
• Use URL aliasing to be be error tolerant :
– Allow x.com and www.x.com (http://www.catalog.gmu.edu/)
– Provide aliases for common misspellings
• Use the standard “html”, not the non-standard “.htm”
1-Jul-16
© Jeff Offutt, 2014
31
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
1-Jul-16
Nielsen’s Top 10 Mistakes
(2006)
Bad search
PDF files for online reading
Not changing the color of visited links
Text that cannot be scanned
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
© Jeff Offutt, 2014
32
Nielsen’s 10 Web-site Design Tips
1. Keep graphics and other bandwidth-intensive design
elements to a minimum
2. Make search easy to find
3. Keep content current
•
Make archives of previously published content available
4. Don’t use frames
•
Navigation, bookmarking, printing …
5. Minimize the need to scroll
1-Jul-16
© Jeff Offutt, 2014
33
10 Web-site Design Tips
6. Structure content into hierarchies, but don’t make
things too complex
7. Put your company’s name and logo on every page
8. Key functions such as shopping carts and help buttons
should be easy to find
9. Avoid pop-ups that open new browser windows
10. Links to pages not yet seen should be blue; links to
pages already viewed should be red or purple
1-Jul-16
© Jeff Offutt, 2014
34
A Wishlist for HTML
• A “virtual anchor” like “http://… bigtext.html#%75” that
would allow you to link to a particular position (here 75%
down from the top) in someone else’s document, without
the owner having to insert a real anchor
– http://cs.gmu.edu/~offutt/classes/632/sched.html#%50
• HTML Variable tag (a self-defined entity reference):
<VARIABLE>
<NAME>BaseURL</NAME>
<VALUE>http://www.cs.gmu.edu/~offutt/classes/632/</VALUE>
</VARIABLE>
To be used anywhere in the document:
<A Href=&BaseURL;/sched.html>schedule</A>
1-Jul-16
© Jeff Offutt, 2014
35
A Wishlist for HTML (2)
Safer radio tag syntax
<INPUT Type=“radio” Name=“major” Value=“SWE”>
<INPUT Type=“radio” Name=“major” Value=“CS”>
<INPUT Type=“radio” Name=“major” Value=“INFS”>
This leads to errors with the Name attribute. We should use the
“select” model:
<RADIO Name=“major”>
<Option Value=“SWE”>
<Option Value=“CS”>
<Option Value=“INFS”>
</RADIO>
1-Jul-16
ASP has a specially designed
control that looks similar to this
© Jeff Offutt, 2014
36
Summary
Web sites must be designed,
not simply written
1-Jul-16
© Jeff Offutt, 2014
37