Smashing Ebook 22 User Experience Practical Techniques 2

Imprint
Copyright 2012 Smashing Media GmbH, Freiburg, Germany Version 1: May 2012 ISBN: 978-3-943075-32-8
Cover Design: Ricardo Gimenes PR & Press: Stephan Poppe eBook Strategy: Thomas Burkert Technical Editing: Andrew Rogerson, Talita Telma Idea & Concept: Smashing Media GmbH
Smashing eBook #22User Experience, Practical Techniques, Volume 2 2
ABOUT SMASHING MAGAZINE Smashing Magazine is an online magazine dedicated to Web designers and developers worldwide. Its rigorous quality control and thorough editorial work has gathered a devoted community exceeding half a million subscribers, followers and fans. Each and every published article is carefully prepared, edited, reviewed and curated according to the high quality standards set in Smashing Magazine's own publishing policy. Smashing Magazine publishes articles on a daily basis with topics ranging from business, visual design, typography, front-end as well as back-end development, all the way to usability and user experience design. The magazine is and always has been a professional and independent online publication neither controlled nor inuenced by any third parties, delivering content in the best interest of its readers. These guidelines are continually revised and updated to assure that the quality of the published content is never compromised. ABOUT SMASHING MEDIA GMBH Smashing Media GmbH is one of the world's leading online publishing companies in the eld of Web design. Founded in 2009 by Sven Lennartz and Vitaly Friedman, the company's headquarters is situated in southern Germany, in the sunny city of Freiburg im Breisgau. Smashing Media's lead publication, Smashing Magazine, has gained worldwide attention since its emergence back in 2006, and is supported by the vast, global Smashing community and readership. Smashing Magazine had proven to be a trustworthy online source containing high quality articles on progressive design and coding techniques as well as recent developments in the Web design industry.
About this eBook

By now, all good designers and developers realize the importance of Usability for their work. Usable websites offer great user experience, and great user experience lead to happy customers. This Smashing eBook User Experience, Practical Techniques, Volume 2 features 6 selected articles on user interface engineering and innovative techniques in Web Design, which will help you improve your websites user experience and satisfy your visitors, with smart design decisions.
Table of Contents
Improve The User Experience By Tracking Errors Designing Drop-Down Menus: Examples And Best Practices New Approaches To Designing Log-In Forms 9 Common Usability Mistakes In Web Design Horizontal Navigation Menus: Trends, Patterns And Best Practices Innovative Techniques To Simplify Sign-Ups and Log-Ins About The Authors
Improve
Lara Swanson
e User Experience By
Tracking Errors
Its easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesnt show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your websites user experience. Well walk through how to add error tracking using Google Analytics, with some code snippets. Then, well assemble the data and analyze it to gure out how to improve your error message drop rates.
What To Track
The most helpful errors to track are form-eld errors and 404 pages. Formeld errors can be captured after the forms validation has run; this can be client-side or server-side, as long as you can trigger a Google Analytics event when an error message appears to a user. (Well be using Google Analytics in this article, but you can apply these concepts to many visitortracking tools, such as Omniture and Performable.) FORM-FIELD ERRORS Forms that allow users to create an account, log in or check out are the places where most visitors will hit stumbling blocks that you are not aware of. Pick pages with forms that have high exit rates or that have high total
page views but low unique page views. This could indicate that users are repeatedly trying to submit the form but are encountering problems. The easiest way to track form-eld errors with Google Analytics is to track an event each time a user sees an error message. The specication for _trackEvent is:
_trackEvent(category, action, opt_label, opt_value)
If the form is for signing in and the user submits an incorrect password, I might use the following code:
<script type='text/javascript'> _gaq.push(['_trackEvent', 'Error', 'Sign In', 'Incorrect Password']); </script>
If possible, store the error messages text as a variable, and call this variable within Google Analytics event tracker. This way, as you change the text of the error message over time, you can measure the differences between the versions. For example, in PHP, I might write:
<?php $message = 'Incorrect password'; if ($message) { ?> <script type='text/javascript'> _gaq.push(['_trackEvent', 'Error', 'Sign In', '<?php echo $message ?>']); </script> <?php } ?>
If its possible for the user to receive more than one error message on the page at a time (for example, if theyve missed more than one eld in a form), then you might want to store all of the messages in the same event tracker. Use an array, or concatenate them into the variable that you call in your event tracker. You might see that a user has attempted to skip all of the
elds in a form; this could indicate that they are testing the form to see which elds are required and which are optional. Youll notice this if you have tracked an event that includes all missing elds in the same event. However, storing all of the messages in the same event might prevent you from tracking the effects of individual error messages over time, so begin by tracking each error message separately. 404 PAGES You might already know how many times your 404 page is being viewed, but do you know which URLs the users were trying to reach, or what websites are referring to those URLs? By adding a tracking code to your 404 pages, you can see both. The following snippet will include the URL that generated the 404 error and the URL that linked to that page:
<script type="text/javascript"> _gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + document.referrer ]); </script>
GOOGLE ANALYTICS REPORTS As you track errors as events using Google Analytics, you will nd a list of them in your reports under Event Tracking, under the Content menu. Choose Categories, and then start drilling down through your error types. You can save any of these graphs to your dashboard with the Add to Dashboard button at the top of each screen. I nd it useful to list the top 404 errors on my dashboard, so that I can see whether anything new has popped up when I log in.
Google Analytics also lets you know of spikes in error messages. The Intelligence section allows you to set an alert for when a certain metric reaches a specied threshold. In my case, I want to know when the number of unique 404 errors has increased by more than 20% over the previous day.
In your custom alert, set the alerts conditions to include Event Action, matching your errors name exactly. In this case, the error name is 404. Set it to alert you when the Unique Events percentage increases by more than 20% over the previous day. Be sure to check the box for the option to receive an email when this alert triggers!
Once you have captured enough data to analyze, start creating these dashboard widgets and alerts in Google Analytics, so that you can make informed decisions on how to improve your website.
How To Analyze Errors

Error messages will help you see in aggregate the most common stumbling blocks for users. Are a lot of users encountering errors with a particular text eld? Perhaps the eld for the expiration date of their credit card? Or for their email address? You might be surprised by what your users encounter. SEGMENTING DATA If your website gets a lot of traffic, consider segmenting the user base to analyze the error messages. Look for groups of users who make up the majority of a certain kind of error event, because there may be something unique about that segment. New Visitors are rst-time visitors to your website. They are likely unfamiliar with the typical ow of your navigation and are brand new to your forms and so dont know what elds are required. Returning Visitors will likely be familiar with your website, so they may not have a large impact on error rates (unless youve changed something that catches them by surprise). To change the user segment that youre looking at, go to your list of error events and click the drop-down menu next to Advanced Segments. By selecting New Visitors and then hitting Apply, the data will update to show only the errors that New Visitors have encountered.
Break down your data on error messages according to user segment in order to analyze the data more deeply.
Segmenting users by country can also give more context. I once wrestled with why so many users were triggering error messages for ZIP and postal codes in a form. After organizing the data by country, I saw a high number of errors from one country whose postal-code syntax I hadnt accounted for in my forms validation. I xed the error and saw the error rate for ZIP and postal codes drop.
Check errors by country to see whether any patterns emerge in your error messages.
Referring sources for 404 pages is another way to examine the data. Use the Filter Event Label search bar to show errors whose referring source is a particular domain. Searching your own domain rst is useful to see which incorrect URLs you can quickly x on your own website.
PRIORITIZE ISSUES After segmenting the data, prioritize the errors that you want to x. The top priority will be errors that affect a large group of people (i.e. ones that have a high number of unique events). Next, work on the errors that you know you can easily x. You likely already know the cause of some errors (poor validation, unhelpful error message, etc.), so clean those up. For 404 errors, check which referring links come from your website, and x those.
Examine 404 errors to see whether any particular referring links can be easily xed.
Once youve cleaned up the errors that are easy to x, track the new data for at least a week before doing another round of prioritization. Examine what has changed in the top errors and where they come from, and then research the cause of those errors. Often, forms will need to be made more intuitive to help users avoid error messages. For example, if a lot of users are making mistakes when entering a date, then play with that eld. Does your user base prefer drop-down menus for days, months and years? Do they make fewer errors if given a date picker? Are you giving them helpful examples of the syntax they need to follow? Track your changes and measure the rate of error events after each change to see what decreases user error.
Improve Your Error Messages

