Not too long ago, websites were tested solely on a desktop computer. Now we are often testing websites across many devices including desktop computers, laptops, tablets, and an array of mobile phones. As screen sizes proliferate, how does a website keep up? That is where Responsive Web Design comes in to play. Responsive design is flexible and adjusts to any screen size by using media queries to figure out the resolution of the device it is being accessed on. The content will always be the same, but may shrink when accessed from devices with smaller screens.

What’s the big deal?

Despite Jakob Nielsen’s argument, the evolution of smartphones and tablets has left many sites feeling outdated. Not only do these limited functionality, mobile-only sites now seem obsolete, they are also trapping users in an environment that makes completing a task online confusing or impossible.

From this perspective, RWD becomes a no-brainer; do you want to limit content and functionality or, provide a consistent brand experience regardless of the device used to access the site? Additionally, how do you keep up with the mobile device explosion? Resolutions and device types continue to change and broaden. Iterating designs for each device or screen resolution would either be an endless game of catch-up or next to impossible to do. An RWD approach currently offers the best solution to these problems. When executed properly, a responsive design will work seamlessly across all screen types and, as a result, make updating content a snap. However, as many design teams are less experienced with the new fluid grids and all-in-one approach, there are often some usability hurtles to overcome.

Below are some of the most common usability issues we have seen when testing Responsive Web Designs (RWD):

1. Many feel that design RWD design should start with the mobile experience, but this can lead to a less than satisfying desktop experience.

While RWD lends itself to a simplified design style that maximizes flexibility, the mobile-first focus can lead to a desktop experience that does not seem as robust in comparison to user expectations. Users can find the scaled-back design lacks the professional feeling they seek in order to trust a website or work effectively and efficiently with what they expect from the brands they know.

While many designers do not want to “hide” content on smaller screen resolutions, there are times when this approach makes the most sense, for example, to achieve a complete and professional desktop experience.

The Boston Globe website handles this issue well; the site displays additional menus and graphics on the desktop version, but hides them on the mobile version. This gives the best possible experience to the user regardless of how they access the site.

2. Device-specific conventions do not always make sense outside of that device.

The settings menu is a prominent example. While the convention of a gear icon is easily understood in mobile, it is not conventional within the desktop experience. Even some experienced mobile users are unable to find and expand a menu using this icon from the desktop. Unlike on the desktop, users can easily find the icon within the mobile experience; therefore, context matters. For example, an icon with three horizontal lines indicates it is the menu. However, while many users may intuitively identify and understand this icon on a mobile device, they may not necessarily be able to do the same on the comparable desktop version.

Starbucks is an example of a navigation menu done right. On the desktop version, a traditional horizontal navigation menu drops down and displays subcategories. This dropdown allows for quick navigation to lower level pages of interest. The menu moves behind an easily recognizable icon when the site is resized. Here, it becomes a streamlined version of the menu with only main level categories available.

This example from Sony is an even better example. On the mobile version, they use the word ‘Menu’ as the icon label making it even easier for users to find:

3. Usability guidelines apply regardless of how users enter the site.

While we have covered basic usability guidelines before in our blog, it is still important to apply them to new designs as well. In fact, it may be helpful to revisit them to ensure users can adjust seamlessly to the new versions of your site. Here are a few places where usability principles are not being applied in responsive designs:

Disney’s website is an example. Regardless of how you enter their website, it is easy to get lost once the menu is opened. On the desktop, it drops to cover the page whereas on the mobile, it moves to the left to accommodate the menu. Again, the menu gives no indication of one’s location on the site. Also note here that we lose the site logo and therefore the visibility of the brand.

Grey Goose is another example of a site that does not adapt well to mobile. Sure, this looks like an elegantly designed website; however, when viewed on mobile devices, it lacks the ability to navigate between the main stories. To boot, the page break makes it unclear that stories are available below the fold. Unfortunately, as a result, many users may miss the gorgeous photography beautifully displayed in the desktop version:

While Crayola also designed an excellent responsive site, they forgot to speak in their customers’ language. For example, labeling their ‘Main Navigation’, just that – is not a particularly customer-friendly way of talking to consumers:

Many RWD with clear call-to-action buttons often mistakenly place this vital part of the page below the fold on smaller resolution screens. For example, Burst Creative’s site has their ‘Get Started’ button front and center on the desktop layout; however, for those accessing the site via mobile, the call-to-action is at the bottom of the page.

Now, compare Burst Creative’s site to Lanyrd.com, where the call-to-action always remains above the fold. The World Wildlife Federation (WWF) site is another example where the key calls-to-action, “Donate” and “Adopt”, always remain visible at the top of the page. These two buttons stand out on both designs and are never collapsed or deprioritized on the page.

