Smashing ebook 22 user experience practical techniques 2 by milko02010

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 #22│User 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 influenced 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 field 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.

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

About this eBook By now, all good designers and developers realize the importance of Usability for their work. Usable websites oﬀer 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

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

Improve !e User Experience By Tracking Errors Lara Swanson It’s easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesn’t show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your website’s user experience. We’ll walk through how to add error tracking using Google Analytics, with some code snippets. Then, we’ll assemble the data and analyze it to figure out how to improve your error message drop rates.

What To Track The most helpful errors to track are form-field errors and 404 pages. Formfield errors can be captured after the form’s 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. (We’ll 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

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

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-field errors with Google Analytics is to track an event each time a user sees an error message. The specification 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 message’s 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 diﬀerences 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 it’s possible for the user to receive more than one error message on the page at a time (for example, if they’ve missed more than one field 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

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

fields in a form; this could indicate that they are testing the form to see which fields are required and which are optional. You’ll notice this if you have tracked an event that includes all missing fields in the same event. However, storing all of the messages in the same event might prevent you from tracking the eﬀects 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 find 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 find 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.

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

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 specified 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 alert’s conditions to include “Event Action,” matching your error’s 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!

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

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 field? Perhaps the field 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 traﬃc, 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 first-time visitors to your website. They are likely unfamiliar with the typical flow of your navigation and are brand new to your forms and so don’t know what fields are required. “Returning Visitors” will likely be familiar with your website, so they may not have a large impact on error rates (unless you’ve changed something that catches them by surprise). To change the user segment that you’re 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.

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

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 hadn’t accounted for in my form’s validation. I fixed the error and saw the error rate for ZIP and postal codes drop.

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

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 first is useful to see which incorrect URLs you can quickly fix on your own website.

PRIORITIZE ISSUES After segmenting the data, prioritize the errors that you want to fix. The top priority will be errors that aﬀect 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 fix. 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 fix those.

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

Examine 404 errors to see whether any particular referring links can be easily fixed.

Once you’ve cleaned up the errors that are easy to fix, 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 field. 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.

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

I prefer A/B testing to compare the eﬀectiveness of error messages and their designs. On one form, I noticed that a number of users were skipping the phone-number field altogether, even though I’d indicated that it was required.

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

After A/B testing different ways to indicate that the field was required and why it was required, we found that the combination of a link and a tooltip helped users recognize the need to fill in their phone number. This solution drastically decreased the rate of errors for this field. 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.

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

All of these rates should drop. Ideally, your users should find 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 website’s overall user experience.

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

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, that’s 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 user’s choices with eﬀective 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 find more information about Nielsen’s study in his article Mega Drop-Down Navigation Menus Work Well.

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

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 finally 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.

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

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 diﬀerent categories for a certain section of the website.

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

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.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 18

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 figure out, so it is a perfect way to organize products. The Best Buy website, shown below, does just this.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 19

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.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 20

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 doesn’t work nicely. The website shown below makes this mistake. The menus are very diﬃcult 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.

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

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 it’s certainly something you should take a look at.

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

Also, Google features a usable drop-down menu using the click on/oﬀ trick.

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

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.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 24

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.

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

The example below, the MediaTemple home page, shows a strong hover eﬀect 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 eﬀects 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.

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

You will notice that Microsoft doesn’t 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 doesn’t occur in all browsers, but it shouldn’t 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 first list item in the drop-down menu.

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

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 diﬃcult.

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.

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

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.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 29

On the other hand, The Washington Post’s 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 diﬃcult to use.

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

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.

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

Semi-Transparent Background This won’t 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.

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

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)

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 33

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.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 34

Panasonic Although this menu is well-styled, it is diﬃcult to use because of a bad hover eﬀect.

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

Toshiba The Toshiba menu is too small and does not follow good styling practices.

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

LG Like the Microsoft menu above, this one has a slight lag, which makes it hard to use.

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

Chrysler The Chrysler page uses a drop-down menu with very small text, which makes it diﬃcult to read.

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

Sun These drop-down menus are rather fidgety 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 diﬃcult to navigate.

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

Creative Labs The menu below is cluttered and does not have a delayed hiding or similar technique, so it is not very usable.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 40

HP Another hover menu that lacks usable features.

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

Alienware The black menu on the black design makes this drop-down diﬃcult to use.

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

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.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 43

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.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 44

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

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

RedBrick This menu is cleanly styled and very readable.

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

REI This drop-down is very wide, so it is easy to keep the mouse in focus.

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

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

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

Walmart On the Walmart site, the user clicks on the area outside the menu to close it.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 49

Samsung The Samsung menu is usable because of its large size and styling.

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

Epson Epson shows another usable drop-down menu.

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

Mini Cooper This website uses a drop-down menu with delayed closing.

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

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

Gateway Here is another usable drop-down element.

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

Asus Global A well-styled menu that has delayed hiding.

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

Intel A very clean drop-down menu.

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

Target A well-organized menu that has delayed closing.

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

Garmin This drop-down menu is simple yet functional.

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

Logitech A drop-down with very nice styling that matches the menu.

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

Incase This menu is very basic but serves its purpose.

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

evelMerch A small yet functional drop-down, with a graphic to show users that the button opens a menu.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 60

IBM A multi-level drop-down is used here, but a slight delay makes this one easier to use.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 61

EA A very clean and well-organized drop-down element.

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

ACTIVISION This menu is clean and has delayed hiding to improve usability and functionality.

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

Yahoo! Finance The menu on Yahoo! Finance has large buttons and icons to show where menus can be opened.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 64

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 we’ve stopped having to think about how it’s 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 Engineering’s 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 oﬀ, visitors who are not logged in do not see a personalized view of a website’s 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.

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

Is !is You? Gowalla’s sign-in form (below) looks pretty standard: enter your user name or email address and your password, and then sign in. There’s 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 confidence if their first attempt hasn’t 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 profile image and user name of the account you are trying to sign into as well:

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

A log-in error on Gowalla.

Including a profile picture provides instant visual confirmation: “Yes, this is my account, and I may have forgotten my password,“ or “No, this isn’t 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 isn’t me” or “I don’t know my password.” The Q&A website Quora takes a similar approach, but it doesn’t wait until you are done trying to sign in before providing feedback. Quora’s log-in form immediately tells you if no account is associated with the email address

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

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 account’s profile image and user name will appear to the right of the log-in form. This confirmation is similar to Gowalla’s but comes right away instead of after you’ve submitted the form.

If the email address you enter on Quora matches an account, you get visual confirmation instantly.

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

Instant Sign-In Quora’s 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 profile picture or name on the log-in screen.

Quora’s 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 doesn’t really help you across the rest of the Web. For that, many websites are turning to third-party sign-in solutions.

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

“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 diﬀerent 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 Facebook’s 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 they’re not signed into Facebook, they’ll need to do that first (usually in a new dialog box or browser tab). After doing so, they will be instantly redirected to Gowalla and logged in.

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

Gowalla provides an option to log in using your Facebook account.

New Log-In Problems But with these new benefits 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. Smashing eBook #22│User Experience, Practical Techniques, Volume 2│ 71

To make matters worse, if someone picks the wrong provider, instead of signing in to the service they’re 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 diﬀerent services, there’s no completely accurate way (that I know of) to determine whether a Twitter and a Facebook account definitively 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, we’ve 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 first few letters of their name to find 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.

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

The current Bagcheck sign-in screen does not reveal any log-in options until you select your name or enter your email address. Smashing eBook #22│User Experience, Practical Techniques, Volume 2│ 73

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 you’ll 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. It’s not one-click, but it’s 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 don’t 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, we’ve kept the thirdparty sign-in buttons front and center, allowing people to log in with just one tap. It’s just another example of how the constraints and capabilities of different devices can influence design decisions.

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

The Bagcheck mobile Web experience keeps one-tap sign-in options visible.

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

Since launching this log-in experience on Bagcheck, we’ve 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, we’ve seen many more sign-in issues when people use a diﬀerent browser or computer. In these cases, a browser cookie won’t 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), it’s no worse than many websites that let you sign in with your public user name, like Twitter. And because all Bagcheck profile pages are public, users can be searched for on Google and on Bagcheck itself. Despite this, we’ve seen a bit of increased concern over this same search capability being on the sign-in screen. So, if you’re thinking about trying this design, make sure your profile pages are public, and be aware that people may still be a bit sensitive about it.

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