Improving the text, design and layout of your error messages could decrease the number of repeated errors by users. An error message might not be clear or might be hidden on the page; improve the user experience by testing changes to your error messages.
I prefer A/B testing to compare the effectiveness of error messages and their designs. On one form, I noticed that a number of users were skipping the phone-number eld altogether, even though Id indicated that it was required.
Some of the indicators of a required eld that we tested.
After A/B testing different ways to indicate that the eld was required and why it was required, we found that the combination of a link and a tooltip helped users recognize the need to ll in their phone number. This solution drastically decreased the rate of errors for this eld. On 404 pages, test out different content on users: link to your most popular pages; present a search form; try humorous content or Easter eggs to lighten the users spirits. As you test different textual and design changes to your error messages, be sure to measure their effectiveness. Examine the following: Total error events, and total events per error message; Unique events per error message; Exit rates on pages with forms and 404 pages.
All of these rates should drop. Ideally, your users should nd the website so intuitive that your error event data will represent only those who try to beat the system.
Conclusion
To sum up, track error messages and 404 pages as events in Google Analytics, and analyze the top error patterns. Prioritize the causes of errors, and continue to improve your forms and 404 pages to avoid errors altogether. Lastly, test changes in the content and design of error messages to see whether they decrease repeated errors. Improving your forms, 404 pages and error messages will improve your websites overall user experience.
Designing Drop-Down Menus: Examples And Best Practices

Matt Cronin
As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature. Yes, thats right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the users choices with effective use of typography, icons, and tooltips. These panels appear temporarily and disappear on their own when users move the pointer to another top-level option or to a regular part of the screen. You can nd more information about Nielsens study in his article Mega Drop-Down Navigation Menus Work Well.
Huge vertical drop-down panel from foodnetwork.com; notice a close button (the x in the upper right corner).
In this article we take a closer look at the nature of drop-down navigation menus, analyze situations in which they should or should not be used, discuss various implementations and nally showcase a couple of bad and good examples of such menus. The article also includes various tips and suggestions to help you work with your drop-down menus.
Where To Use Drop-Down Menus

You will often see many trends in which drop-down menus are used. Here are a few of the most common ones. Organize Pages in a Section Most commonly, drop-down menus are used to pull all of the pages in a certain category together in one organized element. This is essentially subnavigation. Take a look at the design below. A drop-down element contains all of the different categories for a certain section of the website.
Organize Categories in a Blog You will see many blogs use a drop-down menu to organize categories and tags. Why? Blogs are driven by a large amount of information, so the layout needs to be as clean as possible to hold that content. A drop-down menu ultimately helps pull together links, such as categories, out of layout elements, such as the sidebar.
Show Products on an eCommerce Website You will see many e-commerce websites use drop-down menus to show products or categories of products. The drop-down menu is a friendly feature that all consumers can easily gure out, so it is a perfect way to organize products. The Best Buy website, shown below, does just this.
Display Modules A drop-down can be an excellent way to tuck away an obstructive menu, which the user can click on to reveal. Take the example below, for instance. The sign-in element is part of the navigation, then appears in the form of a drop-down. This is a great way to take this large element out of the layout without negatively impacting usability.
Best Practices
Drop-down menus do in fact organize content into small, uncluttered elements, but if not done correctly, they can be just as bad as a messy layout. Here are some ways to make this controversial element more usable. Avoid a Drop-Down with More than Two Levels Overall, this is just about the worst mistake one could make with drop-down menus in terms of usability. If done with a hover menu structure, the user will lose focus of the menu whenever the mouse pointer moves away from it. If done with a clickable structure, it has too many buttons and doesnt work nicely. The website shown below makes this mistake. The menus are very difficult to use because if you even slightly lose focus of the menu with the mouse pointer, you have to start from the top. Notice the tooltip, which also gets in the way of the navigation.
Option 1: Hover Menu Basically, there are two ways to approach the drop-down menu: with either a hover or a click to activate the menu. From a design and convenience standpoint, a hover menu is better. Option 2: Clickable Menu On the other hand, many will argue that a clickable menu is better because it is much more usable. Reason? Because of the way a hover menu is constructed, the user has to have the pointer over the menu at all times. If the user loses focus of the hover menu, it closes. Therefore, it is better to go with a drop-down menu that is activated by clicking a button, then deactivated by clicking the button once more. CSS-Tricks has a tutorial showing how to create a layout similar to that of Digg. It is a perfect drop-down menu with a click-to-activate/deactivate feature, so its certainly something you should take a look at.
Also, Google features a usable drop-down menu using the click on/off trick.
Delay the Deactivation of a Hover Avoiding a hover structure and many levels in a drop-down may be too much of a restriction for the navigation you are trying to create. There is a solution, though, that can improve the usability of a hover and multi-level menu. With most menus, the drop-down disappears immediately after the user moves the mouse pointer away from the menu. The solution is to delay its disappearance. Or, have a click function that requires users to click outside the menu area to close the drop-down, similar to how a Lightbox functions. Take Dell, for example. It uses a multi-level drop-down menu, but it is still somewhat usable. This is the only exception to the use of multi-level dropdown menus.
Furthermore, the menu on the Porsche website has multiple levels. However, the menu has a very wide focus range. This means you have to move your pointer a certain distance away from the menu to close it.
Add a Hover Effect to Menu Options The navigation itself actually affects the usability of the drop-down menu. One way to make the menu work better with the drop-down is to add a hover effect to the menu options. This shows exactly which button in the navigation the menu is extending from, which will certainly help users.
The example below, the MediaTemple home page, shows a strong hover effect on the navigation options, which helps to support the drop-down menu.
Seamless Transitions When a drop-down menu appears, it should appear seamlessly and without interruption. The menu should load immediately. Many websites make the mistake of making the menu so heavy that it takes more than an instant to load upon the hover. Transition effects are one more detail that can look really cool. Instead of the menu simply appearing, try throwing in a wipe down or fade in. Just be sure to make the transition quick and not disruptive.
You will notice that Microsoft doesnt do a very good job of creating a seamless menu. Observe the image below closely. You will notice that outlines from adjacent menus are still visible when the main menu is loading. When you move from button to button in the navigation, the drop-down menus have a slight lag, which looks bad. Of course, this doesnt occur in all browsers, but it shouldnt occur in any.
Remove Tooltips Of course, when designing drop-down menus, there are always little details that impact usability. One important practice you may overlook is the presence of tooltips, or the lack of tooltips. You should always remove tooltips from buttons with drop-down menus. Reason? Tooltips just get in the way and sometimes even block the rst list item in the drop-down menu.
Yes, we will be picking on Microsoft once more. Microsoft makes this mistake on its corporate page. Notice how the tooltip blocks many of the list items, which makes navigation that much more difficult.
Styling Techniques
Content backgrounds can be somewhat of a challenge, too. The background has to be subtle, or it will ruin the content. Here are a few ways to liven up content backgrounds without going over the top.
Use a Clean List Not only is the element styling important, but the content styling is important, too. Clean typography and a readable list are important. Use smart spacing between elements in the list, and add a border above and below list items. The example below from Audi shows a very well-organized and readable list. The list items are separated, and there are even list item icons.
On the other hand, The Washington Posts website has a very poor list in the drop-down menu. There is not enough spacing between list items, so the menu is very cluttered and difficult to use.
Hover Effects on List Items All buttons need some sort of hover effect to be more usable. In drop-down menu lists, apply subtle hover effects, perhaps just a text color or background change. The White House website uses only a background change on list items, but it still helps the user.
Semi-Transparent Background This wont work for all designs, but you should consider a semi-transparent background for the menu. The website shown below has a transparency, so the user can still see through to the image background. The key to semitransparent elements is to keep a strong and readable contrast.
Keep Styling Consistent with Menu You will hear everywhere that consistency in styling is a must, and it certainly is. For navigation and a drop-down menu to work together as one unit, as they should, the styling needs to be similar. Use the same fonts and a similar background. In the example below, the drop-down menu looks as it should.
Designing Drop-Down Menus: Examples And Best Practices (Part 2)
Poorly Constructed Menus