As shown in these RWD example websites, if you keep basic usability principles at the forefront of your mind when designing your site, it can offer an excellent and consistent experience for your users. Tell us how you feel about responsive design. Are you considering it for your site?

In the past year we have seen an increasing demand for multi-device usability testing. Multi-device usability testing involves asking users to perform tasks on more than one device in a single session; devices may include desktop computers, tablets, and mobile phones. Testing multiple devices in a single session has been useful when testing Responsive Web Designs, as well as testing the fluidity of a brand’s experience from desktop websites to mobile and tablet websites, and/or mobile apps.

One benefit to conducting testing across devices in one session vs. testing designs on a single device per session is that the user is able to shed light on the overall experience and consistency across devices. How fluid is the experience? How easy is it for the user to transition from desktop to mobile and vice versa? Not only will testing multiple devices with one user provide insights into an overall experience, but it can also give direction and insight into how and why users may gravitate to one device for certain tasks vs. another.

What we have learned from conducting these tests is that preparation and flexibility play key roles in making sure this type of testing goes smoothly. Below are a few tips to help you prepare for and conduct multi-device usability testing:

Recruiting

• Recruit to reflect your real audience: If 90% of those using your mobile app are iPhone users, then testing should focus on iPhones vs. recruiting an even mix of iPhone and Android users.
• Forget the Gadget Lab: We have seen greater success in this type of testing (and mobile-only testing) by having the user bring in their own device. Not only is the user more confident navigating the device, but often there are added insights. With the users’ own device, you may get to see what apps the user has downloaded and how they have organized the information on their phone. Just be sure to clearly specify the types of mobile devices, model and version of software / operating system (e.g., FROYO, GINGERBREAD, etc.) required for testing during the screening process.
• Get the OK to Download: If users will need to download anything on their phone or tablet, it is best to ask this during the screening process to avoid any trouble down the road.

Discussion Guide

• Counterbalance Starting Device: Typically we will start an equal number of participants on each device (e.g., N=12 / 6 start on desktop, 6 start on mobile), unless the team is focused on the usability of one more than the other. We also make sure that we have an even mix of participant types (if research has segments) for each starting device. For example, if we have a total of 12 participants, with 6 Prospects and 6 Current Users, then 3 Prospects and 3 Current Users will start on desktop and 3 Prospects and 3 Current Users will start on mobile.
• Repeating Tasks is OK: It is okay to repeat tasks across devices; we have found that usability issues are still uncovered. Users will have expectations based on their initial experience, but this happens in real life, too! It is nice to add some variety to the tasks if possible, but do not stress if prototypes only allow for the same tasks to be performed on the various devices. By shuffling the starting device, the team will still be able to get initial impressions on the experience from a portion of the users. In fact, if you are looking for an apples-to-apples comparison across devices, it is important that you have the user perform the exact same task on each device.

Set Up

• Wi-Fi Ready: We typically ask users to join the Wi-Fi network on their phones or tablet prior to starting the session to save time. If you are conducting labs at a facility, it’s helpful to ask the front desk to share the Wi-Fi information to the participant upon arrival.
• Bring a Back-Up Device: Yes, we did say to forget the gadget lab; however, it does not hurt to have a back-up device for unpredictable technical difficulties. Typically, we just bring in the most popular mobile / tablet device used to access the site/app in the case that the user’s device fails to work during the test.
• Device Hot Spot: To ensure that the respondents’ actions on their mobile device are captured, it is best to designate an area for the camera to target. Typically, we tape off the area where the users should keep their device in order for it to be successfully captured on camera.
• Capture All Angles: Many of our clients view sessions remotely and it is a much more engaging experience if all angles of testing are captured, which includes the respondent’s face at all times and then the desktop screen, mobile phone, or tablet. In order to do this, we typically have multiple cameras in the room, which can be controlled by our video technician in the backroom. Our video technician is on site during the sessions to switch between cameras during testing to make sure all angles are captured at the appropriate times.

Conducting the Usability Session

• Keep it Real: One thing to avoid in user testing is forcing the participant to complete tasks on a device he or she is not familiar with or would not use in real life.
• Ask Wrap-Up Questions: One of the biggest benefits to multi-device usability testing is the ability to understand the overall experience across devices, so don’t forget to ask questions about this! Some questions you might ask are, “How does the desktop experience compare to the mobile experience?” or “Are there any tasks you prefer to do on one device vs. another?”

That sums up our tips for preparing and conducting multi-device usability testing. As each research project is unique, there are always ways to refine and adjust the methodology to ensure that the research objectives for your project will be met. If you have any questions, please do not hesitate to reach out to us at .

