background preloader

An Extensive Guide To Web Form Usability

An Extensive Guide To Web Form Usability
Advertisement Contrary to what you may read, peppering your form with nice buttons, color and typography and plenty of jQuery plugins will not make it usable. Indeed, in doing so, you would be addressing (in an unstructured way) only one third of what constitutes form usability. In this article, we’ll provide practical guidelines that you can easily follow. These guidelines have been crafted from usability testing, field testing, website tracking, eye tracking, Web analytics and actual complaints made to customer support personnel by disgruntled users. Why Web Form Usability Is Important The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” Let’s clarify this last point by discussing the three main uses of forms. Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks2. Thus, the relationship between forms and usability have two aspects: 1. 2. Related:  Web page usability & SEO (Search Engine Optimization)

Set Your Measure: Optimizing Line Length for Reading | Adam D. Scott This post is part of a series entitled Better Web Typography that I will be publishing over the coming months. Widescreen monitors are quickly becoming ubiquitous and from high resolution desktop monitors down to little 13” laptops we’ve grown accustomed to designing for ample screen real estate. For many web designers this creates an overwhelming temptation to fill that space. Unfortunately, when setting blocks of type, this is often done at the readers expense. Services such as Readability, Instapaper, and Safari’s own Reader have grown in popularity in part to aid readers in overcoming this obstacle. Simply put, though they can easily be found all over the web, long line lengths are difficult to read. In The Elements of Typographic Style, Robert Bringhurst suggests: Anything from 45 to 75 characters is satisfactory. 66-character lines are ideal. How Can This Translate to the Web? The most basic way to test the line length of our content is to subject it to the “alphabet test.” Conclusion

Label Placement in Forms By Matteo Penzo Published: July 12, 2006 “We were able to subject Luke’s theories to usability testing and enrich them through the power of numeric data.” In using eyetracking to evaluate the usability of search forms for my previous article for UXmatters, “Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach,” we discovered much interesting data. Please note that our ad-hoc test setup didn’t resemble real-world conditions. We based our test setup on Luke Wroblewski’s article “Web Application Form Design.” Luke provided valuable insights and feedback during both our test preparation and results analysis. During the process of building the forms that we would test, we tried to respect Luke’s suggestions regarding the relationship between label placement and formatting and the type of form content—well-known data versus unfamiliar data that requires thought. Test 1: Left-Aligned Labels to the Left of Input Fields Test 3: Left-Aligned Labels Above Input Fields

Ideal line length for content Date: 3 May 2003 Author: Russ Weakley Is there an ideal line length for content? To quote a passage from “Web Style Guide – Basic design principles for creating web sites”. The ideal line length for text layout is based on the physiology of the human eye… At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. The challenge I’d like to design a site that uses optimal line lengths. Layout methods Most websites lay out content used either fixed width (set to an absolute measurement) or flexible width (set to a percentage of the screen, so that it scales in or out based on the browser window). Fixed-width columns can be used to set column widths that are ideal if users have their fonts set to browser defaults. Flexible-width columns also have problems. The second problem is placing the responsibility on the user. A solution The solution may be to set column widths using em‘s. width: 30em;

How to improve the usability (and conversion rate) of your forms Nobody enjoys filling out forms (unless they have some sort of a form filling fetish, in which case they clearly need help) but at least you can minimise the pain for your users by ensuring that your forms are as easy to use and as well designed as possible. In this article I outline some hints, tips and best practice guidelines for improving the usability (and resulting conversion rate) of your forms. Form design Keep forms as short and simple as possible A good rule of thumb when it comes to form design is to try to keep your forms as short and simple as possible, but no simpler. Don’t make users think any more than they have to Ask me the month and year I bought my last car and I could probably tell you. Make forms as standard as possible Your users will have filled out countless forms prior to yours so it makes sense to try to make your form as standard as possible. Let users know what to expect Form layout Break complex forms up into bite size chunks Show the user’s progress Labels Inputs

Making Infield Form Labels Suck Less Let me start off by saying you really shouldn’t put form labels—or even placeholder text—inside of form fields if you want to be safe. But we can’t always play it safe. Sometimes putting labels inside of form fields is the best option we’ve got. Jeremy Fields, Steve Schoeffel, and I found ourselves making that decision on a recent project, and we set out to make the best of a tricky usability situation. Why Shouldn’t I Put Labels Inside Of Form Fields? There are a number of usability issues with putting labels inside of form fields especially if they’re not implemented well. Text inside the field can get mixed with user input if it’s not removed from the field. If—like we did—you’ve found that infield form labels are your best option given the project requirements, there are some ways to mitigate these usability issues. Group related fields (e.g. addresses, credit card information) Clearly differentiate labels from user input Provide good visual feedback Pros: Cons: Example: Our Solution