We’ve All Got Email Although signing into a service with one’s 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, Google’s Identity Toolkit and Account Chooser allow people to sign in across the Web using just their email address:

Google’s Identity Toolkit allows people to sign in with a number of email verification 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 Google’s website or implement it on your website with Google’s Toolkit.

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

Selecting from multiple accounts on Google’s 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 fields, this can make logging into a website on a mobile device a challenge. Facebook’s 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 field to plain text so that you can actually see your input. Facebook also oﬀers an alternate way to log in, using your email address or phone number (screenshot below). It’s a small enhancement but one that can go a long way on mobile.

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

Facebook does a lot to help you log in on mobile.

It’s Not Over As these examples illustrate, even the most common interactions on the Web (like logging in) could benefit from new ideas and design improvements. Not every idea I’ve 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, we’ll never know. Smashing eBook #22│User Experience, Practical Techniques, Volume 2│ 79

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 oﬀer 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 they’re easy to click. Here’s 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):

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

Here’s 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 isn’t 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. Here’s 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 you’ll likely want to add this styling to your CSS file 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. It’s just really easy to click the links. It feels like the links are working with you instead of against you.”

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

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? What’s the gain? It’s 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.

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

The Wired article about Google’s logo is split into eight pages, making it very diﬃcult to read.

While this may seem like an easy way to squeeze more money from your ads, it poses two main problems. The first is that it’s just really, really annoying. Having to load several pages just to read one article isn’t fun. You’re creating a barrier for your visitors that doesn’t 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 aﬀect the ranking of the article in search engine results.

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

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 website’s template — their website’s 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 benefits. The first benefit is that a good title communicates to your visitors a lot of information about what the page is about. People can quickly figure out if they’re in the right place or not. Remember that this title doesn’t just show at the top of the browser window; it’s 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 figure 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 diﬀerent 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 doesn’t mean you should load as many keywords as possible into the title — that defeats the first benefit — 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. Here’s an example of a good page title. This is a Smashing Magazine page title as seen in Safari:

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

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. Here’s what the HTML code looks like in the markup: <title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</title>