Below are some examples of drop-down menus that fall short somewhere with styling and usability. Navigant Consulting This menu is poorly styled and dysfunctional.
Panasonic Although this menu is well-styled, it is difficult to use because of a bad hover effect.
Toshiba The Toshiba menu is too small and does not follow good styling practices.
LG Like the Microsoft menu above, this one has a slight lag, which makes it hard to use.
Chrysler The Chrysler page uses a drop-down menu with very small text, which makes it difficult to read.
Sun These drop-down menus are rather dgety and hard to use. The tooltip gets in the way, too, and directly above the main navigation is another drop-down menu. All of this makes it very difficult to navigate.
Creative Labs The menu below is cluttered and does not have a delayed hiding or similar technique, so it is not very usable.
HP Another hover menu that lacks usable features.
Alienware The black menu on the black design makes this drop-down difficult to use.
Good Drop-Down Menus

Here are many drop-down menus that have good usability and styling features. Sony A well-constructed hover menu with a good list.
ActionEnvelope A clean vertical drop-down panel with a lot of padding; notice, how the panel appear to be above other design elements. Simple and beautiful solution.
Helmy Bern A beautifully styled menu, with a fade transition.
RedBrick This menu is cleanly styled and very readable.
REI This drop-down is very wide, so it is easy to keep the mouse in focus.
Philips Philips has a large and usable drop-down module.
Walmart On the Walmart site, the user clicks on the area outside the menu to close it.
Samsung The Samsung menu is usable because of its large size and styling.
Epson Epson shows another usable drop-down menu.
Mini Cooper This website uses a drop-down menu with delayed closing.
Designing Drop-Down Menus: Examples And Best Practices (Part 3)
Gateway Here is another usable drop-down element.
Asus Global A well-styled menu that has delayed hiding.
Intel A very clean drop-down menu.
Target A well-organized menu that has delayed closing.
Garmin This drop-down menu is simple yet functional.
Logitech A drop-down with very nice styling that matches the menu.
Incase This menu is very basic but serves its purpose.
evelMerch A small yet functional drop-down, with a graphic to show users that the button opens a menu.
IBM A multi-level drop-down is used here, but a slight delay makes this one easier to use.
EA A very clean and well-organized drop-down element.
ACTIVISION This menu is clean and has delayed hiding to improve usability and functionality.
Yahoo! Finance The menu on Yahoo! Finance has large buttons and icons to show where menus can be opened.
New Approaches To Designing Log-In Forms

Luke Wroblewski
For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that weve stopped having to think about how its done that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all. These experiences are not just frustrating for us, but are bad for businesses as well. How bad? User Interface Engineerings analysis of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested their password every day, and 75% of these people never completed the purchase they started once they requested their password. To top it off, visitors who are not logged in do not see a personalized view of a websites content and recommendations, which reduces conversion rates and engagement. So, log-in is a big deal!!big enough that some websites have started exploring new designs solutions for the old problem.
Is
is You?
Gowallas sign-in form (below) looks pretty standard: enter your user name or email address and your password, and then sign in. Theres also help for those of us who have forgotten our password or are new to the website. In other words, all of the most common log-in user-interface components are accounted for.
The sign-in form on Gowalla.
But Gowalla has taken the time to include a few more components to help people log in with more condence if their rst attempt hasnt worked. If you attempt to sign in with a user name (or email address) and password that do not match, the website not only returns an error but returns the prole image and user name of the account you are trying to sign into as well:
A log-in error on Gowalla.
Including a prole picture provides instant visual conrmation: Yes, this is my account, and I may have forgotten my password, or No, this isnt my account, so I must have entered the wrong user name or email address. In either case, Gowalla provides a way to resolve the problem: This isnt me or I dont know my password. The Q&A website Quora takes a similar approach, but it doesnt wait until you are done trying to sign in before providing feedback. Quoras log-in form immediately tells you if no account is associated with the email address
you have entered, and it gives you the option to create a new account right then and there:
Quora instantly lets you know if there are no matching accounts for the email address you have entered.
If the address you have entered does match an account on Quora, then the accounts prole image and user name will appear to the right of the log-in form. This conrmation is similar to Gowallas but comes right away instead of after youve submitted the form.
If the email address you enter on Quora matches an account, you get visual conrmation instantly.
Instant Sign-In
Quoras log-in form also includes an option to Let me log in without a password on this browser. Checked by default, this setting does just what it says: it eliminates the need for you to enter a password when re-logging into Quora. All you need to do to enter the website is click on your prole picture or name on the log-in screen.
Quoras one-click log-in page.
To go back to the standard log-in screen, just click the x or Log in as another user, and then you can sign in the hard way: by entering your email address and password. While one-click sign-in on Quora is convenient, it doesnt really help you across the rest of the Web. For that, many websites are turning to third-party sign-in solutions.
Single-sign-on solutions such as Facebook, Twitter, OpenID and more have tried to tackle log-in issues by cutting down on the number of sign-in details that people need to remember across all of the websites that they use. With these services, one account will get you into many different websites.
A sampling of single-sign-on solutions.
Logging in this way is faster, too. When someone connects their Facebook or Twitter account to a website, they simply need to click the Sign in with Facebook (or Twitter) button to log in. Of course, they need to be signed into their Facebook or Twitter account in order for it to work with one click. But with 50% of Facebooks 750 million active users logging into Facebook on any given day, the odds are good that one click is all it takes. You can see this log-in solution in action on Gowalla (screenshot below). A Gowalla user who has connected their Facebook account needs only to click on the Log in with Facebook option in order to sign in!!provided they are already signed into Facebook, of course. If theyre not signed into Facebook, theyll need to do that rst (usually in a new dialog box or browser tab). After doing so, they will be instantly redirected to Gowalla and logged in.
Gowalla provides an option to log in using your Facebook account.
New Log-In Problems

But with these new benets come new problems!!usually in the form of too many choices. When faced with multiple sign-in options on a website, people do one of the following: 1. They remember the service they used to sign up (or that they connected to their account), and they log in instantly. This is the best case scenario. 2. They assume they can sign in with any third-party service (for which they have an account), regardless of whether they have an account on the website they are trying to log into. The thought process for these folks goes something like this: It says I can sign in with Facebook. I have a Facebook account. I should be able to sign in. 3. They forget which service they used to sign up or if they used one at all, and thus hesitate or fail to log in.
To make matters worse, if someone picks the wrong provider, instead of signing in to the service theyre trying to use, they might end up signing up again, thereby creating a second account. While a website can do its best to match accounts from different services, theres no completely accurate way (that I know of) to determine whether a Twitter and a Facebook account denitively belong to the same person. So, while third-party sign-in addresses some problems, it also creates a few new ones. In an attempt to solve some of these new sign-in issues, weve been experimenting with new log-in screen designs on Bagcheck. Our most recent sign-in screen (below) is an attempt to reduce confusion and prevent the types of errors I have just described!!admittedly, though, at the expense of one-click sign-in. In this design, people are required to enter their user name or email address to sign in. We use instant search results to match their input to an existing user on the website, so someone needs to type only the rst few letters of their name to nd their account quickly. This tends to be much faster than typing an entire email address. But because more than one person is likely to have the same name, we provide the ability to sign in with an email address as well. Once someone selects their name or enters their email address, then their options for signing in are revealed. No sign-in actions are shown beforehand.
The current Bagcheck sign-in screen does not reveal any log-in options until you select your name or enter your email address.
True, in this design people can no longer sign in with one click, because the sign-in buttons are not visible by default. But this may be a trade-off worth making, for the following reasons: We keep people signed in until they explicitly sign out. So, hopefully people will rarely need to go through the sign-in process. Remember: the less people need to log in, the fewer sign-in problems youll have! The added amount of effort required to sign in is small: just start typing your name and select a search result, or enter your complete email address, and then click the sign-in button. Its not one-click, but its not a lot of work either. Trying to sign in with an account provider that you have not set up on Bagcheck is no longer possible, because the log-in buttons dont show up until after you have selected your name. This cuts down on duplicate accounts and confusion over which account you have signed up with or connected (especially on different browsers and computers where a cookie has not been set). On mobile, however, these trade-offs may not be worth it. Logging into a website on a mobile device by typing is a lot more work than just tapping a button. So, in the Bagcheck mobile Web experience, weve kept the thirdparty sign-in buttons front and center, allowing people to log in with just one tap. Its just another example of how the constraints and capabilities of different devices can inuence design decisions.
The Bagcheck mobile Web experience keeps one-tap sign-in options visible.
Since launching this log-in experience on Bagcheck, weve gotten a lot of great feedback and ideas for improving the interactions. Many people have suggested using browser cookies to set a default sign-in option for returning visitors. While this might help people who return to the website using the same browser, weve seen many more sign-in issues when people use a different browser or computer. In these cases, a browser cookie wont help. Another common question is whether allowing anyone to search the list of Bagcheck users by name or email address reduces security. While this design does somewhat reduce the security of a Bagcheck account (compared to our previous log-in screen design), its no worse than many websites that let you sign in with your public user name, like Twitter. And because all Bagcheck prole pages are public, users can be searched for on Google and on Bagcheck itself. Despite this, weve seen a bit of increased concern over this same search capability being on the sign-in screen. So, if youre thinking about trying this design, make sure your prole pages are public, and be aware that people may still be a bit sensitive about it.
Weve All Got Email

Although signing into a service with ones name may be too new for some people, logging in with an email address is common practice for most. Using a solution that brings together a lot of the ideas outlined in this article, Googles Identity Toolkit and Account Chooser allow people to sign in across the Web using just their email address:
Googles Identity Toolkit allows people to sign in with a number of email verication options.
When multiple accounts have been accessed in the same Web browser, each account is listed as a sign-in option, making account selection easier. If you want to try out this sign-in solution, you can opt in on Googles website or implement it on your website with Googles Toolkit.
Selecting from multiple accounts on Googles experimental sign-in page.
e Li le
ings Ma er, Too
The Bagcheck and Google examples we just looked at try to rethink log-in pages in big ways. But not all sign-in innovations need to be so comprehensive. Even small changes can have a big impact. For example, I mentioned earlier that inputting text precisely on mobile devices can be harder than on full keyboard computers. Coupled with obscured password elds, this can make logging into a website on a mobile device a challenge. Facebooks mobile Web experience tackles this in a small but useful way. If you enter an incorrect password when trying to sign in, the website will change the password eld to plain text so that you can actually see your input. Facebook also offers an alternate way to log in, using your email address or phone number (screenshot below). Its a small enhancement but one that can go a long way on mobile.
Facebook does a lot to help you log in on mobile.
Its Not Over

As these examples illustrate, even the most common interactions on the Web (like logging in) could benet from new ideas and design improvements. Not every idea Ive walked through here will become part of all the log-in forms we encounter on the Web!!chances are none of them will. But without trying, well never know.
9 Common Usability Mistakes In Web Design

Dmitry Fadeyev
By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them.
1. Tiny clickable areas

Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that theyre easy to click. Heres an example of links that are far too small; clicking them is harder than it should be. These are the comments links on Hacker News, a social news website. (Clickable areas are highlighted in red):
Heres an example of the same interface element, the comments link, but this time with a much larger clickable area:
Newspond comments link.
Why would we want a larger clickable area? Simple. Because our hand movement with the mouse isnt very precise. A large clickable area makes it easier to hover the mouse cursor over the link. To ensure we get a large clickable area, we could either make the whole link bigger or increase the padding around the link using the CSS padding property. Heres the code:
<a href="http://www.examplesite.com" style="padding: 5px;">Example Site<a>
The CSS has been placed inline together with the markup to make the example simpler, but in real life youll likely want to add this styling to your CSS le by giving the link a class or id and targeting it with that. You can read more about padded link targets for better mousing in a 37signals article on padded link targets. According to the article, padding provides users with a feeling of comfort. Its just really easy to click the links. It feels like the links are working with you instead of against you.
2. Pagination used for the wrong purpose

Pagination refers to splitting up content onto several pages. This is often found on websites that have long lists of items; for example, products in a store or pictures in a gallery. Using pagination for this purpose makes sense because displaying too many items on one page would make the page slower to download and process.
FeedMyApp uses pagination in the right way: to display its vast list of apps in digestible chunks.
But there is another way that pagination is used on the Web today. Content pages, like blog articles, are sometimes split into several pages. Why is this done? Whats the gain? Its unlikely that the article is so long that it requires pagination; in most cases, it is used to increase page views. Because a lot of blogs and magazines get their revenue through advertising, getting more page views (i.e. individual page loads) boosts their viewing statistics and allows them to charge more for each ad.
The Wired article about Googles logo is split into eight pages, making it very difficult to read.
While this may seem like an easy way to squeeze more money from your ads, it poses two main problems. The rst is that its just really, really annoying. Having to load several pages just to read one article isnt fun. Youre creating a barrier for your visitors that doesnt have to be there. The second reason has to do with SEO (search engine optimization). Search engines use the content on your page to make sense of what it is about and then index it accordingly. If the content is split into several pages, it is diluted, and so each page makes less sense on its own and holds less keywords about its topic. This may negatively affect the ranking of the article in search engine results.
3. Duplicate page titles

