Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

How To Make A Physiology-Friendly Application For The iPad

If you’ve ever had to move your iPad from one hand to the other just to tap a button you couldn’t reach, then you may have already guessed why we began this study in our UX lab.

Our Mail.Ru Group’s UX lab team carries out many usability studies of our apps for smartphones and tablets. We address users’ needs by introducing features in our products. We carefully test all of the functions to ensure users notice and understand them well. Nevertheless, this was the first time we had looked at the physiological aspect of our app’s usage.

We came across several1 studies2 dedicated to the physiology of using iPads, but they were all scientific, rather than practical, and quite far from business needs. Moreover, such studies were performed on smartphones3 alone, excluding tablets.

So, we decided to analyze the physiology of using the interface of Mail.Ru’s Email app; for example, how comfortable is it to use an iPad app in typical positions? The behaviors we studied included tapping buttons while lying down, browsing photos while sitting, swiping, and writing text. Our results revealed a number of purely ergonomic problems that should be taken into account when developing any iPad app.

Our results are shown here on an iPad layout using a three-color schema. Controls located in the green zone are easily reachable by the average person; the yellow zone is still reachable but not as easily; and the red zone is the most inconvenient location for controls.

(The images in this article always follow the relevant paragraphs.)

Safe zones on iPad4
Safe zones on iPad. (View large version5)

Description Of Study Link

Goals Link

In terms of user experience, an iPad is interesting as a replacement for a notebook at home (when the user is lying on a couch) or on journeys (when the user is sitting on an airplane or in a hotel room). Such conditions differ greatly from the environment in which we first tested iPad apps. The majority of our previous studies were carried out in a laboratory with an iPad fixed to a bench and using an eye-tracking device. However, we soon learned that this wasn’t suitable for our study because we needed to observe how people use iPads in their everyday environment. So, instead, we had our respondents sit or lie down on a couch to simulate natural conditions.

Tobii mobile eye-tracker in our UX lab6
Tobii mobile eye-tracker in our UX lab. (View large version7)

Audience Link

Our audience consisted of the following:

  • eight Mail.Ru Group employees who aren’t designers or involved in any way in the email product’s development;
  • five males and three females, 25 to 35 years of age.

All respondents use an iPad, in particular, to check their Mail.Ru email.

Research Methodology Link

Step 1 Link

Every user would lie or sit on a couch in the pose that is the most natural for them when using their iPad:

  • supine position (i.e. lying flat, face up);
  • prone position (i.e. lying flat, face down);
  • sitting with legs crossed;
  • sitting with one foot on the couch.

This study dealt only with usage in landscape orientation because a number of studies show8 the majority of iPad users prefer it. Some research shows that it accounts for 35% of usage and is used mostly for specific passive tasks that don’t involve tapping buttons, such as reading a book9.

Respondents in different positions when using an iPad10
Respondents in different positions when using an iPad. (View large version11)

Step 2 Link

Users performed their usual actions with the email app in scenarios such as the following:

  • replying to a message and downloading three photos;
  • setting a push notification for 8:00 am to 11:00 pm;
  • looking for all flagged emails.
User interface of email app12
User interface of email app. (View large version13)

Step 3 Link

All activities were recorded with a GoPro camer (worn by the respondents) and an external camera.

Respondents with GoPro camera14
Respondents with GoPro camera. (View large version15)

Key Results Link

Analysis of the video showed that some difficulties in using iPad apps were purely physiological — for example, a user seeing all buttons and understanding which one to push and when, but not being able to do so comfortably.

We discovered the following difficulties:

  • having to change how the iPad is held in order to reach a button;
  • having to change the position of one’s fingers in order to press a button;
  • having to change the position of one’s hands in order to press a button.
  • having to bend a hand or finger unnaturally.
  • having to cover the screen with one’s hand in order to reach a button.

Examples of each difficulty are listed below.

Changing How iPad Is Held to Reach Button Link

Extra features in an app are often available via swiping. For instance, users of Mail.Ru’s Email app swipe to interact with the message list. Respondents mentioned that the outer buttons (“Spam” and “Trash”) were positioned too far away. This particularly affected those sitting on a couch. As they held the iPad with their left hand, keeping hold of it to reach those buttons proved to be uncomfortable, and so they had to stretch their thumb to reach.

