• ­

• The footer can provide links deeper into your site and to particular content areas of interest to visitors
• ­By doing this it can take the place of an outdated concept of a site map and reduce the need for visitors to turn to the search engine to find specific content of interest.
• ­
• It can also be an area to place links (such as a store locator), short forms (such as for contact) or icons (such as for social media) that do not have a place in the main body of the page and may be crowded in the utility link area in the upper right.
• ­
• The footer can also be used for showing a little more personality, providing links to frequently updated content like a blog or events and a quick way to contact a company by providing detailed contact information or a simple form.

TOP 5 DO’S

1. Do remember any element of the page can and will be viewed by visitors – not just search engine crawlers
2. Do apply a hierarchy or categorization of the links and functionality provided in the footer
3. Do make the area readable and easy to scan
4. Do provide clear visual separation of the footer from the main content on the page
5. Do utilize different font types, icons, etc. to make the links standout and provide visualize interest to draw visitors to this area of the page

TOP 5 DONT’S

1. Don’t just repeat your main navigation at the bottom of the page
2. Don’t use the footer as a solution for poor site information architecture
3. Don’t include content below the footer
4. Don’t create a visual barrier above the footer that would prevent visitors from viewing it as a value-added section of the website
5. Don’t overfill the footer – edit it to key information and functionality that is easily categorized and set out in a well-organized manner

The web is filled with less-than-ideal retail e-commerce websites that are losing dollars over simple design flaws. This blog series shares tips on retail e-commerce usability, covering how to improve different parts of a retail e-commerce website.

Power Browsing

A customer can walk around a department store and look for a pair of shorts for several hours. Are the shorts all kept in one area? No, they are dispersed among different designers. Are all of the designers in one area? No, they are categorized by targeted age group or price range. Is everything available out on the floor? Of course not! There is a stock room full of merchandise and multiple stores across the country or around the world that might have the pair of shorts in the size and color you are looking for.

Online shopping gives retailers the advantage to let customers find what they want without leaving their chair. That is if the site’s navigation system and design doesn’t hide it from them.

Here are a few tips on how to make browsing on a retail ecommerce site useful.

1. Let Customers Refine their Browse

• After choosing a main category to shop under, it is ideal for a user to be able to refine the selection they have made.
  - The most common way to do this is by including a left navigation that reveals all of the different options the user can check/uncheck, with the items re-populating based on the customer’s selections- A more recent change on retail ecommerce websites is the mega drop-down menu that doesn’t appear until the user clicks on a header category.

2. Let them Sort!

• Offer “Sort By” options in addition to the filters to give the users a chance to explore by price, relevancy, popularity, designer, style, etc.

3. Viewing Options

• All sites should know this by now. Let users choose how many items they want to see on a page at one time. A “View All” option should always be available to users when categories of items have say 200 items or fewer.

4. More than Breadcrumbs

• When you are using filtering systems it is important to clearly display what categories have already been chosen by the user to prevent them from getting lost in their browse.
• A clear path between product pages and the user’s browse (with customized selections/sorts) should always be available (e.g., “Back to Results”)
• Customers should have the option to deselect categories and clear all the selections with one click.

5. Show the Customer’s Progress

• Don’t let customers drown in merchandise - let them know how many pages you are going to show them and where they are at all times (e.g., “Showing 75-95 of 560 items,” “Page 13 of 62″).

6. Back and Forth Action

• Make sure users can add items to their shopping cart and return to where they were in their personalized search.

While there are many more specific attributes you can use to improve your retail e-commerce website’s browsing function, remember that the main goal is keep the customer on the purchase pathway. Always consider how you can make your website easier to shop and easier to use!

For more on usability tips click here, or contact us for more information about our services.

 

Faster, Better, Cheaper. This has been the mantra of the Internet since the late 1990s to save us time and money by shopping online versus in-store. And for over a decade, this mantra has held true. Consumers are hooked on online shopping. Despite the economic downturn in 2008, and leading into 2009, sales among the Top 500 online retailers continued to grow - increasing 11.7% - while total in-store retail sales only grew 1.4% according to Internet Retailer. In addition, among 41 of the 50 biggest retail chains, e-commerce revenue increased, while in-store revenue declined.

While online retailers are not immune to the economic downturn, they are somewhat protected compared to their brick-and-mortar counterparts. The costs to maintain a website are significantly lower than the costs to manage, stock, and staff a retail store. As a result, some retailers have not weathered the storm, most notably Circuit City who declared bankruptcy last year. However, savvy online retailers continue to survive.

