Web Programming Step by Step, 2nd Edition

Lecture XX: Web Design

Reading: Chapter 7

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

What is usability?

• usability: the effectiveness with which users can achieve tasks in one software environment
• studying and improving usability is part of Human-Computer Interaction (HCI)

Visibility and feedback

• visibility: ability for user to find controls that are meant to be interacted with
  • Where are they?
  • What is their state? ("Is this setting on or off?")
• feedback: response from the control to the user before, during, or after an interaction

Common web usability problems

• cluttered or otherwise poor layout
• requires horizontal scrolling, or makes assumptions about user's screen size
• poorly chosen colors
• uses frames
• uses splash screen(s)
• poor or missing navigation controls (Back, Forward, Home)
• text is not scannable (can't be read quickly)

Content usability problems

• most important content isn't on the first page / screenful
• nondescript headings
• too many ads (or things that appear to be ads)
• important site content is contained in PDF documents
• isn't designed to be easily indexed by a search engine
  (HTML title, meta tags, page text, link text, etc.)
• tiny thumbnails of detailed large photos:

Users do not read

vs.

• this also often applies to CSE students

Link usability problems

• links that don't say where they go
• badly chosen link text (such as "Click here for more info")
• links that forcibly open a new browser window
• links opened by complex Javascript needlessly
• visited links don't appear in a different color

Feature usability problems

• poorly performing site search
• having a web search feature (why??)
• not having a site map or other means to navigate the site
• relying on non-standard plugins or browser versions (e.g. Overly reliant on Flash, Java applets, etc.)

Web design suggestions

• place your name and logo on every page and make the logo a link to the home page
• provide search if the site has more than 100 pages
• write straightforward and simple headlines and page titles that clearly explain what the page is about
• structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units
• instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic
• use link titles to provide users with a preview of where each link will take them, before they have clicked on it

More web design suggestions

• Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.
• Ensure that all important pages are accessible for users with disabilities, especially blind users
• Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site
• Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works
• Test your design with real users as a reality check. People do things in odd and unexpected ways, so even the most carefully planned project will learn from usability testing.

Sites about web design

• A List Apart
• CSS Play
• css/edge
• Design by Fire
• Jeffrey Zeldman Presents
• QuirksMode

Writing for the web

• People read web page text differently than they read books, etc.
• Writing for the web includes:
  • subheads
  • bulleted lists
  • highlighted keywords
  • short paragraphs
  • the "inverted pyramid"
  • (put the most newsworthy information at the top, and then the remaining information follows in order of importance, with the least important at the bottom)
  • a simple writing style

Web pages that suck

What's wrong with each of these web sites?

• http://www.envy-hair.co.uk/index.html
• http://www.corvalliscommunitypages.com/
• http://www.pigletscatering.co.uk/
• http://www.bigbearparties.com/
• http://www.developingwebs.net/
• http://www.bobmarshall.com/
• http://www.orchy.com/dictionary/
• http://www.delmarvadatacenter.com/main.html
• http://www.videosphotosanddjs.com/
• credit: webpagesthatsuck.com

Ajax usability

• since Ajax requests happen in the background, users may not know the page is loading
• well-designed web sites give visual cues to the user so they know to wait

Forms and usability

• client-side validation
• lighting up required elements left blank or filled out incorrectly
• avoiding alert unless absolutely necessary

Search Engine Optimization (SEO)

• get people to link to your site (particularly popular sites!)
• use relevant keywords in link text
  • example: My friend Marty Stepp is a swell guy!
• set descriptive meta tags
• use a site URL and page title that contains the keywords you want to match
• don't do "black-hat" stuff (link farms, hidden text, etc.)
• use Google Webmaster Tools: https://www.google.com/webmasters/tools/