Respondents had to stretch their thumb to reach buttons16
Respondents had to stretch their thumb to reach buttons. (View large version17)

Changing Finger Position to Press Button Link

Respondents sometimes had to change their finger position when performing a step-by-step operation. For instance, the first two steps for adding a second account to the email app is performed in the center of the screen, but the button for the third step is at the bottom of the screen. To press it, respondents had to change their finger position.

To proceed with the registration process, users had to change their finger position three times18
To proceed with the registration process, users had to change their finger position three times. (View large version19)

Changing Hand Position to Press Button Link

Sometimes, our respondents changed hands while performing step-by-step operations; for example, when using the app’s menu. Seven out of eight respondents browsed the menu with their left thumb. All of them found it easy to tap the menu options, but they found it difficult to empty the “Trash” folder. That button was too far away to be easily reached (note that four out of eight respondents had to do it with their right hand instead of their left, which was normally used to access the menu). Moreover, this task required two steps: emptying the folder and then confirming the operation. The second step was difficult for respondents who managed to tap the “Trash” folder with their left thumb, because the second step had to be performed with the right hand.

To clear the “Trash” folder, users had to change hands20
To clear the “Trash” folder, users had to change hands. (View large version21)

Bending Hand or Finger Unnaturally Link

Due to the size and shape of the device, some areas of the screen were difficult to tap. A hand would be pressed against the iPad and have to be bent unnaturally to tap a button.

Let’s take the location of the “Save Image” button as an example. The respondents sitting on the couch found it difficult to tap this button. The icon is located in the upper part of the screen, at the edge of the viewport. Therefore, using the index or middle finger, as is usually done, wasn’t quite comfortable because the metacarpophalangeal joint of the thumb was pressed against the device.

When pushing the “Save Image” button, the metacarpophalangeal joint of the thumb pressed against the device22
When pushing the “Save Image” button, the metacarpophalangeal joint of the thumb pressed against the device. (View large version23)

Covering Screen When Reaching for Button Link

Buttons in apps are traditionally located in the upper part of the screen, following the common practice on websites. But this location has turned out to be inconvenient, both for smartphones and tablets. When tapping a button in the upper part of the screen, the hand will end up covering most of the screen. Also, the part of the screen where changes caused by tapping certain buttons appear is also covered. This will sometimes confuse the user, who might need a couple of seconds to understand what has occurred as a result of their selection.

I can illustrate this point using our email app’s “Compose” button. One of the respondents used their left hand to tap it. Reaching the center of the screen this way isn’t very comfortable but still possible.

When pressing the “Write a letter” button, the active hand covers half the screen24
When pressing the “Write a letter” button, the active hand covers half the screen. (View large version25)

However, the other seven respondents used their right hand, covering more than half of the screen:

When the right hand is used to press the “Write a letter” button, over half the screen is covered26
When the right hand is used to press the “Write a letter” button, over half the screen is covered. (View large version27)

Safe Zone Map Link

An iPad’s physiology-friendly zones for various body positions are shown below. The calculation was performed based on the average length of a finger (the average length being28 5.8 cm for males and 5.3 cm for females for 95% of the US population). According to research, male and female iPad users are essentially equally represented (as of June 2012, males accounted for 51.9%29 of all iPad users, but we’ll consider usage to be equal for the sake of convenience). Therefore, we’ve used the average length for both male and female fingers. And because all of our respondents, as well as most (85%30) people in general, are right-handed, these safe zones were determined for right-handed people. For left-handed users, the safe zones would need to be inverted.

The results below take into account the dimensions of an iPad’s frame, being 2 × 1 cm.

Because our respondents used controls located in various parts of the screen, the safe zones we determined could be applied to any iPad app.

Sitting on Couch (Illustration) Link

Refer to the layout below for physiology-friendly locations of iPad app controls. The diagram applies to a user sitting on a couch with an iPad on their knees.

The controls in the green zone are the easiest to reach for the average person. The yellow zone is still reachable but not as easily. The red zone is the most inconvenient location for controls; a user will encounter several of the difficulties mentioned above; for example, they would have to move their hand to tap a button and end up covering most of the screen.