Amazon.com reigns as the leading online retailer, showing a 30% increase in web sales last year to $19.2 billion. Amazon is king because it continues to expand and add new retail categories year over year. Amazon also has the benefit of carrying and cross-selling multiple products and multiple brands. Amazon is the one-stop-shop e-tailer for you name it: books, clothing, electronics, sporting equipment, garden supplies, etc. Amazon represents products and brands in over 75 retail categories and is continuing to expand with its recent acquisition of Zappos.

Other brick-and-mortar retailers have been working every angle to increase Web sales through Internet exclusives, daily deals, 2-for-1 promotions, free shipping, and loyalty programs. While these perks may offer some short-term gains, they do not guarantee long-term stability. The retail leaders that will withstand the test of time are those that are thinking Faster, Better, Cheaper for a new generation.

Amazon is obviously on to something = one-stop-shopping. Are brick-and-mortar retailers up to the challenge? Who will survive in this marketplace and still deliver a Faster, Better, Cheaper Web experience for the next generation?

Gap Inc. has taken on this challenge. Internet shoppers are tired of multiple usernames, multiple passwords, multiple emails, and now multiple credit cards to avoid spam and identify theft when shopping online. Gap has responded to this pain and consolidated its Web presence across its 5 major brands, including Gap, Old Navy, BananaRepublic, Piperlime, and Atletica under one umbrella site, Gap.com. This consolidated website not only allows users to browse all Gap Inc. brands within one single user session, but also leverages one global shopping cart for all brands. This offers a significant improvement for the customer experience by eliminating the need for multiple usernames and passwords, with one universal login, and offers a seemless checkout process with one flat shipping rate.

In addition, this consolidation offers a significant opportunity for Gap Inc. to diversify its audience and cross-sell brands to all visitors, for example introducing Old Navy to Banana Republic shoppers and vice versa. Moreover, the company can leverage cross-promotion of deals across brands, benefiting from larger transaction sizes, such as offering free shipping for all brands if a Piperlime product is added to the shopping cart.

With Gap Inc.’s e-commerce revenue increasing 15% in the first half of ‘09 to $491 million from $427 million in ‘08, while offline sales declined, Gap understands the power of online. Gap’s brick-and-mortar counterparts can benefit from this lesson on website consolidation. Williams-Sonoma’s e-commerce revenue decreased by 21.9% in the first half of ‘09, from $507 million in ‘08 to $404 million in ‘09. Opportunity exists for Williams-Sonoma’s brands including Williams-Sonoma, PotteryBarn, PotteryBarn Kids, PB teens, and Williams-Sonoma Home, to follow Gap Inc.’s lead.

So Gap Inc. is on to something = consolidated-shopping (aka one-stop-shopping). This evolution may not become the new mantra for the Internet, but it will be the foundation for delivering a Faster, Better, Cheaper web experience for both consumers and businesses alike in the next generation.

Contact us with questions!

The sign-up form is one of the most critical points in the process of users developing a relationship with your site. It’s also the point where a flaw in the interaction can be the difference between a user becoming a new customer or becoming a bounce statistic on your web analytics. While many things can be wrong with a sign-up form, here are the top seven mistakes (in no particular order) we think are critical flaws that are guaranteed to frustrate users and likely to drive them away.

1. Benefits of signing up not being clear or not stated at all

Ideally, a user will know why they want to sign up when they do. However many sites that offer a lot of content pre-login will interrupt a user’s experience with a sign-up requirement, but not explicitly state why the user needs to register. Do not assume that the user remembers or understands why they should sign up. The benefits of a site are far too often left to the user to discover on their own, yet it costs nothing to remind them with concisely worded text.

If a user is not motivated to sign up, they are going to be a lot less tolerant of any issues they run into elsewhere on the page. For example, Going.com is a great concept, but makes a big assumption that users know why they need to sign up, running the risk of turning off users who haven’t bought into the idea yet. Simply writing a benefit tag-line at the top can remedy this issue. “By signing up you can quickly let others know what’s going on in a city”.

2. Requiring too much information with no benefit to the user

Sign-up seems like the perfect opportunity to get all kinds of information about your user. A few straight forward things like gender and birthday are good for marketing segmentation, but at what point does a form get too intrusive? The line is simple: when the information obtained does not benefit the user in any clear way.