And here’s how the page is displayed in a Google search result:

4. Content that is diﬃcult 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. Don’t assume that your visitors will read everything from top to bottom. That would certainly be great, but unfortunately that’s not how it works. The Web bombards people with information, and most of us try to consume as much of it as possible. This

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

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 first, and then move to the next thing that captures their interest. The pattern looks a little like this:

The Basecamp landing page.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 86

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. Don’t 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 oﬀ by long paragraphs. Cut your copy down until no fat is left to cut.

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

The “Why you should use OpenOﬃce” page could definitely 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.

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

Things app’s 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 eﬀective, list actual benefits 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 people’s questions and fixing their problems doesn’t just mean that you have good customer service — it means you care, and your customers and visitors will appreciate it. But many websites still don’t give visitors an easy channel for getting in touch with the company. Some websites don’t even have an email address or contact form on them.

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

When you click on the contact link on the oﬃcial Coca-Cola website. you’re 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 doesn’t 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.

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

Enkoder is my favorite solution for putting email addresses on the Web. Enkoder is an application that comes in two flavors: 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 won’t be able to interpret the code — at least that’s the plan. You could also use contact forms to bypass the problem of showing your email address on a page; however, you’re 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 don’t 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 staﬀ 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.

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

The GetSatisfaction forum for Apple.

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

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 they’re looking for and don’t want to spend time learning the website’s 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 fifth 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 find specific 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 they’ll want to find it with a quick search. The good news, if you haven’t already implemented search on your website, is that it’s very easy to do. You don’t need to code your own search feature; search engines like Google and Yahoo have very likely already indexed most, if not all, of your website’s pages, so all you need to do is pick the one you want to use and plug in a search box.

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

