Back to main AEAChicago2007 post
Luke Wroblewski’s post about his presentation
designs web applications - eleven years of designing a lot of forms online shopping experience is browsing until you find what you want, then a form so forms stand between you having money and the company getting it from you i.e. MacBook Pro takes your picture for your account - very personal try to sign up for, say, Vox, all about community and blogging -> form forms for managing financial data, for voting, etc. forms are how customers talk to companies online. they make money. they enable participation. they permit engagement. YouTube's upload form has been redesigned seven or eight times already Jared Spool fixed a design problem in a two-field form and made a company $300,000 a month gave talk at Society for Technical Communicators - one person liked filling out forms so minimize the pain of filling in forms, have clear path to completion forms are conversations: "give me your name. what's your birthday. what's your secret password." lots of different departments may want different information that all goes into one form most forms are artifacts of the data structures behind them - database structure data sources: usability testing, eye tracking, customer support, best practices, site tracking design patterns: information + interaction + feedback slides have a *lot* of information label alignment depends on information familiarity, ability to extend vertically, etc. when eBay redesigned its input form, it had to restate its earnings upwards indicate which fields are required/optional when only a few get the designation when B&N redesigned its account form, they kept *s on every field but dropped explanation Walmart does this correctly - the one optional field is marked required asterisk on label is much better than on input field try to avoid things that are optional the number one thing you can do to increase completion rates is to get rid of fields text labels for required/optional are best, but asterisk is pretty good text saying "use five digits" for zip code is less good than making the field that big use field length as an affordance, or else use consistent lengths to reduce visual noise group things with least visible differences Luke has said not all form actions are equal - make primary action more visually dominant eBay Sell Your Item: Add Subtitle - "What the hell? How can you mess up a one-field form?" in eye tracking survey, fewer fixations and less time when buttons were same when people talked about what they saw, they liked the difference people said "It slowed me down", "It prevented me from making an error" might become quicker over time worst performance was continue/submit on far right, go back/cancel on far left three successful variations of Submit | Cancel with top labels, people followed very clear path to completion, submit button left bottom if possible, get rid of secondary actions - nobody uses reset help and tips can create visual clutter: automatic or activated help for current element best eBay Sell Your Item: Choose a Selling Format has too much help three radio buttons, >10 help items on the page many different ways of displaying contextual help exactly as needed primary goal for every form is completion have smart inputs so you don't have to require a particular phone number format have smart defaults to reduce choices people have to make alignment helps define path to completion - let eye scan straight down for long forms, let people see their progress and save make sure tab order is correct - use tabindex attribute use progressive disclosure: show people features when they need them use gradual engagement: let people use the site and then register example: jumpcut.com and geni.com Fidelity myPlan uses sliders. it dynamically shows you information without form submissions. there are many ways to expose dependent inputs - think about all your options slides explain lots of the possibilities use inline validation for error-prone fields - validate inputs, suggest valid inputs, etc. i.e. people really like "how secure is your password" progress bars i.e. when picking a username, show whether is available prominently indicate an error, show what the error is, say how to fix it by the field, use red and bold (doubled visual language, not just red because of colorblindness) again, say how to fix disable Submit button after it's clicked so people know something's happening provide in-progress indicator communicate that submission has been successful avoid changing inputs that have already been provided tell people before they start filling out a form if they need anything hard to get (VIN, etc.) <label>, tabindex, accesskey, <formset> wufoo.com, formassembly.com, icebrrg.com will create forms for you Pownce signup is good - but don't need to ask for birthday, gender checking availability of username could be automatic
