Quick Summary: In part 1 and part 2 of this article we looked at the ways in which store locators leave users frustrated, and we explored ways to address the problems.  In the third part of this article we look at some additional best practices and touch upon a few special considerations.

Continuing on with our look at store locator best practices, it’s also sensible to:

Prioritize the information customers are most likely to need. In most situations, customers looking for a store will need one or more of the following:

• Street address (including city and state)
• Telephone numbers
• Hours of operation
• Any important differentiators (e.g. – retail store versus a warehouse, a location with special services, etc.)

Sometimes it’s also helpful to include:

• A mention of nearby landmarks (“just 1 block East of the freeway”)
• Brief special instructions if applicable (“parking available in back”)

… and naturally some customers may also (or instead) wish to see a map. So the structure of store locator results should make it easy to see any of this information without unnecessary extra steps. The store locators from OfficeMax and Staples that I showed in Part 2 of this article do just that; they give users the basic information about each nearby store, then make it easy to see a map and/or get driving directions. This is a good balance.  Store locators that display giant maps and don’t include the other information listed above – or include it but make it hard to find – aren’t helping themselves or their customers.

Some companies also need to differentiate the services offered at each location. Websites like Home Depot list specialists who work at each store (e.g. – “John Smith, master plumber”); this is a great idea since it anticipates and addresses a possible customer question “Does anyone at that location know about plumbing?”.

Offer to email or text directions. Some users may wish to keep the directions and other information on their mobile device or in an email account. It may be beneficial for them to have an option to email or text the store information. This is still a relatively uncommon practice, but it’s growing in popularity. It’s a great idea. One place I’ve seen it is on bank store locator functions that use a third-party application called LocatorSearch. Here’s a screen shot from the LocatorSearch demo:

The option to send store information to a phone is an excellent convention.

As you see, each bank location includes an overview with the address and services available and a option to “Send to Phone”. What I don’t see here is a telephone number, but this is presumably something that can be added by the individual financial institutions that use the software.

Provide good error handling. It bears mention that applications and websites should always provide clear and specific feedback when users encounter an error. Yet, some store locators fail to deliver on this basic requirement. The PetSmart store locator, while generally very good, doesn’t have much to say when no stores are available in a particular ZIP code:

PetSmart's generally good store locator doesn't say enough when it can't find a nearby store.

Just as websites can be more helpful when an item is out of stock,  store locators can also provide helpful and usable feedback when a customer attempts to locate a store in an area that doesn’t have one. In the cases depicted above, a better solution would be to show an obvious and more conversational statement such as “Sorry, there are no stores within 20 miles of zip code xxx. Our nearest store is 35 miles from this zip code and is displayed below.”

Be sure the information is current. This is another suggestion that falls under the “obviously!” category, but it’s important to ensure that as company locations change the store locator database is kept current. More than once I’ve heard stories of people getting out of date addresses from a store locator and going on a wild goose chase. It’s easy to see why this would be an especially frustrating experience for customers.

A related problem: distributor/retailer locator

A different but related problem can be seen with companies that sell only through distributors and other channel partners, and don’t have their own retail locations.

Customers may come to these websites wondering “Where can I buy your products?”; naturally it makes sense to address this question. It’s a mistake for companies to assume that only trade professionals or large-scale retail buyers will encounter their website.

Here’s an example from a company that makes industrial lubricants. Some of their products are of interest to consumers (for example automotive and woodworking hobbyists), but their product lines are typically sold only through third party industrial supply companies such as WW Grainger.

The LPS “Distributor Locator” looks like this:

LPS' distributor map doesn't provide useful feedback when it can't find a distributor.

The large map isn’t clickable.  If the user enters a zip code where there’s no distributor, the page simply refreshes without displaying an error message. Oops. I think what they’re trying to say is “Sorry, we don’t know of a distributor near you where you can find our products.”

But as I mentioned above LPS sells many of its products through WW Grainger, which has a large e-commerce storefront. And even Amazon.com has merchants who sell LPS products. Even if there’s no “Distributor” nearby there are alternative ways to purchase LPS products. Since the website doesn’t mention this, they’re needlessly turning customers away.

