Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our 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.

Further Reading on SmashingMag: Link

We came across several4 studies5 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 smartphones6 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 iPad7

Safe zones on iPad. (View large version8)

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 lab9

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

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 show11 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 book12.

Respondents in different positions when using an iPad13

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

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 app15

User interface of email app. (View large version16)

Step 3 Link

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

Respondents with GoPro camera17

Respondents with GoPro camera. (View large version18)

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 buttons19

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

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 times21

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

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 hands23

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

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 device25

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

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 screen27

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

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 covered29

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

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 being31 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%32 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%33) 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 seated34

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

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 couch36

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

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 couch38

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

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 positions40

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

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 notifications42

A user chooses the time when they want to receive push notifications. (View large version43)
The user selects a message style44

The user selects a message style. (View large version45)

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 zones47

Email registration page in Mail.Ru Email app with safe zones. (View large version48)
Message page with safe zones49

Message page with safe zones. (View large version50)
    • 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 zones51

App menu with safe zones. (View large version52)
Settings window with safe zones53

Settings window with safe zones. (View large version54)
  • 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 https://www.smashingmagazine.com/2012/01/ten-things-to-think-about-when-designing-your-ipad-app/
  2. 2 https://www.smashingmagazine.com/2010/05/web-development-for-the-iphone-and-ipad-getting-started/
  3. 3 https://www.smashingmagazine.com/2012/03/dads-plea-developers-ipad-apps-children/
  4. 4 http://dl.acm.org/citation.cfm?id=2628363.2628371
  5. 5 http://dl.acm.org/citation.cfm?id=2756453.2756456
  6. 6 http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-01-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-01-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-02-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-02-opt.jpg
  11. 11 http://ru.scribd.com/doc/149928641/Onswipe-127433480-Users-Sage-June-2013
  12. 12 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
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-03-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-03-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-04-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-04-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-05-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-05-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-06-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-06-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-07-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-07-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-08-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-08-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-09-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-09-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-10-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-10-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-11-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-11-opt.jpg
  31. 31 http://usability.gtri.gatech.edu/eou_info/hand_anthro.php
  32. 32 http://www.comscore.com/Insights/Press-Releases/2012/8/comScore-TabLens-Today-s-US-Tablet-Owner-Revealed
  33. 33 http://web.archive.Org/web/20070928062615/http://www.sciam.ru/2006/7/news-6.shtml
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-12-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-12-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-13-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-13-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-14-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-14-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-15-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-15-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-16-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-16-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-17-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-17-opt.png
  46. 46 http://www.sternina.com/ipad-physiology/
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-18-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-18-opt.jpg
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-19-opt.jpg
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-19-opt.jpg
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-20-opt.jpg
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-20-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-21-opt.jpg
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/03/userfriendlyapp-21-opt.jpg

↑ 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

↑ Back to top