In our best practices usability guideline series, this topic has come up before which emphasizes the importance of the guideline we are addressing today - consistency. While it is a standalone guideline, it is the key to making the other guidelines work as well – to provide the best possible user experience all of the usability best practices you put in place must be done consistently across the site. Consistency allows a casual user to learn your site more quickly and a frequent user to move effortlessly to the content or task of interest. While it is often the first guideline we look at when evaluating the site, it is the last guideline I’m looking at here because it impacts each of the other areas we have looked at in detail already. To understand how, let’s take a look at the elements of this guideline in detail:

Consistency

1. Clear indication of the home page

• This applies in two situations – first, if a user reaches your home page, they should know it
• • When seeing the home page, users should never have to question where they are in the site, yet, too often in testing, we see users hit the “Home” link while on the home page to double check. This should never be necessary.
  • The home page should be clear, offer a value proposition and highlight the main navigation to allow users to move to content of interest quickly and easily
• Secondly, there should be consistent access to the home page throughout the site. Conventional ways of doing this include making the logo in the upper left link to the home page or providing a “Home” link in the main navigation, bread crumbing and, possibly, at the bottom of the page as well
• • The key here is to be consistent in the presentation of the link. If the logo in the left is clickable, every page should have a logo in the same place, linking to the home page.

2. Possesses consistency with terminology, design, colors, etc. and - if offline entity exists – maintains consistency of brand /messaging / image

• These two guidelines go hand-in-hand to ensure you are providing a single brand look and feel to your customer, so we’ll tackle them together.
• • The key here is presenting a recognizable image to a user not only across all of your touch points, but within the touch points as well. So many sites today encompass different product lines, different customer targets and vast quantities of content. These are often produced by groups within an organization that do not work together. None of this matters to a customer, so it is important to view your site through their eyes.
  • A customer should be able to recognize the site as yours no matter where they are in the site by the design of the page. Logos, colors and imagery should be in harmony with the brand and the same throughout the site.
  • Also vital is the language used, not just in using the same terminology throughout the site (including spelling of terms, use of acronyms and capitalization), but also in the tone and level of the communication.
  • All of these elements will come together to create an overall experience of your brand with your customer, and, if implemented well and consistently, can reinforce your brand image with the consumer.

3. Page layout / organization is consistent at similar levels of hierarchy

4. Navigation and information architecture is scalable for new content

• Web content is rarely static. Once your template is created, you will need to add new content to the site, making room in your design for this new content. In order to do this seamlessly and with a minimum of disruption to the user experience, your initial design of the navigational structure of the site as well as the information architecture you have put in place must be scalable and have room for new content to easily be slotted in.

• • While you want to try to think of all of the possible content you will want to include on your site during the design process, it is impossible to think of all of the eventualities that might cause the need for your site to contain and direct users to new information.
  • If there is no room for expansion of the subcategories / submenus of your navigation and no space in the hierarchy and design of the information on your site for additions, even of another layer of content, you will be stuck creating an inconsistent experience in order to add the necessary information or be looking at a large scale design project every time new content is available for the site. Thinking about consistency before this becomes an issue will force you to create a design that can handle not only projected additions, but any of the unexpected necessities that come with doing business in a digital age.

While these are the key consistency guidelines, there are other consistency guidelines that are important to remember as well that go basics of editing. These include:

• Uniform style for capitalization, punctuation, and correct spelling
• Text links are underlined and follow conventions (discussed in detail in our Navigation and Feedback blog)
• Consistency of speed - Main content loads within 1 second on a high-speed connection

Thanks for reading our guidelines on Consistency. For more information on improving your site, please see the rest of our series on best practices according to usability guidelines on our blog. Also, stay tuned to our blog and newsletter for more information on web best practices.

We have done a number of projects lately with sites that need to look at how they greet customers when coming to their site and this got us thinking about landing pages. Very often, users are not entering your site through the home page any longer. Ads, emails and searches are often driving users to your site. With over 1 billion searches per day on Google alone, you should be giving serious thought to the way users are entering your site and whether or not you are putting your best foot forward when they do. If you don’t greet visitors in the best possible way, your goal - conversion - will not be met.

In this post, we’ll take a look at the different ways a user may be entering your site and best practices for these entry points.

The most obvious entry point is your home page. A user may be familiar with your site, may have seen your URL somewhere, or searched for your site and ended up on your home page. The best home pages:

• Make it clear that they are home pages - a user should never have to guess
• Provide access to main navigation, not only to allow for easy access to information, but also to provide an indication of what your site offers
• Indicate the site’s value proposition or benefits - identify yourself to new users
• Offer a clear path for returning visitors to access their account or personalized information
• Entice users into the site - with images, topics of interest, etc. to encourage further interaction with the site

