hci - website usability of tablet devices

HCI – Report – s1055940 – Sebastian Borggrewe

T a b le o f C o nte nt

ABSTRACT 2

INTRODUCTION 3

THE IPAD 3 RESEARCH PROPOSAL 3 MOTIVATION 3 RECENT RESEARCH 3

WORKING PLAN 4

HYPOTHESIS 4 PLANNING 5 EQUIPMENT 5

USER TEST 6

USER TASKS 6 TASK 1: CNN.COM 6 TASK 2: AMAZON.CO.UK 6 TASK 3: FACEBOOK.COM 7 SETUP 7 RESULTS 8 USER DEMOGRAPHY AND PRECONDITIONS 8 TIME CONSUMPTION OF THE TASKS 8 ERROR TYPES AND FREQUENCY 9 ADVICE FOR WEBSITE DESIGNERS 11 RESTRICTIONS TO MY RESULTS 11

FUTURE RESEARCH 12


Abstract This report deals with the efficiency of the iPad as a web-browsing device and points out the main reasons why the iPad is slower than conventional computing devices (desktop/notebook).

Since Apple claims that the iPad is “the best way to experience the web [..]” i I was highly motivated to find out whether it is also the most efficient way to browse the web. By constructing a user experiment for two iPad users and a control group of two notebook users containing three common websites (cnn.com, amazon.co.uk and facebook.com), I found out that the iPad is only significantly slower if heavy keyboard is involved in the interaction. However there was another error that can actually be avoided: read-tap-asymmetry1.

The results were taken to create a first checklist, that I advise all website designer to follow. These proposed improvements include especially reducing keyboard input for iPad-optimized sites. I.e. search suggestions and increasing font and link size, as well as spacing between links.

1 Users are able to read a link, but fail to tap it accurately.


Introduction

The iPad Apple introduced the iPad on 03/04/2010 and over three million have been sold to date, which makes it relevant in the mobile computing market. It is designed to be a netbook replacement in tablet form, which is almost 100% controllable via touch screen. Apple claims that the iPad is “the best way to experience the web [..]” ii and a recent studyiii indeed shows that already 38% of iPad users prefer using their iPad for browsing the web over their notebook and mobile phone.

Research Proposal Although the iPad has quite a high resolution for a mobile device, it is still limited due to the lack of keyboard and mouse, in addition to other restrictions that mobile devices in general suffer from when it comes down to the web. These are, for instance, the smaller screen and a potentially slower Internet connection. In addition the iPad is the pioneer in a rejuvenated computing category: the tablet. Therefore it is eligible to ask whether current websites are usable with the iPad. Consequently, my main idea is an investigation of the way users browse the Internet with this new device and what consequences this has for website design regarding their usability.

Motivation Since I am highly interested in both mobile and web technologies and work with both technologies quite intensely, I find the combination of the two even more appealing and exciting. Moreover I am really keen to research whether current websites are suitable to be browsed by the iPad.

Recent Research The iPad is a fairly new product and therefore there have been only a few articles and research papers published until now. However the iPad is, as stated above, still a mobile device and therefore general rules for the usage of the mobile web can be partly applied as well.

The Norman Nielsen Group did one of the first researches on Apple’s iPad. In their 103 page report, called “Usability of iPad Apps and Websites”iv, they give an overview of usability issues that occur along apps and websites, when used on the iPad and conclude recommendations for iPad specific app and website design. For example: Bigger font-size to reduce the frequency of zooming and bigger links to counteract the read-tap-asymmetry. This article is especially relevant, because it addresses mobile web usability issues directly related to the iPad.

As far as mobile web in general is concerned, I found a couple of useful papers, which help understanding of its usage and what has to be done, to improve the concept.

In 2008, a US study on why people access the mobile web was published in “A Framework for Understanding Mobile Internet Motivations and Behaviour”v. This study tries to explain the reasons people have for using the mobile web and how they use it. This study is therefore able to give an overview of when people access certain services on the web and why. These findings help designing mobile websites in the way they are actually used and can therefore improve user experience on mobile platforms in general, including the iPad. The main findings the author


makes are that user’s motivation and behaviours can be grouped into patterns i.e. Awareness (stay up to date) and Social Connection (socializing online). Understanding these patterns is especially helpful, when designing a suitable user test.

Moreover, I took the article “Web Content Adaptation for Mobile Handheld Devices”vi into consideration, which was published in 2007 by Dongsong Zhang. The author proposes multiple approaches to adapt web content for mobile devices. Although this article is mainly aimed at handheld devices, the parallels you can draw from handhelds to the iPad cannot be denied. This article is particularly interesting because it combines the ideas of mobile web being differently used from desktop web and the consequences for design that derive from this behaviour. The author suggests three different approaches that can be combined to adapt web content for mobile devices: Selective Content Delivery – The user doesn’t need all the information at once, Adaptive Content Presentation - the website has to be design differently for mobile devices and finally Adaptation of Multimedia Content – Mobile devices are bound to different formats, filesize in order to show multimedia content (the iPad doesn’t support flash).