Wrapping up: store locator usability

As we’ve seen from the examples in each part of this article there are many ways to make store locators more usable and generally more functional. The key requirements are:

• An easy to find locator function (preferably on the Home and other key pages)
• A simple and robust entry form that can accept a wide range of inputs
• An easy way to search a second time if needed
• Finding a good and usable balance between text information and maps
• A focus on prioritizing the information users are most likely to need and want
• The use of good, flexible third-party mapping applications
• Accurate and current information

Ensuring your store locator meets these criteria will make it easier and faster for customers to find your stores, and should enable them to arrive there in a mood to buy rather than curse your website.

Related posts:

1. Store locator usability: problems and best practices, part 2
2. Store locator usability: problems and best practices
3. Reduce costs and improve usability with visual standards, part 1

Quick Summary: In part 1 of this article we defined the problem: store locators often suffer from poor usability. Here in part 2 we continue our look at ways to improve them.

Let’s continue where we left off with our examination of improving store locators.

Store locator best practices, continued

Avoid too many search criteria; offer flexible entry. Keeping the initial search simple and usable requires focusing on the essentials. A sensible minimum amount of information for most store locators is:

• ZIP code or City and state
• An optional search radius with a clearly defined default setting

Presenting separate fields for City, State and ZIP code is common, but it’s better to display a single field that can accept a variety of inputs.

The PetSmart store locator below meets these critera, though as I mentioned in part 1 of this article the minimum search radius is too large for areas with many stores. PetSmart would do well to add a 5 or 10 mile radius option then examine their log data to determine if customers use it.

In some cases it makes sense to also offer additional options. For example, a bank website may wish to enable users to search for ATMs or branch locations. PetSmart has veterinary services at some stores, and they wisely enable users to search only for these locations

Reiterate the search; enable follow-ups. Once the user has initiated a search, it’s always wise to reiterate the search criteria as part of the search results display. This reinforces successful completion of the action and reduces the chances for problems if the user has made an entry mistake (for example, entering the wrong zip code).

As I mentioned in part 1, it’s also sensible to make it easy for users to quickly change the parameters and conduct another search if needed.

Display a list view as a default. Some store locators display nothing but a large map for their store locator search results. Others use a list of stores, map with a list of stores beneath or beside it. It’s important to remember that some users may not want or need to see the map – some may want only to see a street address they can plug into their GPS. Or, they only wish to find the nearest store’s hours. So it’s sensible to include a list of stores – and to make sure it’s easily visible.

Use a good map. It seems silly to even point it out, but store locators should incorporate good maps. With a number of mapping APIs to choose from it’s a wonder some websites still rely upon relatively primitive and inflexible mapping services. Consider the difference between this map from the Circle K convenience store website and a map from their competitor 7-11:

This Circle K map of Mesa, Arizona locations is generated by MapQuest  and has no options for user control at all. Users who wish to zoom or otherwise change the view are out of luck. They must conduct a new search with a smaller radius.

By comparison the 7-11 map, generated by Microsoft, is sophisticated and offers a great deal of user control:

Which would you rather use?

Consider making maps optional. Large map displays work well for users connecting from their home or office. But what about those with mobile devices? What about users who are looking primarily for the hours or a phone number?

For these and other use cases a very large map can be problematic.

One good approach is to default to a list, but also enable users to quickly see a map. Websites for Staples and its competitor OfficeMax both do this:

Note the prominent link to “View map of all stores…” located above the Staples search results, and OfficeMax’s prominent large green “MAP” buttons next to each listing. This is a better balance of information than the default large maps displayed by many store locators.

Both of these store locators work well on mobile devices. In fact Staples.com wisely displays a separate mobile-friendly version of their website when it detects a mobile device.

Avoid rich media for store locators. A number of store locators rely upon rich media like Flash to display search results. This is usually a bad idea*. In most cases Flash doesn’t add any real value to a store locator, and more importantly, some computers and mobile devices don’t support it at all.