Today, we want to focus more on the pages users reach when they enter your site via a campaign or search. This may be a page specifically designed to be a landing page or simply a page on your site that is a default landing page because of the amount of search traffic driven to it. There are a number of things that should be done whichever type of page users are landing on to greet them to your site. The tips for home pages above apply, as do the following:

• Ensure consistent branding
  • Your logo should be visible and look like your company’s logo - a user should never have to guess whether or not they are in the right place
  • The rest of the branding - look, feel and design - should be consistent with the feel of the rest of your website. This doesn’t mean a campaign or page cannot use different elements than the rest of your site, but the overall look and feel should not be so different that users are again left guessing where they are or are confused if they navigate to the rest of the site
• Provide a clear value proposition that is consistent with both how the user entered the page and the breadth of content, products or services your site offers
  • You want to be sure you are delivering on the specific promise you made in your campaign or search result; the page that users enter should match any expectations you have set for them
  • But, you also want to be sure you do not miss an opportunity for users to understand all of what you have to offer, as something else you offer may pique their interest
• Provide a clear call-to-action
  • This is true whether you are requesting interaction, such as registration from a user, or if you simply want them to explore your site further
  • You want to provide clear avenues to interaction and highlight them with clear instructions to users, so employ action-oriented terms: “Get Your Free Quote”, “Learn More”, “Contact Us”, etc.
• Keep your design clean
  • While you want to make sure you are providing options to users, you do not want to overwhelm them or distract them from your message
  • Include links to key pages or navigation (this page should not be a trap), but do not include every offer or marketing message you want a user to see on this one page
  • Focus on the expectations set and deliver on those on this page using bulleted, easy to scan benefits or value proposition information
• Be aware of the fold
  • Key content and call-to-action messaging needs to be immediately visible to users
  • If users have to scroll for a payoff, you have lost them, so consider who is coming to your site and on what devices / screen resolutions and design to make sure they do not have to scroll to see key information

Below, we will look at some of the best practices specific to different types of landing pages, as well as examples of what to do and what not to do when welcoming a visitor to your site.

CAMPAIGN-SPECIFIC LANDING PAGES

1. While I mentioned it above, I will mention it again here, because this is so important for campaign-specific landing pages: You must deliver on the expectations set by whatever it is that sent a user to the page.

• In the example below, a search for Best Buy, offers a link to what it says is Best Buy’s official site. However, the link actually takes visitors to a landing page specific to Best Buy’s deals and weekly ad. The effect is disorienting for a visitor looking to access the Best Buy site because the set-up does not meet expectations.

• On the other hand, this AT&T ad on CNN.com provides access to the content that was specifically detailed in the ad, while also providing access to a wider range of options if a user is interested in other products or services. This means the page delivers on both the specific user need and a wider range of interests they may have.

2. If you are requesting information from users – to fulfill an offer, get them started using your site, or provide them with customized information, your task with a landing page is even harder. You may lose people as soon as they see a form to be completed. To counteract this:

• Your page should load quickly so users see the whole picture very quickly
• That whole picture should include a clear statement of benefits: what is the value exchange you are offering? You are asking for their time and personal data - what are they getting from you in return?
• What type of time commitment are you asking of them? Is all the information you are seeking on one page or is this a multi-step process?
• What will the payoff be? You need to set specific and accurate expectations for what will happen at the end of the registration process or form.

3. Additionally, any forms provided on campaign-specific landing pages should adhere to form best practices (see more about best practices for forms here). Some highlights:

• Be specific about what you are asking for and WHY you are asking for it
• Ask for only the most important information, focusing on things that are least invasive, i.e., if you can use only a zip code for location, do not request exact street address. You can request that information once you have deepened the relationship with the customer
• Include logos or icons that highlight security of information. Logos like Verisign, Truste and the Better Business Bureau, as well as icons, such as a picture of a lock, reassure users that they are using a secure site and that the information provided will be safe

4. Examples in the auto quote space provide an interesting contrast in what works and what doesn’t:

• Progressive provides a focused page that directs users to a call to action, while addressing critical user information needs:

• Geico, on the other hand, overwhelms users with information. This takes focus away from the purpose of the page and does not address user information in a concise way, making it less likely for users to convert.

DEEP LINKED PAGES

1. For pages on your site that become landing pages because the content is often searched for and makes it a key entry page to your site, it is important to let users know where they are on your site

• Many times, breadcrumbing can be used to help orient a visitor (for some sites, like those with a lot of dynamic content, breadcrumbing may not be the best option. For more information on breadcrumbing best practices, see our blog on breadcrumbing)
• Additionally, clear highlighting within the navigation can be used to indicate position
• This example from CNET shows that a search for “best tablet computers” delivers users to the specific content requested, but also provides good insight into where a user is and what else might be available

2. Access to full site content, especially the home page, is even more important