Here’s 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 here’s 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” field to your website’s 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.

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

7. Too much functionality that requires registration Your website may have some content or features that require visitors to register before using. That’s 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 don’t lock away features that don’t really need user identification. Some blogs require people to register before posting. Sure, that will significantly decrease spam, but it will also significantly decrease the number of comments you see, too. User participation on your website is aﬀected 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 they’re already involved.

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

The GetSatisfaction interface allows you to fill in your comment about a company or product and then click the “Post” button. Instead of seeing your feedback posted, you’re greeted with an unexpected “Log in or register” message. Not good, considering the customer may already be frustrated.

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

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.

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

Posterous, a blog hosting network, doesn’t 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 isn’t meant to change; for example, a link to a blog article such as the one you’re 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 won’t see a 404 error page (“Page not found”): the 301 redirect forwards them to the right location, provided that you’ve set it up correctly. The number “301″ designates the type of redirect that it is: permanent.

Frye / Wiles 404 error.

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

There are various ways to do 301 redirects. How they’re implemented depends partly on the Web server you’re 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 file called “.htaccess” in your main website folder. Yes, the file name begins with a full stop. This means it’s a system file, which standard file browsers tend to hide by default. So, if you can’t see it using your file browser or FTP client, turn your “Display invisible files” option on. Just create or (if it’s already there) edit this file using your editor of choice. This file is retrieved whenever a visitor arrives on your website, and any redirect rules you put in there will be applied. Here’s 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 oﬀ). This is the engine that handles the redirects.

9. Long registration forms Registration forms are barriers. They are barriers because it takes effort to fill 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 identifier,

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

such as a user name or email address, and a password. If you don’t need more information, don’t ask for it. Keep the form short.

The ReadOz sign-up form is very long. On closer inspection, we find that half of the fields are optional. If they’re optional, they don’t really need to be there. Such a form would likely scare oﬀ a user seeing it for the first time. Show only what the person needs to register; the rest can be filled in later.

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

Tumblr has one of the shortest sign-up forms around. Just three fields: email, password and the URL of your new blog.

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

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 they’re 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.

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

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 oﬀer 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 eﬀective styles. We’ll 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 Let’s start oﬀ 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 first 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.”

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

Impulse Development

Because of the nature of the Web, users get frustrated if they cannot immediately find 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, don’t call your “About” page “Company info.” Don’t call your “Services” page “What we do.” And don’t 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.

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

Clearly Distinguish Primary And Secondary Sections Once you figure 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 designer’s job is to clearly indicate the diﬀerence so that users understand which parts of the website have the most important information. Consider the following example:

Edwards & Hampson

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

Edwards & Hampson’s website has a nice clear horizontal bar that serves as the user’s 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.

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

If, in fact, some of these links are less important, then designing the section to reflect 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

Designer’s 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”).

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

J Taylor Design

J Taylor Design makes a similar distinction by placing secondary links below the main navigation bar and using a diﬀerent 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. They’re still easy to access.

Put “Action” Links On Right If you’re 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.

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

Here are a few examples of websites that visually separate “action” links, while keeping them in the main navigation bar:

Sharify

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

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.

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

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 suﬃcient 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

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

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.

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

Below are some good examples of horizontal menus that visually indicate drop-down menus within them:

QN5 Music

Kinder-aktuell

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 113

Unfortunately, many websites do not feature this simple yet eﬀective marker. Below are a few examples of “surprise” drop-down menus:

webstudios

billoneil.com

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

Various Trends And Styles Finally, here is a showcase of horizontal navigation bars, to give you an overview of the diﬀerent styles on the Web and how they fit 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

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

inkd

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

HORIZONTAL NAVIGATION WITHOUT BAR

Full Cream Milk

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

My Favorite Thing

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

HORIZONTAL NAVIGATION BELOW PRIMARY PAGE HEADER

The Mindset Game

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

Lanbruk’s Gunya

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

HORIZONTAL NAVIGATION WITH ICONS AND TEXT

Mission Bicycle Company

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

HORIZONTAL NAVIGATION WITH NUMBERED LINKS

Glocal Ventures Horizontal Navigation Menus: Trends, Pa"erns And Best Practices (Part 2)

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

HORIZONTAL NAVIGATION WITH LEFT-ALIGNED LINK TEXT

Twitshirt

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

GROUPED LINKS UNDER HORIZONTAL NAVIGATION

Render

Auditude

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

SEMI-TRANSPARENT HORIZONTAL NAVIGATION BAR

Wetaskiwin Regional Public Schools

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

DESCRIPTIVE TEXT UNDER HORIZONTAL NAVIGATION LINKS

Eyemagine

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

LIQUID-WIDTH HORIZONTAL BAR WITH CENTERED LINKS

Jupiter Underfloor Heating

Cambridge Shakespeare Festival

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

HORIZONTAL LINKS DIVIDED BY GRAPHIC

Arca lui Noe Hotel

The Art of Non-Conformity

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

HORIZONTAL NAVIGATION AT BOTTOM

Lorem Ipsum

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

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 website’s conversion rates. So, before you design a horizontal navigation menu, consider link names, section hierarchy and any other factors that could aﬀect usability. In doing so, you will create a smooth user experience that allows visitors to find the information they want quickly and eﬃciently.

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

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 few innovative techniques could make your forms simpler and more eﬃcient to fill out. In this article, we’d 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. We’d love to hear about your case-studies and usability tests that aﬃrm or dismiss the suggestions proposed below.

Simplifying Sign-Ups The purpose of every sign-up form is for users to complete it successfully and send it in. However, if the form is long and complicated, then the user’s excitement for your website could turn to displeasure. Here are a few innovative techniques that will make your forms faster and easier to fill out.

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

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 that’s 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 won’t lose sign-ups from frustrated users, and you’ll prevent users from creating random and forgettable names just to satisfy the form’s requirements.

REQUIRE USERS TO TYPE THEIR PASSWORD ONLY ONCE Many sign-up forms ask users to type their password in two diﬀerent fields. The reason is understandable. Forms mask passwords for security reasons, so that snoopers can’t 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 can’t see the characters they’re inputting, making it diﬃcult to know whether they’re typing the right password each time.

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

A more eﬃcient 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 of text fields and decrease the work that users have to do to sign up. • jQuery Plug-In for Masking Passwords AUTO-FILL CITY AND STATE FIELDS BASED ON USER’S ZIP CODE If you require the user’s home address, then consider auto-filling the city and state fields based on the ZIP code. The form will be faster to fill out because users won’t have to waste time and energy manually selecting their city and state from drop-down lists. • Using AJAX to Get City and State from ZIP Code

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

AUTO-COMPLETE THE COUNTRY FIELD The conventional way for users to specify their country is to select it from a drop-down list. A more eﬃcient way would be to use an autocomplete text field. Instead of making users scroll through an alphabetical list of every country in the world, the text field 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. • AJAX Auto-Complete for jQuery

ALLOW USERS TO AUTO-FILL THEIR PAYMENT ADDRESS FROM THE SHIPPING ADDRESS If a user is buying a product, they’ll have to submit payment and shipping information. Most of the time, the addresses will be the same, so let them auto-fill one from the other. You could include a link saying “Same as shipping information” in the payment section, and when clicked, it would repeat the shipping data in the payment fields. • Copying Billing and Shipping Address Information with jQuery • Copy Form Input Data to Another Input Field with jQuery

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

