7 Tips for Mobile Website Usability

When it comes to mobile website usability, there are many more things to consider because of the inhibited screen size. The following are seven things you should think about during the design process and check for after your mobile website is complete to ensure that mobile users are getting the best experience.

1. Look for responsive template designs and test them before purchasing.

If you are in re-design mode for your website, be sure to be on the lookout for templates that have a responsive design or are designated as mobile-friendly. Then test the template you are considering on a mobile device before purchasing it. To do this, simply go to the demo site for the template on your mobile phone to see if the design works with your browser. If it doesn’t, see if the template designer offers mobile customization as well.

2. Download mobile compatibility packages for WordPress.

For those using WordPress as a CMS on their own domain (not WordPress.com), you can look into plugins like WPtouch or WordPress Mobile Pack. These plugins will detect whether a visitors is coming to your website from a mobile device and present them with a mobile-friendly design instead of your main one. Be sure to go through the options for these plugins carefully to make sure they are displaying the pages you want visible to mobile visitors and test your website on a mobile device to make sure everything is configured correctly.

3. Don’t use popups or floating elements on your mobile website.

Outside of running into a website that only uses Flash on an iPhone, the next most irritating thing on a mobile website is a popup or piece of floating content. The challenge with these elements is that they are hard to close because the X is generally somewhere outside of where you can zoom. That or there is no way to close it, and no matter where you scroll, the floating social share button, ad, etc. keeps covering the main content. Sure those are easy to manage on a desktop browser, but make sure they don’t appear on your mobile website.

4. Rethink paginated content.

A popular trend on blogs is to paginate posts, so instead of having 1,000+ words on one page, it will be spread across two or three pages. And while this sounds like a great idea for mobile as it would decrease the load time by having less to load on one page, here is the issue. Someone who is in an area with a choppy 3G signal is going be able to load page, but not the rest. Chances are, they will get so frustrated that they won’t try to get back to that content later either.

5. Offer the option to visit the full website.

Assuming that your main website is not all done with Flash, be sure to offer visitors the opportunity to use the full site instead of the mobile website. This way, if they are looking for something not available on your mobile website, they can still access it via their mobile device. Of course, if you do offer this option, make sure that your site isn’t set to automatically redirect every time someone lands on a page from a mobile device. Otherwise, they’ll almost get to where they want to go and then get shipped back to the mobile website again.

6. Add your phone number throughout your website in the text, not as an image.

Smartphones allow website browsers to click on a phone number anywhere on a website to call it directly, but only if the phone number is in the text of the website. A lot of businesses tend to put their phone number in an image just for design / formatting purposes, but this doesn’t help people contact you when needed. As a side benefit, having a local phone number in the text will also help you with local search rankings.

7. Test, test, and test again.

Web designers know to test their latest projects in a variety of browsers because not all browsers are created equal. The same goes for mobile devices. What works flawlessly on your iPhone may not work so well on an Android. Your best bet is to try your mobile website on a few different mobile platforms including iPhone, iPad, Android, and Windows. The easiest way to do it if you don’t happen to own one or more of these devices is to slip into your local electronics or mobile sales store and run a few quick tests on the demo devices. Try to test key conversion areas such as submission forms or mobile shopping carts to ensure a good experience for your mobile users from start to finish.

What mobile website usability tips would you like to add to this list? Please do so in the comments!

How to test your myBalsamiq prototypes with Loop11

The guys at Balsamiq asked me recently to write a brief article for their customers on how to conduct usability testing with Loop11 on prototypes and wireframes built with Balsamiq. My article below shows the steps involved in putting a simple Loop11 project together to test a prototype of the Kayak website.

How to test your myBalsamiq prototypes with Loop11

Happy testing!

Clickstream analysis has arrived!

We’re excited to announce the first of a number of new features for Loop11 in 2012 – Clickstream Analysis. The clickstream analysis will replace the ‘Most common navigation path’ by allowing you to analyze task navigation graphically and instantly understand how visitors navigate a task through your website.

The clickstream report provides a graphical representation of participants’ navigation through the website so you can see their journey, as well as the path they took before abandoning or failing a task.

You’ll notice that we made the visualization highly interactive so you can interact with the graph to highlight different pathways, and to see detailed information about specific pages. For example, if you want to dive deeper into your pages, you can hover over the node to see more information at a glance.

Below you can see an example of a task that performed well in usability testing (in this instance with a task completion rate of 92%). A quick look at the analysis shows that 90% of participants went directly to the success page from the homepage. The orange lines are a visual indication of the magnitude of participants who failed the task at different points in their journey through the website. Navigation through the website is clean and uncomplicated, which should be the case when the participant has a clear direction.

By contrast, the clickstream below is for a task that was performed comparatively poorly, where the task completion rate was only 32%. In this example, there is clearly confusion as to where participants should navigate from the home page to complete the task.

This is our first step in tackling clickstream analysis and we look forward to hearing your feedback as you begin to use the report in the coming weeks. We’re excited to bring you the first of a number of new features for the year, so stayed tuned for more!

As always, we welcome your input on how we can make the clickstream analysis more useful for you, so let us know in the comments below.

Next Page »