AEA Chicago 2009: Web Form Design in Action

Making web forms easier for the user was the subject of Session 10 of An Event Apart Chicago 2009, presented by Luke Wroblewski.

  • forms sit between the user and your site
  • no one wants to fill out a form
  • IN YOUR WAY!!

7 best practices

  1. Path to completion – light at the end of the tunnel
    • clear scan line
    • need to draw a straight line for users to scan and follow down the form
    • progress indicators (start pages? – not sure about that)
  2. People jump directly in at first field
    • top aligned labels vs. right aligned labels vs. left aligned labels
    • different design for different uses
    • can use label within input field, but with caveats
  3. Help & Tips
    • Why do you want me email?
    • Why do I need a username?
    • w/ dynamic data, careful obsuring the form; maybe dedicated help area
    • minimize help text; if there’s too much, you’re design probably sucks
  4. Inline validation
    • no pogo-sticking: realtime feedback (username taken)
    • push people toward more correct answers (password strength)
    • prevent an error state (confirm password)
    • where & when? show validation onblur, except selecting a username; keep persistent A List Apart article on inline validation
    • prevent people from having to fill in forms
    • show input masks (gently guide) reveal formatting onfocus
  5. form buttons are not equal
    • save/submit good, reset/cancel evil
    • people aren’t thinking, they want to get out of the form fast
    • drop people off at the “good part”
  6. form organization; be conversational
    • one form should speak with one voice (not conglomerate from all depts, etc.)
  7. gradual engagement
    • sign up forms must die! sign up is an OUTCOME
    • make successful within first few seconds of engagement: lightweight action that’s integral

AEA Chicago 2009: Building Stuff Fast–And Getting It Approved

Simon Willison talked about how some ways to speed up the development timeline in Session 9 of An Event Apart Chicago 2009

  • knock something out as fast as you can and hope it doesn’t suck too bad
  • cheaper to build than to have the meetings to determine what to build

Interactive development

  • use console tab in firebug as a learning tool
  • phpsh – interactive php!
  • massively speeds up dev time (no more compiling, uploading)

Client-side prototyping

  • JSON-P with padding – allows callback to defeat same origin policy
  • YQL: SQL queries against APIs

“Beware the Phantom Web”

  • Phantom Web: view source = JavaScript tag only
  • use JS-only for prototyping, but don’t leave it
  • frameworks purpose: eliminate boilerplate, DRY (don’t repeat yourself)

Rapid development in a group

  • rent a fort!
  • pair programming
    • more than doubles productivity
    • keeps focused/accountable
    • constant peer review
  • KJ Method
    • achieving consensus
  • Great for learning, not as good for shipping a product

Making your organization more hackable

  • “Innovation” – use it to get away with anything
  • Hack days
    • only rule: build something and demo it to your peers
    • keep rules to a minimum
    • drop constraints & build quickly

Random

  • screen scraping APIs
  • with YQL, select CSS selectors

Open Source

  • not “coding communism,” an ecosystem
  • too much effort to release your own code
    • use github where you don’t have to maintain the project
    • file-and-forget

Q&A

How does rapid building affect pricing?
depends how honest you are 🙂
can be a selling point, too

AEA Chicago 2009: Using CSS3 Today with eCSStender

In Session 8 of An Event Apart Chicago 2009, Aaron Gustafson demonstrated the eCSStender JavaScript library.

Browsers are extending CSS (-moz, -webkit, -khtml, -o), we should be able to as well.

Features:

  • <16K
  • starts when DOM is ready
  • supports specificity/cascade/media
  • usually not even a flash while JS works

Use .register() to create extension

  1. lookup
    • selectors (tag, regex, array, function-advanced)
  2. property (specific, regex, array, vendor-specific, etc.)
    • can be fingerprinted (completely lost about that)
  3. callback function
    • selector, properties, medium, specificity arguments

.lookup()

  • pretty much .register() but read-only, returns an array

Other Stuff

  • .isSupported (tells if browser natively supports property)
  • usally caches, but can disable certain stylesheets or disable completely–ignore(), disableCache()

Q&A

I’d love to include them, but none of the questions were repeated for the benefit of the group

AEA Chicago 2009: JavaScript Will Save Us All

Day 2 and Session 7 of An Event Apart Chicago 2009 was Eric Meyer demonstrating how important JavaScript has become and will be.

Javascript libraries

  • fixing what doesn’t work in old browsers (IE7/IE8.js)
  • pushing the envelope of new features (e.g. modernizr)
  • Bluff – graphing (HTML5/canvas)
  • Processing.js – replace Java, etc. w/o plugin

