There is no doubt we all want our websites to be attractive - captivating users and providing visual interest. However, it is important that the visual interest created on a site work with and enhance the usability of the site, rather than detract from it. Often we think of the aesthetics of a site as separate from the usability elements, but they have to work together to create a site that both captures and enhances your brand, attracts and interests users and allows them to easily complete the task at hand on the site. In order to identify the best practices for developing a look and feel that enhances the user experience, we will take a look at the guidelines which make up aesthetic integrity:

1. Uses a clear visual hierarchy with graphic elements and visual cues to help users
• This guideline should influence all aspects of the design of your site, beginning with the home page. Icons, images, color and text (font, size, etc.) should all come together, not only to present a visually appealing home page, but one that is easily scanned and understood. Users should be able to comprehend who you are as a company and what is most important to you from how you use the visual elements on the home page to introduce yourself and your value proposition.
• These elements should also be used throughout the site for the same purposes - highlighting key content, making pages easy to scan and understand and demonstrating to users the key navigational features and their position within the site.



2. Site is scalable for multiple resolutions
• It is vital to understand how a user is going to view your site - will they be able to see and experience all of the work you put into creating a visually interesting design based on the first guideline? Or will they have to scroll both up and down and sideways to view the whole page?
  • In order to address this most effectively, you need to understand the screen resolutions of those coming to your site. Many of us who are online all day looking at a wide screen monitor built in the past few years sometimes forget that there are people who still have their screen resolution set to 600×800 or 1024×768. This may or may not be a factor for you and your target audience, but it could be which is why you need to understand how your targets are accessing your site.
  • Based on what you know about your target base you can decide which screen resolutions you need to accommodate, but blindly assuming you only need to design for higher resolutions without knowing who is coming to your site can be a costly mistake.
• Understanding these traffic patterns is even more important with the increase in mobile and tablet traffic. Understanding what portion of your traffic is currently coming from these devices as well as what the growth pattern for your target might be over the next few years can inform your strategy for mobile site / app development and the need for site compatibility with devices like the iPad or Kindle Fire.



3. Photos are relevant to the value proposition and content and are accompanied by text that is readable and relevant
• Incorporating images into your site is important, but doing it correctly can be difficult. Images should draw a user in and help set the tone of the site, but they should not impede a user’s ability to access information or complete a task. Often in testing, we see that by not selecting the right image or placing it poorly within the page design, photographs and images can sidetrack a user or have unintended consequences. So a few things to consider when selecting and adding images to your site design:
  • The image should be clear and easy to understand. You do not want users staring at an image trying to interpret what is going on in the image or what it has to do with your company or its value proposition. These should be immediately clear. Where necessary, images should be labeled or include explanatory text in an easy to see and read font.
  • Images, especially photographs, when they include people should be diverse in terms of age, gender, race, etc. and show a wide cross-section of your target. We have seen far too often users react to a home page image, saying “Oh, this site doesn’t look like it’s meant for me. All I see are older women.”
  • Images should not overwhelm a page. The sizing and placement of images is key to either inviting users to explore a page or creating a roadblock to access. Images should not push key content below the fold of the page, making it unclear if there is information below the image that is worth scrolling for. Indeed, images can be used to help users know there is more on the page, but showing some, but not all of the image above the fold, you can invite users to scroll to see more.
  • Images can also be used to break up and provide interest to text heavy pages. Users tend to scan rather than read most web pages. Images can help guide them to content of interest and provide visual breaks that allow the eye to more readily move through a page.
• Again, it is also important to make the images relevant and not just a visual element on the page - make them have meaning to a consumer. Following are 2 examples one site that does not do this and another that uses images in an innovative way:




4. Limits animation; if offered, allow the option to control it
• I’m sure most of us can remember a time when Flash splash pages were all the rage on the web. While designers got to show off on these pages, for the most part, they were a usability mistake. Users were forced to watch an animation that might not be of interest to them, some with sound (and no sound controls) and then had to click just to begin the exploration of a site they had already requested. It’s easy to see why this is not the web standard today. Still, while animation can be an effective tool to help a site come to life, demonstrate a complicated concept or simply put more information in front of a user, too often it remains a misused tool with the most common issue being lack of user control of the element. So how do you implement animated elements correctly on your site?
  • Use animation with a purpose, not for the sake of doing something cool.
  • Allow the user to control the animation, with stopping or pausing capabilities and sound controls, including a very clear and easy to access “Mute” option
  • If you are providing different content, say in a Flash animation on your home page, provide users a way to navigate back to a story or element of interest to them without them having to either wait for it to come around again or to guess which of the 4 stories it is.
  • Make it clear how long an animation or video element will run. This will allow users to decide how they want to interact with it.