The Bass Pro website employs Flash within its store locator search results. Here’s how it looks on a computer equipped with Flash:

But here’s how the same results appear on an iPhone, which doesn’t currently support Flash:

On first glance the user might well be drawn to the large blank area of the screen and assume that the store information can’t be displayed. As it turns out the store address and hours are displayed – to the left of the image. Still, this isn’t exactly an optimal experience.

Flash is a sensible technology for some applications, but store locator search results is not one of them. It’s preferable to use a simpler display that’s more widely supported.

* Side note: I’m not one of those “All Flash is bad” people. But I am a Flash skeptic and believe strongly it should only be employed where it adds necessary flexibility, and where it is widely installed among the intended audience. I don’t mean to pick on Flash, either. I apply the same logic to any use of rich media (videos, animations, etc.)

In part 3 of this article we’ll cover some additional best practices and wrap things up.

Related posts:

1. Store locator usability: problems and best practices
2. Store locator usability: problems and best practices, part 3
3. Reduce costs and improve usability with visual standards, part 1

Quick Summary: Many would-be bricks-and-mortar shoppers go online to find the location of a nearby retail store. Often their efforts are frustrated by the poor usability of store locators. In this multi-part article we’ll examine the problem and explore some best practices.

It’s hard to imagine any company making it more difficult than necessary for customers to shop in their retail stores. Yet this situation occurs on a regular basis; websites often fail to provide highly usable store locators.

A warning up front: this topic requires that I include quite a few large visual examples. Bear with me; I think you’ll find the images useful.

The situation

Customers want to find your store. And these days fewer of them use phone books. Instead they rely on the internet to locate a store, determine its hours, and calculate a route to get there. Not only that, many of your customers have GPS devices in their cars and pockets, and may need nothing more than an accurate street address to find your store.

Store locator usability problems

Customers often come to a company’s website in search of a nearby retail location. But their efforts are impeded or derailed by poor usability. Common barriers include:

• A store locator link that’s difficult to find
• Inadequate search flexibility
• Too little information displayed in search results
• Too much information displayed in search results
• Use of rich media like Flash to display results
• Poor error handling

Many of these problems stem from mistaken assumptions about how customers use the Internet and what they need when they’re looking for a store.

The stakes here are pretty obvious. If customers can’t find your store they may:

• Encounter frustration, resulting in a negative customer experience
• Give up
• Go to a competitor

These aren’t positive outcomes are they?

Store locator best practices

There are a number of considerations that should inform the way in which a store locator works. Best practices include:

Make the function/link easy to find. It’s an obvious suggestion but one that’s sometimes overlooked. The link to a store locator needs to be where users expect to find it. This goes for the critical home page as well as pages throughout the website. Many websites already do a good job of this, as in this example:

But others are less effective in making this important link easy to find.

Consider this image from the home page of PetSmart competitor PetCo:

Here the store locator function is in a good location but displayed using light gray type. Note how the light gray links are displayed near the much darker type of other navigation options. This makes it more difficult than necessary for users to notice the locator link.

There’s no universally accepted “best” location for a store finder link, however many websites place it near the top right of the home page. This location works fine provided the text is large enough and has enough contrast (more about type size and contrast in this article).

One way to simplify and improve the usability of a store locator to integrate it directly into the home page. This saves users the extra step of clicking a link to access it. An example of this can be seen on the Lowe’s website:

Requiring one less step improves the user experience and also makes the locator more “mobile friendly” (more on this later).

Smart, flexible radius is your friend. It’s wise to enable easy selection of a wide range of search radii. Why? For some companies the number of stores can vary drastically in different cities. This can create some serious problems with displaying store search results.

If you’re looking for a PetCo location in Lincoln, Nebraska there are only two choices:

This search allows no choice of search radius; it defaults to a distance of 20 miles. This is fine; with so few stores in Lincoln a 20 mile radius works well because it enables users to see stores in nearby Omaha.

