LukeW Interface Designs
Functioning Form: Context, Consistency, Clarity, Control.
About Archive

Functioning Form: 2008 Retrospective

12.28.2008 by LukeW

As 2008 comes to a close, I present a Functioning Form anniversary special: eight of 2008's public and personal favorites. For even further nostalgia, check out my seven favorites from 2007, six favorites from 2006, five from 2005, and four favorites from 2004.

2008 Favorites (the most popular articles this year)
Sign Up Forms Must Die
"I discuss alternative approaches to getting people engaged and interested in Web applications and services. Ways that don't require an explicit sign-up form."

Video: The Business Value of Design
"Video from the Business Value of Design panel with myself, Dave Blakey (IDEO), David Watson (Disney/ABC), Jason Brush (Schematic), Jimmy Kim (Nexon), and our moderator Will Tschumy (Microsoft)."

International Address Fields in Web Forms
"I outline many of the international address variations designers need to consider and a few solutions to the problem."

Audio: Content page design best practices
"Content Page Design Best Practices talk at IA Summit 2008, where I presented a framework for thinking about how to optimize content pages for the dynamic ecosystem of the Web instead of the structured hierarchy of a Web site."

Some Things I Learned From Architecture School
"I read through Matthew Frederick’s 101 Things I Learned in Architecture School. Among the many insightful points is a set of design principles and approaches that really resonated with me as a digital product designer."

Smart Nodes in An Organization
"I walk through some global trends that provide designers with an opportunity for leadership roles."

Previous and Next Actions in Web Forms
"A discussion on the placement of actions in Web forms that span several Web pages."

Audio: Visual Design Misconceptions with Luke Wroblewski
"I talk a bit about common Visual Design Misconceptions and the importance of visual design in helping users accomplish core tasks and strategic business goals."

More retrospectives: seven favorites from 2007, six favorites from 2006, five favorites from 2005, and four favorites from 2004.

| Tags | TrackBacks: 0

 

Event: Interaction 09 | Vancouver

12.16.2008 by LukeW

On February 5-7, 2009 I'll be presenting a workshop and speaking at the Interaction 09 conference in Vancouver, BC Canada. This year's program looks great and I'm very happy to be part of it.

Interaction 09

On Thursday, February 5th, I'll be teaching a full day workshop on Web Form Design. This workshop was the top-rated session at last year's Web App Summit and I've updated it with material on just about every aspect of form design you could imagine including: form organization, rich interactions (with Ajax), gradual engagement, global design, and lots more! Sign up to attend today and save $50 on the workshop.

On Saturday, February 7th, I'll be presenting a talk titled Parti & The Design Sandwich. Official descriptions for both sessions follow:

Web Form Design
In the world of Web applications, forms bridge the gap between people, their information, and your product or service. From registration forms that welcome new customers to checkout forms that finalize e-commerce transactions, Web forms frequently broker crucial online interactions.

In his full-day workshop, Luke Wroblewski, author of the bestselling book Web Form Design, will walk you through design considerations and best practices of form design culled from international site-tracking, usability testing, eye-tracking studies, and over eleven years of designing Web applications. He'll outline how the interaction and visual design of Web forms can make the difference between acquiring a customer and completing a transaction or not.

Through presentations, discussions, and hands-on exercises, attendees will learn how different types of forms, input fields, input labels, validation, feedback, calls to action, and surrounding visual elements can support or impair different aspects of user behavior. The workshop is structured to provide attendees with an understanding of the right "best" practices for their specific context, so they can quickly go from the quintessential design answer of "it depends" (on the business goals, user needs, and context of your forms) to actionable solutions. After this workshop, you'll never look at web forms the same way again.

Parti & The Design Sandwich
In architecture, parti refers to the underlying concept of a building. Will it be a public structure that provides safety or a commercial building focused on customer up-selling?

Design principles are the guiding light for any parti. They articulate the fundamental goals that all decisions can be measured against and thereby keep the pieces of a project moving toward an integrated whole. But design principles are not enough.

Every design consideration has a set of opportunities and limitations that can either add to or detract from the parti. Designers who want to bring coherent visions to life need to learn the detailed ins and outs of design considerations so they can select the best solutions from the options available.

This combination of design principles at the top and design considerations at the bottom allows interaction designers to fill in the middle with meaningful structures that enable people and organizations to interact, communicate, and get things done.