• Even though the page delivered may match users’ expectations exactly, you want to be sure they can move up in your site’s hierarchy easily to get a wider view
• Ensure access not only to the full navigation, but also link to other information related to that specific page so users can move easily to other content they might find interesting
• Even with these additional links, remember to initiate a clear call-to-action on the page a user reaches
• In this example, searching for “hotel Rome” leads users to a specific hotel property, which offers a clear explanation of how they got to the page and how they could explore the hotel information or other destinations. It also has an immediate call to action above the fold:

Using what works and what doesn’t from these best practices and examples, you can improve your landing pages and make sure your site is a landing page best practice, putting your best foot forward when visitors arrive. For more best practice information, visit our other blog entries and our newsletter.

1. Login process is straightforward and user-friendly
2. Remembers user information between screens
3. When soliciting user information, clearly indicates what is required vs. optional
4. When completing forms, provides proper field entry instruction for characters, capitalization, etc.
5. Allows actions to be reversed and warns users before irrevocable actions
6. Errors / confusion are managed proactively with clear and informative instructions
7. ‘Customer Service’ and / or ‘Contact us’ options are clearly visible, along with extensive and instructive help features, such as glossaries, tutorials, FAQ’s, site map, contact information
8. Search input box defaults to entire site, has no character limits, and allows users to see fully inputted search string / Provides special instruction as necessary to ensure helpful search results

Help and Forgiveness

• None of us like to make mistakes, but when we do, we want to be able to correct them quickly and easily. Unfortunately, on the web this is often impossible. Too often sites force users to completely redo the steps they took prior to the mistake in order to correct the problem, often creating a frustrating experience. The best defense against this is providing clear help at the point of interaction or not letting the mistake happen at all through clear messaging.
  • This comes in 2 key forms. One is the language you are using on your site throughout a process, for example checkout. Action buttons should be clear and specific to the step the user is actually taking. For example, ‘Add to Cart’ is a much more clear button than ‘Place an Order’ when a user is simply putting an item into their cart or bag. ‘Place an Order’ implies that the order is going to happen immediately, something the user may not yet be ready for. So instead of using ‘Continue’ tell a user with the action button what they are actually doing when pressing the button.
  • The other key to this guideline is to offer an alert when a user is about to take any action that cannot be undone to allow them the chance to cancel the action. A good example is deleting an item from a shopping cart. While in many cases, a user can go back and place the item in their cart again, for the new breed of discount site, such as Gilt Groupe or RueLaLa, you may lose an item upon deletion and a user needs to confirm their action to be sure it was not a mistake or a stray click, which could lead to disappointment. Additionally, this message needs to give the user enough information to really make a decision about their action by telling them what they are about to do in detail and what the consequence may be. The message should also have clear action options such as ‘Keep this item in my cart’ or ‘Delete this item’, rather than generic buttons that could lead to further confusion.
  • Wherever possible, it is ideal to also offer users a way to redo what they have undone. In some cases this may not be possible, making the messaging on the site all the more important.

• Even with the best in-context help and site design, errors will happen. How you handle the error on the site is what determines if the error will be a fatal one for your customer’s visit to your site. The keys to managing errors are two-fold:
  • First, messaging again is vital. When displaying an error message, it needs to be clear an error has occurred, so the error message must be highlighted and very visible. This is an area where red is a strong color to use as it attracts the eye, and red is often associated with error messages. Once you have a user looking at the message, it must be specific, telling a user:
    1. What went wrong
    2. Where on the page the error is (if you do not bring the user to error itself which is ideal)
    3. How to fix the error, in specific detail
  • Once a user understands the error and corrects it, your site needs to place them in the same position they were in pre-error. Not only does this mean not taking them out of the path they were following, but also not losing any of the information they had input up to the point where the error occurred (including the information on the page where the error occurred).

• At times, a user may need more help than you can provide in-context on your site or they may simply be the type of customer who feels more comfortable alleviating their confusion via human contact. Whatever the case may be, there should be a clear area of your site dedicated to customer service or support.
  • Do not hide this area of your site. While not clearly including offline contact information may cut down on expensive calls to your call center, it could also cut down on customers’ comfort levels in transacting with your site. When testing sites that have their 1-800 numbers on their home pages, readily visible, we often hear from users that they wouldn’t be likely to call it, but having it there increases their comfort not only transacting with the site, but also their impression of the brand due to its willingness to share that information. So while the number doesn’t have to be on your home page, a clear path to finding it (no more than 1 click deep) does.
  • This area of your site should also include whatever level of help is appropriate to the type of site / business you have, and should attempt to answer all key user questions on the site without forcing them to call. Most web users prefer to be self-service, so providing FAQs (ideally based on the top questions you get at your call center) can be a great way of providing them the information they are seeking and avoiding a costly call or a jump to another site. Glossaries and more extensive help can be useful if you have a site that includes a lot of industry speak or technical jargon, but may not be necessary on all sites. Tutorials can also be helpful when introducing new or complicated functionality, but be aware of your target audience – few users are likely to turn to a tutorial for help.
  • Generally, this area of the site should give users all the help content you think could be useful to them as well as access to all of the contact avenues available to them (phone, email, chat and mailing address). With good design and usability execution on the rest of the site, you can minimize the need for users to turn to this area, but you cannot avoid offering it to users.