Demographic considerations such as income, job title, browsing habits, are all nosy questions. Would you ask a person you just met on the street how much their household income is? No? That’s because we all know it’s rude. The same standard should apply on your site. The benefit of having some marketing data is never worth the very real risk of losing actual users who are ready and willing to continue with their experience on your site. Instead, make this information request clearly optional and people may actually provide it to you if you ask nicely and tell them why you would like to know.

3. Not pointing out where a user did not fill out a field correctly and/or erasing everything the user has already entered

We’ve probably all experienced this at least once, especially in earlier days on the web. Fortunately most major commercial sites are no longer committing this design sin. However, this problem still lurks throughout the web, most often on niche forums and government sites.

The biggest problem with this kind of flawed interaction is that it signals to the user that the site does not value their time at all and undermines a consumers’ confidence in what happens to the information they are sharing with you. Ensuring that the user’s hard work does not disappear and letting them know what needs to be fixed is not simply a “nice to have” anymore. It is a “must have ” that any professional site needs to implement if they expect users to register.

4. Username and passwords requirements being too stringent

Requiring passwords to have 6-10 characters that include letters numbers and special characters seems like it would add a level of security and build user trust. What tends to happen is that different sites have different combinations of these requirements: some have a range for character count while some simply have a minimum. Some require special characters and some don’t. Some want a number and some don’t. Some are case sensitive and some are not. The variations are endless.

Why is this an issue for a user signing up? People generally don’t keep distinct passwords for every site they use. Instead they rely on a single phrase that’s easy to remember. But with the proliferation of inconsistent password requirements across sites, the burden is now on the user to remember which site has which requirement. (Do I use “welcome”, “Welcome”, “welcome2009” or “welcome09$%”?) Having a slightly more secure password quickly stops being worth the cost of increased user frustration. Letting users know how strong or weak a password is without forcing anything on them is a great way to ensure passwords stay secure and that users stay in control.

5. Not explicitly indicating which fields are required or optional

Recently there’s been some research that suggests that most users are probably going to go ahead and fill everything out in a form. The best practice emerging from this finding is that it’s not actually necessary to put those little red asterisks on every single required field—it’s better to simply mark which fields are optional.

A good example of a site that has taken this to heart is Yahoo Mail’s sign-up form. While this leads to a visually cleaner form, what happens if all of the fields are required but there’s no indication one way or the other. Why should a user signing up for an email account assume that indicating their gender is required? Adding a simple message at the top of the form saying that each field is required is an easy, low cost enhancement that attentive users will appreciate.

6. Not explicitly indicating formats for dates, times, and phone numbers

While this type of information can be entered in a myriad of ways, a clear convention still has yet to emerge. Each sign-up form does this in a slightly different way with the result being that users are never quite sure how to enter time information on each site they visit that does not explicitly state a required format.

A clumsy (and unfortunately often used) solution is to use drop downs for month, day, and year. However users will often find frustration in having to scroll down through a dropdown for days like the 29th of 1969. Yahoo Mail has an elegant solution to this problem. They keep the dropdown for months since it’s a relatively short list, then simply have two separate open fields for Day and Year, indicated with grey background text.

7. Dumping the user back at the home page after signing up

Don’t assume that a user signs up before doing anything else. It’s far more likely that the user has browsed around and found value in something the site offers. From their perspective, sign-up is a hurdle they have to jump through to get what they want, not the first step of their intended task. If the flow of the site takes them back to the beginning, it will undermine any earlier efforts they have taken on your site. From a development perspective it does take a bit more work to ensure that the sign-up does not interfere with the task flow, but it is most certainly necessary to deliver a top-notch experience on your site, especially for new visitors.

Conclusion

What do you think? Are there any other critical mistakes in form design that are guaranteed to drive users away? Let us know!

There’s no doubt about it—online video has arrived. According to eMarketer, comScore reported that US Internet users viewed 12.7 billion online videos during November 2008 alone, and that more than 77% of US Internet users (146 million) watched an average of 87 videos per viewer. They also predict the trend continuing with online video viewing reaching 88% of US Internet users by 2012.

Given the recent explosion of online video, we thought it would be helpful to cover some best practices for implementing video viewing on your site. While powerhouse sites such as YouTube and Hulu have very likely already trained your users on what to expect, keeping a clear checklist of usability standards of your own will ensure your users get the most intuitive viewing experience possible.

Screen Size and Placement