Working Plan In my report I want to evaluate user’s interaction with websites on the iPad. In order to do so, I will keep track of the time users take and the errors they make, when browsing the Internet using an iPad.

Hypothesis My underlying hypothesis claims that a novice user, after using the iPad for one day for the purpose of web browsing, is not able to navigate to a specific information on an, not specifically iPad-optimized, website as fast as a notebook user and produces more errors due to faulty interaction with the website (for example: clicking the wrong link due to it’s small size). The results shall help to give advice on how to design usable iPad-optimized websites.

Methodology In order to determine the actual usability of websites using the iPad as a web-browsing device, I want to setup a qualitative study containing 4 users. Two of them will use the iPad for browsing the web; the other two are my control group that will use a notebook instead (In case the website suffers from some general usability issues). Each of them has to fulfil three information retrieval tasks that will be identical for each user.

The three tasks will differ from each other in the way the user has to interact with the website. I will use a news website: cnn.com, where the user only needs to navigate through the website, an Internet shop: amazon.co.uk and a social network: facebook.com, where the user needs to type and point with either finger or pointing device.

All actions of the user will be recorded while fulfilling the tasks, using a screen recording software, and they will be asked to comment on their actions after the experiment.

During the experiment I will observe the user, paying attention to two criteria: First of all the time it takes the user to fulfil the task and secondly, the types of errors he/she makes while fulfilling his/her task.


There will be a clear focus on the questions:

• Which part of the task took longer on the iPad (for example, typing in the search term) and why?

• What kind of errors where made and what are the reasons for those errors according to a) the user and b) my observations.

Planning The development of the task the users will need to fulfill will take about one hours to complete. I will need an additional 30 minutes to setup the experiment. I plan to spend a maximum of 45 minutes with each user to execute the experiment described above. The whole review and evaluation process will take approximately 6 hours. After the experiment I plan to spend another two hours aggregating the results to a reasonable number of figures and tables for this will make the report more graphic and readable. Six hours will be used for actually writing the report.

Since I have another 1,5 hours left, I will have a reasonable amount of backup time in case one or two parts of my plan take longer, than I calculated it to be. I want to add, that the duration of every task was already generously calculated with a reasonable amount of backup time. This way I ensure the plan to be carried out in utmost 20 hours (cf. Table 1: Time calculation).

This plan will be executed according to the following timetable:

Time window Action 08/10/2010 – 14/10/2010 One day time for each of the two iPad users to

become familiar with the device. 15/10/2010 – 22/10/2010 User experiments. I calculate a whole week,

since some users might be busy on certain dates.

24/10/2010 Evaluation 25/10/2010 Result Aggregation 27/10/2010 – 28/10/2010 Report Writing + use of backup time, if

necessary. Table 2: Timetable

Equipment In order to execute my plan I need the following equipment:

• iPad and Notebook

Task Time Task development 1h

Experiment setup 0.5h User test 3h

Evaluation 6h Result Aggregation 2h

Writing the report 6h Backup time 1.5h

Total 20h Table 1: Time calculation


• Screencast Software (notebook) / Webcam (iPad) and Microphone • A table and two chairs

I have already organized the equipment that I need and therefore it won’t consume any time to get a hold on it.

User Test

User Tasks The User tasks were designed to cover both pointing and keyboard input. In order to simulate everyday life tasks, I chose three websites that cover a representative cross section of human interaction with the Internet: News, Shopping and Social Networking. In the following I will describe the three tasks.

Task 1: cnn.com The User is supposed to navigate to the Top Story in Europe and get to the comment section of the story. This task will involve using the navigation bar, in-text links and scrolling.

Task 2: amazon.co.uk The user has to add the book “Senior Nice: Straight Life from Wales to South Africa” to his/her shopping basket, by searching for the Author “Howard Marks”. Afterwards the user shall proceed to the checkout, without logging in and without actually ordering it. This task will involve using the website search (keyboard input), in-text links /buttons and scrolling.


Task 3: facebook.com The user is supposed to login to facebook with their own credentials and send me “Sebastian Borggrewe” a message with the Subject: “Done” and a message body that says: “I am done with this experiment!” They are already friends with me on facebook, so the task will be about the same for everyone (except from the length of their credentials). This task will involve a rather strong use of the key input for login and message composing, as well as the use of various buttons integrated in the facebook interface.

Setup As already suggested in my Working Plan, the usability setup consists of a table and two chairs. -One for the tester, one for me. This setup will basically look the same for iPad and Notebook. The device itself determines the only difference. The device will be given to the user in order to be placed on the table or lap or how he/she would use this device at home. The screen recording software will record the screen and the microphone remarks users make, while fulfilling their tasks.