Keep it Accessible: make sure there’s fallback

  • JavaScript is not just a barrier, way of punching through the barriers
  • video: javascript that adds keyboard support to flash videos

What can we do?

  • support for autofocus/required input attributes (html5)
  • input types in html5 (unsupported fallback to text input)
  • scan tables to pass to bluff for graphing

JavaScript

  • means we don’t have to wait for browser makers or standards bodies
  • speeds up the evolution of the web
  • payoff for years of web standards evangelism

Q&A

Doesn’t it cause a problem to use a toolkit to solve a problem that will later be solved:
simple to just cut out a piece of JS when it’s no longer needed
What happens when JS isn’t there?
make sure it’s progressive enhancement
still > relying on plugins

AEA Chicago 2009: Walls Come Tumbling Down

Andy Clarke finished out Day 1 of An Event Apart Chicago 2009 with his talk on improving the process of web design–getting things done more efficiently.

  • Make more time for creativity
  • Creativity drives innovation
  • Ideas are what sell

Workflows

  • Current standard flow:
    1. static comp
    2. coding
    3. testing
    4. content
  • frustrating, inefficient
  • Replace with
    1. content
    2. design in browser
    3. testing

Designing in the Browser

  • static visuals fail at demonstrating interactive sites by definition
  • cannot demonstrate a design to a client
    • effects of a liquid layout
    • increase font size effect
    • interactions (hover, cursors, etc.)
    • AJAX
  • showing static design visual reinforces misconception that a website mimics paper

Design doesn’t look the same in every browser

  • different != broken, though
  • not gonna notice anything’s different
  • only web geeks know that more than one browser exists
  • business benefits of universal css: give option between last 3 days on IE6 or universal templates

Design process

  • starter html/css/images
  • css files import each other
  • use “scratch stylesheet” at the end, allows testing without screwing up the good stuff

Random tips

  • use two values on border-radius to get an elliptical shape
  • css columns: column-count:2

Designing a System

AEA Chicago 2009: DIY UX: Give Your Users an Upgrade

An Event Apart Chicago 2009 Session 5 was on simple things anyone can to to improve their user’s experience on their site, presented by Whitney Hess.

Slides for this presentation on slideshare.com

Design Research
What do our users *actually need*?

  • feedback mechanism: easier for users > easier for you
  • feature/bugs system: most votes = done first (user based, not company based)
  • have survey links all over the place
  • designer research via email – teasing out more info; also feedback for customer
  • let them tell you about their workflow – help you address the core problem

Web Analytics
What are our users *actually doing*?

  • data in conjunction with user research – data doesn’t lie, but it’s dependant on your inference
  • crazyegg.com – create maps of where people click on a page
  • record the top 100 searches: top 10 results of each
  • “stats let me refute the client’s notion of how their constituents were behaving”
  • search logs let you see what people really want to do w/ your site

Usability Testing
How well does our stuff *actually work*?

  • ask “what do you think”
  • “‘it looks good’ is the worse feedback we can get”
  • using the same people over and over again allows them to get used to being harsh
  • where to find participants
      Friends and family
    • coworkers who don’t work on project (receptionist, HR, sales)
    • Twitter followers
    • Starbucks
    • Craigslist
  • Why not test online? don’t be a wimp! You should be in the room & feel the pain.
  • if you’re not there, youdon’t see body language, can’t ask follow-up
  • Informal testing can be just as valuable

Experimentation & Iteration
How are we *always getting better*?

  • launch new feature during quiet times, get feedback from user requesting it, tweak, repeat
  • make your working environment creative
  • solve problems together

Q&A

Is it necessary to have a wide user base for niche product?
some is better than nothing, but wide user base is still better
you’ll find variation in any user group

AEA Chicago 2009: Concept Models: A Tool for Planning Websites

Concept models, a way of visualizing abstract concepts, was the subject of Dan Brown’s Session 4 of An Event Apart Chicago 2009 with Dan Brown.

Types of navigation

  • traditional
  • emerging
  • anticipatory

The site map is no longer an effective way of describing content.

Start Modeling with

  • a theme; the central “story”
  • what is of most interest
  • from there, build out based on familiarity
  • combat obscurity, i.e. define buzzwords

Structures you can use

  • hub & spoke – define a central idea
  • diad, triad… – a few main ideas
  • value prop – a sentence broken out into sections

