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.

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.

TOP 5 DO’s

1. Do keep breadcrumbs simple; extreme design or visual interest should not be the goal
2. Do keep balance in mind when designing breadcrumbs: they must be evident enough to be useful, but not take away from the content of the page
3. Do keep the breadcrumbs close to the page content, preferably near the title of the page
4. Do make each level of the breadcrumbs a clickable link (clearly indicated using whatever color, underline, etc. link convention you are employing in your site), except for the final level, i.e., the current page
5. Do be consistent in your use of breadcrumbs – you cannot do this only for a section of your site; it must be done throughout

TOP 5 DON’TS

1. Don’t utilize breadcrumbs as a primary navigational element
2. Don’t rely on breadcrumbs to make up for poor main navigation options or navigation placement
3. Don’t dynamically change breadcrumbs to match a user’s path except when displaying customized information such as applied filters; base breadcrumbs on the site’s hierarchy
4. Don’t allow breadcrumbs to be a source of confusion; if your site has many cross-links and pages fit into a variety of categories, breadcrumbing may not be a good option for you as it might create confusion rather than eliminate it
5. Do not substitute breadcrumbs for the page heading / title; breadcrumbs should be secondary to the content of the page and the page should be able to function even if the breadcrumbs are taken away