On the other hand, a search for PetCo locations by zip code in West Los Angeles returns this map:

The much greater number of stores should logically trigger a smaller default radius. But it does the opposite; it defaults to a larger 40-mile radius. This creates an extremely dense display that’s not very user-friendly. Worse, there’s no option to refine the search results by selecting a smaller search radius.

The good news in PetCo’s case is that beneath the map there’s a list of stores sorted by proximity. But users are out of luck if they wish to find a convenient location using the provided map.

Simply offering an easy way to adjust the radius (for example with a drop-down menu above the map) would transform this store locator map from essentially unusable to very helpful.

Speaking of map display problems, my favorite example of a badly implemented store display can be found on this page from the Joann Fabrics website:

This map does one thing very effectively: it communicates that Joann Fabrics has many locations. But the density of store markers renders the display nearly useless. Fortunately the Joann website does a better job of displaying results once the user enters their search criteria. Still, they’d do well to skip displaying the map until a user searches for a specific location.

In part 2 of this article we’ll continue examining store locator best pracices – including methods for keeping search criteria simple but flexible.

Related posts:

1. Store locator usability: problems and best practices, part 2
2. Store locator usability: problems and best practices, part 3
3. Regrettable User Experience: too much information

Quick summary:  In part one of this two-part article we examined ways in which weak or missing visual standards detract from website and application usability. Here we look at ways to address the problem.

We’ve looked at the problems created by a lack of visual standards. And we’ve considered some reasons these problems arise. Now let’s examine activities and methods that can improve visual standards and help ensure they have a positive effect on user experience.

There are a number of activities that should be integrated into your development and production processes to improve visual standards. Consider the following:

Seek consensus; encourage participation. It’s critical that the importance of standards be understood and agreed throughout your team – and throughout your organization. It can be helpful to communicate to team members and other stakeholders that standards enforcement is a shared responsibility and affects bottom-line success. For managers it may be helpful to reward individual contributions to creating, enforcing, reviewing and improving standards.

Create and document. Naturally it’s necessary to create standards documentation. This starts with discussion and decisions about appearance and placement of elements such as links, blocks of copy, site-wide navigation, breadcrumbs, graphics, logos, and form elements. Everyone agrees to the initial standards, then they’re documented.  Documentation should include as many visual examples as needed. (Side note: I’ll devote a future article to picking apart a standards document and providing guidance for creating one).

Visual standards don’t need to be high-fidelity representations. It’s often fine to use wireframes or rough graphics to represent initial standards ideas (general appearance of forms and dialogs or the sequence of information within a display). As the final graphics are created you can always go back and update the standards document with the most recent examples.

Share. The best visual standards document does little good if it’s not shared and readily accessible. While it may seem obvious, this step is sometimes overlooked. Ensure all members of the team have the document(s) and place them in a widely accessible central repository. Updates should be circulated to the team in a “push” manner rather than a passive “come get it whenever”.

Deputize. It’s often helpful to assign one team member the job of “standards cop”. For many teams it makes sense for this role to fall to a project or product manager. But it could just as easily be a graphic designer, developer or any team member granted the authority to monitor adherence to the documented standards.

Review. Adherence to standards  should be assessed periodically, as should the standards themselves. This probably isn’t necessary at every product meeting (especially for scrum or agile teams who have very frequent, brief meetings) but it should be done multiple times throughout the development process. It often makes sense for the “standards cop” or product/project manager to lead the standards review, though this is a matter of individual team culture and process. Reviews may at times reveal that the standards should be revised (see below).

Revisit. A standards document should be considered a “living document” and not a one-time affair. Technologies and business goals change over time, as do user needs. It’s sensible to periodically revisit the standards and ensure they reflect the most current vision and realities of the product and its audience.

Indoctrinate. If team members are added be sure to include standards discussion and documentation as part of the ramp-up process. If it helps, think of it as a very mild and beneficial form of brainwashing.

Creating and applying visual standards needn’t be especially complex or time-consuming. Best of all it can result in big payoffs:

• Greater consistency (different screens look like they belong to the same site/application)
• Easier and faster to produce the product (everyone’s on the same page; less confusion)
• Fewer fixes  (reduced need to hunt down inconsistencies post-launch)
• Improved usability (users will find it easier to understand and use the interface if it’s consistent)

All that in return for a little attention to visual standards?

Seems like a good deal to me.

Photo by charlottel. Creative Commons licensed.

nv879qa6t4

Related posts:

1. Reduce costs and improve usability with visual standards, part 1
2. Store locator usability: problems and best practices
3. Store locator usability: problems and best practices, part 3

Quick summary:  Lack of attention to visual standards usually leads to poor usability. In the first part of this two-part article we’ll look at the reasons visual standards are important, the hidden costs of ignoring them, and the reasons standards are often weak. In part two we’ll delve into ways to address these problems.

There’s often a strong correlation between the overall usability of an application or website and the degree to which it adheres to a set of visual standards.

Let’s start by defining the term. By “visual standards” I’m referring to placement and appearance of navigation, links, graphics and text. Visual standards can also relate to the sequence and flow of information within a display.

There are many other standards that affect usability such as copy writing and error messaging, but I’ll get to those in other articles.

In the design world visual standards are most often associated with appearance and placement of branding elements such as logos, type, and the use of color and layout. These elements certainly relate to usability but they’re a different aspect of what I’m addressing here.

Why visual standards affect usability… and your bottom line

Let’s look at the impact of visual standards on usability and user experience. Creating consistency in the appearance and placement of images, type, graphics, links and other important elements enables users to:

• Learn and understand displays and processes faster and more efficiently.
• Find information and navigation without the need to re-learn or “hunt” for similar links and information across multiple screens.
• Quickly determine what’s important (and what’s not) within a display – making it easier to focus on the links and information most critical to the task at hand.

These attributes have a strong impact on  ease of use, and often affect conversion and abandonment rates.

They also impact brand consistency and the reinforcement of  brand attributes.

Unfortunately companies sometimes overlook the degree to which visual standards affect the efficiency and cost of development, training and support. A lack of strong visual standards usually goes hand-in-hand with steeper learning curves and greater reliance upon training and support.  That can be very expensive!

Ultimately poor standards lead to a lower degree of user acceptance, lower levels of user satisfaction and higher implementation and support costs. They also increase the likelihood that the website or application will require costly re-work after initial release.

Why visual standards fail

If visual standards are this important then why doesn’t everyone get them right the first time?

There are many reasons, but just a handful of common themes. Do any of these sound familiar?

Standards are never created. When a product or website is in the planning or architecture stage, strong visual standards sometimes end up on the “nice to have” list rather than the “essential for launch” list. Or they’re included as a requirement but abandoned as production deadlines loom.

Standards are created but weak. In some cases visual standards are defined in a manner inadequate to the project – for example, too general or lacking concrete examples. Or standards may be specific but have significant gaps. This can force team members to guess about look and placement of information and navigation.

Standards are created but not enforced or updated. Sometimes visual standards are defined for the first release of a product or website, but the team strays from them over time. This can happen for any of several reasons:

• No one is given the responsibility to review and enforce adherence to the standards.
• When new members join the team they may not be aware of the standards or may not take them seriously.
• A shifting business landscape necessitates changes and the standards are again given “nice to have” status.
• The product changes but the standards aren’t revisited. Thus the visual standards no longer reflect the needs and realities of the product.

There are conflicting standards. Visual standards often suffer when there are multiple teams operating independently of one another. Sometimes language barriers complicate project communication. A lack of communication between teams on the same product can cause multiple standards to emerge – especially if the project and product management isn’t centralized.

Sounds like a recipe for trouble doesn’t it?

It is, but there are a number of steps you can take to avoid these problems or resolve them if you’ve already got them.

In part two of this article we’ll examine methods and considerations for creating visual standards. We’ll also look at ways to ensure they’re applied in a way that will support user goals and improve usability.