• Widescreen is emerging as the convention with 640×360 dimensions being the most common. This offers a good balance of being big enough for users to see easily, but not so big that image quality suffers.
• When placing the video, consider the opportunity costs. Video in the upper left is a natural location and leaves room on the right for utility links for related videos and also advertising. A centered layout employed by Hulu allows for comfortable extended viewing.
• To provide intuitive access to the content, ensure the video is not below or split by the fold. A large play button overlaying the video is also helpful for indicating a playable video.

Control Bar

• Users will expect the control bar itself to appear directly below the video. Control bars that appear upon mouse-over are increasingly common, but users who aren’t as familiar with watching video will find this less intuitive.
• If the video automatically plays, ensure that the pause button is clear and easy for users to find.
• Controls for audio volume are generally identified by icons that show a slider bar on mouse-over. Be sure that the icon for audio controls is not so abstract that it users overlook it.
• In choosing an audio control layout, consider the tradeoff—Vertically aligned bars give a natural sense of raising or lowering volume, while horizontal lets you control volume without covering actual video content. While Hulu has a horizontal alignment, vertical alignment is more conventional across the web.
• A timer that shows the total length of the video and time viewed so far allows users to get a sense of how long the video is, helping them decide if they’d like to invest the time in viewing the video.
• Timeline navigation allows users to choose where in the video they want to skip to. Offering a display of the exact time on the timeline when the user mouses over allows for intuitive navigation.

Buffer Display

• Connection speeds vary and a good way of handling this is offering a memory buffer. Taking it a step further and showing how much video is buffered lets users know for example that if they pause for a few seconds, they can watch the rest of the video without it slowing down or freezing up.
• Youtube does a great job of graphically displaying how much has buffered, so even if a user doesn’t know what buffering is, they can get a sense of the video loading properly.

Embedding Advertising

• 15-30 second ad before and during natural breaks in the content is generally accepted, but can become annoying if it’s the exact same ad over and over. Short videos (under 90 seconds) with 30 second ads in front of them are also frustrating to users.
• Ensure that the audio level of the ad matches the audio level of the content. A surprising loud ad can be counterproductive in promoting a product.
• Offer a time until content display to let the user know they only have a few seconds before they get to the desired content.
• While the effectiveness of overlay ads at bottom of screen while running is debatable, users simply find them distracting and diminish their experience.
• Placing static ads near the video player related to the in video content is a great way to reinforce awareness of the ad without impacting viewing experience.

With the holiday season fast upon us, people everywhere are scrambling to make some final holiday travel plans. We thought this would be a good opportunity to take a look at a great example of how one aspect of usability can impact user experience, and even provide a competitive advantage.

Booking travel online has become the primary way to plan travel—it’s fast, convenient, and almost always provides the best price on airfare, hotel, and other costs. But there are a lot of sites competing for attention. Why use one site over another? They can all find flights, so what makes one more useful than another to a potential customer? Offering users superior control and flexibility over how they search and display travel information is a great way to stand out.

We took a look at Kayak.com as an example of a best practice in user control and feedback in a relatively complex search experience. At every step of the process, Kayak’s layout and functionality clearly anticipates users’ needs in a rather elegant way.

Let’s say we want to fly from the San Francisco bay area to New York. Both metro areas have a few major airports, so Kayak offers the ability to include nearby airports in the search. That will allow us to compare a flight fares in the same results and let us decide which airport we should arrive or leave from.

Before we even hit the friendly orange search button, Kayak is already telling us over on the right what the best fares are on all the days of the current month, offering a quick link to see the fares for that day.

Once we run the search, Kayak offers some really smart features that let you pinpoint exactly the flight you want. What if we need to arrive by 8pm, but we can’t leave until 9am? Most travel sites simply let you specify a Morning, Afternoon, or Evening set of options. With Kayak, users can use sliders to specific time ranges for landing and takeoff, for both departing and arriving. On top of that, we don’t need to run the search again—it automatically updates.

So now we’ve got a short list of reasonable flight options. If we want to get really picky, we can choose results by all sorts of common travel variables. Price range, specific airlines, layover duration, aircraft type, no red-eye, are all options that users have control over. Would you rather see that price in Euros? Kayak has you covered there too. By the time you have made all your choices you have a list of results customized just for you.

All of the controls are easily accessible on the left hand side, and all the results update automatically. The user is never required to go to another page to find what they want because they are offered complete control and feedback in a single place.

