Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
12.1: Designing for Web 2.0
12.1: Designing for Web 2.0
12.2: Scriptaculous
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.
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)
new Effect.Fade("my_element", {
duration: 3.0,
afterFinish: displayMessage
});
function displayMessage(effect) {
alert(effect.element + " is done fading now!");
}
all effects have the following events that you can handle:
beforeStart,
beforeUpdate,
afterUpdate,
afterFinish
the afterFinish event fires once the effect is done animating
useful do something to the element (style, remove, etc.) when effect is done
each of these events receives the Effect object as its parameter
its properties: element, options, currentFrame, startOn, finishOn
some effects (e.g. Shrink) are technically "parallel effects", so to access the modified element, you write effect.effects[0].element rather than just effect.element
Auto-completion
Text fields that let you type in partial text and suggest values that contain that text
Auto-completing text fields
Scriptaculous offers ways to make a text box that auto-completes based on prefix strings:
window.onload = function() {
Sortable.create("simpsons", {
onUpdate: listUpdate
});
};
function listUpdate() {
// I can do anything I like here; create an Ajax.Request, etc.
new Effect.Shake("simpsons");
}
Homer
Marge
Bart
Lisa
Maggie
Persistent saved items
problem: rearranged items are not "remembered"; they return to their original order when we revisit the page
a Sortable has events you can handle when the list order changes:
onChange : during a drag, each time the list order changes
onUpdate : when a drag is done and the order has changed
in a handler for a Sortable's event, post the data to the server to save it
Subtleties of sortable lists
if the elements of the list change after you make it sortable (if you add or remove an item using the DOM, etc.), the Sortable-ness breaks
symptom: some elements will not be draggable, or can't be dragged past
must call Sortable.create on the list again to fix it
the onUpdate event will not work unless each li has an id of the form listID_index, e.g. "simpsons_0"
vs. 
Click effects above
Draggable demo.