Photo by charlottel. Creative Commons licensed.

Related posts:

1. Reduce costs and improve usability with visual standards, part 2
2. Store locator usability: problems and best practices
3. Store locator usability: problems and best practices, part 2

Quick summary: Improving type readability doesn’t have to be difficult. Attention to a few basic rules can ensure that users can easily notice and read important text on your website or in your application.

In this article we’ll examine the ways in which type readability affects usability and user experience and we’ll cover some best practices for avoiding common pitfalls.

In part 1 we looked at common problems with the way websites and software display type. We also covered some reasons why they can lead to more serious problems like abandonment and unnecessary calls to customer support/help lines. Now let’s get in to solving the problems.

Applying a relatively simple set of rules can avoid most of the situations noted above and some otherwise significant usability problems.

1. Pay attention to formatting.  In most cases it pays to employ relatively narrow margins, because they’re simply easier to read. Consider these two examples:

Narrow margins are easier to read and generally more usable.

Very wide margins require more work to read. They can cause usability and display problems.

For blocks of text more than a paragraph it’s helpful to use breaks and section headers to separate the information. This makes it easier for users to scan the content and find what they want.

Breaking text into smaller blocks makes type easier to read and more usable.

Dense blocks of text are hard to read. Users often skip right over them.

For shorter blocks of copy such as single phrases or sentences it’s often wise to employ bold type and/or underlining to highlight key words and phrases. For example:

Your order will not be complete until you click this button

…or in the case of a typical error message

Sorry, we need your email address

2. Avoid small type. This may seem an obvious suggestion but as noted previously it’s a surprisingly common problem. When you consider the number of people with imperfect vision and the tendency to overlook anything that appears to be “the fine print” it becomes clear that text should always be a size that’s easy to read, especially when it’s important to successful completion of a process.

It's important to keep type large enough to be easily readable.

3. Use larger type to emphasize important information. A corollary of the previous statement is that it helps to use larger type when displaying text that’s especially important. For example a confirmation screen that includes an invoice or order number should display the number larger than other type on the page since it’s likely to be a key piece of information. For more on confirmation page best practices, see this article.

4. Combine colors carefully; lean towards higher contrast. You should always strive to avoid low-contrast color combinations like light gray against white or the use of colored text and backgrounds that are in the same basic color and hue range. It also makes sense to test your color choices on multiple monitors since LCD screens tend to be more sensitive to contrast choices than traditional CRT monitors.

5. Avoid scroll boxes/text areas. There are numerous better ways to present large amounts of text than standard HTML “text area” scroll boxes. One alternative is to present a summary of the information along with a link to see the full text in a separate page or pop-up. Consider this example:

This simple interface presents links to policies without forcing users to read from a small scrolling text box.

Here the user is presented with links to see the various policies, but they’re not burdened with having to scroll down a long text box to read them on this page. Contrast this with:

Reading these terms requires a great deal of scrolling and reading from a small, wide text box. It's not a good user experience.

Well, at least they do provide links to a printable version. That’s more than some websites offer. Still, the first approach is more logical from a user experience standpoint. Besides being easier to read it also enables a lower “clutter factor” than scrolling text boxes.

A side note: in some cases it may be necessary for legal/business rule purposes to display an entire block of information on a given screen rather than present a summary then link to the full version. For example a company may wish to have the liability protection of being able to say “our complete terms and conditions can be seen right from the purchase page”. I personally disagree that small scroll boxes present information in a clear and usable manner. I won’t be surprised if some day this practice becomes a legal liability.

I’d be remiss if I neglected to also mention the problems with placing key information below the fold, but that’s a larger topic for another article.

Paying attention to the way you’re displaying text on your website or application will pay off in numerous ways. It’ll help ensure that users can see and read the information and links they need with a minimum of fuss and difficulty. That in turn will enable users to use your site or application in a confident and efficient manner. And yes, that usually means more conversions, greater customer satisfaction, and fewer support calls.

Image based on a photo by phunkstarr. Creative Commons licensed.

Related posts:

