Posted by: bbannan | February 29, 2012

Jakob Nielsen’s Mobile Web Site Usability Research – Heath

Chapter 10 in our text discusses usability and usability testing and research.  It provides some excellent guidance on the process of collecting data from users, but two things about it stood out to me: one, it feels a little bit dated, and two, it feels reactive when we’re still in the midst of our design process.

When I say it feels a little bit dated, it reads as if the target audience consists mainly of desktop computer users with limited familiarity of the Internet and e-Commerce.  The author was an early web developer and a pioneer in designing usable web sites in the early days of e-Commerce.  The principles in the chapter are still sound, but the process may need to be tailored for our purposes, given that our audience is almost exclusively Internet savvy smart phone owners.

When I say that it feels reactive when we’re still in the midst of our design process (to me, I should qualify), I mean that our compressed academic schedule means our designs are still in their infancy.  I feel like what I need first is a lesson on how to design usable mobile applications, rather than an exercise on how to put my potentially unusable application in front of users.  I’m an instructional designer by trade.  I have some software development experience (enterprise desktop and web-based courseware), but I feel out of my depth developing for mobile platforms that I’m unfamiliar with.

I know that a wealth of usability research for desktop and web-based software applications exists, and that over time that research produced a rough set of accepted usability guidelines for developers.  Avoid horizontal scrolling on web pages, for example.  So my hope was that equivalent research existed for mobile applications, and it does.

Jakob Nielsen’s name has already come up several times, most notably in week 2’s presentation, and he has conducted three rounds of extensive usability testing for mobile platforms.

NOTE: It’s worth mentioning here that there’s a difference between a mobile application, which is highly platform dependent, and a version of a web site that is optimized for mobile devices, which is to a larger extent platform independent and easier (subjectively) to develop.

Nielsen has been called the “guru of Web page usability” and “the world’s leading expert on user-friendly design.”  During a recent round of mobile web site user experience testing, his organization, Nielsen Norman Group (www.nngroup.com), combined three usability methods:

  • Diary Study: 14 participants from 6 countries logged all of their non-call mobile device usage for a week using Twitter, and filled out a questionnaire each day to provide more in-depth information.
  • User Testing: 48 participants (half men, half women, 33 in the U.S., 15 in the U.K.) participated in usability studies on their own phones, and the NN Group recorded their sessions with a document camera.
  • Cross-platform Review: the NN Group conducted a design review of 20 sites using 6 different phones.

In all, 62 users on four continents participated in reviewing 36 sites.  What they found is that “the mobile user experience is miserable.  The phrase “mobile usability” is pretty much an oxymoron.  It’s neither easy nor pleasant to use the Web on mobile devices.”  The average success rate (i.e., the user accomplishes what he or she intends to accomplish successfully on the first attempt) was only 59%–20% lower than on a regular personal computer.

In other words, we shouldn’t feel too bad if our test results are kind of rough this semester.  Even the professionals have a lot of room for improvement in this arena.

Based on the data, Nielsen’s team has compiled over 100 suggestions, guidelines, and observations for building usability into your mobile sites and applications.  I’m going to share a few here that I found immediately relevant to our design exercise in 732/752.

Drop-down Boxes, Buttons, and Links

  • Clickable areas should be at least 1 cm x 1 cm.
  • Leave generous amounts of space around radio buttons, drop-down boxes, check boxes, scroll bars, links, etc.

Lists and Scrolling

  • All the items on a list should go on the same page if the items are text-only, and if they are sorted in an order that matches the needs of the task.
  • If the list contains items that download slowly (e.g., images), split the list into multiple pages and show just one page at a time.If a list of items can be sorted according to different criteria, provide the option to sort that list according to all those criteria.
  • If a list contains items that belong to different categories, provide filters for users to narrow down the number of elements that they need to inspect.
  • If the list contains only one item, take the user directly to that item.

NOTE: Nielsen separates users into “Searchers” and “Browsers” and advises site developers to think about which bucket their audience primarily falls into.  “Browsers want to kill time; they look for something interesting to do. Searchers look for one particular piece of information—they usually need that information to achieve a real-life goal (e.g., eat lunch, get to your store). Searchers want to be done with your site as quickly as possible, in order to go on and pursue their bigger goal.”

Navigation

  • Include navigation on the homepage of your mobile website.
  • On homepages of browsing sites, give priority to new content over navigation links.
  • Include at a link to navigation on every page of your mobile website.
  • Do not replicate a large number of persistent navigation options across all pages of a mobile site.
  • Use breadcrumbs on sites with a deep navigation structure (many navigation branches). Do not use breadcrumbs on sites with shallow navigation structures.
  • Use links with good information scent (that is, links which clearly indicate where they take the users) on your mobile pages.
  • Use links to related content to help the user navigate more quickly between similar topics.
  • JavaScript and Flash do not work on many phones; do not use them.

Images and Video

  • Include images on your website only if they add meaningful content. Do not use images for decoration purposes only.
  • Do not use image sizes that are bigger than the screen. The entire image should be viewable with no scrolling.
  • For cases where customers are likely to need access to a higher resolution picture, initially display a screen-size picture and add a separate link to a higher resolution variant.
  • When you use thumbnails, make sure the user can distinguish what the picture is about.
  • If you have videos on your site, offer a textual description of what the video is about.
  • Clicking on the thumbnail and clicking on the video title should both play the video.
  • Indicate video length.
  • Specify if the video cannot be played on the user’s device.

Conclusion

These are just a few of the guidelines in the NN Group’s report that I felt were helpful when thinking about the mechanics of our application and designing usable screens.  The biggest things I took away from the research study were: 1) that this is hard to do, even for the pros, and 2) research exists to help you get started.  Nielsen’s report includes plenty of good and bad examples and screen shots that may give you some ideas.

References

The Nielsen Norman Group: http://www.nngroup.com/

Jakob Nielsen’s Website: http://www.useit.com/

Jakob Nielsen’s Column on Usability: http://www.useit.com/alertbox/

The reports can be downloaded from the NN Group’s web site for a hefty fee (@$300 for the latest one), but a little google searching produced a .PDF copy of the previous report, which I will upload to the wiki and link from the blog topic page.

Advertisements

Responses

  1. […] C300 vs. 5D Mark II Test FootageCanon C300 vs. 5D Mark II Test FootageHello :DHello :DJakob Nielsen’s Mobile Web Site Usability Research – HeathFSB Tutorial – Moving Split Screens in Final Cut Pro 5 – Video […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: