1. Cooper Part III Interaction Details Designing For the Web
Jeff Offutt
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 20

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
31-Dec-18
© Jeff Offutt

3. 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
Early 2010s : These technologies have matured and lots of pre-built UI development tools are free
Web UIs can now almost match desktop GUIs
Late 2010s : More and more client-side processing
31-Dec-18
© Jeff Offutt

4. Outline Searching and Scrolling Krug : Don’t Make Me Think
Nielsen’s Top 10 Mistakes On the Web
31-Dec-18
© Jeff Offutt

5. Searching
Most people are not good at searching
May be related to logical thinking or computer 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 multiple attributes to search with
Norman on facets v. filters :
yelp
Auto-complete, auto-suggest, and faceted search help users find things faster
31-Dec-18
© Jeff Offutt

6. 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
Searching is primarily for experts
Filtering helps all users
31-Dec-18
© Jeff Offutt

7. Make scrolling an engaging experience
Scrolling is more common in WUIs than GUIs
Horizontal scrolling is confusing
Persistent navigation should stay available even when we scroll
Not like this:
More like this:
Inner and outer scroll bars can fight each other
The New Post screen in Piazza
Make scrolling an engaging experience
31-Dec-18
© Jeff Offutt

8. 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
31-Dec-18
© Jeff Offutt

9. Outline Searching and Scrolling Krug : Don’t Make Me Think
Nielsen’s Top 10 Mistakes On the Web
31-Dec-18
© Jeff Offutt

10. 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
31-Dec-18
© Jeff Offutt

11. 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
31-Dec-18
© Jeff Offutt

12. 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
31-Dec-18
© Jeff Offutt

13. Layout and Text—Animation
Animation is usually annoying
The web page is shouting at you
Things to animate: Shapes, logos, drawings, photographs
Can be effective for
Attracting attention
Demonstrating transitions
Explaining complex systems
Endlessly repeating animations will annoy the user
Do not animate text
31-Dec-18
© Jeff Offutt

14. 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
31-Dec-18
© Jeff Offutt

15. Connecting With the Rest of the World
Remember that users do not always come in through the “front door”
Bookmarks, URLs ed 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
31-Dec-18
© Jeff Offutt

16. 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 !!
31-Dec-18
© Jeff Offutt

17. 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
31-Dec-18
© Jeff Offutt

18. Outline Searching and Scrolling Krug : Don’t Make Me Think
Nielsen’s Top 10 Mistakes On the Web
31-Dec-18
© Jeff Offutt

19. Jakob Nielsen A web usability author and consultant
A fun and useful website :
We use his book, Designing Web Usability, in SWE 432, Design and Implementation of Software for the Web
31-Dec-18
© Jeff Offutt

20. 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!
31-Dec-18
© Jeff Offutt

21. 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 (
Provide aliases for common misspellings
Use the standard “html”, not the non-standard “.htm”
31-Dec-18
© Jeff Offutt

22. Nielsen’s 10 Web-site Design Tips
Keep graphics and other bandwidth-intensive design elements to a minimum
Make search easy to find
Keep content current
Make archives of previously published content available
Don’t use frames
Navigation, bookmarking, printing …
Minimize the need to scroll
31-Dec-18
© Jeff Offutt

23. 10 Web-site Design Tips
Structure content into hierarchies, but don’t make things too complex
Put your company’s name and logo on every page
Key functions such as shopping carts and help buttons should be easy to find
Avoid pop-ups that open new browser windows
Links to pages not yet seen should be blue; links to pages already viewed should be red or purple
31-Dec-18
© Jeff Offutt

24. Web sites must be designed, not simply written
Summary
Web sites must be designed, not simply written
31-Dec-18
© Jeff Offutt