The title of each Web page is important. Page titles are the pieces of text we write between the <title> tags in the <head> section of our HTML code. Sometimes people create a generic title while working on their websites template their websites name, for example and then re-use the same title across the whole website. This is wrong because it robs each page of a couple of key benets. The rst benet is that a good title communicates to your visitors a lot of information about what the page is about. People can quickly gure out if theyre in the right place or not. Remember that this title doesnt just show at the top of the browser window; its also shown on the search engine results pages. When people see a list of results on a search engine like Google, they read the page title to gure out what each page is about. This alone is a good enough reason to spend a little time optimizing your page titles. The second reason has to do with SEO. Search engines need different information to rank the results of a particular query. Page title is one of the more important pieces of information they use to gauge how relevant your page is to a particular search term. This doesnt mean you should load as many keywords as possible into the title that defeats the rst benet but you should ensure that each title succinctly describes the content of the page, including a couple of words you think people will search for. Heres an example of a good page title. This is a Smashing Magazine page title as seen in Safari:
Here we have the title of the article, the category of the article and the name of the website. Putting the name of the website last puts more emphasis on what the page itself is about, rather than on website branding, which is still there. Heres what the HTML code looks like in the markup:
<title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</title>
And heres how the page is displayed in a Google search result:
4. Content that is dicult to scan

To ensure that your website is usable, you cannot only have a good design; you also need good copy. Copy is a term used to describe all of the text content on a website. Yes, good design will guide your visitors around the website, focus their attention on the things that matter and help them make sense of information chunks; but visitors will still need to read text to process information. This makes copy an essential part of your overall website design. Before you can write good copy, though, you need to understand how people will actually view your website. Dont assume that your visitors will read everything from top to bottom. That would certainly be great, but unfortunately thats not how it works. The Web bombards people with information, and most of us try to consume as much of it as possible. This
leads to very frantic browsing behavior: we jump from one piece of content to another, from one website to the next. People tend not to read websites top to bottom; they start reading whatever pops out at them rst, and then move to the next thing that captures their interest. The pattern looks a little like this:
The Basecamp landing page.
The red circles indicate the areas where visitors tend to focus their gaze, and the numbers indicate the order in which they look at these elements. Users dash from one interesting part of the page to another. To take advantage of this chaotic browsing pattern, you need to structure your copy a certain way. Here are a few pointers: Have a few points of focus. These are the parts of your page that attract the attention of visitors. This can be achieved by stronger, highercontrast colors and larger fonts. You can also use images, such as icons, next to text to give these areas even more visual pull. Each focus point should ideally be accompanied by a descriptive heading. Without reading the copy any further, visitors should be able to understand what this bit of content is about. Dont make headings mysterious or vague to draw people in. Keep them informative yet concise. People want information quickly, and withholding it only annoys them. Any other text should be short and easy to digest. Provide just the essentials, and strip out the rest. In most cases, extra text that copy writers put in to make a point less ambiguous only adds dead weight. People will read bite-sized pieces of text but are put off by long paragraphs. Cut your copy down until no fat is left to cut.
The Why you should use OpenOffice page could denitely use improvement. No clear points of focus are provided, aside from the large banner at the top; and the copy is grouped together in huge chunks, making it daunting to read.
Things apps features page splits up each feature into little bite-sized segments, each with its own icon and heading. This makes the list easy to scan. To make copy even more effective, list actual benets rather than feature names.
5. No way to get in touch

User engagement is important if you want to build a successful community, and communities are important if you want to build successful websites and social Web apps. User engagement is also important if you want to build loyal customers. Quickly answering peoples questions and xing their problems doesnt just mean that you have good customer service it means you care, and your customers and visitors will appreciate it. But many websites still dont give visitors an easy channel for getting in touch with the company. Some websites dont even have an email address or contact form on them.
When you click on the contact link on the official Coca-Cola website. youre presented with this page. No email, no phone number. Most of the links lead to automated FAQs; the feedback form requires your address and age and has a 500-character limit; the Submit an idea form is two pages long, with terms and conditions attached. It doesnt look like Coca-Cola really wants you to contact them. Sure, putting your email address on the Web will likely attract a lot of spam, but there are a couple of solutions.
Enkoder is my favorite solution for putting email addresses on the Web. Enkoder is an application that comes in two avors: a free one for Mac OS X, and another free one as a Web app. It encrypts any email address that you give it and gives you a bunch of gibberish JavaScript code to put on your page. When the page with the code loads, your email magically appears as a clickable link. Bots scouring for email addresses wont be able to interpret the code at least thats the plan. You could also use contact forms to bypass the problem of showing your email address on a page; however, youre still likely to receive spam unless you put some good Captchas or other spam protection mechanism in place. Keep in mind that things like Captchas are barriers to user interaction and will likely degrade the user experience. Forums to the rescue. Online forums are a great communication channel that can be an alternative way for users to get in touch. A public forum is better than a simple contact form or email because your customers can help each other on a forum. Even if you dont personally respond to a customer, another helpful customer may help that person out, solving his or her problem. GetSatisfaction is a Web app that works like a forum. Users can post their problems and feedback as topics on the board, and customers and staff can respond to them. Users can add comments to elaborate on their problem. Whether you go with a hosted solution like GetSatisfaction or roll your own message board, a two-way communication channel like this is a great way to keep in touch with your customers.
The GetSatisfaction forum for Apple.
6. No way to search
A lot of people start looking for a search box as soon as they arrive on a page. Perhaps they know exactly what theyre looking for and dont want to spend time learning the websites navigation structure. Jakob Nielsen calls these people search-dominant users: Our usability studies show that more than half of all users are searchdominant, about a fth of the users are link-dominant, and the rest exhibit mixed behavior. The search-dominant users will usually go straight for the search button when they enter a website: they are not interested in looking around the site; they are task-focused and want to nd specic information as fast as possible. Jakob Nielsen Whether you run an online shop or blog, you need search. People may come looking for a particular product or for an article they remember reading a while back, and chances are theyll want to nd it with a quick search. The good news, if you havent already implemented search on your website, is that its very easy to do. You dont need to code your own search feature; search engines like Google and Yahoo have very likely already indexed most, if not all, of your websites pages, so all you need to do is pick the one you want to use and plug in a search box.
Heres the form code for using Google as your search engine:
<form action="http://www.google.com/search" method="get"> <fieldset> <input type="hidden" name="sitesearch" value="smashingmagazine.com" /> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> </fieldset> </form>
And heres the one for Yahoo:

<form action="http://search.yahoo.com/search" method="get"> <fieldset> <input type="hidden" name="vs" value="smashingmagazine.com" /> <input type="text" name="p" /> <input type="submit" value="Yahoo Search" /> </fieldset> </form>
To make it work, all you need to do is change the value of the hidden eld to your websites domain name. This will limit the scope of the Google or Yahoo search query to just your website. You may also want to modify the value of the Submit text to say whatever you want.
7. Too much functionality that requires registration

Your website may have some content or features that require visitors to register before using. Thats great, but be careful how much content is put behind this registration shield. Very interactive Web applications, such as email, document editing and project management, restrict 100% of their functionality to registered users. Other websites, such as social news websites, do not. I can browse all the stories on Digg and Reddit without having to log in; users do not have to identify themselves to enjoy some functionality. When you implement a log-in barrier, be careful that you dont lock away features that dont really need user identication. Some blogs require people to register before posting. Sure, that will signicantly decrease spam, but it will also signicantly decrease the number of comments you see, too. User participation on your website is affected by how many barriers there are. Removing barriers such as registration will almost certainly increase user participation. Indeed, once users start using your website, they will more likely sign up, because theyre already involved.
The GetSatisfaction interface allows you to ll in your comment about a company or product and then click the Post button. Instead of seeing your feedback posted, youre greeted with an unexpected Log in or register message. Not good, considering the customer may already be frustrated.
The landing page for Pixlr, an online graphic editing app, has a link titled Jump in n get started! Clicking on it opens the app. No trials, no registration; you test drive the app right away.
Posterous, a blog hosting network, doesnt even require registration to start using it. Just send an email with your post, and a new blog is created for you.
8. Old permalinks pointing nowhere

