Mobile web checklist Mobile usability walkthrough for websites

Introduction

Background
Adage checks your website usability now also with mobile devices. Mobile usability walkthrough with a mobile web checklist is a way of making sure the website is both usable and pleasant to use with mobile devices as well.

1/3

As the amount of mobile web usage is significant and increasing, it is important to take mobile devices into account in website design. Adage studied mobile web use and gathered a list of web design guidelines based on the research results. Following these guidelines, also the mobile usability of your website will be taken into account. Adages mobile usability walkthrough is briefly presented in this introduction. This introduction only describes the service that Adage offers. Web design guidelines are not listed. May your company be interested in mobile usability walkthrough of your website, please contact us.

Mobile web checklist

Background
Mobile web usage is growing at a fast pace worldwide.

From 2008 to 2009 mobile web usage increased 148 %. (Quantcast, 1/2010) Mobile usages share of total internet usage is estimated to reach the level of 2 % in 2010. (Quantcast,
1/2010)

It is predicted that over a billion users will browse the internet with a mobile device by the year 2013.
(IDC, 12/2009)

In Finland, mobile web usage is even more frequent.

In 2009, about 20 % of mobile phone users used the web with their phone. (FICORA, 2010)

Mobile web checklist

Background
Adage studied mobile web during summer 2010, evaluating and observing its use with several devices.

2/3

The goal was to find out how users manage to browse the web with mobile devices and especially with
touch screen phones.

Research methods consisted of usability expert evaluation and usability testing with user interviews. In the tests, both the usability issues related to mobile web and the perceived pleasantness of use were
examined.

All in all, 23 participants used 7 websites with 6 different types of devices.

Nielsen Norman Group (NN/g) also studied mobile web usability in 2010

The research report Usability of Mobile Websites was published on the NN/g website. NN/g used diary study, usability testing and expert evaluations as research methods. A large number of 64 users participated, 36 websites were tested and 6 devices were used.

Mobile web checklist

Background
The most important findings of the two studies include the following:

3/3

Many website elements that are widely used, such as mouseover effects and form widgets, are difficult
to use with touch screens. The pointer cannot be hovered without activating objects and the active area of touch is of the size of a fingertip.

Website structure and layout notably affect the ease of use. A structure based on columns is easy to
browse on a small screen, but elements with varying dimensions are difficult to fit on the screen.

A list of design guidelines was gathered based on the results of Adages and Nielsen and Norman Groups studies. Leaning to these guidelines, mobile users will also be taken into account as for web usability.

The guidelines correspond to both normal websites (full sites) and possible additional mobile-optimized sites (mobile sites).

Mobile web checklist

Mobile usability walkthrough for websites

Mobile usability walkthrough can be included in website usability studies, such as expert evaluations and usability testing.

1/2

The list of design guidelines is gone through one-by-one, checking and testing the corresponding implementation.

A walkthrough takes about one workday for a usability specialist. Implementations corresponding to the guidelines are classified as Irrelevant/OK/Fail. Findings are
described briefly.

The design guideline list is given as an Excel report to the customer.

Mobile web checklist

Mobile usability walkthrough for websites

The following phones are used in the walkthrough:

2/2

Apple iPhone 4 (iOS 4)

Google Nexus One / Samsung Galaxy S (Android 2)

Nokia N8 (Symbian 3) Nokia phone with a resistive touch screen (Symbian S60).

Even though the guidelines are gathered for assuring a pleasant use in touch screen devices, the resulting websites are easy to use also with traditional mobile phones.

Mobile web checklist

Mobile web checklist

The list consists of three sections: 1. section corresponds to both full and mobile sites 2. section corresponds to full sites only 3. Section corresponds to mobile sites only. The status column tells if the implementation follows the guideline. Status is marked as: OK, Irrelevant, Fail.

1/4

Guideline

Priority

Status
OK Irrelevant

Notes

Following guidelines apply for both full and mobile sites: 1 1.1 Navigation Make all link lists sufficiently spaced for easy clicking. (A1) Priority Important

Fail Status Notes Test with a resistive and a capacitive touch screen.

1.2

Ensure users know which website they are browsing, i.e. include the company logo or name in a salient location at the top of all pages. Different pages and sites of your website should also be recognizable from each other. (A2, N20) Important

1.3 1.4 1.5

Use breadcrumbs on sites with a very deep navigation structure (many navigation branches). Do not use breadcrumbs on sites with shallow navigation structures. (N57)

Moderate

Use links with good information scent (that is, links which clearly indicate where they take the users). (N58) Moderate Use links to related content to help the user navigate more quickly between similar topics. But use them sparingly. (N59) Minor

Mobile web checklist

Mobile web checklist

The guidelines are marked with consecutive numbering. This way it is easy to refer to the findings e.g. in the research report. References are shown in the guidelines. If the guideline is based on Adage findings, it is marked with A[no]. If the guideline is based on NN/g findings, it is marked with N[no]. The guidelines are classified. Details on classification can be found on the second sheet of the Excel file.

2/4

Guideline

Priority

Status
OK Irrelevant

Notes

Following guidelines apply for both full and mobile sites: 1 1.1 Navigation Make all link lists sufficiently spaced for easy clicking. (A1) Priority Important

Fail Status Notes Test with a resistive and a capacitive touch screen.

1.2

Ensure users know which website they are browsing, i.e. include the company logo or name in a salient location at the top of all pages. Different pages and sites of your website should also be recognizable from each other. (A2, N20) Important

1.3 1.4 1.5

Use breadcrumbs on sites with a very deep navigation structure (many navigation branches). Do not use breadcrumbs on sites with shallow navigation structures. (N57)

Moderate

Use links with good information scent (that is, links which clearly indicate where they take the users). (N58) Moderate Use links to related content to help the user navigate more quickly between similar topics. But use them sparingly. (N59) Minor

Mobile web checklist

Mobile web checklist

Findings are briefly described in the Notes column. Based on the description and the guideline, the issue can be solved. The usability specialist tests the implementations with different types of phones when needed. The recommended phones are mentioned in the Notes column.

3/4

Guideline

Priority

Status
OK Irrelevant

Notes

Following guidelines apply for both full and mobile sites: 1 1.1 Navigation Make all link lists sufficiently spaced for easy clicking. (A1) Priority Important

Fail Status Notes Test with a resistive and a capacitive touch screen.

1.2

Ensure users know which website they are browsing, i.e. include the company logo or name in a salient location at the top of all pages. Different pages and sites of your website should also be recognizable from each other. (A2, N20) Important

1.3 1.4 1.5

Use breadcrumbs on sites with a very deep navigation structure (many navigation branches). Do not use breadcrumbs on sites with shallow navigation structures. (N57)

Moderate

Use links with good information scent (that is, links which clearly indicate where they take the users). (N58) Moderate Use links to related content to help the user navigate more quickly between similar topics. But use them sparingly. (N59) Minor

10

Mobile web checklist

Mobile web checklist

Additional information can be found on the second sheet in the Excel file:

4/4

General recommendations for deciding whether to build a mobile site. Classification of guidelines. List of phones used in the walkthrough.

11

Mobile web checklist

Contact
Liisa-Maija Keinnen
Junior User Experience Specialist tel. +358 20 7497 435 liisa-maija.keinanen@adage.fi

Adage Corporation
Arabiankatu 12 FI-00560 Helsinki Finland +358 20 7497 410

Additional information:
Raino Vastamki Research Director +358 20 7497 417 raino.vastamaki@adage.fi Sami Wilkman Sales Director +358 20 7497 412 sami.wilkman@adage.fi

12

Mobile web checklist