5. Content and promotions are not mistaken for ads; are relevant and compelling
• When testing websites, we often see site designers place attractive images highlighting important content or promotions on the right side of a page. Then, when users do not find the content, many site owners are surprised as it is often exactly what they are looking for and it is presented in an attractive and visually appealing manner. So what went wrong? Users often mistake images on the right of a web page for advertising or promotional content and have trained themselves not to pay much attention to any item in that area that appears to be an ad. So what can you do to overcome this bias?
  • First, if your site does include advertising, clearly label it as such. Make sure users know when they are seeing ads.
  • Secondly, make the content look like content, not like a tile ad. Do not have the promotion or content take the same shape as the advertising you see elsewhere.
  • Next, ensure that the content or promotion is visually integrated into the page using colors, fonts, and imagery that is consistent with the look and feel of your page so it appears to be a continuation rather than a standalone component, separate from the site itself.
  • Finally, do not place unimportant content in the same area as key promotions or content. You do not want to clutter areas users may naturally overlook or train them that this area of your site will not contain content of interest to them and have them overlook important features.


Thanks for reading our guidelines on Aesthetic Integrity. For more information on improving your site, please see our previous stories on best practices according to usability guidelines: Communications and Relevance, User Control, Simplicity and Scannability and Navigation and Feedback. Also, stay tuned to our blog for more information on web best practices.

• 

One of the most important aspects of any site is how the user can get to the information of interest. Once information architecture is considered and clearly defined, the next step is the mechanics of navigation. Users should be able to easily identify links and clickable content, use those and the feedback given by the site to move through your site with ease. To make this process as easy as possible, consider the following basic usability guidelines for navigation and feedback on your site:

Navigation & Feedback