A permalink is a link to a page that isnt meant to change; for example, a link to a blog article such as the one youre reading now. Problems occur, though, when a website moves to another domain or has its structure reorganized. Old permalinks pointing to existing pages on the website become dead unless something is done about them. That something is called a 301 redirect. 301 redirects are little instructions stored on your server that redirect visitors to appropriate pages. So, if someone arrives on your website using an old link, they wont see a 404 error page (Page not found): the 301 redirect forwards them to the right location, provided that youve set it up correctly. The number 301" designates the type of redirect that it is: permanent.
Frye / Wiles 404 error.
There are various ways to do 301 redirects. How theyre implemented depends partly on the Web server youre using. Here are the basics of handling 301 redirects on the most popular Web server right now, Apache. The following code should go in a le called .htaccess in your main website folder. Yes, the le name begins with a full stop. This means its a system le, which standard le browsers tend to hide by default. So, if you cant see it using your le browser or FTP client, turn your Display invisible les option on. Just create or (if its already there) edit this le using your editor of choice. This le is retrieved whenever a visitor arrives on your website, and any redirect rules you put in there will be applied. Heres a simple 301 redirect code:
RewriteEngine on Redirect 301 /oldpage.html /newpage.html
The code is fairly self-explanatory. When somebody tries to access yoursite.com/oldpage.html, they will immediately be redirected to yoursite.com/newpage.html. The RewriteEngine on bit at the top ensures that the mod_rewrite engine is turned on (the default is off). This is the engine that handles the redirects.
9. Long registration forms

Registration forms are barriers. They are barriers because it takes effort to ll them in, and the task itself is no fun. People have to invest time and effort to register, and then they have to invest even more time and effort in future to remember what user name and password they used. We can shrink this barrier by making the sign-up form as short as possible. At the end of the day, the purpose of a registration system is simply to be able to identify each user; so, the only requirements are a unique identier,
such as a user name or email address, and a password. If you dont need more information, dont ask for it. Keep the form short.
The ReadOz sign-up form is very long. On closer inspection, we nd that half of the elds are optional. If theyre optional, they dont really need to be there. Such a form would likely scare off a user seeing it for the rst time. Show only what the person needs to register; the rest can be lled in later.
Tumblr has one of the shortest sign-up forms around. Just three elds: email, password and the URL of your new blog.
The Basecamp sign-up page has a smart trick. It has no website navigation aside from a home-page link. This keeps the user focused on the sign-up process, without any distractions or means of leaving the page.
Less
inking
Usability is all about making things easier to use. Less thinking, less frustration. A website should do all the work and present visitors only with the things theyre looking for. Usability is also about the experience people have using your website, so attention to detail matters, as do the presentation and feel of the page.
Horizontal Navigation Menus: Trends, Pa erns And Best Practices

Louis Lazaris
The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations before switching from vertical to horizontal a few years back. There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better. In this article, we will focus on a variety of techniques and best practices to improve the usability of horizontal navigation bars, and we will note less effective styles. Well also look at several trends that developers can choose from when working on the navigation design for their next project.
Use Familiar Names For Links

Lets start off with a usability tip that applies to any navigation bar. When a user visits a new website, one of their primary points of focus will be the navigation bar. If that element has been well designed, the user will look to it rst for help with their task. Almost every website has certain sections that are expected by users, such as About us, Services, Products, and Contact us.
Impulse Development
Because of the nature of the Web, users get frustrated if they cannot immediately nd the content they are looking for, even if the delay is momentary. So, the About link should be labeled About or About us. The Services link should be labeled Services or Our services. Being creative in this case detracts from usability. Except in the most unusual circumstances, dont call your About page Company info. Dont call your Services page What we do. And dont call your Contact page How to reach us. Users instantly look for recognizable terms when searching for content, and so avoiding any design or content that would slow them down ensures for them a positive experience.
Clearly Distinguish Primary And Secondary Sections

Once you gure out what parts of your website are primary and what parts are secondary, you can establish a visual hierarchy that enhances usability. Primary links (e.g. About, Services, etc.) should be clearly distinguishable from secondary page links, which are usually accessible from every page and located near the primary links. The designers job is to clearly indicate the difference so that users understand which parts of the website have the most important information. Consider the following example:
Edwards & Hampson
Edwards & Hampsons website has a nice clear horizontal bar that serves as the users primary means of navigating pages. While it includes the standard links (About us, Our services, Products), the bar has a number of other links that are not as primary but are important enough to include in a prominent area. A similar example:
Deliciouslyorkshire
The Deliciouslyorkshire website links to primary sections (Home, About, News and events) next to what seem to be secondary sections (Recipes, Promotions, Useful links). Both types of links have the same tabbed style, with no indication of hierarchy.
If, in fact, some of these links are less important, then designing the section to reect this hierarchy would have been wise. Of course, these companies may have compelling reasons for designing their navigation in this way, so these are not necessarily bad examples; they serve merely as case studies to illustrate the importance of a visual hierarchy in navigation bars. Conversely, here are two examples of websites that show this visual distinction but still keep secondary links easily accessible:
Designers Couch
Designers Couch has primary navigation links along the main bar (Home, Gallery, Jobs, etc.) and then secondary links on the same bar to the right but kept visually distinct (Find a designer, Get involved).
J Taylor Design
J Taylor Design makes a similar distinction by placing secondary links below the main navigation bar and using a different color, font, and size. In these examples, the user has no trouble distinguishing between primary and secondary sections. Yet, the secondary links are not buried on the page or in drop-down menus. Theyre still easy to access.
Put Action Links On Right

If youre building an e-commerce website or one that has shopping cart functionality, user registration or log-in, then putting links to those sections on the right side of the horizontal navigation bar (or somewhere else on the right, near the top) is best.
Here are a few examples of websites that visually separate action links, while keeping them in the main navigation bar:
Sharify
Xero
Sharify and Xero, above, put their action links on the same navigation bar as their primary links. But they maintain the hierarchy by pushing the secondary links to the far right. Users expect to see these action links on the right side of the bar, so reversing the pattern would impair usability.
INCLUDE A SEARCH BOX Another common practice that improves usability is to include a search box on the right, as part of the navigation bar. The search box is like the functions mentioned earlier because it requires some sort of unique action from the user. Users are accustomed to seeing this action-oriented functionality including the search box on the right side of the page, so allow sufficient room in this part of your design for a search bar, inside the main navigation bar if possible. The J Taylor Design website above puts its search box on the right side of the navigation bar, as do these:
Washtenaw Community College
Westcoast Poppin
Avoid Surprise Drop-Down Menus

Drop-down menus in horizontal bars are quite prevalent in modern design because they simplify cluttered layouts. Visually indicating whether a navigation link will reveal a drop-down menu when the user mouses over it is best practice. This is best accomplished with a simple downward-pointing triangle.
Below are some good examples of horizontal menus that visually indicate drop-down menus within them:
QN5 Music
Kinder-aktuell
Unfortunately, many websites do not feature this simple yet effective marker. Below are a few examples of surprise drop-down menus:
webstudios
billoneil.com
Various Trends And Styles