• These 2 guidelines both address search so I wanted to look at them together. Search can be either an incredibly useful tool or a very bad experience for users. So how do you ensure that it gives users what they are looking for?
  • Place search in a visible and conventional location (preferably the upper right of the home page and potentially throughout the site)
  • Default to searching the whole site, not a specific section. However, if there is an option to search only a section of the site make that clear as well
  • If the search box contains instructional text (which we will talk about below), when a user clicks into it, the text must automatically disappear. No erasing text required!
  • Users should be able to type their entire search query without limits and they should be able to see the full search string (within reason). The fully inputted search string should definitely be shown on the results page
  • Instructions should be given as to how to best use your specific search, i.e., is it only a keyword search, can users also input catalog codes, can they type a natural text question, etc.?
  • These instructions should appear in or near the search box itself in a concise manner
  • For more information on how to maximize search results, see our blog Retail E-Commerce Usability Part 2: Search!

The mobile web is unique; users do not exhibit the same behavior on their mobile phone as they do on their desktop computer. This blog series will point out some of the best practices of mobile website usability by looking at various mobile websites.

Why Your Mobile Strategy Should Include a Mobile Website

Fairly recently, Nielson Norman Group’s usability guru, Jakob Nielson, came out with research findings that tout mobile apps as having better usability than mobile websites, urging companies to go the app route. Nielson pads these findings with a prediction that mobile websites are not too far behind, but his closing advice reads, “Today, if you are serious about creating the best possible mobile user experience, my advice is to develop apps.”

I disagree and here’s why (the abbreviated version).

First step in a positive user experience is providing an experience.

Out of 1.2 billion mobile users, there is a 2:1 ratio for feature phones to smart phones. If you are trying to reach a global audience, this means you are leaving out a huge group of prospective customers. In the US, the majority of web traffic is already dominated by smartphones, but 2.4% of non-computer traffic still comes from feature phones. If you can narrow your users down to smartphones then the second issue you have with mobile apps is optimizing for various devices, your app needs to be optimized for Androids (35.6% non-computer traffic), iPhones (23.5% non-computer traffic), and other smartphones (6.7% non-computer traffic) according to comScore.

Fact: Facebook sees more people accessing their mobile site than from their top native apps combined.

What if users don’t want to download your app?

I know Nielson tested the usability of the apps, but did they do any open-mobile web research? Meaning, did they research how users arrive to mobile sites and applications and test how users react when they hit a page that prompts them to download an app? No, and the way I see it is that any extra step, click, hop, or jump you make the user go through increases the likelihood for drop-off. From personal experience, I have searched and navigated my way to websites that prompt me to download their mobile app, and what do I do? I pass. If there is no direct link to their website, I will hit the back button on my browser and choose another site from my Google search results or I will just take a look at the site later on my computer…that is if I remember.

While there is no research that delves specifically into site abandonment when prompted with an app download, MobiThinking reported that “In all countries surveyed more consumers used their browser than apps and only a minority will use web or apps exclusively. US consumers prefer mobile browsers for banking, travel, shopping, local info, news, video, sports and blogs and prefer apps for games, social media, maps and music.” I am not surprised by this and by no means would I advise a gaming company to dive straight into a mobile website at this stage, considering HTML5 performance (arguably) still lags behind native apps.

Lastly, who says mobile sites can’t offer a great customer experience?

This blog series is going to showcase mobile sites and point out some of the do’s and don’ts as we see them; however, I’d like to start with three do’s that apply to all mobile sites.

1. Recognition - Your site needs to recognize mobile devices
2. Speed - Site should load and navigate through pages/searches quickly
3. Opt-Out Option - Users should be able to easily find a link to full site
4. Limit the Work - Site should be organized and easy to use as to prevent users from having to search, scroll, click or type too much
5. Size it Up - Font sizes and buttons should be legible and sized to appropriate tap zones according to type of mobile browser

Now, let’s take a look at our first example of a mobile site and point out the Do’s and Don’ts!

Example 1: AirBnB - Finding a Room Nearby

QUICK COMPARE / CONTRAST

