187295663 Smashing eBook 22 User Experience Practical Techniques 2

7/27/2019 187295663 Smashing eBook 22 User Experience Practical Techniques 2

1/145


2/145

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 22


3/145

ABOUT SMASHING MAGAZINE

Smashing Magazineis 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 GmbHis 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.

http://www.smashing-media.com/http://www.smashing-media.com/http://www.smashing-media.com/http://www.smashingmagazine.com/http://www.smashingmagazine.com/


4/145

About this eBookBy 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 ContentsImprove The User Experience By Tracking Errors

Designing Drop-Down Menus: Examples AndBest 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



5/145

Improvee User Experience By

Tracking Errors

Lara Swanson

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 errortracking using Google Analytics, with some code snippets. Then, well

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

field 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 visitor-

tracking 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



6/145

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

_trackEventis:

_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:

_gaq.push(['_trackEvent', 'Error', 'Sign In', 'Incorrect

Password']);

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:

_gaq.push(['_trackEvent', 'Error', 'Sign In', '']);

If its possiblefor the user to receive more than one error message on the

page at a time (for example, if theyve 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

http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.htmlhttp://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.htmlhttp://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.htmlhttp://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.htmlhttp://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.htmlhttp://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html


7/145

fields in a form; this could indicate that they are testing the form to see

which fields are required and which are optional. Youll 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 effects of individual error messages over time, so begin bytracking 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 404pages, you can see both. The following snippet will include the URL that

generated the 404 error and the URL that linked to that page:

_gaq.push(['_trackEvent', 'Error', '404', 'page: ' +

document.location.pathname + document.location.search + ' ref:

' + document.referrer ]);

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.



8/145

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 alerts conditions to include Event Action,

matching your errors name exactly. In this case, the error name is 404. Setit 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!



9/145

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 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 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 dont 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 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. Byselecting New Visitors and then hitting Apply, the data will update to

show only the errors that New Visitors have encountered.

http://www.smashingmagazine.com/2011/05/18/optimizing-error-pages-creating-opportunities-out-of-mistakes/http://www.smashingmagazine.com/2011/05/18/optimizing-error-pages-creating-opportunities-out-of-mistakes/


10/145

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 fixed the error and saw the error rate for ZIP and

postal codes drop.



11/145

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 affect a large group of people (i.e. ones that have ahigh 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.



12/145

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

fixed.

Once youve 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 adate 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.



13/145

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 field altogether, even though Id 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 diff

erent content on users: link to your most popularpages; 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.



14/145

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 websites overall user

experience.



15/145

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 greatnavigation 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 find more information about Nielsens study in his article

Mega Drop-Down Navigation Menus Work Well.

http://www.useit.com/alertbox/mega-dropdown-menus.htmlhttp://www.useit.com/alertbox/mega-dropdown-menus.htmlhttp://www.useit.com/alertbox/mega-dropdown-menus.htmlhttp://www.useit.com/alertbox/mega-dropdown-menus.htmlhttp://www.useit.com/alertbox/mega-dropdown-menus.htmlhttp://www.useit.com/alertbox/mega-dropdown-menus.html


16/145

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.

http://www.foodnetwork.com/http://www.foodnetwork.com/


17/145

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 sub-

navigation. Take a look at the design below. A drop-down element contains

all of the different categories for a certain section of the website.



18/145

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 layoutelements, such as the sidebar.



19/145

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.



20/145

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 layoutwithout negatively impacting usability.



21/145

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.



22/145

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.



23/145

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



24/145

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 theuser 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 drop-

down menus.



25/145

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.



26/145

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.



27/145

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 allbrowsers, 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 first list item in the drop-down menu.



28/145

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.



29/145

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.



30/145

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.



31/145

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.



32/145

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 semi-

transparent elements is to keep a strong and readable contrast.



33/145

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:ExamplesAndBestPractices(Part2)



34/145

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.

http://www.navigantconsulting.com/http://www.navigantconsulting.com/


35/145

Panasonic

Although this menu is well-styled, it is difficult to use because of a bad hover

effect.

http://www.panasonic.com/http://www.panasonic.com/


36/145

Toshiba

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

http://www.toshiba.com/tai/index.jsphttp://www.toshiba.com/tai/index.jsp


37/145

LG

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

to use.

http://www.lge.com/us/index.jsphttp://www.lge.com/us/index.jsp


38/145

Chrysler

The Chrysler page uses a drop-down menu with very small text, which

makes it difficult to read.

http://www.chrysler.com/en/#http://www.chrysler.com/en/#


39/145

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 difficult to navigate.

http://www.sun.com/http://www.sun.com/


40/145

Creative Labs

The menu below is cluttered and does not have a delayed hiding or similar

technique, so it is not very usable.

http://us.creative.com/welcome.asphttp://us.creative.com/welcome.asp


41/145

HP

Another hover menu that lacks usable features.

http://www.shopping.hp.com/webapp/shopping/store_access.do?template_type=landing&landing=notebookshttp://www.shopping.hp.com/webapp/shopping/store_access.do?template_type=landing&landing=notebooks


42/145

Alienware

The black menu on the black design makes this drop-down difficult to use.

http://www.alienware.com/http://www.alienware.com/


43/145

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.

http://www.sony.com/index.phphttp://www.sony.com/index.php


44/145

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.

http://www.actionenvelope.com/http://www.actionenvelope.com/


45/145

Helmy Bern

A beautifully styled menu, with a fade transition.

http://www.helmy-bern.cz/http://www.helmy-bern.cz/


46/145

RedBrick

This menu is cleanly styled and very readable.

https://www.redbrickhealth.com/https://www.redbrickhealth.com/


47/145

REI

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

http://www.rei.com/http://www.rei.com/


48/145

Philips

Philips has a large and usable drop-down module.

http://www.usa.philips.com/index.pagehttp://www.usa.philips.com/index.page


49/145

Walmart

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

http://www.walmart.com/http://www.walmart.com/


50/145

Samsung

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

http://www.samsung.com/us/http://www.samsung.com/us/


51/145

Epson

Epson shows another usable drop-down menu.

http://www.epson.com/cgi-bin/Store/jsp/index.dohttp://www.epson.com/cgi-bin/Store/jsp/index.do


52/145

Mini Cooper

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

Designing Drop-Down Menus:ExamplesAndBestPractices(Part3)

http://www.miniusa.com/http://www.miniusa.com/


53/145

Gateway

Here is another usable drop-down element.

http://www.gateway.com/http://www.gateway.com/


54/145

Asus Global

A well-styled menu that has delayed hiding.

http://www.asus.com/index.aspxhttp://www.asus.com/index.aspx


55/145

Intel

A very clean drop-down menu.

http://www.intel.com/business/index.htm?iid=gg_work+home_businesshttp://www.intel.com/business/index.htm?iid=gg_work+home_business


56/145

Target

A well-organized menu that has delayed closing.

http://www.target.com/http://www.target.com/


57/145

Garmin

This drop-down menu is simple yet functional.

http://www.garmin.com/garmin/cms/site/ushttp://www.garmin.com/garmin/cms/site/us


58/145

Logitech

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

http://www.logitech.com/http://www.logitech.com/


59/145

Incase

This menu is very basic but serves its purpose.

http://goincase.com/http://goincase.com/


60/145

evelMerch

A small yet functional drop-down, with a graphic to show users that the

button opens a menu.

http://www.evelmerch.com/http://www.evelmerch.com/


61/145

IBM

A multi-level drop-down is used here, but a slight delay makes this one

easier to use.

http://www.ibm.com/us/en/http://www.ibm.com/us/en/


62/145

EA

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

http://www.ea.com/http://www.ea.com/


63/145

ACTIVISION

This menu is clean and has delayed hiding to improve usability and

functionality.

http://www.activision.com/index.html#home%7Cen_UShttp://www.activision.com/index.html#home%7Cen_US


64/145

Yahoo! Finance

The menu on Yahoo! Finance has large buttons and icons to show where

menus can be opened.

http://www.activision.com/index.html#home%7Cen_UShttp://www.activision.com/index.html#home%7Cen_US


65/145

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 analysisof 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 dealbig enough that some websites

have started exploring new designs solutions for the old problem.

http://www.uie.com/articles/three_hund_million_button/http://www.uie.com/articles/three_hund_million_button/http://www.uie.com/articles/three_hund_million_button/


66/145

Isis 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. Inother 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 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 profile image

and user name of the account you are trying to sign into as well:

http://www.gowalla.com/http://www.gowalla.com/


67/145

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 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 Quoratakes 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

http://www.quora.com/http://www.quora.com/


68/145

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 doesmatch an account on Quora, then the

accounts profile image and user name will appear to the right of the log-in

form. This confirmation 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

confirmation instantly.



69/145

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 intoQuora. All you need to do to enter the website is click on your profile 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 emailaddress 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.



70/145

Single-sign-on solutionssuch 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 first (usually in a new dialog box or

browser tab). After doing so, they will be instantly redirected to Gowalla and

logged in.

http://www.facebook.com/press/info.php?statisticshttp://www.facebook.com/press/info.php?statisticshttp://www.facebook.com/press/info.php?statisticshttp://en.wikipedia.org/wiki/Central_Authentication_Servicehttp://en.wikipedia.org/wiki/Central_Authentication_Service


71/145

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

New Log-In Problems

But with these new benefits come new problemsusually 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 thesefolks 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 failto log in.



72/145

To make matters worse, if someone picks the wrong provider, instead of

signing into 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 accountdefinitively 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 designson Bagcheck.

Our most recent sign-in screen (below) is an attempt to reduce confusion

and prevent the types of errors I have just describedadmittedly, though, atthe 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.

http://bagcheck.com/blog/02http://bagcheck.com/http://bagcheck.com/http://bagcheck.com/blog/02http://bagcheck.com/blog/02


73/145

The current Bagcheck sign-in screen does not reveal any log-in options until you

select your name or enter your email address.



74/145

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-offworth

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 itsnot 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-off

s may not be worth it. Logging into awebsite 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 third-

party 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 devicescan influence design decisions.

http://www.lukew.com/ff/entry.asp?1333http://www.lukew.com/ff/entry.asp?1333http://www.lukew.com/ff/entry.asp?1333http://www.lukew.com/ff/entry.asp?1333http://www.lukew.com/ff/entry.asp?1333http://www.lukew.com/ff/entry.asp?1333http://www.lukew.com/ff/entry.asp?1333http://www.lukew.com/ff/entry.asp?1333


75/145

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



76/145

Since launching this log-in experience on Bagcheck, weve gotten a lot of

great feedback and ideasfor 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 adifferent 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 profile 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 profile

pages are public, and be aware that people may still be a bit sensitive about

it.

http://bagcheck.com/blog/02http://bagcheck.com/blog/02


77/145

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 Toolkitand Account Chooserallow people to sign in

across the Web using just their emailaddress:

Googles 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 inon Googles website

or implement it on your website with Googles Toolkit.

http://code.google.com/apis/identitytoolkit/http://code.google.com/apis/identitytoolkit/http://code.google.com/apis/identitytoolkit/https://sites.google.com/site/gitooldocs/experiment---account-chooserhttps://sites.google.com/site/gitooldocs/experiment---account-chooserhttps://sites.google.com/site/gitooldocs/experiment---account-chooserhttps://sites.google.com/site/gitooldocs/experiment---account-chooserhttp://code.google.com/apis/identitytoolkit/http://code.google.com/apis/identitytoolkit/


78/145

Selecting from multiple accounts on Googles experimental sign-in page.

e Lileings Maer, 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 beharder than on full keyboard computers. Coupled with obscured password

fields, this can make logging into a website on a mobile device a challenge.

Facebooks mobile Web experiencetackles 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 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.

http://mashable.com/2011/03/31/facebook-launches-mobile-website-for-all-phones/http://mashable.com/2011/03/31/facebook-launches-mobile-website-for-all-phones/


79/145

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 benefit 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 Webchances are none of them

will. But without trying, well never know.



80/145

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 usabilityproblems that websites commonly face, and somerecommended 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):

http://news.ycombinator.com/http://news.ycombinator.com/http://news.ycombinator.com/


81/145

Heres an example of the same interface element, the comments link, but

this time with a much larger clickable area:

Newspondcomments 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:

Example Site

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 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. Its just really easy to click the

links. It feels like the links are working with you instead of against you.

http://newspond.com/http://newspond.com/http://newspond.com/http://www.37signals.com/svn/posts/1048-padded-link-targets-for-better-mousinghttp://www.37signals.com/svn/posts/1048-padded-link-targets-for-better-mousinghttp://newspond.com/http://newspond.com/


82/145

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 sensebecause displaying too many items on one page would make the page

slower to download and process.

FeedMyAppuses pagination in the right way: to display its vast list of apps indigestible 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.

http://www.feedmyapp.com/http://www.feedmyapp.com/http://www.feedmyapp.com/


83/145

The Wired article about Googles logois 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 first 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.

http://www.wired.com/techbiz/startups/multimedia/2008/02/gallery_google_logoshttp://www.wired.com/techbiz/startups/multimedia/2008/02/gallery_google_logos


84/145

3. Duplicate page titles

The title of each Web page is important. Page titles are the pieces of text we

write between the tags in the section of our HTML code.

Sometimes people create a generic title while working on their websitestemplate 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 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

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 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 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 yourpage is to a particular search term. This doesnt 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.

Heres an example of a good page title. This is a Smashing Magazine page

title as seen in Safari:



85/145

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:

Vintage and Blues WordPress Themes | Freebies |

Smashing Magazine

And heres how the page is displayed in a Google search result:

4. Content that is difficult 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 howpeople 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



86/145

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 Basecamplanding page.

http://www.basecamphq.com/http://www.basecamphq.com/


87/145

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, higher-

contrast 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 tounderstand 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 offby long

paragraphs. Cut your copy down until no fat is left to cut.



88/145

The Why you should use OpenOffice 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.

http://www.openoffice.org/http://www.openoffice.org/


89/145

Thingsapps 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 benefits rather than feature names.

5. Noway to get in touchUser 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 fixing 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.

http://culturedcode.com/things/http://culturedcode.com/things/http://culturedcode.com/things/


90/145

When you click on the contact link on the official Coca-Colawebsite. 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.

http://www.cocacola.com/http://www.cocacola.com/


91/145

Enkoderis 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 asa 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.

GetSatisfactionis a Web app that works like a forum. Users can post their

problems and feedback as topics on the board, and customers and staffcan

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.

http://www.getsatisfaction.com/http://www.getsatisfaction.com/http://www.getsatisfaction.com/http://hivelogic.com/enkoderhttp://hivelogic.com/enkoder


92/145

The GetSatisfaction forum for Apple.

http://getsatisfaction.com/applehttp://getsatisfaction.com/apple


93/145

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 callsthese people search-dominant users:

Our usability studies show that more than half of all users are search-

dominant, 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 rememberreading a while back, and chances are theyll want to find 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.



94/145

Heres the form code for using Google as your search engine:

And heres the one for Yahoo:

To make it work, all you need to do is change the value of the hidden field

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.



95/145

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 asemail, 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 Diggand Redditwithout

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

http://www.reddit.com/http://www.reddit.com/http://www.digg.com/http://www.digg.com/


96/145

The GetSatisfactioninterface allows you to fill 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.

http://www.getsatisfaction.com/http://www.getsatisfaction.com/


97/145

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.

http://www.pixlr.com/http://www.pixlr.com/


98/145

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 / Wiles404 error.

http://fryewiles.com/404http://fryewiles.com/404http://fryewiles.com/404http://www.posterous.com/http://www.posterous.com/


99/145

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 file called .htaccess in your main

website folder. Yes, the file name begins with a full stop. This means its a

system file, which standard file browsers tend to hide by default. So, if you

cant see it using your file browser or FTP client, turn your Display invisible

files option on. Just create or (if its 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.

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

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 futureto 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,



100/145

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 ReadOzsign-up form is very long. On closer inspection, we find that half of

the fields are optional. If theyre optional, they dont really need to be there. Such

a form would likely scare offa user seeing it for the first time. Show only what the

person needs to register; the rest can be filled in later.

http://www.readoz.com/http://www.readoz.com/


101/145

Tumblrhas one of the shortest sign-up forms around. Just three fields: email,

password and the URL of your new blog.

http://www.tumblr.com/http://www.tumblr.com/http://www.tumblr.com/


102/145

The Basecampsign-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.

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

http://www.basecamphq.com/signuphttp://www.basecamphq.com/signup


103/145

Horizontal Navigation Menus: Trends,

Paerns 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 thoselimitationsbefore 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 lesseffective styles. Well also look at several trends that developers canchoose

from when working on the navigation design for their next project.

Use Familiar Names For Links

Lets start offwith 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.

http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/


104/145

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

http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/http://impulsedevelopment.com/


105/145

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

http://www.ehjoinery.com/http://www.ehjoinery.com/http://www.ehjoinery.com/


106/145

Edwards & Hampsons website has a nice clear horizontal bar that serves as

the users primary means of navigatin

Documents

187295663 Smashing eBook 22 User Experience Practical Techniques 2