Quick Summary: In part 1 of this article we covered what I call the user interface “snow plow principle” – the notion that displaying too much information and offering too many options is akin to driving a snow plow to the corner store to get your groceries. Here in part 2 we look at some solutions to the problem.

Packing too much into an interface results in user confusion, information overload, and a poor user experience. Sounds like an outcome worth avoiding, doesn’t it?

Solving this problem doesn’t require rocket science (or snow plow science for that matter), but it does require thinking in ways that you or your team may not be used to. Here are some strategies and tactics to consider.

1. Make simplicity a stated project goal. For some organizations this goes without saying, but many simply pay lip service to user-centered design. User-centered design requires a commitment to research and planning, and it requires that you make the effort to learn what your users want. This knowledge enables you to deliver upon their needs and expectations. A good starting point is to ensure that documents describing your project include simplicity and ease of use as critical design requirements.

2. Learn about your users’ goals and needs. Many organizations and teams base design decisions on assumptions about user needs. This is only marginally better than ignoring users altogether. Even the most knowledgeable members of your team aren’t the customers who actually use the product. In other words, guessing about user needs and goals is a shortcut to building the wrong interface. It’s dangerous to assume you know what your users want; instead, ask them (I’ll cover how to ask in other articles).

You should research and document:

• Who your users are (their demographics, skill sets, work environments)
• What they need from your application or website, and
• How your product fits in to their workflow.

This baseline knowledge enables you to design for simplicity by focusing on:

• What’s most needed
• by the greatest number of users
• in the greatest number of high probability use cases.

Armed with this knowledge, you can move or remove elements and functions that are less important, for example those of little relevance to most users, or those that aren’t needed most of the time.

3. Establish a purpose and goal(s) for each key screen. You should associate a set of user goals and business objectives to every screen of your application or website. For example:

• What should users accomplish or get out of a given screen/page?
• What is the desired user outcome for the screen?
• How does this benefit the user?
• How does it benefit your company?

Understanding the answers to these questions enables you to measure each element of a screen/page against its purpose and its contribution to overall user and company goals.

4. Prioritize interface elements accordingly. Once you have a sense for what’s important to your users and what isn’t, you can adjust the interface to emphasize key functions and information, making these items easy to notice and understand. Remember, these must be the attributes, elements, and functions that are most important to your users in fulfilling their goals, not those most important to the development, design, or marketing team.

5. Supress or move low-probability information and options. This is the “less” aspect of “less is more”. When an interface element isn’t needed often, it should be suppressed or eliminated. This doesn’t necessarily mean hiding less-used options many levels deep. It can mean in essence “hiding them in plain sight” by making them less prominent within a layout. One example of this is replacing a block of disclaimer or explanatory text with a brief overview and a link to “learn more”. Another small example is displaying the most popular/likely items in a list first, for example placing “United States” first in a list of countries on a shipping form if the great majority of your customers are in the United States (also see this related article).

6. Edit what’s left; err on the side of brevity. Once you’ve reduced an interface to its most essential elements, it’s time to ensure that your language is clear and concise, and that your layout enables users to find and understand the key information and options. Whenever possible, disclaimers, instructions, and other text should be brief while still remaining clear and compelling. Writing for the web and for software is an art in itself, and is beyond the scope of this article. I’ll cover more on that at a later time.

7. Test your user experience. The quality of a user experience can be measured. If you’re not measuring yours then you’re “flying blind” and merely guessing at the effectiveness of your product. Test your website or application periodically, even if it’s meeting your business objectives. There are many ways to do this, for example formal or informal user testing, or online surveys. Regardless of the methods, the goal is to ensure that the application or website stays aligned with user needs. When the two diverge, it’s time to make improvements. On a related note, remember that user needs are not static; they change over time. If you haven’t spoken to your users about their needs lately you might be overlooking an important opportunity for improvement.

Paradoxically, there’s much more to say about simplicity; this article only scratches the surface. I plan to cover more on this important topic in the coming weeks and months. In the meantime I hope it provides some food for thought and a starting point for discussion and positive change.