AirBnB’s initial page wastes no time in presenting users with lodging options by showing nearby locations right from the get-go. Whereas Expedia offers users to ‘Search Nearby Tonight’ or geo-locate via compass icon next to the destination field, both of which require the user to tap another button and load a new screen. Not to mention, when I tapped the ‘Search Nearby Tonight’ I got the error message seen in the pic below which was not informative or helpful at all. Don’t waste users’ time with such messages, make the operation work or come up with better error messaging.

Expedia does, however, offer sorting features not available on the AirBnB site which are extremely helpful when searching for a place to stay. Users can search by price, popularity, or neighborhood, among other options.

To sum it up, the site has minor usability flaws, but overall is an easy to use mobile site that allows users to quickly search and find a room. All of the call-to-action buttons are clearly labeled and appear above the fold. During my site experience there were no loading issues or major roadblocks. When I checked out a few competitor sites, I was surprised to see that few had mobile websites (Roomarama, Wimdu) or if they did, the websites had inferior user experience right off the bat (VRBO, Couchsurfing). Ultimately, AirBnB gets 4/5 stars for overall satisfaction and ease of use in my book.
Stay tuned as I review more mobile websites across industries. If you have any suggestions for sites we should look at, catch us on twitter @evocinsights.

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.

One of the challenges most sites face is that there is an excess of information they need to convey – value proposition, marketing messaging, product information, social media and more. When trying to fit this all into a single site – and, often, on a single page – sites can become cluttered and difficult to read, frustrating customers and prospects visiting your site. So how do you balance the needs of the company to convey a wide variety of information, but still provide your customers a good experience on the site where they are able to easily accomplish what they have come to do?

Walking the line between these competing needs will be easier of you keep the following usability guidelines on simplicity and scannability in mind.

Simplicity & Scannability

1. Writing / verbiage is understandable, succinct, easy to scan, appropriate to users, and not redundant
   • While keeping the writing and verbiage used understandable may seem very basic, too often we as companies and experts in our area of focus forget that a prospect or customer may not have any base of knowledge in our space with which to place our products and services in context
     1. So, while the use of acronyms or industry-specific terms may convey exactly what we are attempting to communicate, the end user may not understand – the site needs to address all potential audiences with the language used – both someone who is new to a specific industry or product set as well as those who may need more detailed and technical information
     2. Providing overviews at a basic level with clear links to definitions of any industry-specific verbiage used will help newcomers; clear links to more technical information will satisfy the needs of those with more knowledge and experience
   • Additionally, the tone and level of the writing should be appropriate to your target audience
     1. For this, it is key to understand who is coming to your site and what they are seeking. This information can help you determine whether you should be writing at a 6th grade level or a high school level
     2. You want to make sure all users can understand your site, but that users do not feel as though they are being talked down to
     3. This balance can be particularly difficult for sites like corporate pharmaceutical websites where the needs of both a consumer and a healthcare professional must be addressed. Thinking ahead of time about the level of the writing can make the site more applicable to both audiences
   • Keeping the writing on your site succinct and easy to scan is imperative
     1. We see over and over again in testing that most users do not read sites, but rather scan for what they are looking for
     2. Most writing on a site should be in short sentences or bulleted lists – this allows users to scan the page to find the information of interest and focus only on what they are seeking, while also putting other messages that might be important to you as a company in front of them /li>
     3. As a user navigates the site, they will tell you by their actions when they are seeking more detailed information (by navigating more deeply, clicking on the links designed to provide details, etc.) which is when longer paragraphs may be appropriate to provide the depth and breadth of information the user is expecting to find
   • Finally, the writing on the site should not be redundant
     1. For most companies the issue is not having enough content, it is having too much content; Given this, you do not want to clutter your site with redundant information
     2. Utilize cross-linking and contextual linking to help users discover other site sections, products or pages, rather than talking about them in multiple places on your site

   

2. Categories are organized intuitively and are mutually exclusive
   • Categorization of the information on your site is vital – if users do not understand the categories you are using they will not find what they are looking for and they will go elsewhere – even if your content, products or services are better than the competitions’, users will never know if they do not understand how to access it
   • This is another area where it is important to think about how a prospect or customer is thinking about your company, rather than how your company is organized
   • While it may make sense to organize your site according to the divisions of your company, it may not match the mental model a user has when shopping for your product or service, so it is more important to match that model rather than your company organization
   • Avoid the type of terminology we talked about above, such as industry-specific acronyms or technical terminology that may not be understood
   • Utilize a categorization in which it is clear where all the content will fall; do not have any overlap in categories
   • If an overlap is unavoidable, provide easy cross-links to drive users from the each of the categories that could contain the information of interest to its location; do not make users move from their first choice to their second, etc. seeking the information

   