In this talk, Luke Wroblewski will illustrate how the World’s most accessed Web page, yahoo.com, was redesigned with a parti and the design sandwich.

 

Input Masks Design

12.13.2008 by LukeW

Input masks integrate formatting cues directly into an input field to help signal how to correctly answer a question. These formatting instructions are automatically included in an input and cannot be removed by a user. More importantly, a user cannot enter other non-valid characters into the input field. Check out the demo at Masked Input Plugin (video below).



When implementing input masks, it’s a good idea to surface the formatting right up front and not gradually reveal it as people enter information into an input field. Contrast the example above with the one at Dynamic Field Masking (video below).



Here the formatting is added to the input as a person types and valid characters (like the $ in the second input) are show for a second when added by a user, then removed despite being part of the correct format. This example illustrates, that like all dynamic solutions, for input masks the details of implementation matter a lot.

Reformatting a valid input after it has been entered correctly by a user, however, can help reinforce that a valid answer was provided. So if you are thinking of reformatting an input for people, wait until they are done answering your question!

 

Signaling Flexible Inputs

12.08.2008 by LukeW

For a while, I’ve been advocating the use of flexible inputs within Web forms. These input fields allow people to answer questions the way they want instead of the way a database requires them to.

For instance, there are basically five different ways a valid phone number could be specified in the United States. A simple script can check to see if one of these has been used and then submit the information in whatever format the back-end system requires. The chore of adhering to a specific format is taken off the person providing an answer and instead given to a small bit of code.

flexible inputs

While most designers agree this is a good thing, I often get asked how people would understand that any valid format can be entered into a flexible input field. Because many forms still enforce specific formats through adjacent help text or strict input field affordances (as illustrated in the image above), can people answer questions correctly in the absence of these signals? The short answer is yes.

Despite people being “trained” to fill in forms the way computers require them to, I haven’t seen much of the hesitation and over-thinking designers fear when explicit formatting signals are not present. When no explicit formatting cues bound an input field, people tend to gravitate to their format of choice. Provided that format is a valid answer, the successful submission of the form is all the acknowledgement people need to indicate the question was answered correctly.

However, if you are still concerned people “won’t get it” because they are “used to” having to employ specific formats to answer questions, you could try using a flexible input and also including a bit of help text that hints at a specific format. In this model people who read the help text and adhere to the recommended format and those who don’t can still be successful. And since many people do not read instructions on screen, you could simply think of flexible inputs as a way to mitigate error states for those who don’t read.

web form design
For more on Form Design...
Check out Luke's book about Web form usability, visual design, and interaction design considerations: Web Form Design: Filling in the Blanks.

 

Design Skills for Strategy: the short version

12.04.2008 by LukeW

Here’s an abridged version of four core design considerations that provide unique value to strategic decision-making:

  • Pattern Recognition: allows us to identify relationships within information. (the data).
  • Story Telling: gives us a way to organize data into something meaningful by focusing on a big idea and supporting messages (the synthesis).
  • Visual Hierarchy: gives us a way to tell the story effectively (the means).
  • Empathy: allows us to make the story memorable and impactful (the meaning).

 

Modern Web Form Design recording available

12.03.2008 by LukeW

A recorded version of my Modern Web Form Design webinar is now available for purchase at the Rosenfeld Media site.

web form design
Official Description
The Web has been transformed by the recent proliferation of rich interactions and social applications. But the workhorses of the online world, Web forms, have been slow to evolve with these changes. As brokers of crucial online interactions like e-commerce checkout and registration, forms bridge the gap between people, their information, and your product or service. As a result, Web form design matters. But web forms aren't keeping up.

Building on topics in his top-selling book, Web Form Design: Filling in the Blanks, Luke Wroblewski will walk you through the latest applications of rich Web form interactions (made possible by dynamic technologies like Ajax) including: flexible inputs, dynamic help systems, inline validation, selection dependent inputs, and more. He'll also outline how gradual engagement approaches to form design can create compelling new user experiences for a wide variety of Web applications and services. Learn how these modern approaches to Web form design can enhance your sites!

 

Local Market Factors that Influence Design

11.30.2008 by LukeW

While presenting our Influencing Strategy by Design workshop overseas earlier this year, Tom Chi and I compiled a short list of factors that can influence Web application design decisions in specific local markets:

 
Top   |   Archives