Figure 1: Test setup. Internal Notebook camera is used for recording the iPad screen


Results

User demography and preconditions The four users that participated in the test are between 22 and 25. Three of them have a high level of technical experienced (four on a scale from one to four) and one of them is less experienced (two on a scale from one to four). All of the users were male and the two iPad users had iPhone experience for at least one year. They were given the iPad for one day to explore its browsing capabilities.

Time consumption of the tasks As suggested in my hypothesis iPad users were in fact slower fulfilling the task, than notebook users. However the results are still surprising (cf. Figure 2). If no, or little, keyboard interaction was involved, the iPad users performed nearly as well as the notebook users. The average time differences in the first two tasks are between 0.65 and 1.65 seconds. As soon as heavy keyboard input is involved in solving the task, the average difference rises up to over 40 seconds. This already gives a first hint as to which kind of interaction takes significantly longer on the iPad: Typing.

Figure 2: user test - time

In fact the results show that keyboard input is the main reason why iPad users are slower in task three (cf.

42.15

49.65

87.7

40.5

49

40.95

30

40

50

60

70

80

90

cnn.com amazon.co.uk facebook.com

iPad

Notebook

Text input purpose

iPad Notebook Difference

Login 18.2s 7.3s 10.9s

Search for User 1.2s 1.1s 0.1s

Write Message 36.2s 9s 27.2s

Total 56.6s 17.4s 38.2s Table 3: time differences due to text input


Task 3: facebook.com). Table 3 shows the keyboard input times for task three, without accounting for the delay times due to keyboard appearance (iPad) or switch between touch pad and keyboard (notebook). As you can see the difference that derives from the mere keyboard input is already 38.2s, which reduces the difference deriving from clicking operations down to 8.55s. Again the browsing speed is not significantly slower than on a notebook.

Another thing that is quite striking is that the “Search for User” time difference is hardly noticeable. In fact all four users didn’t type more than the two letters “Se”. Apparently little text input is not an issue on the iPad and during the user experiment the two iPad users didn’t have a problem typing little text (approx. text input <= 3 characters), since they could spot all of the characters straight away on the keyboard. With longer text bits, like the message, there were more interruptions where the users were procrastinating and looking at the keyboard in order to spot the next couple of characters. One iPad user said after the experiment “I kinda needed to have a look at the keyboard once in a while, to be sure that I am hitting the right keys.”

Moreover one of the major downsides of the iPad keyboard was mentioned by one of the iPad users: “It is really weird to have no haptic feedback on a nearly full-sized keyboard, because you are sometimes actually not sure whether you hit the key or not”. Switching the keyboard sound on might equalize this issue. Nevertheless sound is not always an option i.e. in a meeting.

Error types and frequency In the following I want to investigate the errors that occurred during the test. These are already aggregated results of my observation and the user statements. As you can see in Table 4 there are, all in all, five error types, that could be identified during the test.

Some of them are iPad specific errors, that don’t occur among the notebook users and most of them occurred more often during the iPad test. However, there is one error type that occurs more often among notebook users, which is “User needed to correct keyboard input”. That is due to the fact that most of the users are so used to keyboard input that they often type quite fast with a high error rate. The iPad users were significantly slower, but made less mistakes, due to their reduced speed.

Error Occurrence (iPad) Occurrence (Notebook)

1. Clicked the linked twice, because the user thought he missed it.

2x 0x

2. User missed the link and needed to click it again.

1x 0x

3. User needed to correct keyboard input

3x 6x

4. User clicked the wrong link and needed to go back one page

1x 1x

5. Keyboard vanished for no particular reason

2x 0x


Table 4: Error types and frequency

The errors I identified and analysed can be accordingly put into 3 different categories:

• iPad errors, due to read-tap-asymmetry (1 and 2), which means that the user could read the link, but was unable to click on it/thought he/she didn’t get it, due to its size.

• iPad errors, due to faulty software behaviour (5) • General errors due to user faults (3, 4). These errors would possibly occur among every

web-browsing device.

In order to give advice on how to optimize websites for the iPad the first two categories are especially interesting to look at.

Category one errors are all due to read-tap-asymmetry. These errors are a result of a small link size or a lack of spacing between individual links. During task 1, one iPad user explained his behaviour (Error 1) by an insecurity about the link he clicked: “I clicked the wrong link ... Well, at least I thought I had clicked the wrong link [..]”.

The second category (Error 3) can be explained by either a mistake programming the website or a browser bug on the iPad. The error was spotted on the amazon website only, which makes a website bug more likely. However this error didn’t add a significant amount of time to the overall execution time of the task. It is still a frustrating behaviour, which was countered with moaning by both iPad users.

