I see the mistake again and again – web designers that either don’t adjust the width of their form fields at all or adjust it based on what looks best in the layout of the page. To achieve good usability you should however adjust the width of your form fields so it matches the length of the expected input.
Skype’s name, credit card number and security code fields are too long.
Common offenders are things like credit card number fields that can contain 14 digits, even though we know that credit card numbers are 16 digits long. Email fields that can contain 50 characters even though the average email address is about 25 characters long. Or credit card security code (CVV) fields that can contain 14 digits even though the max input is 4 digits.
During our recent usability study this issue had a surprisingly big impact on the overall usability of a form. If a field was too long or too short, the test subjects started to wonder if they had misunderstood the label – perhaps they had to enter something else in the field? This was especially true for fields with uncommon data or a technical label like CVV.
So making the input field’s width match the expected input is important to the usability of your form.
3 different types
When we tried to categorize the expected input length of our form fields, we ended up with 3 main types:
Type 1) Fields with a fixed input
Here you know exactly how long the input will be, like a credit card number (it’s always 16 digits long).
In these cases the solution is straight-forward: you should adjust the width of the field so it’s just long enough to contain all the characters of the input but not any longer than that.
Type 2) Fields with a variable input but a normal average
This is the most common type of input field where the input is variable yet has an average length that’s within what can be considered a “normal” boundary of averages. This is fields like name and email. The length can certainly vary, but the average email is about 25 characters long – right within what can be defined as a “normal” boundary.
The “normal” boundary will change from site to site, but for the forms we studied, it typically spanned from 18 to 33 characters. To find this average, collect all your fields with a variable but somewhat normal input length and based on the average length of the input of all those fields combined, find a suitable width that will work for them all. Be generous and go for the slightly longer version (a couple more characters than your average).
By using the same width for all fields of this type (“variable input but a normal average”) you maintain visual consistency throughout your form.
Type 3) Fields with a variable input and an unusual average
Finally there are the outliers – fields with a variable input length where the expected input is unusually short or long. This is all the fields that don’t have a fixed input and don’t fit within the “normal” boundary we talked about in type 2.
This could be a customer’s postal/zip code which is typically quite short yet variable (the length differs from country to country). In these cases it’s a good idea to make exceptions and not use the default field width but rather a custom width based on the length of the expected input.
3 guidelines for form field length
This gives us 3 guidelines we can follow when designing our form.
- For form fields with a fixed input length, you should always adjust the width of the field to exactly match the known input length regardless of the other fields on the page.
- For form fields with a variable input length but within a standard average, you should find a good default you can use for all form fields of this type.
- For form fields with a variable input length but where the average deviates significantly from your default width, you should increase or decrease the field’s width accordingly (don’t use the default width).
By following these 3 guidelines you maintain the visual consistency throughout your form but at the same time avoid confusing customers by making form fields too long or too short.
Matching your customer’s expectations – even when it comes to the subconscious expectations of how wide an input field should be – is crucial if you want a user-friendly site.
Post a comment (1 so far).
How do you maintain the visual balance in your design when the length of your headlines vary dramatically? A long headline will naturally demand more attention than a short one because it takes up more space on the page, skewing the visual balance.
YouTube offers an interesting solution. On YouTube’s video pages, short headlines use a font size that’s approximately 10% bigger than the one used for long headlines. In other words, YouTube adjusts the scale of the headline depending on its length.
By adjusting the scale of the headline relatively to its length, YouTube makes sure the headline draws just enough attention to itself. Long headlines don’t overpower, yet short headlines don’t drown either.
This is a great way to maintain the visual balance of the page even when the length of the headlines vary greatly. (An additional benefit is that this approach will ensure that more headlines will stay on a single line because long headlines are rendered in a smaller font-size).
The idea of adjusting the scale of your design elements to the amount of information they contain is interesting, and can be very powerful – especially on sites with multiple editors (or millions, in the case of YouTube).
This opens up the notion that, in a time of user generated content, our designs must be alive and adapt to the information of each page on our site.
Share your thoughts in a comment (2 so far).
Do you want more articles like this?
Links are how people navigate your site.
Which is why it’s crucial that you follow 3 basic link usability guidelines: 1) underlining links, 2) coloring links, and 3) keeping link styling consistent throughout your site.
If you break any of these 3 guidelines, you will leave your visitors guessing about how to navigate your site.
1. Underlining links
If you see an underlined word or sentence in a text online, you immediately conclude that it’s a link. This is how links have looked from day one on the Internet and everyone (subconsciously) grasp this fundamental principle.
So why would you divert from this principle? Because “it’s ugly”. Which is true, it’s not always visually appealing to have a link stand out in the middle of your beautifully crafted page. On the other hand, that’s also the very reason you underline links: to make them stand out and not look like the rest of your text so it’s clear that “this word” and “this sentence” can be clicked.
If you actually want people to click on your links, then you have to make it obvious that they can and should be clicked. Underlining text is the most universal way to indicate.
Links in menus are the exception. When you have a list of links where every single item in the list is a link, it’s OK to remove the underline. Convention has taught people to realize this and people will quickly decode the text as links. However, this requires that you at least color the links consistently.
2. Coloring links
The default link color is blue. While you should feel free to play around with different shades of blue, you should keep your links blue if you want to make it easy for your visitors to spot and recognize them as links. Especially if you don’t underline them.
When a visitor comes to your site, one of the first things he’ll do is to scan the page – especially if it’s a site where the user is to perform an action. Many users even scroll down the page and then up again to quickly get an overview. If you have ever done web usability studies sitting next to the test subject you might have noticed this tendency to scan pages.
When users are scanning your page, they will immediately be able to spot your links if they are blue, even if they don’t actually read the link text or even stare directly at the link. If you use another non-standard color for the links on your website, users won’t necessarily connect this color with “links” for the first few pages of surfing (which is often all you get from a first-time visitor).
Your users will have to learn to recognize your non-standard color as the link color on your site. You can shortcut this by using blue for your links because people mentally map this color to links.
If you do decide to break this guideline just be sure to have good reasons for doing so, like color coded menus or if you have a set of links on your page but you don’t want to call attention to such as footer links. And finally, if you do break this guideline, it will become increasingly important to follow the other link guidelines (underlining and consistent formatting).
3. Consistent styling of links
If you do decide to break any of the two above guidelines, then make sure that you’re at least breaking them consistently. Use the same non-standard styling on all pages.
This way your visitors will be able to learn what to perceive as links on your website and what they can regard as normal content after they’ve surfed around on a couple of pages on your site.
A great example of how wrong it can go when you’re styling links inconsistently, without underline or the standard blue link color, is AudioJungle.net (see picture to the right).
Here, when you first see the list you have no clue as to which words can be clicked and which are just normal text. In fact, you may believe all of them can be clicked, although subconsciously, following normal design principles online most users would probably expect the washed-out text not to be links – to be “disabled”.
Turns out this is not the case. On mouse hover you find that both the green and washed-out grey text represent links, whereas the strongest text in black can’t be clicked.
No learning curve
While all this might seem as small details they are all link conventions that have a great impact on how quickly and easily visitors can start interacting with all the great content and features on your site. And they are all guidelines that you see broken repeatedly throughout the web.
By following these 3 simple guidelines you’ll dramatically improve the usability of your site and your visitors will never have any doubts about how to navigate your site (at least not due to design decisions, bad information architecture will of course leave visitors confused).
Share your thoughts in a comment (15 so far).
Drop-down lists are great – when used correctly.
If there’s anywhere between 7 and 15 options, a drop-down list is usually a really good fit. You can put a healthy amount of information in your form without cluttering the entire page, because the list’s options are hidden when you don’t need them.
However, many sites are using drop-down lists with too many options (more than 15) or too few (less than 7), resulting in a poor user experience.
Drop-down lists with too many options
When drop-down lists grow larger than 15 options they become difficult to scan and navigate. Some users will have to start scrolling inside the drop-down list which is a slow and painful experience.
A good example of this is a country-selector with more than 100 options! It’s impossible for the user to get a good overview and there’s no quick and easy way to find the option you’re looking for.
Like most e-commerce stores, Amazon force you to select your country from a massive drop-down list. A text field with auto-complete functionality would be a better solution.
As a user, you first have to figure out the sorting pattern – are the options listed alphabetically, or by some other logic? Then you have to try and get a glance of all the options on the screen and figure out if your option is there. If it’s not, then you have to start scrolling. This is slow and painful. In fact, during a recent usability study, one of our test subjects got so confused that he actually started scrolling the wrong way in a country-selector even though the countries were listed alphabetically.
In cases where the user know what she is looking for in advance, consider using a text field with client-side auto-complete functionality instead. Country-selectors are a good candidate for this solution since people know what country they live in (just be sure to support synonyms and abbreviations so you can map ‘US’, ‘USA’, ‘United States’, and so on, to the same match).
Drop-down lists with too few options
When drop-down lists have less than 7 options they suffer from a lack of up-front information. The user has to click in order to see the available options.
In these cases you are better off using radio buttons so your users immediately can scan how many options they have and what each of those options are, without clicking anything to reveal this information.
On Yahoo! you have to select your gender from a drop-down list (users have to click two times instead of one). Two radio buttons would be a better solution.
Another advantage of radio buttons is that you have more control over the design and content of the labels since this is just normal HTML-code, so if the situation calls for it, you can design more advanced explanations of the available options instead of being limited to a simple text string. (Please use this freedom with care though.)
So if your drop-down list has less than 7 options, consider using radio buttons instead.
All in all, while drop-down lists do have a place in web design, you should always consider whether there’s a more appropriate alternative, such as a text field with auto-complete or a few radio buttons.
Share your thoughts in a comment (24 so far).
Note: don’t get too stuck on the numbers 7 and 15. These numbers are meant as guidelines, not strict rules.
How many free web services can you sign up for nowadays, by only providing a username, email and password? Countless.
The home page for these web services usually have one purpose: get people to sign up for a free account. Yet, many of these sites make it unnecessarily cumbersome to actually sign up. On the home page you can read a lot of text about all the amazing features, you can flip through screenshots of the product, and you can even watch video tours, yet still, you have to click a button and go to a new page just to see the actual fields you’re required to fill out in order to sign up.
By hiding your sign up form on a separate page, your users don’t know if all you need is an email address and a password or if they have to fill out 15+ form fields with personal information in order to sign up. Also, having the form on a separate page requires an extra page load, and unless your site loads as fast as Google’s home page, that extra page load is additional friction in the sign up process.
The Easier, Faster Way
There’s a better way to design your sign up process. If you only have a few fields (5 or less) required to sign up, then don’t put the sign up form on a separate page – display them right on the home page instead.
This way you let people see how simple it is to sign up and get started. They don’t need to search around on other pages, they can just read your headline, see a few screenshots and then get started right there from the home page!
This idea isn’t original, but there a certainly a lot of companies that still haven’t caught on to it. This is despite the fact that Facebook – probably the most effective company in the world when it comes to getting people to sign up – is doing this.
You can sign up for a free Facebook account right there on the home page. Facebook could however make the sign up even faster by turning the “select sex” drop-down into two radio buttons (one click less and users can see the options immediately).
Sure, companies without Facebook’s brand will need a bit more sales text, but the principle still apply – there’s no reason you can’t have the sign up form on the home page. Additional marketing text and graphics usually go below the fold anyways.
By having the sign up form right there on your home page, you make it easy and inviting for people to sign up and try out your web service.
Post a comment (2 so far).