Safe zones on iPad when user is seated31
Safe zones on iPad when user is seated. (View large version32)

Lying Supine On Couch (Illustration) Link

This safe zone layout applies to a user lying supine; in other words, lying down, face up, with the iPad resting on their stomach and being held with both hands. Note that the red zone in the lower part of the screen is larger than in all other layouts. An iPad supported by your abdomen in this way over an extended period of time will create a ridge in one’s clothes. This ridge would be about 1 to 2 centimeters high and would cover the controls in the lower part of the screen.

Clothes cover part of the screen for users lying on a couch33
Clothes cover part of the screen for users lying on a couch. (View large version34)

Lying Prone on Couch (Illustration) Link

The third layout applies to a user lying prone; that is to say, lying face down on the couch. In this position, the person has to rest on their forearms, which significantly limits the mobility of their hands, making use of both thumbs the most comfortable way to navigate.

However, because the left hand of right-handed users is holding the device, there are more green zones for the right hand.

Safe zones on iPad when user is lying prone on the couch35
Safe zones on iPad when user is lying prone on the couch. (View large version36)

All Positions Link

The illustration below combines all of the zones for the different body positions into one layout. The areas where green and yellow zones overlap are shown in yellow, while the ones where the green and red zones overlap are shown in red. This enabled us to develop the layout of absolutely safe green zones for all of the body positions of iPad users.

All of the layouts were developed according to the dimensions of the iPad’s bezel, which is 2 centimeters on the left and right sides and 1 centimeter on the upper and lower edges, assuming it is held horizontally. If your app is designed for iPad mini users, you should measure the edges of that device to determine your own safe zones.

Safe zones on the iPad for all positions37
Safe zones on the iPad for all positions. (View large version38)

We hope the results of this study will assist all developers to improve the usability of their apps during the creation process. We are certain that the results of our study would be relevant to the design of any app, because it was in no way affected by the design of our own app. Respondents were familiar with all of the controls, and our findings were based solely on physiological observations. In addition, note that the Mail.Ru Email app has controls on every side of the screen, so we’re sure that the device’s entire surface was tested.

A user chooses the time when they want to receive push notifications39
A user chooses the time when they want to receive push notifications. (View large version40)
The user selects a message style41
The user selects a message style. (View large version42)

If, in a few months (and after having absorbed the recommendations derived from our research here), you find yourself having to change hands less often while using an iPad and you are able to hit controls and menu items more easily and frequently, then you’ll know we’ve addressed the problem effectively.

Recommendations For Designing iPad Apps For Physiology Link

  • Put controls within easy reach on the iPad, however the user is positioned (see our safe zone map).
  • If an action consists of two steps (controls, fields, etc.), all steps should be located in the same part of the screen.
  • Email registration page in Mail.Ru Email app with safe zones44
    Email registration page in Mail.Ru Email app with safe zones. (View large version45)
    Message page with safe zones46
    Message page with safe zones. (View large version47)
  • With any step-by-step functions, putting the second step a little higher than the first would be advisable, since the user’s hand would be covering the first step’s controls.
  • The center of the iPad screen is not the best place for controls, because the largest portion of the screen would be covered by the hand that is interacting with the controls. A user lying prone or supine on a couch would have to remove their hand from the device in order to tap the center. We recommend using our safe zone map, where the green shows the optimal location for controls.
  • App menu with safe zones48
    App menu with safe zones. (View large version49)
    Settings window with safe zones50
    Settings window with safe zones. (View large version51)
  • Controls should be located away from the edge of the viewport; that is, 2 centimeters from the left and right sides and 1 centimeter from the upper and lower sides. Bear in mind that users have to aim for buttons while trying to remain within the screen. Also, they have to bend or stretch their fingers to reach the edge of the screen.
  • Other factors not addressed in our experiment can influence the physiological aspects of iPad app design; we’ve focused on the positions that we consider to be the most common. However, you may need to consider factors such as button size, button spacing and long pressing, as well as occasions when an iPad is lying on a table or held in a magnetic cover.

(cc, jb, al, ml)