Finally, here is a showcase of horizontal navigation bars, to give you an overview of the different styles on the Web and how they t their layouts. These examples do not necessarily represent best practices but are worth considering when designing your own horizontal navigation bar. TABBED HORIZONTAL NAVIGATION
Owltastic
inkd
HORIZONTAL NAVIGATION WITHOUT BAR
Full Cream Milk
My Favorite Thing
HORIZONTAL NAVIGATION BELOW PRIMARY PAGE HEADER
The Mindset Game
Lanbruks Gunya
HORIZONTAL NAVIGATION WITH ICONS AND TEXT
Mission Bicycle Company
HORIZONTAL NAVIGATION WITH NUMBERED LINKS
Glocal Ventures
Horizontal Navigation Menus: Trends, Pa erns And Best Practices (Part 2)
HORIZONTAL NAVIGATION WITH LEFT-ALIGNED LINK TEXT
Twitshirt
GROUPED LINKS UNDER HORIZONTAL NAVIGATION
Render
Auditude
SEMI-TRANSPARENT HORIZONTAL NAVIGATION BAR
Wetaskiwin Regional Public Schools
DESCRIPTIVE TEXT UNDER HORIZONTAL NAVIGATION LINKS
Eyemagine
LIQUID-WIDTH HORIZONTAL BAR WITH CENTERED LINKS
Jupiter Underoor Heating
Cambridge Shakespeare Festival
HORIZONTAL LINKS DIVIDED BY GRAPHIC
Arca lui Noe Hotel
The Art of Non-Conformity
HORIZONTAL NAVIGATION AT BOTTOM
Lorem Ipsum
Conclusion
The practices recommended in this article do not apply to every context and may not be right for every design, niche or industry. But they do highlight the need to give users a better experience and avoid potentially confusing navigational setups. Web users usually behave based on learned habits. Creating a layout or pattern that unnecessarily disrupts those habits will only weaken your websites conversion rates. So, before you design a horizontal navigation menu, consider link names, section hierarchy and any other factors that could affect usability. In doing so, you will create a smooth user experience that allows visitors to nd the information they want quickly and efficiently.
Innovative Techniques To Simplify SignUps and Log-Ins

Anthony T
There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. But understanding and applying a fewinnovative techniques could make your forms simpler and more efficient to ll out. In this article, wed like to present a couple of new ideas that might be useful for your next designs. Please notice that before using these techniques, you should make sure that they make sense in the context in which you are going to use them. Wed love to hear about your case-studies and usability tests that affirm or dismiss the suggestions proposed below.
Simplifying Sign-Ups
The purpose of every sign-upformis for users to complete it successfully and send it in. However, if the form is long and complicated, then the users excitement for your website could turn to displeasure. Here are a few innovative techniques that will make your forms faster and easier to ll out.
ASK FOR A USER NAME AFTER THE USER HAS SIGNED UP Sign-up forms typically ask users to create a name that is unique to the website. However, coming up with a unique user name thats not taken could take trial and error and, thus, time. Instead of hassling people for a user name when they sign up, you might want to consider asking afterwards. This way, you wont lose sign-ups from frustrated users, and youll prevent users from creating random and forgettable names just to satisfy the forms requirements.
REQUIRE USERS TO TYPE THEIR PASSWORD ONLY ONCE Many sign-up forms ask users to type their password in two different elds. The reason is understandable. Forms mask passwords for security reasons, so that snoopers cant see them. And to cut down on typographical mistakes and increase the chances of correct input, two separate entries are required. In reality, though, this allows for greater error, because it forces users to type more. They cant see the characters theyre inputting, making it difficult to know whether theyre typing the right password each time.
A more efficient approach would be to ask users to type their password in once, but then include a box they can check to unmask the password, so that they can check it. This option could reduce the number oftext eldsand decrease the work that users have to do to sign up. jQuery Plug-In for Masking Passwords AUTO-FILLCITY AND STATE FIELDS BASED ON USERS ZIP CODE If yourequire the users home address, then consider auto-llingthe city and state elds based on the ZIP code. The form will be faster to ll out because users wont have to waste time and energy manually selecting their city and state fromdrop-downlists. Using AJAX to Get City and State from ZIP Code
AUTO-COMPLETE THE COUNTRY FIELD The conventional way for users to specify their country is to select it from adrop-downlist. A more efficient way would be to use an autocompletetext eld. Instead of making users scroll through an alphabetical list of every country in the world, the text eld would allow users to select their country from a small subset of countries that match the letters they type. The user needs only to type a few letters to see their country in the menu. AJAXAuto-Completefor jQuery
ALLOW USERS TOAUTO-FILLTHEIR PAYMENT ADDRESS FROM THE SHIPPING ADDRESS If a user is buying a product, theyll have to submit payment and shipping information. Most of the time, the addresses will be the same, so let them auto-llone from the other. You could include a link saying Same as shipping information in the payment section, and when clicked, it would repeat the shippingdatain the paymentelds. Copying Billing and Shipping Address Information with jQuery Copy Form Input Data to Another Input Field with jQuery
DONT CHECK THE NEWSLETTER OPTION BY DEFAULT. OFFER A PREVIEW INSTEAD Most website owners pre-check the newsletter box, hoping to get more subscribers. Chances are, it will work. But a subscription is meaningless if the user has done so onlybecause they have overlooked or misunderstood the option. If theyre not interested, theyllunsubscribe sooner or later. Forcing them to subscribe wont help you in the long run. And receiving a newsletter without having explicitly asked for it can turn users off. A more effective approach would be to make users want to subscribe by showing them a preview or excerpt of the newsletter. This way, theyll know what theyre missing if they dont subscribe. Youll also sleep well knowing that users who subscribe have done so because theyre genuinely interested in your content.
COMBAT SPAM BY HIDING A TEXT FIELD WITH JAVASCRIPT, INSTEAD OF USING CAPTCHA If you get a lot of spam, then putting aCAPTCHA on your formmay be necessary. Whats not necessary is making the CAPTCHAan obstacle that turns users away. Traditional CAPTCHAs that ask users to retype distorted letters have been proven to hurt conversion rates. With the extra hassle they force on users, its no wonder. CAPTCHAs Effect onConversionRates F**k CAPTCHA A simpler approach that wont lower your conversion rate is to use a hidden and required text eld generated with client-side Javascript. Spambots cant ll in the eld because they cant interact with objects in client-side JavaScript; only users can. Thismethodis simpler and less intrusive and so will reduce spam without hurting your conversion rate. The only problem is that it relies on JavaScript to work which might be suboptimal in some cases. You could also use Honeypot Captcha approach: you can create a honeypot form eld that should be left blank and then use CSS to hide it from human users, but not bots. When the form is submitted, you check to make sure the value of that form eld is blank. If it isnt, then you can safely ignore the submission because it was submitted by a spam bot.
Simplifying Log-Ins
The purpose of every log-in form is to get the user into their account. Some log-in forms do this better than others. Here are a few innovative techniques that will help your users log in more efficiently. ALLOW USERS TO LOG IN WITH THEIR EMAIL ADDRESS Remembering an email address is easier than remembering a user name. User names can be unwieldy, and people remember their email address because they use email all the time. Give users the option to log in with their email address as well as a user name. The exibility could save them the time and headache of recovering the user name if they forget it.
LOG USERS IN WITHOUT LEAVING THE PAGE Logginginis a common task, and users will want to be able to log in from anywhere on your website.So, as soon as they do it, redirect them back to the current page. This will make logging in faster and allow users to get right back to their task. There area couple of waysto make this happen: adrop-downbox or a modal window. Thedrop-downbox will open without taking users off the page. It takes up only a small part of the page, making it a fast and lightweight option.
A Simple and Effective jQuery Dropdown Login Form jQuery Drop Down AJAX Sign In Form
A modal window also keeps users on the current page, but it opens up at the center of the window, putting the focus entirely on the log-in form. This option gives you room to add supplemental information to the form. How to Implement a jQuery AJAX Login Form Into a Modal Box Simple jQuery Modal Window Tutorial
AUTO-FOCUSTHE FIRSTTEXT FIELD Once the user sees the log-in form, theyll be ready to log in. Make the process more efficient by automatically focusing on the rsteld. This saves them the time and effort of hovering and clicking. The user can keep their hands on the keyboard and start typing away. The auto-focus should also clearly highlight the text eld so that the user knows they can start typing.
ALLOW USERS TO UNMASK THEIR PASSWORD This option is almost as useful for logging in as it is for signing up. If users cant see the characters in the eld, they could easily mistype the password. If their input is rejected, theyll know that they mistyped something and will have to re-enter their password until they get it right. The problem is that users dont know which character was mistyped and so cant x the mistake before submitting the form on the rst attempt. This creates more work than necessary and makes users slow down their typing. Avoid this by adding acheckboxthat allows users to unmask their password before submitting it. Stop Password Masking
USE A QUESTION MARK ICON FOR THE PASSWORD RECOVERY LINK Users should have no trouble nding the password recovery link on your form. Instead of using a Forgot your password link, consider using a simple question mark button, which wont take up a lot of room or get lost among other links. Because the question mark is a universal symbol for help, users will not wonder where to go when theyre having password trouble.
MAKE THE SUBMIT BUTTON AS WIDE AS THE TEXT FIELDS The log-in button isnt just for taking action: it also lets users know what action theyre about to take. A small log-in button has weak affordance and can make users feel uncertain about logging in. Awide buttongives users more condence and is hard to miss. The buttons label also becomes more visible, so that users are clearer about the action theyre taking.
ALLOW USERS TO LOG IN VIA FACEBOOK, TWITTER OROPENID Nearly everyone has a Facebook, Twitter orOpenIDaccount, and letting them log in with it brings big benets. They can use your website almost instantly, without having to go through the sign-up process. Also, they wont have to manage multiple user names and passwords across different websites.
Of course, you could even go further and use Facebook Connect to actually pre-ll data that your users might have to type; in the example below, on Friend.ly, a Facebook application, the only thing that the user needs to do before starting using the service is just click on the Register button. The information about the user is loaded automatically which raises a huge privacy concern. You might not want to use this approach in practice.
Conclusion
Your sign-up and log-in forms shouldnt make the users life difficult. Spending time lling out a form is no ones idea of a party. These innovative techniques will make your forms simple and efficient, so that users can sign up and log in quickly and start enjoying your content.
About
Anthony T
e Authors
Creator of UX Movement, a treasure trove of user experience design articles he wrote. Creator of Interface Libraries, a professional wireframing toolkit, Interface Styles, a visual interface tool and Productivity Papers, a system for reaching your goals and becoming an expert.
Dmitry Fadeyev
Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.
Lara Swanson
Lara Swanson is the lead front-end web developer for Dyn. You can follow her thoughts on coding semantically, nitpicking page load time and the importance of baking for coworkers on Twitter.
Louis Lazaris
Louis Lazaris is a freelance web developer based in Toronto, Canada. He blogs about front-end code on Impressive Webs and is a co-author of HTML5 and CSS3 for the Real World, published by SitePoint. You can follow Louis on Twitter or contact him through his website.
Luke Wroblewski
Most recently LukeW was the Chief Product Officer (CPO) and co-founder of Bagcheck which was acquired by Twitter Inc. in 2011. Luke is also the author of the upcoming book Mobile First and was Chief Design Architect (VP) at Yahoo! Inc.
Ma Cronin
Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

Smashing Ebook 22 User Experience Practical Techniques 2

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Smashing Ebook 22 User Experience Practical Techniques 2

Transféré par

Droits d'auteur :

Formats disponibles

Imprint

Smashing eBook #22User Experience, Practical Techniques, Volume 2 2

Smashing eBook #22User Experience, Practical Techniques, Volume 2 3

About this eBook

Smashing eBook #22User Experience, Practical Techniques, Volume 2 4

Smashing eBook #22User Experience, Practical Techniques, Volume 2 5

Smashing eBook #22User Experience, Practical Techniques, Volume 2 6

Smashing eBook #22User Experience, Practical Techniques, Volume 2 7

Smashing eBook #22User Experience, Practical Techniques, Volume 2 8

How To Analyze Errors

Smashing eBook #22User Experience, Practical Techniques, Volume 2 9

Smashing eBook #22User Experience, Practical Techniques, Volume 2 10

Smashing eBook #22User Experience, Practical Techniques, Volume 2 11

Improve Your Error Messages

Smashing eBook #22User Experience, Practical Techniques, Volume 2 12

Some of the indicators of a required eld that we tested.

Smashing eBook #22User Experience, Practical Techniques, Volume 2 13

Smashing eBook #22User Experience, Practical Techniques, Volume 2 14

Designing Drop-Down Menus: Examples And Best Practices

Smashing eBook #22User Experience, Practical Techniques, Volume 2 15

Smashing eBook #22User Experience, Practical Techniques, Volume 2 16

Where To Use Drop-Down Menus

Smashing eBook #22User Experience, Practical Techniques, Volume 2 17

Smashing eBook #22User Experience, Practical Techniques, Volume 2 18

Smashing eBook #22User Experience, Practical Techniques, Volume 2 19

Smashing eBook #22User Experience, Practical Techniques, Volume 2 20

Smashing eBook #22User Experience, Practical Techniques, Volume 2 21

Smashing eBook #22User Experience, Practical Techniques, Volume 2 22

Smashing eBook #22User Experience, Practical Techniques, Volume 2 23

Smashing eBook #22User Experience, Practical Techniques, Volume 2 24

Smashing eBook #22User Experience, Practical Techniques, Volume 2 25

Smashing eBook #22User Experience, Practical Techniques, Volume 2 26

Smashing eBook #22User Experience, Practical Techniques, Volume 2 27

Smashing eBook #22User Experience, Practical Techniques, Volume 2 28

Smashing eBook #22User Experience, Practical Techniques, Volume 2 29

Smashing eBook #22User Experience, Practical Techniques, Volume 2 30

Smashing eBook #22User Experience, Practical Techniques, Volume 2 31

Smashing eBook #22User Experience, Practical Techniques, Volume 2 32

Designing Drop-Down Menus: Examples And Best Practices (Part 2)

Smashing eBook #22User Experience, Practical Techniques, Volume 2 33

Poorly Constructed Menus

Smashing eBook #22User Experience, Practical Techniques, Volume 2 34

Smashing eBook #22User Experience, Practical Techniques, Volume 2 35

Smashing eBook #22User Experience, Practical Techniques, Volume 2 36

Smashing eBook #22User Experience, Practical Techniques, Volume 2 37

Smashing eBook #22User Experience, Practical Techniques, Volume 2 38

Smashing eBook #22User Experience, Practical Techniques, Volume 2 39

Smashing eBook #22User Experience, Practical Techniques, Volume 2 40

HP Another hover menu that lacks usable features.

Smashing eBook #22User Experience, Practical Techniques, Volume 2 41

Smashing eBook #22User Experience, Practical Techniques, Volume 2 42

Good Drop-Down Menus

Smashing eBook #22User Experience, Practical Techniques, Volume 2 43

Smashing eBook #22User Experience, Practical Techniques, Volume 2 44

Helmy Bern A beautifully styled menu, with a fade transition.

Smashing eBook #22User Experience, Practical Techniques, Volume 2 45

RedBrick This menu is cleanly styled and very readable.

Smashing eBook #22User Experience, Practical Techniques, Volume 2 46

Smashing eBook #22User Experience, Practical Techniques, Volume 2 47

Philips Philips has a large and usable drop-down module.

Smashing eBook #22User Experience, Practical Techniques, Volume 2 48

Smashing eBook #22User Experience, Practical Techniques, Volume 2 49