The way the conference works, the first and last day are full-day sessions, where you select one of four sessions each day. The middle day has four hour and a half sessions where you choose one of teo tracks, and a one hour keynote by Jared Spool. For this year’s conference, I chose Luke Wroblewski’s ‘Web Form Design and Beyond’ as my full-day session for day one, and Nathan Curtis’ ‘Standards, Resuse, Consistency, & Libraries’ as my full-day session for day three.

Web Form Design and Beyond

I had seen Luke Wroblewski give his ‘Mobile First’ presentation at the 2010 ‘An Event Apart’ in Boston, and liked it a lot. Choosing his talk over Kristina Halvorson’s ‘Everything You Need to Create a Content Strategy,’ Dave Gray’s ‘Visual Thinking for User Experience’ and Kim Goodwin’s ‘Designing with Scenarios: Putting Personas to Work’ was really no choice at all for me, though I do recognize that each of the other workshops had great materials and presenters. Luke divided the day into 3 sections: Best practice Bingo, Your questions answered, and Moving beyond web forms.

The first question looked at was how to deal with long forms. In a typical checkout flow, he tested three types of forms and looked at the success results

1. Multiple page form
2. One long page
3. Inline multi-step (accordion) form. This is what Apple uses in their store.

What he found is that all versions delivered 100% pass rate. Conversion did not go up or down with the accordion form. Using one page, multiple pages, or an inline multi-step form does not inherently impact completion. So the question was, what does? The answer? Removing fields is the best way to increase completion, and therefore, conversion. He compared a 11-field contact us form and a 4-field contact us form. /there was a 16% increase in the number of forms submitted, and a 120% increase in conversion ratio. In addition, the quality of submissions remained the same. So the takeway is to remove unneccessary fields. In their checkout page, Expedia removed the optional ‘Company’ field and conversion jumped.

If you DO feel that a particular optional field has to be in your form, label it as optional. Typically we denote requred fields, but do not call out optional fields except by their lack of the asterix marking a requred field. Add an indicaotr that a field is not required. But best of all, have a hard conversation about every single field, and removed all of them that you can. Use inside out vs. outside in thinking: imagine someone on the other side looking at your form. Remember this proverb, thinking how it relates to optional fields: “no one raindrop believes they are to blame for the flood.”

Sometimes the optional thing is an action, not a field. We looked at a real-life case study where the first page in a checkout form had two buttons: Login or Register. By changing the label on the Register button to Continue, and adding a “you do not need an account to buy” message, there was a 45% increase in the number of purchasing customers, which resulted in at $1.5M increase in the first month, and $300M increase in the first year.

Take the hard path about evaluating what info you need.

1. Take the time to evaluate every question you ask.
2. Strive for succintness.
3. If a form naturally breaks down into a few short topics, use a single Web page.
4. Multiple pages help organize but…Removing requirements has impact!
5. When a form contains a large number of questions that are only related by a few topics, try multiple Web pages.
6. When a form contains a large number of questions related to a single topic, one long Web page.

Next, we went through 10 best practices relating to forms.

Form Organization

• Avoid multi-column forms, as they are hard on eye tracking, and don’t work well on mobile.
• Illuminate a clear path to completion. Use some type of progress indicator.

Label alignment: What works best?

• Left-aligned labels
  • Work best when data required is unfamiliar
  • Enable label scanning
  • Less clear association between label and field
  • Work best when you require less vertical space
  • Changing label length may impair layout
• Right-aligned labels
  • Work best when clear association between label and field is desired
  • Work best when you require less vertical space
  • More difficult to just scan labels than left aligned
  • Fast completion times
• Top-aligned labels
  • When data being collected is familiar
  • Minimize time to completion
  • Flexibility for localiaztion and complex inputs
  • Easier to code: no floats or tables
  • Accessibility: label, field in order
  • Better format for mobile
  • Support multiple screen resolutions
  • Require more vertical space

So how to summarize label findings? For reduced completion times & familiar data input or mobile: top-aligned. When vertical screen space is a constraint: right-aligned. For unfamiliar, or advanced data entry: left-aligned.

Help & Tips

Minimize the amount of help & tips required to fill lout a form.

Luke’s current book is Web Form Design on the label Rosenfeld Media

Featured Talks

On day two, the first set of talks were Dave Gray ‘Gamestorming,’ or Kristina Halvorson ‘Message and Medium: Better Content by Design.’ I chose the David Gray talk, as I had seen Kristina Halvorson talk before, and had never seen David Gray. His talk was like Leah Buley’s, in that we had to draw on large sheets of paper and present ideas quickly as a team.

For the second set of talks, it was Luke Wroblewski ‘Why You Should Design for Mobile First,’ or Kim Goodwin ‘Getting Design into the Corporate DNA.’ Even though I had spend a full day with Luke already, I chose his session, and was glad I did, as I got new information, and solidified concepts I had first seen the day before. I also got to ask him questions that came up when I built my first mobile site the night before.

After lunch, Jared Spool gave his keynote, ‘Anatomy of a Design Decision.’ I had seen him give this talk at An Event Apart, so while I was engaged even a second time, I was not thrilled. Last year I saw him give his ‘Secrets from the Amazon’ talk two times as well. I wish he gave a new talk instead. Additionally, add day we had to choose between two sets of speakers, yet for his talk, everyone had to listen to him – there was no other choice. I don’t think that was fair, especially to deliver a reheated presentation that many had seen elsewhere.

For the third set of talks, it was ‘Hands on Prototyping with HTML & CSS’ by Dan Rubin, or ‘The Secrets to Developing Successful Personas’ by Tamara Adlin. I had seen Dan Rubin last year and did not like his presentation, so I chose Tamara Adlin. Her talk was really good, and was on a subject I have very little experience with.

For the final set of talks for the day, it was ‘How to be a User Experience Team of One’ by Leah Buley, or ‘How to Create a UX Library’ by Nathan Curtis. As I was going to Nathan’s full-day session on day 3, I chose Leah Buhley, even though I had seen the exact same presentation by her at UI14. Leah is a skilled presenter, and her session was a joy.

After the seesion, it was time for the networking party. My wife Dorota met me there and we both had a great time. She got to meet my new freind Gil Paran, who came to the conference from Tel Aviv, and some of my other new friends as well. The food was good, there were tons of drinks for free, and, as has become a tradition at UI conferences, Jared’s son did magic tricks to a small crowd.

Standards, Resuse, Consistency, & Libraries

It was the final day of the conference, and many people seemed weary from keeping late hours the night before. The workbook for this session seemed very detailed, so I had a good feeling about the session. Adding to this, Jess McIsaac sat next to me. She works at Carbonite under my old boss, Rob Rubin. I enjoy talking to her, and we had sat next to each other last year at a session as well.

We talked about Design Standards, which are guidelines recorded to help others at a later date. Then we covered Design Patterns. We were presented with a quote by C. Alexander that went “Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over…without ever doing it the same way twice.” We were also given a second quote by Jennifer Tidwell “A pattern is a global solution to a common design problem.” Finally, we talked about components, which he defined as reusable chunks of page design. We did several exercises during the day, and they were more conceptual/social exercises than true learning experiences for me.

When the day was said and done, I realized that I had not really enjoyed or gotten a lot out of the day. The words used in the title of the workshop have different meaning to me that to him. To me, ‘Standards’ means Web Standards, ‘reuse and consistency’ mean OOCSS that speakers such as Nicole Sullivan evangelize, and ‘libraries’ means JavaScript libraries like jQuery. So I probably chose wrong on this session. Even though I gave it my full attention, I didn’t get any life-changing epiphanies of of the full-day session.