Footnotes Link

  1. 1 http://dl.acm.org/citation.cfm?id=2628363.2628371
  2. 2 http://dl.acm.org/citation.cfm?id=2756453.2756456
  3. 3 http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-01-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-01-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-02-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-02-opt.jpg
  8. 8 http://ru.scribd.com/doc/149928641/Onswipe-127433480-Users-Sage-June-2013
  9. 9 http://www.elearningguild.com/research/archives/index.cfm?id=174&action=viewonly&utm_campaign=research-mob14&utm_medium=link&utm_source=lsmag&_ga=1.256934344.276952161.1443720497
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-03-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-03-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-04-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-04-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-05-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-05-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-06-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-06-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-07-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-07-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-08-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-08-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-09-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-09-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-10-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-10-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-11-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-11-opt.jpg
  28. 28 http://usability.gtri.gatech.edu/eou_info/hand_anthro.php
  29. 29 http://www.comscore.com/Insights/Press-Releases/2012/8/comScore-TabLens-Today-s-US-Tablet-Owner-Revealed
  30. 30 http://web.archive.Org/web/20070928062615/http://www.sciam.ru/2006/7/news-6.shtml
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-12-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-12-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-13-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-13-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-14-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-14-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-15-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-15-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-16-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-16-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-17-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-17-opt.png
  43. 43 http://www.sternina.com/ipad-physiology/
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-18-opt.jpg
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-18-opt.jpg
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-19-opt.jpg
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-19-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-20-opt.jpg
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-20-opt.jpg
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-21-opt.jpg
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-21-opt.jpg
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Ksenia Sternina runs UX Research at Mail.Ru Group. She has created and manages the UX Lab that services a wide range of the company's products: games, social networks, content projects and mobile apps. Ksenia's team is developing the UX research community in Russia.

  1. 1

    I think there is big influence of facebook. Green places which are most convenience for user are places where facebook have left option side top search and notification bar and right chat..

    3
  2. 2

    Did you also consider left-handed people? Are the results mirrored? Are there any difference at all?

    4
  3. 4

    i miss information about changes of grip etc. with landscape/portrait and how often/likely the people use which orientation in which situation

    -3
    • 5

      Ksenia Sternina

      March 30, 2016 1:47 pm

      This info is inside the article. I’ll quote it:
      This study dealt only with usage in landscape orientation because a number of studies show the majority of iPad users prefer it. Some research shows that it accounts for 35% of usage and is used mostly for specific passive tasks that don’t involve tapping buttons, such as reading a book.

      0
  4. 6

    Camilla Rohme

    March 30, 2016 11:54 am

    Thank you for this very interesting post!

    1
  5. 8

    So in the registration page, the menu of email providers are centred (not in the safe zone), there are six choices – wouldn’t it make sense to allow each one to be tapped from the green zone and cover the whole screen with a 2 by 3 grid, what made you stick with this design pattern despite it going against your own suggestions?

    Also, in that last part there is this text “[Note: Readers could have the ability to download raw images of safe zones with real parameters. It would be advisable to have a link here.]”.

    0
    • 9

      Ksenia Sternina

      March 31, 2016 5:14 pm

      Team had been experimenting with the registration page before we made this research. They were changing number of services and their sequence, also they tried use login fields without selecting the service. Key metric for this screen is the conversion rate. Current version has the highest score.

      I’ll add link an the nearest time

      0
    • 10

      Ksenia Sternina

      April 2, 2016 7:18 pm

      Raw images of safe zones are here http://www.sternina.com/ipad-physiology/

      0
  6. 11

    You appear to have left a note in the article:

    “Put controls within easy reach on the iPad, however the user is positioned (see our safe zone map). [Note: Readers could have the ability to download raw images of safe zones with real parameters. It would be advisable to have a link here.]”

    1
  7. 12

    8 people in study? It’s inappropriate research. You can’t make any conclusion from this.

    2
    • 13

      8 researched opinions are a ton worthier than an unreasoned comment. Truth told.

      5
    • 14

      Ksenia Sternina

      April 1, 2016 12:11 pm

      A small number of people is always required for qualitative research just to feel the patterns. Then we verified our findings on a larger number of people. Subsequent experiments with applications on ipad confirmed fidelity of safe zones.
      If you find another results, please email me.

      1
  8. 15

    Wow! a great research! You put a lot of effort in it. Highly appreciated :)

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that all fields are mandatory, comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top