By designing a system that deeply understands what users want to know and allows them to refine on the fly based on real-time feedback, Kayak delivers a unique experience that users will remember and return to every time they need to perform the task of finding not just the best fare, but the best fare that fits their specific needs.

When it comes to the Internet, my dear mom is not exactly a whiz. I don’t have enough fingers to count the number of phone calls I’ve received from her with Internet-related questions:

My Mom

• “Phil, I have an article that I want you to read. How can I send it to you?”
• “Phil, you know that little box where I type the Website addresses? It disappeared and I can’t get it back.”
• “Philip, my email isn’t accepting my password. I’ve typed it in at least 5 times and now I’m locked out!” (She always calls me by my full name when she’s frustrated. Turned out she had her CAPS lock on.)

So the other day when she left me a voice mail asking for help, I was ready for just about anything. I got home from work, sat down at my computer, and gave her a call. She was having trouble buying some shoes on a well-known e-commerce site.

Mom: “I went to buy them and I typed in all the shipping information. Then it asked me for my credit card. But I wasn’t sure if I had ordered the right shoes, so I clicked ‘Back’ to make sure. But then it forgot all my information!”
Me: “OK.”
Mom: “So I had to type everything again, except this time I had a typo. I saw the mistake on the last page, and I didn’t see any place where I could fix it. I’d been on the site for an hour and you know how frustrated I get, so I just gave up. Can you help me buy them on another site?”
Me: “Whoa boy.”

My unassuming mother had uncovered fundamental problems with the site’s Checkout process. And while she may sit at the lower end of the Internet savvy spectrum, she represents a significant percentage of the site’s user base. How many other shoppers, like my mom, get frustrated by poor usability and simply leave the site? How many dollars in lost revenue are those usability problems causing?

Amazon.com’s Shopping Cart

After helping my mom buy the shoes (it was thrilling, let me tell you), I decided to look into how other popular e-commerce sites handle Checkout. I was truly surprised by what I found: While there are a handful of sites that do it well (Amazon and Apple to name a few), most Websites possess key usability flaws that serve as barriers to purchase.

Using my own research findings, as well as best practices we have accumulated here at eVOC, I now present a brief guide that summarizes the key attributes of an intuitive Checkout process:

Pre-Checkout

1. Shopping Cart

• This page provides key information upfront. It offers a summary of what users are buying, which includes the name, total price, quantity, and the ability to modify items or remove them from the cart. It allows users to calculate shipping costs and timing based on their location, or provides a link to view estimated shipping info. The page also includes a prominent button or link to return to the store for those users who are not ready to purchase

Checkout

2. Enter Shipping Address

• In this step, users enter their shipping and billing address. Required fields should be clearly marked with asterisks. Guidance should be provided next to any fields which may cause confusion (e.g., Apt #, ‘Must match credit card’, etc.)

3. Select Shipping Method

• The key here is to tell users what each option is, when it will arrive, and how much it will cost

4. Review Order

• This page includes a summary of users’ information, with each step represented visually in its own section (e.g., Product Summary, Total Cost, Shipping / Billing Address, Shipping Method, etc.). A prominent ‘Edit’ link will allow users to modify their details if necessary, before entering their credit card information

5. Enter Payment Information

• The most sensitive area for users in Checkout is the entering of their credit card information. This should happen last, directly underneath the summary of their order so that they can be sure their selections were correctly recorded by the site. Provide clear instructions about the credit card’s security code and let users click ‘Submit’ to officially send in their order

Post-Checkout

6. Confirmation Screen

• This page includes a summary of the order, provides a confirmation number, and informs users that they will receive a confirmation email immediately

While each of these steps does not need to fall on its own page, Checkouts are most effective when they follow the order described above.

Some global tips to consider:

• Include a breadcrumb at the top that helps users identify where they are in the process
• Differentiate the appearance of buttons/links that take users to the next screen
• Allow users to move back and forward in the process without losing the information they have entered
• Use clear messaging that clarifies if users’ cards will be charged before they advance to the next step. If credit card entry is the last step, this is only necessary on the last page

If possible to employ, this additional functionality also helps users:

• Ability to store users’ credit card and address information on the site and make it available for selection or modification on the appropriate screen when users need it
• Contextual tips on the side of each page about shipping, delivery, gift wrapping, etc.

By following these guidelines, any company that does e-commerce can feel more confident that shoppers will see the Checkout process through to the end, and will be satisfied when they leave – even my mom!