Useful Ideas And Guidelines For Good Web Form Design The input form is an essential element of almost any website or application these days. Input is a core method of interaction, and in many cases it represents the hard conversion point between success and failure. With the amount time and effort we put into bringing users to our sign-up and contact forms, it’s surprising that we tend not to spend a proportional amount of time on the forms themselves. A number of techniques and elements can be used in Web forms to turn them from abject failures into successful conversion points. A Dash Of Quirkiness Link Part of Web design is about communicating personality and being relatable, because people enjoy dealing with other people. Jarad Johnson Link Jarad Johnson1‘s contact form has a flavor of good ol’ post card. Red Tiki Link Red Tiki3’s quirkiness is tied to the company’s brand and identity, but is powerful here nonetheless. Applicom Link Applicom5’s form is a great example of how to be clean and professional without being sterile. Kontain Link

Christian Holst The Current State Of E-Commerce Search When e-commerce search works, it’s fast, convenient and efficient. It’s no wonder that so many users prefer searching over clicking categories. Unfortunately, our recent large-scale usability study and top-50 benchmark of e-commerce search finds that search often doesn’t work very well. On-site search is a key component of almost any e-commerce website. Read more... An E-Commerce Study: Guidelines For Better Navigation And Categories Product findability is key to any e-commerce business — after all, if customers can’t find a product, they can’t buy it. The one-on-one usability testing was conducted following the “think aloud” protocol, and we tested the following websites: Amazon, Best Buy, Blue Nile, Chemist Direct,, eBags, GILT, GoOutdoors, H&M, IKEA, Macy’s, Newegg, Pixmania, Pottery Barn, REI, Tesco, Toys’R’Us, The Entertainer, and Zappos. Read more... A Guide To Designing Touch Keyboards (With Cheat Sheet) Read more... Read more...

Web Form Design Patterns: Sign-Up Forms, Part 2 Advertisement Last week we have presented first findings of our web forms survey1. The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed; we also presented some guidelines of how an effective and user-friendly web form can be achieved. We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Please notice that this post is not about checkout forms — that’s a topic for another discussion, we may consider them separately in one of the upcoming posts. 3. In the first part of our research we have considered the placement of the sign-up links and sign-up forms as well as on the visual appearance of forms. 3.1. Apparently, to improve form completion rates designers try to avoid all kind of distractions and offer a clear, unambiguous and simple web form. 3.2. 3.3. If hints and help appear, they appear… 3.4. According to our research, 3.5. 3.6. 3.7. 3.8. 3.9.

Readability: the Optimal Line Length Having the right amount of characters on each line is key to the readability of your text. It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility. The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. So what’s the downsides of violating this range? Too wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text. It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently, see above bullet point). In order to avoid the drawbacks of too long and too short lines, but still energize your readers and keep them engaged, we suggest keeping your text within the range of 50-75 characters per line. Here at we use FF Tisa Pro in size 18 for our articles. Image by m4tik.

Web Form Design Patterns: Sign-Up Forms Advertisement If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site. To make it possible for the service to reach a maximal exposure we, designers, need to provide users with a good user experience. However, designing effective web forms isn’t easy. But how exactly can we figure out these decisions? Below we present findings of our survey of current web form design patterns — the results of an analysis of 100 popular web-sites where web-forms (should) matter. Update: the second part of the survey results is now also published: Web Form Design Patterns: Sign-Up Forms Part 21. Sign-Up Form Design Survey We have selected 100 large sites where web-forms (should) matter2. We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. 1. 1.1. 2.

Guidelines | 10 Most Common Misconceptions About User Experience Design Whitney Hess is an independent user experience designer, writer and consultant based in New York City. She authors the blog Pleasure and Pain. When I tell people that I am a user experience designer, I usually get a blank stare. I try to follow it up quickly by saying that I make stuff easy and pleasurable to use. The term “user experience” or UX has been getting a lot of play, but many businesses are confused about what it actually is and how crucial it is to their success. I asked some of the most influential and widely respected practitioners in UX what they consider to be the biggest misperceptions of what we do. User experience design is NOT... 1. ...user interface design It’s not uncommon to confuse “user experience” with “user interface” — after all it’s a big part of what users interact with while experiencing digital products and services. “Interface is a component of user experience, but there's much more,” says Peter Merholz, founding partner and president of Adaptive Path.

On-Page SEO Basics What it takes to get a page ranked on the search engines today, isn't as basic as those without much experience in search engine optimization (SEO) might think. Over the years (and with each passing algorithm update), however, some best practices have emerged that center around the user (making sure he or she gets a great experience and is delivered the content they expect) and how a page can be crawled by the search engines. The following infographic is a very high-level overview of some basic on-page SEO elements to keep in mind. Note: To zoom in, click on the image. Request Website Magazine's Free Weekly Newsletters view more

7 Actions that Earn User Trust Control of personal information in the digital space, and particularly on mobile devices, presents a unique design challenge. Most people aren’t aware that their personal data is being collected and shared. Many don’t take the time to validate their expectations and most never read privacy policies. People become aware of these issues only when something happens that doesn’t meet their expectations, like seeing their friend’s picture in a Facebook ad or banner ads that match a recent purchase. People want transparency and control, but they want it on their terms. The Goal The goal of the Digital Trust Initiative is to create awareness of privacy issues while not getting in the way of the experience. The 6 Design Principles In our previous article, “Control and Transparency,” we outlined our approach to establishing user needs: conducting foundational research into the context of use. What do users care about? An Initial Set of Actions 1. 2. 3. 4. 5. 6. 7. Conclusion