DON’T 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 only because they have overlooked or misunderstood the option. If they’re not interested, they’ll unsubscribe sooner or later. Forcing them to subscribe won’t help you in the long run. And receiving a newsletter without having explicitly asked for it can turn users oﬀ. A more eﬀective approach would be to make users want to subscribe by showing them a preview or excerpt of the newsletter. This way, they’ll know what they’re missing if they don’t subscribe. You’ll also sleep well knowing that users who subscribe have done so because they’re genuinely interested in your content.

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

COMBAT SPAM BY HIDING A TEXT FIELD WITH JAVASCRIPT, INSTEAD OF USING CAPTCHA If you get a lot of spam, then putting a CAPTCHA on your form may be necessary. What’s not necessary is making the CAPTCHA an 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, it’s no wonder. • CAPTCHA’s Eﬀect on Conversion Rates • F**k CAPTCHA A simpler approach that won’t lower your conversion rate is to use a hidden and required text field generated with client-side Javascript. Spambots can’t fill in the field because they can’t interact with objects in client-side JavaScript; only users can. This method is 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 field 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 field is blank. If it isn’t, then you can safely ignore the submission because it was submitted by a spam bot.

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

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 eﬃciently. 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 flexibility could save them the time and headache of recovering the user name if they forget it.

LOG USERS IN WITHOUT LEAVING THE PAGE Logging in is 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 are a couple of ways to make this happen: a drop-down box or a modal window. The drop-down box will open without taking users oﬀ the page. It takes up only a small part of the page, making it a fast and lightweight option.

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

• A Simple and Eﬀective 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

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

AUTO-FOCUS THE FIRST TEXT FIELD Once the user sees the log-in form, they’ll be ready to log in. Make the process more eﬃcient by automatically focusing on the first field. This saves them the time and eﬀort 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 field so that the user knows they can start typing.

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

ALLOW USERS TO UNMASK THEIR PASSWORD This option is almost as useful for logging in as it is for signing up. If users can’t see the characters in the field, they could easily mistype the password. If their input is rejected, they’ll know that they mistyped something and will have to re-enter their password until they get it right. The problem is that users don’t know which character was mistyped and so can’t fix the mistake before submitting the form on the first attempt. This creates more work than necessary and makes users slow down their typing. Avoid this by adding a checkbox that 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 finding the password recovery link on your form. Instead of using a “Forgot your password” link, consider using a simple question mark button, which won’t 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 they’re having password trouble.

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

MAKE THE “SUBMIT” BUTTON AS WIDE AS THE TEXT FIELDS The log-in button isn’t just for taking action: it also lets users know what action they’re about to take. A small log-in button has weak aﬀordance and can make users feel uncertain about logging in. A wide button gives users more confidence and is hard to miss. The button’s label also becomes more visible, so that users are clearer about the action they’re taking.

ALLOW USERS TO LOG IN VIA FACEBOOK, TWITTER OR OPENID Nearly everyone has a Facebook, Twitter or OpenID account, and letting them log in with it brings big benefits. They can use your website almost instantly, without having to go through the sign-up process. Also, they won’t have to manage multiple user names and passwords across diﬀerent websites.

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

Of course, you could even go further and use Facebook Connect to actually pre-fill 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.

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

Conclusion Your sign-up and log-in forms shouldn’t make the user’s life diﬃcult. Spending time filling out a form is no one’s idea of a party. These innovative techniques will make your forms simple and eﬃcient, so that users can sign up and log in quickly and start enjoying your content.

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

About !e Authors Anthony T 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.

Smashing eBook #22â&#x201D;&#x201A;User Experience, Practical Techniques, Volume 2â&#x201D;&#x201A; 144

Luke Wroblewski Most recently LukeW was the Chief Product Oﬃcer (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, Volume 2│ 145