1. Items that are clickable appear that way (navigation should have highlighting, links should be underlined, and visited links (v-links) should be in a different color
   • Links must look like links and be highly visible
     1. The main navigation, wherever it is on the page, should be immediately visible to the user by being prominent and clearly highlighted
     2. The online convention is that links are underlined, either all of the time or on roll-over or another state change, such as color change occurs on roll-over, to indicate clickability. This is important to allow users an immediate understanding of how to use your site
     3. Additionally, headlines and photos or images accompanying them are often expected to be clickable
     4. This is one area in which bucking convention for the sake of creativity can often backfire
     5. The way users surf other sites impacts how they expect to use yours, and if your navigation is unconventional and links are not clearly marked, users may abandon the site without finding what they need
   • Additionally, using color to indicate which links have been visited and which have not can help a user as they explore the site
     1. Most users do not explore a site in the specific order you have laid information out; they move immediately to the information of greatest interest to them and work from there
     2. By changing the color of visited links, you give users a map to the site, minimizing mistaken clicks and repeated content exploration



2. Provides clear feedback immediately, and near user actions
   • Too often on sites, users take an action - click on a button, click a link or complete a search or request only to sit looking at the screen being unsure what, if anything, happened. If they are not given any feedback this can be, not only frustrating, but also cause them to take action multiple times resulting in bad outcomes such as too many items added to their cart or, worst case scenario, multiple charges or bookings
   • If a user interacts with your site, your site needs to respond clearly to their action. This can be handled in a wide variety of ways, with a change of pages, a confirmation message, changes in colors or font, etc. Whichever method you choose a few rules apply:
     1. The feedback must be close to where the user took action. If you provide a confirmation message, but it is below the fold and the user is scrolled to the top of the page, the message is not doing its job
     2. The reaction must be obvious to the user. This is not the time for subtlety – it must be clear that the site is reacting. The user should not have to guess
     3. If the action taken is part of a process, do not allow the confirmation or reaction to take the user away from the intended path or limit their navigation in a way that could mean a smaller purchase or usage of the site. For example, when a user adds an item to his/her shopping cart, many sites take the user to the cart, but do not offer any avenue to continue shopping, potentially decreasing the size of purchase



3. Keeps users informed; Indicates task progression
   • Letting users know not only where they are, but how far they have to go can keep them moving through a task
   • Before beginning the process, inform users of the steps that the process includes
   • As they move through the steps, clearly indicate which step they are on, so they can track their progress
   • Keeps steps simple and only include those necessary to the process to improve completion rates



4. Upon completing a process, provides a confirmation screen with useful information
   • Just because a user completes an online process does not mean the overall process is complete; the confirmation page should be used to provide all necessary information for the user to understand the remainder of the process
   • This information includes:
     1. Confirmation of what has been done already and how the confirmation is being communicated in addition to the confirmation page (i.e., email)
     2. What will happen next in the process, when will it happen and who is responsible for it happening? For example, if a user has requested a quote, who will make contact – does the user need to call? If a user should expect contact, when and by whom? The user should never have to guess at how the rest of the process will play out – it should be explicitly stated for them
     3. What other options do users have from this page, can they view their order, track status, print the page or receipt, etc.? What about any offers or cross-sells? How can you keep the user engaged with your site? This is a great place to offer these items after you have made the confirmation and next steps clear



5. Tracks the state of the user (cookies, saved shopping carts, entered data) and acknowledges returning customers
   • It is important to users that sites recognize them so that they can complete tasks with the greatest ease
   • If you offer to remember a user, you MUST remember them; too many sites offer this option, but when users return they are not signed in. If you cannot automatically sign a user in, do not offer the option
   • Make it clear that the user has been remembered by using their name and offering a clear option for changing users if the logged in individual is not the user
   • When possible, allow the user to confirm their password to have their data pre-filled for them. Minimizing typing and streamlining processes can enhance conversion
   • If users leave items in a shopping cart, retain them there when possible
     1. If they will only be available for a specified period of time, message this to users
     2. Indicate any changes in availability or pricing when a user returns to their cart. Do not simply remove an item from the cart without letting a user know what changes have been made

Thanks for reading our guidelines on Navigation and Feedback. For more information on improving your site, please see our previous stories on best practices according to usability guidelines: Communications and Relevance, User Control and Simplicity and Scannability. Also, stay tuned to our blog and newsletter for more information on web best practices.

Sometimes it’s a basket. Sometimes it’s a bag. Whatever you decide to call it, the online shopping cart is one component you do not want to underestimate! A great shopping cart can make or break a sale in the virtual world. On the web, there is no salesperson ushering the customer towards the register or post-dressing room with chatter, “Can I hold these at the front for you?”

Instead, there is usually a small icon or text link at the top right of the page that keeps track of the products that the customer is interested in purchasing. These virtual shopping carts (unfortunately) are easier to abandon than one a customer might fill up in person, after all it just takes one click to leave the site.

It’s easy to want to get creative when putting together your website, but there are some aspects that work best when kept simple. The shopping cart is one of them. Use industry standards to your advantage so users do not have to think twice when they are shopping on your site. The golden rule is that the shopping cart should always be intuitive, easy to access, easy to update, and drive customers to checkout. Here we will go over the basics of an ideal shopping cart.

The #1 DON’T OF THE E-COMMERCE SHOPPING CART:

DO NOT take the user to the shopping cart page each time they add an item. It is best to let the user control their shopping experience and provide assistance and ease of use throughout that process. Pushing users to the shopping cart page is kind of like a waiter giving you your bill while you are still eating your entrée.

Now let’s continue with 5 basic best practices of the retail e-commerce shopping cart!

1. Cart, Basket, or Bag?

• Make life easier for your customers by providing an easy to read icon and text link in the top right section of your site for the shopping cart. If you are using just a text link, don’t be surprised if some users can’t find it. Don’t forget that not all customers are computer savvy and not all customers have 20/20 vision.

Here are some examples of shopping cart images out there on the web today along with some do’s and don’ts!

2. Link Your Cart!

• Make the shopping cart a clickable link that leads the user to a place where they can view, edit and update their cart. Avoid using a logo of a cart that isn’t linked to the product information as this can easily frustrate the user. If you are using both text and images to signify the shopping cart, it is ideal to have both linked to the shopping cart page.

3. Add + It + Up

• Each time a user adds an item to the shopping cart, confirm that the item has been added. The confirmation can be anything from a number signifier or something more elaborate like a dropdown that shows the product with the dollar amount, size, color, etc. The best e-commerce websites will allow users to preview the shopping cart without navigating away from the page they are currently on, as WalMart.com and Jcrew.com let you. After all, if you were shopping in a real store you would be able to peek into you cart at any time, not just at checkout! If you are going to enable a dropdown preview of the shopping cart for users here are a few tips on maximizing its usability.

4. The Next Steps

• Close by the shopping cart link, it is ideal to include other information related to the shopping cart/checkout process to help the user find the next piece of information they are looking for.
• Provide information about shipping and handling - If your site offers free shipping, it is a good idea to include it in this area because you know customers will already be attracted to this section of your website as they shop. Free shipping can encourage users to go through with the checkout process, as it leaves no questions about how much will be added to their total.
• Checkout - Give the user a link to the checkout flow within the shopping cart dropdown menu and in the general area of the cart. After all, the point of your site is to get the user to purchase, meaning there should ALWAYS be a clear path to the checkout!

5. Shopping Cart Overview - One step away from Checkout!

• The shopping cart overview should be similar to the layout of the dropdown menu for consistency sake. The item images and information should have the same or similar layout and the colors should also be consistent.
• Make sizes, colors, quantities and stock availability easy to digest so the user can confirm that their order is correct and that they have chosen their items accordingly
• Removing items from the shopping cart should require one click! Do not make users edit quantities down to zero in order for them to be removed from the cart.

While the majority of sites we looked at today are apparel websites, many of the same guidelines can be applied for all e-commerce websites. If you are in interested in learning more about how to improve other areas of your retail e-commerce site, please check out our other blog posts on retail e-commerce usability! Also, feel free to contact us if you are interested in finding out even more about how to improve your site.

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

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!