I’m working on a UX/admin project that contains a single-page form. I followed patterns that were already set up, and just updated the titles of the fields, not thinking twice about it. During our daily design critique, my team lead asked me if I knew about affordances. Nope. Well, maybe I had heard about it through an article a few weeks ago, but I didn’t really understand it. So after explaining a bit about it, he also recommended I read through Web Form Design by Wroblewski.
Although at first glance, it seems like it may be mind-numbingly boring (a 300 page book on data-entry forms??), it’s actually really pretty great. For a seemingly niche aspect of design, it covers a lot of various concepts including real-world examples, so you know right away how to apply what you’re learning. It really helped me to see a broader picture for UX design in general, such as understanding that all audiences are not the same, thinking through accessibility, measuring ease of use, getting people through tedious parts as quickly as possible, etc.
Putting Wroblewski’s research to practice is a grace for your user and potentially can help increase revenue for your company too (read page 26 if you’re wanting to see a real-world application).
- Looking at things “outside in” means starting from the perspective of the people outside your organization or Web site. How would they define being a member of your service? Chances are, they’d describe it differently than your database would. They’d talk about what’s on the other side of the form—for example, about the things they’d get or be empowered to do.
- When succinct labels may be misinterpreted, look for opportunities to use natural language to clarify the questions your forms ask people to answer.
- Organize the content on your forms into logical groups to aid scanning and completion.
- Consider asking optional questions only after a form is completed.
- Use initial capital letters to make the titles of content groups easier to scan.
- A single path makes it easier to process the questions a form is asking through a consistent layout. This, in turn, can increase completion rates by keeping people on task and ensuring that they see and respond to all the questions a form asks them.
- …generally about 50 to 75 percent of the height of an input field between each question works best.
- The difference between checkout and shopping on Amazon.com is stark. Even the site’s logo, which usually allows people to return to the Amazon home page, is deactivated to minimize ways off this crucial form.
- An accessible form takes into account the unique needs of users who have limited or no vision, limited or no hearing, limited physical movement, or cognitive impairments. Statistically speaking, there’s a 25 percent chance that could be any one of us at some point in our lives!
- Radio buttons: Allow people to select exactly one choice from two or more always visible and mutually exclusive options. Because radio buttons are mutually exclusive, they should have a default value selected.
- This basic analysis demonstrates that even seemingly simple data collection problems can be solved in multiple ways, with each solution presenting a unique combination of advantages and disadvantages. The job of the designer is to fully explore and analyze these possibilities in order to arrive at a solution that best satisfies the unique needs of the audience and application.