3. Appropriate amount of pagination at product list level; limits number of clicks to view products
   • While this guideline calls out product lists specifically, this applies to any key content sought from your site, be it products, articles, quotes, etc.
   • If you have long lists on your site, be sure to offer an easy way to sort, filter or move through the list to the specific item of interest; however, using multiple pages without a navigational method that allows pinpointing of the item is not a solution
   • Users need to be able to access items quickly with as few clicks and as limited scrolling as possible; this can mean utilizing tab structures or strong filtering or sorting tools that provide easy access without traversing pages of options

   

4. All navigation shall appear above the fold; pages limit scrolling and contain anchors if lengthy
   • All of the primary navigation you expect a user to discover and use as they move throughout the site should be visible without any scrolling
     1. This is especially important on the first page a user encounters on your site, which increasingly, is not necessarily the home page if entering from Google
     2. This does not mean you should not include any navigational elements lower on the page. For example, if users are reading content of interest which forces them to scroll, navigation to the next step in the process or to a call to action, such as “Book Now” should be offered at the bottom of the page; however, this is in addition to the navigation offered at the top of the page, i.e., “Book Now” should be offered for those who do and do not scroll
     3. This also may not be true for steps in a process which require scrolling, however all of the main navigation should still be above the fold
   • Lengthy pages requiring users to scroll extensively should be avoided whenever possible
     1. In situations where long pages are necessary, users must be given an alternative to scrolling
     2. Ideally, this would be tabs or some other structure that does not require a full page load, but in other cases anchor links can be used
     3. If anchor links are utilized, it must be clear to a user what is happening, i.e., they are being moved down the same page, and they must be given a clear path back to the area on the page where they made the selection. If this is not clear many users turn to the “Back” button and get lost in the site or have to make more clicks than necessary to navigate

   

5. Product details / descriptions are easily understandable
   • Not only does writing about products need to be crisp and easy to read, it must be organized in an easy to understand manner
     1. Again, limited scrolling is key and tabs can be a very clean way to organize all of the information a user has come to expect from the product details
     2. The top of the page should contain a photo and a brief overview of the information available
     3. Additional information should be clearly accessible and all of the information should be easy to scan
     4. For more detailed information on product page do’s and don’ts, See Sabrina’s blog on product detail pages in retail

   

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

How can you get your customers to the shopping cart faster?

In an attempt to get users to shop faster, many online retailers have added a “Quick Look” feature that allows customers to remain on the multi-product page while adding an item to their virtual shopping cart. In my opinion, this feature is extremely useful when shopping online and has the potential to increase sales.

Think about it. If users can find out the information they need about a product and add it to their shopping cart whilst remaining on the same page, they:

• can make a quicker decision about whether the product is right for them or not (meaning they can move onto another product faster)
• do not need to wait for the page to load
• do not need to click back in their browser to get back to the multi-product page
• do not lose their place on the multi-product page

However, there a few key rules that need to be followed to ensure that your Quick Look feature is effective.

1. Show it off - Make sure users know that the Quick Look feature is available on your site by simply putting the text at the bottom of each product image or by having the text appear when the customer hovers over the product.
2. Make it More than a Look - To make your Quick Look feature as effective as possible, it should have the following:
   • Item description
   • Item details (e.g., content, place of manufacturer, care instructions , specifications, special features, weight, parts included, etc.)
   • Alternate views of the product including a zoom feature
   • Alternate colors/styles available (Name and image or swatch)
   • Available sizes and inventory status
   • Add to shopping cart option
   • Add to wish list option (if applicable)
   • User rating (if applicable)
   • Sharing options (e.g., Email a friend, Facebook, Twitter, etc.)

   Let’s take a look at the online retailer ModCloth.com for an example of best practices when it comes to the Quick Look feature.

   

   The only thing missing from ModCloth.com’s Quick Look feature is an option to go straight to the shopping cart (See Anthropologie.com example).

   

3. Keep it Quick! - One of the most obvious mistakes that retail e-commerce websites make is bringing users to their shopping cart immediately after they have added an item. Would you want to take the items you shop for to the register one by one? Show customers that their shopping cart has been updated, but don’t force them to go there until they are ready .Don’t waste their precious time!

A different way to quick look…

Now that we have looked at what makes an effective quick look tool, let’s take a quick look at a less conventional quick look feature, that is still effective.

Neiman Marcus has created an elegant quick look tool in their Beta website redesign. Instead of a pop-up that opens on top of products, the quick look information unrolls itself within the browser, revealing additional views, product name, available sizes and colors, and the option to place the item in the customer’s shopping bag.

While there are a few things missing from this quick look feature, it is still a great example of how the quick look pop-up can be aesthetically changed to match the users’ taste (Can you see what’s missing?).

Remember, usability and design go hand in hand! Added features that don’t work only clutter a website and confuse users. Make sure your site is usable. Contact us for more information about our research and testing services.

• ­

• 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