Photo by Joost J. Bakker. Creative Commons licensed.

Related posts:

1. Simple user interfaces: the snow plow principle
2. Streamlining user interfaces, part 1
3. Reduce costs and improve usability with visual standards, part 1

Quick Summary: A key goal of user experience design is to keep things simple. Unfortunately websites and applications create problems for users by employing interfaces that are too complex. In this article we’ll explore a way to think about what interface elements are truly necessary for your users, and which can be reconsidered or eliminated.

Simple and intuitive interfaces are all about balance. To identify the truly essential elements of an interface, it’s helpful to look at the problem in a different context. In part 1 of this multi-part article I’ll cover an admittedly unusual way to view the problem of simplification. In part 2, I’ll describe some ways to apply this approach.

The user interface “snow plow principle”

Let’s take a moment to ponder the humble snow plow. It’s a device of unquestionable value. It keeps roads safe and can be called upon in snowstorms and blizzards to clear paths to otherwise unreachable locations. In many areas around the world it’s an essential public safety tool.

But if you owned a snow plow, would you drive it to the corner grocery store? Or to work every day? Probably not, unless you lived in Antarctica. Most of us live in climates that require the use of snowplows only periodically, during the worst weather conditions – if at all. In fact, many people have never benefitted from a snow plow. But where they’re needed, they’re indispensible.

So what does this have to do with user experience and interface design? Think of building an interface with a great deal of unnecessary information and capabilities as the metaphoric equivalent of using a snowplow for one’s daily commute. Sure, it gets you there – but what portion of the capabilities are actually needed? Would a smaller, more efficient vehicle work just as well? Is it possible to achieve the goal without firing up the heavy equipment?

Designing user interfaces for blizzard conditions

Websites and applications often employ interfaces and information displays that are designed to cover all of the possible uses, rather than those with the highest probability. Let’s go back to the snow plow. If you had a snow plow at your disposal, it’s sensible that before starting it up you’d first consider the context, for example:

• Current and expected weather conditions
• Road conditions and known road hazards
• Goals and requirements for the trip
• Skill and experience of the driver

But web pages and software interfaces are often built with a “more is more” approach, and consequently the interface is designed to accommodates most or all of the possible use cases in its default state. This is the equivalent of offering users the keys to your snow plow for a trip to the corner store on a snow-free, sunny day. You’re getting them from point A to B, but via a cumbersome interface that displays too much information and/or offers too many options for the majority of users and use cases.

One example of this phenomenon can be found in older versions of Microsoft Word. Those who have used Word for years will recall that until recently it presented a huge number of options by default, making it difficult – especially for beginners – to find a desired option among the bevy of choices. The interface gave equal visual weight to its myriad functions even if they were rarely or never needed by typical users.

With Word, Microsoft was in essence offering keys to its snow plow for users’ daily commute. (To Microsoft’s credit, while the newer “ribbon” Office interface isn’t perfect, it’s considerably more customizable and does a much better job of emphasizing high probability functions.)

Other examples are easily found. Web and software interfaces are often designed to display information and options for all users under all circumstances, rather than the most likely choices for the highest probability customers and scenarios.

Simplification – a.k.a. parking the snow plow

Now that we’ve defined the problem we can begin to examine solutions. How do we ensure that a diverse set of users can access the information and options they need while preventing “snow plow interfaces” from slowing down and confusing everyone?

In part 2 of this article I’ll cover some specific ways to keep the snow plow parked while still meeting your user and business needs.

Photo by Joost J. Bakker. Creative Commons licensed.

Related posts:

1. Simple user interfaces: the snow plow principle, part 2
2. Streamlining user interfaces, part 1
3. Store locator usability: problems and best practices, part 2

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
2. Store locator usability: problems and best practices, part 2
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.

Photo by Alberto. Creative Commons licensed.

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.

Photo by Alberto. Creative Commons licensed.

Related posts:

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

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. Simple user interfaces: the snow plow principle, part 2
3. Store locator usability: problems and best practices

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