Going from concept model -> site model

  • take main points/hubs become templates.
  • seems that the purpose of these concept models is to make a website match the subject (relationships on the website would mimic real-life relationships, etc.)
  • experiment with including different elements from the concept models in different wireframes

Why models? 8 tips

  1. determine context
    • that is, they help you determine the context
  2. do research
  3. make a list
    • of nouns
    • concept models are nouns connected by verbs
  4. start with less

    • find good starting points
  5. start with more
    • to move stuff around and experiment
  6. label everything
    • the more active the verbs the better
    • use plural nouns
  7. balance familiar and unfamiliar
    • use familiar to describe unfamiliar
    • need a mix of both
  8. involve others
    • collaborative, whiteboard approach

Q&A

How early in the modeling process do you get user feedback?
hard for users to understand underlying structures
at prototyping stage
Does this process mostly focus on UI? or is it also useful for a DB admin?
tends to be object-oriented, but usually focused on user
Does size of circle/distance matter?
can be used to enhance, don’t need to be
you define your own relationships, cues

How do you engage clients?

go digital sooner rather than later; screen share
Is this something you could share with content owners to ask, “do I have this right”?
yeah, that’s a great application
How do you know when you’re done? Could go on forever
when your deadline’s passed
What are the disadvantages to using concept models?
thinking about abstract ideas; if you’re presenting to people who don’t like thinking abstract, it’s not going to work
it’s a planning tool, nothing more
If you’ve already got a website that’s poorly organized, can it help you fix it?
I have no idea what he said here

AEA Chicago 2009: Content First

An Event Apart Chicago 2009 Session 3 was Kristina Halvorson, talking about content, content, content.

These notes are more sketchy, not because the presentation wasn’t good, but because it was more of an impassioned plea than a how-to that I could take notes on

  • not just copy to be dropped into a template, it’s content–the “stuff” people are looking for
  • How did we get here?
    • Information Architecture gave rise to
    • Information Design
    • When the web came along, it was seen as primarily visual, so primarily visual people get hired
  • Big Problem: the person who defines the content doesn’t own the content
  • Must stop seeing content as a feature
  • No more lorem ipsum — content should come first; design around the content

Site comparison

Quicken
all about product photos/price, no space for benefits/description
when copy-writers finally fill in the template, you end up w/ small fonts, cramped, busy page
mint.com
top 5 things people want from personal finance software
top 4 triggers to get people to want to use personal finance

Page tables vs templates

  • Page table defines what content should be on the page and where, whereas a template is a design with spots to fill in with whatever
  • Priority 1: Messages
    • what should the user come away with)
    • Label them by importance: 1a, 1b, etc
    • Tell the writer WHAT to write in what order
  • Priority 3: Contextual contact us
  • Not "launch mentality" but a renewable ecosystem

How to Start

  • Get content involved early on
  • Design around content

Q&A

Can/do designers & developers have impact on content development process?
If nothing else, you see content poured into design/structure.
You can/should also ask who owns the content.
What is an example of content requirement?
on this portion of Page X, there must be a list of product one benefits
What can you do for a new site, where the content doesn't exist yet?
Plan for andcreate the cycle for maintenance
How do you motivate clients?
Help them see how users are reacting to their site (shame)
Help them to see their content as a business asset, not a commodity
Show them user research; businesses rarely test content in research; show that Users can't find what they’re looking for
How to deal with what happens to the site after launch (client work; after the hand-off)
Sell them maintenance plan/requirements
Deliver them a plan for maintenance
Do organizations need to hire someone for content?
Organizations don't want to realize they're a publisher, and any publisher needs oversight. (so, yes, I guess)

AEA Chicago 2009: Thinking Small

Session 2 of An Event Apart Chicago 2009 was Jason Santa Maria talking about small things that can make a big difference in a design.

example of: Choose your own adventure books: tiny choices affecting the outcome

7 things that can affect the outcome

  1. Be a thinker
    • keep a sketchbook
    • sketchbooks are not about being a good artist, they’re about being a good thinker
    • get past all of the obvious and to the real creative stuff
    • play around with words (how does the content work in space)
    • know your process, know your tools – (computer is a tool of refinement, mind is a tool of design)
  2. Find the Message
    • this one ran together w/ #1 in my mind, so some notes from #1 should probably go here.
  3. Be a Reverse Engineer
    • more than one way to do it
    • 6 ways to reinterpret content
      • Next/Prev Panel
      • Zoom In/Out
      • Embellish or Exaggerate
      • Disarm
      • Deconstruct
      • Re-contextualize
  4. Plot it out
    • just choosing a grid system is crap: why are you using it – “blindly go where everyone has gone before”
    • using a grid is not necessarily good design, it’s just organized design
  5. Think Horizontally, then Vertically
    • grid=parfait
    • tiers building on each other
  6. Stop, Modulate, and Listen
    • identifier, size, and placement
    • a la carte modules
    • class=”pic four left”it’s a picture, four columns wide, on the left
    • easy for clients to pick up on it and use, easy to place/repurpose content (the uber-semantic nazis flamed JSM for this, but there comes a point where usability for the content creators > semantics for the sake of semantics sake)
  7. Be a Matchmaker
    • typography online; matching fonts
    • pair typefaces from the same designer
    • harmony in structure

Q&A

Why is typography going to be heating up?
@font-face, TypeKit, etc.
Modular? Semantic class names?
easy to use > purely semantic
Isn’t licensing the big hurdle w/ @font-face?
yes, that is a big hurdle but a bigger problem is that fonts aren’t designed for screen
How do I make sure I’m not violating copyright?
Look at EULA
What point of the process do you look at colors, photo styles?
Early on, seting the mood, during sketch phase
Flexibility on site (separate design per blog post), can you sell that to clients?
Yes, to a certain extent. If the client has a trained designer (but, a certain amount can be accomplished by placing images within blog posts using modular layout discussed above).
When do you bring IE in to the picture?
as he goes along, it tends to get later and later in the game
Does modular design described above work in expanding layouts?
image sizing is the issue in fluid grid (%, em), otherwise, could work
don’t like variable image sizes
How do you prevent bad design (from client)?
question any change requests that aren’t from the user perpective
How do you build sketching early on? (I couldn’t figure out what I meant by what I wrote here when I went to edit–maybe some day I’ll remember…)
phase of discovery, along with research, etc.
Special consideration for grid systems to work in CMSs?
no, it’s all CSS, so CMS doesn’t make a difference
Materials for developers/non-designers to understand design?
jasonsantamaria.com/reading

AEA Chicago 2009: A Site Redesign

Jeffrey Zeldman presented the first session of An Event Apart Chicago 2009, discussing the process of redesigning a website and demonstrating the process of redesigning his own site and the An Event Apart website.

Client services: in-house, agency/freelance

  • Make sure you’re solving a problem solving (not just “time for redesign”)
  • Don’t redesign just because it’s tired/you’re tired of it (amazon, apple haven’t changed much over the years)
  • Public isn’t as tired of it as I am
Research
  • is the difference b/w art and design. Designers are problem solvers, not artists.
  • yields achievable goals
  • makes you a credible partner
Business goals & user needs
  • corporate market research != user needs
  • usually no budget for user needs testing
    • informal, casual interview – ask for 5 minutes
    • don’t ask about website, general info about subject
    • develop customer profiles (composite of people talked to)
Content Strategy
  • start with content, design with real copy
  • no lorem ipsum
Dealing with Clients (internal/external)
  • Alzheimer’s method
    • back up and refresh their memory, remind them what you discussed before
    • like backing up a movie a couple scenes to get the flow
  • Translate
    • don’t just answer their question, client may be being nice/tactful
    • ask questions to get down to the real issue
  • “Sell ideas, not pixels”
    • Have discussions about the meaning of the design, then ask if the design supports that meaning.
    • Some objections & responses:
      “That color is UGLY”
      go back to research, focus on the user
      “That button is too big”
      we did this because research shows users weren’t seeing it
    • Find out the real problem and respond to it.
      • if it’s a problem, fix it
      • if it’s not a problem, use the research to calm the client
      • don’t try to calm the client without the research; if you do, you may come across as a know-it-all

Homegrown

Competitive Audit : Client Services :: Inspiration : Homegrown

Samples

Homegrown – Zeldman’s redesign
  • problem: invite people to read the writing
  • design around the content in the browser with CSS
  • designed the nav last interesting
  • navigation as content
  • there is no fold
  • fewer shapes allows more flexibility (recombine the layout later)
Business site – An Event Apart redesign
  • problem: needed to show value (economic downturn)
  • old site was brand over content
  • need persuasive content
  • What do we have?
    • great sites
    • great speakers (in action)

Q&A

How do you sell info architecture to someone who doesn’t want it and doesn’t have the money?
expensive to change coded site, less expensive to build it right (faster, cheaper to change napkin drawing than coded site)