1. Readable type = usable type, part 1
2. 5 shopping cart showstoppers
3. Reduce costs and improve usability with visual standards, part 2

Quick summary: The visibility and readability of website type is important to nearly every online process. Yet many websites still miss the boat. Type is often too small, low contrast, displayed in dense blocks, or displayed where users may not see it.

It’s easy to find examples of type treatments that detract from usability. Instructions, product descriptions, policies and procedures, and important warnings or reminders often suffer from this most basic of usability problems. In this two-part article we’ll examine the ways in which type readability affects user experience and we’ll cover some best practices for avoiding common pitfalls.

In the process of user testing and heuristic evaluation I encounter many problems with text displays. Some issues are quite minor and are more annoying than unusable. But others can create serious issues and wreak havoc on the user experience. Most often I observe:

Poor formatting. Typical problems include margins too wide to be easily readable and text that’s displayed in large blocks without  breaks. This tends to cause users to skip right over the text, sometimes resulting in serious issues (more about this later). Another common formatting problem is placing important text in places where users don’t always look, such as in the margins of a page or “below the fold”.

Small type. Ever seen a TV commercial for cars or loans that includes a huge amount of “fine print” that’s so small it’s unreadable? A similar phenomenon occurs on the web with great frequency. Some websites display links and other important information   using type that’s much smaller than necessary. This makes it difficult for users to notice and/or read it. Small type is especially problematic for those with imperfect vision and/or small screens, or those who run their monitors at high resolution. Also, with the increasing popularity of laptops screen sizes have shrunk while resolutions have increased. This compounds the problem.

Poor use of color and/or contrast. I could (and will) write an entire separate article on the use of color and contrast because it’s a substantial topic by itself. For now let’s just say that there are many colors and color combinations that make type very difficult to read. For example “pure” colors such as pure red (FF,00,00) and pure green (00,FF,00) tend to be irritating to the eyes and hard to read. Low contrast color combinations are just as bad and even more common, for example light gray type against a dark gray background. Many websites have taken to “softening” the appearance of type by using shades of gray instead of black. This can be attractive but sometimes it goes too far. It’s important to find a balance between pleasant design and usability.

Reliance upon scrolling text boxes. Admittedly this is rarely a showstopper problem but frankly it’s a pet peeve of mine. Many websites and applications present large blocks of text (e.g. – user agreements, legal terms) within small scrolling text boxes. In HTML parlance they’re called “text areas”. To read the text users must scroll through the small box. The more text that’s placed in the box the more awkward scrolling that’s required to read it. There are good alternatives to this and in my opinion it’s an unnecessary usability barrier.

Now that we’ve seen some of the most common problems let’s take a moment to consider why these can detract from the user experience.

It’s critical to understand that most users have a strong tendency to skip over text.

In particular users tend to skip over anything that’s difficult to read or that they don’t immediately deem to be important. Users tend to direct their attention towards the information and links they deem as critical to the task at hand. This is natural since most are driven by a desire to “get on with it” as quickly as possible.

In other words, users often ignore things that seem like noise or clutter. So:

• If your type is difficult to notice users often won’t see it at all.

• If it’s difficult to read there’s a good chance they’ll skim it or skip over it.

• If it fails to get to the point quickly they’ll probably deem it unimportant and direct their attention elsewhere.

These problems can lead to users that:

• Don’t have the information and/or instructions they need

• Can’t determine how to move forward or complete a process

And this in turn often causes them to:

• Make mistakes because they didn’t notice instructions or warnings

• Call for support when it might otherwise be unnecessary

• Abandon a process out of frustration

• Complete a process but lack confidence about important issues such as next steps and policies

Poor use of type can cause some serious messes, and serious usability barriers.

The good news is that problems with type are among the easiest usability issues to solve.

In part 2 we’ll cover some simple ways to avoid these problems and present type in ways that users will find easy to notice and read.

Image based on a photo by phunkstarr. Creative Commons licensed.

Related posts:

1. Readable type = usable type, part 2
2. 5 shopping cart showstoppers
3. Store locator usability: problems and best practices

Quick summary: In parts 1 and 2 of this article we examined the ways in which registration affects usability and conversion. In this final part I’ll suggest some things to consider as you define your registration strategy.

Naturally there’s no single approach to registration that works best for every situation. However, there is one overriding concept that should guide your decisions.

The best approach is the one that enables the most direct path between the user’s arrival at your website and completion of their conversion/purchase. This is the essence of a positive user experience, and it’s what makes users happy, keeps them coming back and causes them to recommend your website or application to others.

In deciding how to accomplish this, it’s often helpful to:

Acknowledge competing goals; strive for consensus. Many companies struggle with competing goals from technical, marketing and product management interests.

•    Marketing teams often want to collect as much user information as possible.
•    Technical teams often want to make passwords and user IDs strong (not necessarily a bad thing but there are limits).
•    Product management is often more user-centric and concerned with the user experience – though not always.

For these groups to reach consensus it’s important they all understand the tradeoffs between registration and conversion.

As I mentioned in part 1 and part 2 of this article, less or no registration often facilitates more conversion and increased sales. That doesn’t mean you should simply forego a registered user database. But it does mean that a smart approach is to enable at least some functionality for unregistered users. Then encourage them to register. In the case of an e-commerce website this means offering a guest checkout path or minimal upfront registration.

Define boundaries between required and desired user information. Part of choosing the right strategy is to consider carefully what information you really must collect, understanding that the amount of personal information required is usually inversely proportional to users’ tendency to give it. If you require some type of upfront registration it’s usually most effective to require only information that’s technically necessary to process a transaction.  Then ask for other details later – or not at all. For example, requesting users’ birthdates is often justified as a way to create a “personal touch” by automating emailed birthday greetings. But this marketing device is common and fairly tired in 2009. There’s a good chance that customers already receive and ignore many similar communications. So it’s better to skip this request.

Determine when to ask for information. Once you’ve decided what to collect, give careful thought to the best time to collect it. In most cases this should be after the user has been exposed to information or products on your website and has some stake in wishing to complete a transaction.

This is a key point: value first, registration later is often the best model. Partial value (e.g. – The forum example from part 2) is often a good strategy for giving users an incentive to register.

Part 2 of this article also includes an example of integrating a registration option into a form that users must complete anyway to make a purchase. This type of “inline” approach works well for e-commerce websites.

Keep registration simple; use appropriate security. As I mentioned before technical teams sometimes get carried away with requirements for user IDs and passwords. A very common theme I’ve noticed in user testing is the desire to avoid creating “yet another complicated ID and password”. For applications like online banking this may be unavoidable for security reasons. But if your website doesn’t truly need strong authentication, it’s best to keep it simple.  For example, email address for a user name and a relatively simple password.

Define the value proposition; ensure it’s stated clearly. I covered this in part 1 and part 2 of the article, but to reiterate: requiring registration without stating the value proposition is counterproductive and can lead to abandonment. When asking users to create an account state exactly what they stand to gain, and be sure it’s a compelling proposition.

Define privacy and security terms; state them clearly. It’s also important to clearly state how personal details will be used – and not used. Few things kill users’ interest in a website or product faster than the expectation that their personal data may be unsafe or might be sold to unrelated third parties. “I don’t want this to add to my junk mail” is a statement I’ve heard more times in user testing than I care to count.

Consider incentives.  An effective strategy for building a database of registered users is to require minimal information upfront, then create incentives for users to provide more details later. For web services or information-based websites this could mean offering greater access to information, or discounts of some type. For e-commerce sites it could be discounts offered only to fully registered users or other such promotions.

Building a well-crafted and realistic registration process can have a big impact on the quality of your user database and your user experience. It can also improve your bottom line and conversion rates. It’s worth the trouble and the time to get this right.

Image based on a photo by scragz. Creative Commons licensed.

Related posts:

1. Why require registration? Part 1
2. Why require registration? Part 2
3. 5 shopping cart showstoppers