Functioning Form: Interface Design
http://www.lukew.com/ff/
Functioning Form: Merging medium and message in interface design, the user experience design process, Web applications, and more.en-usLuke Wroblewskihttp://www.lukew.com/img5/aim_icon.gifFunctioning Form> http://www.lukew.com/ff/2008-07-23<![CDATA[Impact of Removing Registration]]>http://www.lukew.com/ff/entry.asp?707Sign Up Forms Must Die, I advocated ways to get people engaged and interested in Web applications and services without requiring an explicit sign-up form. In many cases, registration is an obstacle that prevents people from exploring and engaging with an application.
Since then, several people have asked what the impact of removing registration would be on content quantity (does removing sign-up forms increase participation) and content quality (will quality go down if registration is not required). Not too long ago, the community news site, Topix published details behind their experience killing sign-up forms.
The results?
Since removing registration, volume has exploded and passed a quarter-of-a-million aggregate posts
And the quality of posts? The post kill-rate (removal) actually dropped -hovering below 2%. This is less than half of the number incurred when registration was in place.
Tags: forms, balance, metrics]]>2008-07-23LukeW<![CDATA[10% Sign up Improvement with one Change]]>http://www.lukew.com/ff/entry.asp?706Sampa sign up form. Sampa is a free Web site service that requires users to register before they set up a site and saw a 10% increase in sign-ups with one change: removing CAPTCHA.
The Sampa sign in form has been through 4 or 5 different versions
At one point Sampa asked about 15 questions
ampa A/B tested several sign up form scenarios over the last 2 years to determine the right combination that yields maximum conversion and retention
CAPTCHA was used to prevent automated bots from creating hundreds of thousands of fake accounts
Sampa removed CAPTCHA 99% of the time through a set of tests and rules
The result: 9.2% improvement on our conversion rate
Tags: forms, Web conventions, metrics]]>2008-07-20LukeW<![CDATA[Web Symposium: Web Form Design Best Practices]]>http://www.lukew.com/ff/entry.asp?705In my Web Form Design Best Practices talk at the Higher Education Web Symposium in Philadelphia, PA, I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.
Some of the topics I discuss and provide patterns for are: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more...
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.
Tags: forms, guidelines, interaction design, visual communication, usability, UI components]]>2008-07-18LukeW<![CDATA[Gourmet Experiences on a Fast-Food Budget]]>http://www.lukew.com/ff/entry.asp?704Higher Education Web Symposium in Philadelphia, PA Jared Spool discussed it takes to make great experiences without a big budget.
What is behind a gourmet experience: meticulous preparation, quality ingredients, and a creative approach.
How do the best teams create design? Jared researched teams that delivered great designs and teams that tried to deliver great designs but failed. All the usability issues they found could be traced to someone missing key pieces of information. As a result, these people were not able to make appropriate decisions.
Every usability problem comes from decisions made without the right information.
A process is a series of steps to get something done. Everyone has a process. A methodology is a formalization of process that is enforced when we need other people to the same thing, multiple times. Dogma is an unquestioned faith independent of any supporting evidence.
When Jared began his research on design teams, he suspected there was a good methodology or dogma that every organization worked with to achieve consistently great results. It turned out the opposite was true.
Very few teams had methodology or dogma. Instead, all successful teams had techniques and techniques.
Techniques are the building blocks of a process. They need to be practiced in order to be mastered and require trial and error. Tricks are quick and easy and perhaps not the best way of doing things but they “just get things done”.
Best teams did not have a methodology or dogma, but everyone had techniques and tricks that the whole team knew.
Three core User experience attributes: vision, feedback, and culture.
Vision: can everyone on the team describe your vision five years from now? Where will your product be?
Feedback: in the last six weeks, have you spent more than two hours watching someone use your or a competitor’s design?
Culture: In the last six weeks, have your rewarded a team member for creating a major design failure? Every time there is a design problem, we learn something about users, their needs, and what we should be doing for them.
Meticulous Preparation: identify if your pages quickly communicate their purpose.
Quality ingredients: make sure you have content that matters to people.
Creative approach: look for opportunities to get things to work.
Tags: design organizations, process, user experience]]>2008-07-17LukeW<![CDATA[Product Manager's Dreams]]>http://www.lukew.com/ff/entry.asp?703Designer: "Designers visualize Product Managers' dreams. Developers make the dreams work."
Design manager: "Designers turn product manager's responsibilities into things customers dream about."
Tags: design vision]]>2008-07-13LukeW<![CDATA[Sign-Up Form Patterns]]>http://www.lukew.com/ff/entry.asp?702Sign-Up Forms Must Die, for now they remain a staple of online life. Recently Smashing Magazine surveyed the landscape of sign-up forms by looking at patterns in 100 popular Web destinations and their registration forms . The data they extracted is a catalog of existing practices and as a result should not be considered design recommendations. However, it is interesting to see these trends and ultimately if they change over time.
the registration link is most often titled “sign up” (40%) and placed in the right upper corner of a landing page
registration forms tend to opt for a simplified layout to avoid distractions for users (61%)
most registration forms are one-page-forms (93%)
registration forms attract visitors by explaining the benefits of signing up (41%), 28% provide no additional information about benefits
titles of the input fields are highlighted bold (62%), rendered in color (20%), or plain text (18%)
right-aligned labels are used on 41% os registration forms surveyed, 30% used top-aligned labels, 29% use left-aligned labels
54% of the forms surveyed required at most 5 input fields, 34% of the forms required 6-8 input fields, while 12% required over 9 mandatory input fields
78% do not use asterisks to highlight required input fields
62% of the forms had no optional fields at all, and 98% of the forms had less than 5 optional fields
9% use a progress indicator to show to the users where they currently are and which steps are required
86% of registration forms surveyed have input fields arranged vertically
57% of the forms surveyed provided help text next to the input field, 10% of help text appears dynamically
Help text was most often placed: below the field (57%), on the right side of the field (26%), above the field (13%)
30% of the forms surveyed displayed only an error-message at the top of the form (no input fields were highlighted), 29% had highlighted input fields with corresponding messages next to the input field, 25% used both error-messages and input fields
22% used real-time validation with Ajax, 14% used JavaScript-error warnings
Only in 18% of the cases it was necessary to confirm the e-mail
In 72% of the cases it was necessary to confirm the password
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.
Tags: forms, Web conventions]]>2008-07-09LukeW<![CDATA[Web Form Design: Goodreads Review]]>http://www.lukew.com/ff/entry.asp?701a detailed review of my new book Web Form Design:
"Good or bad, there aren't many books that I can use for my job that I go through quickly. There's just something about a limit to my absorption of information from these books that makes me take my time to get through them. However, that was not a problem with this book. Chock full of good information, Wroblewski manages to make it a quick, easy and yet informative read that only took me 2 days cover-to-cover. For anyone that works on the web, forms are going to be something you deal with at one time or another. Usually, it's an experience in trying to get a form to do what YOU want it to do without regard to what the customer really wants or needs. However, I've been working on a bunch of projects recently where I really need to consider what the customer wants because one of our main goals is to get users to register, and I know how fickle they are when it comes to signing up for things. So, this book was not only interesting but very timely.
The best thing about the book is how well written it is. It's fairly simplistic in getting its point across, using a lot of illustrations to really drive home the points that the author is trying to get across. His tone and personality really mesh with how the book is presented, making it almost conversational as he explains some of the major concepts and then delves deeper into the best ways to develop and present forms.
Each chapter is relatively short (about 8 - 21 pages), but chock full of good advice. The succession will also help people trying to make their forms better work their way into more and more elaborate ways of creating 'bulletproof' forms. While you won't get as far in-depth as you might need on any given topic (I wanted to know more about error messaging, a personal anathema right now) or much about the coding of the pages, the principals and direction are dead on.
As I said, the language and personality Wroblewski - whose credentials include former Lead Usability Designer at eBay, founding member of Interaction Design Association (IxDA) and current "Senior Principal of Product Ideation and Design" at Yahoo! - create a more approachable presentation than you might think from someone who is one of the leaders in usable design. Less teacher and expert-on-high and more friendly "have a beer and chat" usability guru, I found it easy to get sucked into one chapter and not look back until 3 chapters later.
The examples he uses are also top-notch. Granted, he has a great body of work to pull from, but he does a great job of using examples from a breadth of industries and user types -- everything from Fortune 500 banks to e-commerce to new Web 2.0 social networks are represented, showing that good form design isn't for any single audience. The illustrations are also well-placed in showing principles and comparisons between different methods, adding to the ease with which someone can learn how to build the better form.
His information comes from more than just his own experiences, though. Several key studies provide relevant data that give credence to the ideas presented here. He's not afraid to say, 'It depends' when it does or to say that while something might be a bad idea for the most part (and here's way), that you couldn't make it work in some limited situation. He offers what seems to be the best way to accomplish certain things within a form, without putting his own personal feelings into it (well, for the most part - and when he does, it's always in a humorous manner).
And this is a book that anyone can use - not overlay-laden with technical terms, it's instead a thorough but amazingly understandable set of observations, suggestions and instructions on how to make the forms you are creating eminently more usable for all those involved - but most especially for the customers or visitors of the sites we're building. I needed it to answer a couple specific questions I had, but it quickly opened up other paths and solutions for me I wasn't yet considering.
At this point, I have to say that this is probably one of the best UX books I've read. It might not be as thorough and ground-breaking as Saffer's "Designing for Interaction" or Zeldman's "Designing with Web Standards", but for the specificity of the topic, it really does a great job a covering all of the bases and giving real-world, actionable examples and guidance. A great buy - and I think that if you , you also get a PDF version (great because it's searchable."
Tags: forms, Web applications]]>2008-07-07LukeW<![CDATA[Event & Discount Code: An Event Apart, San Francisco]]>http://www.lukew.com/ff/entry.asp?698On August 18th I’ll be speaking at An Event Apart in San Francisco, CA about Web Application Hierarchy.
I'll walk through how people parse Web pages and the implications of this behavior for designers. Specifically, using the principles of visual hierarchy to communicate key information about the purpose and use of Web applications.
If you are interested in going, feel free to use the discount code: AEALUKE for savings on the event cost. Official Description
When a potential customer makes it to one of your pages, what will they do? Do you want them to sign up, share knowledge, buy something, or dive deeper into your content? Don’t leave these decisions to chance. Learn how people scan web pages and how to guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. Includes multiple before and after examples.
"A well-designed form is barely noticeable. But that doesn’t mean the design process is. Like most design problems, achieving a concise design that seems, in retrospect, obvious, requires much work. There are myriad factors to consider, each with multiple alternatives, each with its pros and cons. Should we have one long form or a sequence of short forms? Should help be provided in-line with the form controls, on the side, or on top? At what point should we validate fields and deal with errors? You could fill a book with the subtleties of form design.
Fortunately, Wroblewski has written that book. Drawing on years of experience designing for eBay and Yahoo, he has cataloged the major considerations involved in creating forms. He walks the difficult line between writing for novice and veteran designers. Web Form Design: Filling in the Blanks is an excellent guide for new or de facto designers and a handy reference for veterans. Wroblewski has done the dirty work for us in researching what works best. By following his advice, we—and our users—can quickly and competently get through the forms and onto the fun stuff."
Check out the full review in the printed version of Interactions magazine or access the PDF of the review if you are an ACM member.
Tags: forms, Web applications, interaction design, visual design, interface]]>2008-07-02LukeW<![CDATA[Web-Conscious Content Experiences]]>http://www.lukew.com/ff/entry.asp?699Web-Conscious Content Experiences about how content pages can be better optimized for the Web ecosystem. Here's a preview:
"In today’s search-driven, social, and distributed Web, people are finding their way to content through an increasing number of distinct experiences. Content-aggregator sites like digg and del.icio.us, display surfaces like Facebook and MySpace, content creation sites like blogs and wikis, search engines like Google and Yahoo!, and communication tools like email and instant messaging are all responsible for an increasing amount of traffic to Web content pages.
But when people arrive, the Web page they get isn’t optimized for these circumstances. Instead, the vast majority of content pages online remain more concerned about their place within a website rather than their place on the Web. These pages are designed as if they were primarily accessed from a website’s home page or a carefully thought-out selection from the site’s information architecture.
While these are all worthwhile considerations, they go only so far. In fact, studies conducted on content pages have shown that too much of an insular approach can actually prevent sites from achieving their goal of increased engagement and returning customers. So instead of presenting content only as part of a specific website, consider presenting it as part of the entire Web as well."
Check out the full article in the printed version of Interactions magazine or access the PDF of the article if you are an ACM member.
Tags: context, guidelines, interaction design, Web OS, user experience, patterns]]>2008-07-02LukeW<![CDATA[Smart Nodes in An Organization]]>http://www.lukew.com/ff/entry.asp?697Influencing Strategy by Design course, Tom Chi and I walk through some global trends that provide designers with an opportunity for leadership roles. Specifically Tom illustrates the transition from the 1800s craft economy to the 2000s creative economy.
In the craft economy of the 1800s, regional markets were filled with individual or family-based craftspeople like blacksmiths or potters. These professions required creativity, were small size (no scale), and did not need a lot of collaboration to get products made.
In the industrial economy of the 1900s, small craftsmen gave way to large factories and the need for tight command and control grew as scale increased. Lots of coordination was required to develop consistent products within the assembly lines popping up across developed nations. As a result, the need for creativity was limited to fewer people. Most workers had a defined role in the system and needed to be reliable above all else.
In the economy of the 2000s, creativity is once again a key driver of value as command and control structures can no longer manage the full set of information and decisions required to operate at a global scale. This creates a need for “smart nodes” across the enterprise that can collaboratively lead aspects of the business. These leadership positions are enabled through access to large amounts of data and technology. Creativity is required to make use of this information and set of tools to advance the goals of the organization.
Harvard Business Review recently echoed this sentiment in an article by Rosabeth Moss Kanter titled Transforming Giants: “Employees once acted mainly according to rules and decisions handed down to them, but they now draw heavily on their shared understanding of mission and on a set of tools available everywhere at once. This shift … is now happening with dramatic effects.”
The importance of creative thinking and “smart nodes” within large organizations plays to the strengths of designers who are adept at recognizing patterns, synthesizing information, and communicating it through visual means. In other words, it creates an opportunity for designers to lead.
Tags: strategy, collaboration, design organizations, creative class, convergence, theoverlap]]>2008-06-30LukeW<![CDATA[Smart Defaults in Travel Booking Forms]]>http://www.lukew.com/ff/entry.asp?691The Paradox of Choice- are selections put in place that serve the interests of most people. Because smart defaults are designed to help people make good choices, we can utilize them in Web forms to expedite form completion. The trick is to ensure that the defaults in our forms align with our customers’ goals.
As an example, let’s look at the rather standard “Book a Flight” form on JetBlue’s site. Among the expected questions of where are you going and when is a set of questions about number of adults and/or kids traveling on this flight.
Now last I checked, the majority of people booking flights online are adults and they generally intend to travel on the flight they book. So defaulting this value to zero might not serve the interests of most people filling in this form. In fact, on more than on instance I’ve found myself with an error when I inadvertently left the default of zero travelers in place.
Perhaps Jetblue has a high quantity of kids traveling alone or with families and wants to make sure each person booking a flight explicitly considers how many travelers are going. But it seems to me other travel sites like Expedia (pictured above) got it right with a smart default of one adult traveler.
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.
Tags: forms, guidelines, decision making]]>2008-06-26LukeW<![CDATA[An Event Apart: Web Application Hierarchy]]>http://www.lukew.com/ff/entry.asp?692In my Web Application Hierarchy presentation at An Event Apart Boston 2008, I walked through the importance of visual hierarchy, visual principles for developing effective hierarchies, and utilizing applications of visual hierarchy to communicate central messages, guide actions, and present information.
Official Description
When a potential customer makes it to one of your pages, what will they do? Do you want them to sign up, share knowledge, buy something, or dive deeper into your content? Don’t leave these decisions to chance. Learn how people scan web pages and how to guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. Multiple before and after examples will be shown.
Tags: Web applications, visual communication, visual design]]>2008-06-24LukeW<![CDATA[An Event Apart: Good Design Ain’t Easy]]>http://www.lukew.com/ff/entry.asp?696Good Design Ain’t Easy talk at An Event Apart 2008 argued for deeper graphic resonance in the presentation of content online.
We are trained to look for stories within images. These images have a huge impact on how we interpret content.
Graphic resonance can be used to control how the story unfolds. It helps set the mood.
Information visualizations can tell dramatic stories as well –Tufte march to Moscow diagram
Wired magazine sets the tone for stories in its printed version through layout and typography. When these stories are moved online, we loose the impression that design was able to create on us.
We have distilled stories into content online. They lack the impact of printed materials.
“Design can’t not communicate.” –David Carson
Why are there no landmark Web designs? The Nature of the Medium may be to blame.
Constraints of a page exist in print: width & length. Pages can extend infinitely on Web. But are only seen through size of browser window.
Large size of Web page gives you license to talk –add lots of stuff. Entire structure of book: cover, contents, copyright often ends up needing to be included on single page.
The design of printed pages can’t change. Web pages can be re-structured by fonts, colors, etc.
Collections of Pages: by looking at book, we can get a sense of scale. We are missing that online.
Layout: missing ability to exploit ratios like golden ratio because of layout capabilities. We can’t rely on fixed dimensions online. Perhaps width but even then not certain.
It’s not possible to look at designs online through the lens of print. We can’t compare the two in the same way.
Tags: visual design, personality, persuasive design, aesthetics]]>2008-06-23LukeW<![CDATA[An Event Apart: The Lessons of CSS Frameworks]]>http://www.lukew.com/ff/entry.asp?695An Event Apart Boston 2008, Eric Meyer walked through common characteristics of several Cascading Style Sheet (CSS) frameworks and outlined lessons that can be learned from their structure.
CSS frameworks abstract away a lot of the layout work that is required when coding CSS.
Popular frameworks include: 960, blueprint, content with style, elements, that standards guy, Tripoli, WYMStyle, YAML, YUI
None of these CSS frameworks are right for you. You need to create solutions that are appropriate for the work you do. However, they can provide valuable lessons.
All frameworks have set of reset styles, default color sets, and fonts defaults. Most frameworks leave forms alone as styling forms is difficult. Few have print styling options. Many frameworks support multiple layout options.
Most font resetting is done at 12 or 13 pixels. Line height should always use a scaling factor. If set in ems, it will propagate through the document tree.
No frameworks make headings smaller than paragraph text. HTML4 allows some headings to be smaller.
Naming Conventions: pick whatever layout and add appropriate class name (grid1, column2, column3) or use universal element naming (header, main, footer, nav)
Layout can be managed by invoking an appropriate style when all styles are included in a single CSS file. Though you are loading every possible layout when only need 1-2, this can improve performance for sites with lots of traffic. In these cases, the fewer hits on the server the better as the number of hits quickly becomes the gating factor for performance not the size of a document.
An alternative method for managing styles is simply linking to an appropriate style sheet with the layout you want. Caching allows linked files to be available for some returning users.
Hacks in CSS frameworks tell us what CSS is missing and what browser issues exist. Common hacks in CSS frameworks include: fixing problems with clearing for ways to wrap content around floating elements, pseudo-padding for defining what width means for an element, and Internet Explorer 6 support.
Frameworks can include styling for external, internal, mailto, links using attribute selectors but we can’t relay on these as IE6 does not understand them.
Some frameworks include compressed files with no comments or extra white space, which are designed for machines.
Several frameworks include debugging styles: show grids, layouts
Best practices from CSS frameworks include:
Use a directory structure for different CSS file types
In my Web Form Design Best Practices talk at the Higher Education Web Symposium in Philadelphia, PA, I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.