The third category is rather uninteresting for the usability aspect of websites on the iPad. It contains errors I assess as human errors.

Conclusion

Designing a website becomes more complicated nowadays considering all the possible devices that can access it. For smaller mobile devices the constraints are definitely larger than for devices with a larger screen. What about the iPad?

The iPad and tablets in general are somewhat between the chairs. On the one hand the screen is fairly big, but on the other hand a tablet is usually navigated by using touch gestures and lack physical keyboards. However, all in all, all websites were accessible for iPad users and only a small time difference could be spotted comparing the results of notebook and iPad users. These differences mainly derive from the time difference in using a keyboard. This means a physical keyboard is still much faster than a touch screen keyboard. Another difference, which is however just minor, is due to a “read-tap asymmetry” as already described by Nielsen and Budiuiv, which means that the user can actually read what the link says, but is not able to precisely click it yet. This behaviour could also be spotted in my usability test, though it doesn’t play a major role in the time differences.


Advice for website designers Websites that should be optimized for the iPad must only follow a limited number of rules in order to make it even more accessible for users. All of the websites tested during the tests were accessible with only minor restrictions. Despite that fact, designers should keep the following in mind: you should use a higher font-size / more distance between links. Clicking a link should be doable, without unnecessarily using the zoom. To reduce the time a certain task takes, website designers should also take into consideration that keyboard input takes much longer on the iPad than on a desktop or notebook. This can be equalized by supplying auto-completion/search suggestions, like facebook does (cf. Figure 3) when searching for a particular person.

However some inequalities can’t be dealt with. If you need to write a text on the iPad, you can either choose to use the built-in word-completion function (which was switched off during the test) or enter all the text manually.

To sum it up I’ll give you a first optimizing checklist. In order to optimize a website for the iPad...

Choose a font size that is big enough for the user to read without using the zooming function.

Choose the link size wisely. Users should not only be able to read the label, but also tap it without zooming into the website.

Reduce the amount of text input as far as possible - use other input types instead, if possible.

Supply auto-completion where text input is absolutely necessary. I.e. search suggestions.

Make sure that your website doesn’t induce faulty behaviour on the iPad.

Restrictions to my results The number of users that participated in the test is, due to certain time restrictions, obviously not sufficient enough to spot all errors and faulty behaviour of websites. However it gives a good first overview to show where to start optimizing and where some potential pitfalls in design occur. Nevertheless I would suggest repeating the same experiment with a higher number of users and more sophisticated tasks (cf. Future Research).

In addition to that, I want to add that the iPad is, in contrast to a notebook, not a device originally created to efficiently browse the web, but to make browsing the web “more fun”. It is, in fact, a “couch-device” and more suited for leisure browsing, than for productive browsing. Still

Figure 3: Facebook.com: search suggestions


I believe that following my proposals makes the user experience also in this context much better and in fact “more fun”.

Future Research As I mentioned in my “Working Plan” and in “Restrictions to my results”, there are minor constraints regarding the number of users and the sophistication level of the task in the experiment.

Hence I highly recommend repeating this experiment involving at least 10 users and making them fulfil more and more complex tasks. However I am confident that the results will match with my outcome and the general tendency of the iPad being a slightly slower medium to access the web will stay the same.

The reason for constructing another experiment would rather be the identification of more issues, that can be solved, by designing the website differently.

In addition to that, I believe that optimizing a website for the iPad would completely eliminate time differences between conventional computing devices and the iPad. So I would suggest constructing another user experiment that analyses iPad-optimized websites2 in order to verify that hypothesis.

i Apple Inc. "IPad - See the Web, Email, and Photos like Never Before." Apple. Web. 12 Oct. 2010. <http://www.apple.com/ipad/>. ii Apple Inc. "IPad - See the Web, Email, and Photos like Never Before." Apple. Web. 12 Oct. 2010. <http://www.apple.com/ipad/>. iii Copywriters. "IPad Consumer Usage Study: Cooper Murphy." Copywriters. Web. 12 Oct. 2010. <http://cmcopywriters.co.uk/ipad-consumer-usage-study>. iv Nielsen, Jakob and Raluca Budiu. Usability of IPad Apps and Websites. Rep. Fremont: Norman Nielsen Group, 2010. Print. v Taylor, Carol A., Ona Anicello, Scott Somohamo, Nancy Samuels, Lory Whitaker, and Judith A. Ramey. "A Framework for Understanding Mobile Internet Motivations and Behaviour." CHI '08 Extended Abstracts on Human Factors in Computing Systems. Florence: ACM, 2010. 2679-684. Print. vi Zhang, Dongsong. "Web Content Adaptation for Mobile Handheld Devices." Communications of the ACM 50.2 (2007): 75-79. Print.

2 iPad-optimized website means, that it is optimized according to my checklist, including general website usability guidelines.

hci - website usability of tablet devices

Documents