Layout Proposal for One-Handed Device Interface Oliver Sipos Ivan Peric Dragan Ivetic University of Novi Sad, Serbia University of Novi Sad, Serbia University of Novi Sad, Serbia oliversipos@gmail.com gotrunx@gmail.com ivetic@uns.ac.rs ABSTRACT The paper presents a novel interface layout design suited for thumb navigation on one-handed device. The layout supports common tasks for this class of devices with minimal cognitive and physical effort and was developed through three iterations of designing and testing layouts. First design proposal was created based on existing papers and current trends in the field of mobile device design. Second and third proposals were made by altering previous proposal according to test results analysis. Finally, by combining experiences of other people who worked on similar studies, theoretical principles of interface design and empirically gained knowledge about this problem, design proposal was made. Proposal that will, hopefully, become fundamental in designing layouts for small hand held devices with touch sensitive screens. Categories and Subject Descriptors D.2.2 [Software Engineering]: Design Tools and Techniques – User interfaces; H.5.2 [Information Interfaces And Present- ation]: User Interfaces – Ergonomics General Terms Design, Human Factors Keywords Touch screen, layout, interface, thumb navigation Figure 1: (a) Hands currently used and (b) preferred for 18 mobile tasks as a % of observed population. Tasks are 1. INTRODUCTION grouped by reading (light gray background), combined Many studies closely examine usage of thumb in interaction with reading/writing (medium gray background), and writing mobile devices. They were examined quite thoroughly to see if (dark gray background). [1] there are some ground rules on which all of the studies agreed. Main objective of this research was designing a layout that will Conclusions we reached by analyzing these studies gave us more improve user’s experience with thumb navigated devices with specific area of study on which we should focus, and also enough touch screen. The goal was to ease up thumb movement so that knowledge to build a layout's initial proposal that can be used for users could navigate faster and more easily. The other goal was further testing. reduction of cognitive effort, prevention of thumb cramps and Results tell that the easiest task for one hand is talking on the error reduction while pressing buttons. Off course, this is planned phone, dialing the numbers, contact lookup and usage of the built- to be accomplished by determination of specific location and size in camera. On the other hand, the most difficult tasks were text of all the buttons on the layout that will give the best performance entry, contact entry, messaging etc. So, it shows that most difficult results with thumb navigation. tasks are those who require entering text into the phone. Basically, all the applications that do not require excessive text entry can be 2. RESEARCH PROJECT adapted for thumb use (see Figure 1). [1] This work and study was part of a bigger project, which is, ultimately, with the same goal, but it is consisted of several Of all the studies previously examined, none of them was using studies (including ours). All teams that worked on this bigger controlled testing on commercial devices. One of them has project worked together in first steps of it. Those steps were basic controlled testing on the prototype devices [2], and some other research and project planning. One of the initial tasks was to one has uncontrolled testing on commercial devices. [3] So, the determine which devices are interesting for our research, what decision was made to create some custom tests, because it will platform these devices use and, most significantly, is there a way probably be more practical and the results will be more realistic. to design and implement software solution that will generate touch screen test tasks for volunteers that helped on this project and then gather touch screen statistics of these tests. This significant part was broken down to two very related, yet obviously different studies. First is based on finding the right BCI’12, September 16–20, 2012, Novi Sad, Serbia. mathematical tool that generates graphical representation which Copyright © 2012 by the paper’s authors. Copying permitted only for private and academic purposes. This volume is published and copyrighted by its editors. help us understand data collected and stored by methods made by Local Proceedings also appeared in ISBN 978-86-7031-200-5, Faculty of Sciences, other study [4]. Our first step, as layout design team, was to make University of Novi Sad. 81 layout proposal from the publications, articles and studies that 4. WIDGET SIZE were already made on this topic. Regarding the size of the buttons on the touch screen, two studies Then, testing team took suggested layout implemented in second were thoroughly examined. team's software and bring it in hands of volunteer testers [5]. First study [6] consisted of two phases. The first phase explored Results of testing were analyzed by the layout design team with the required target size for single-target (discrete) pointing tasks, the help of previously mentioned graphical representation of the such as activating buttons, radio buttons or checkboxes. The data, and then another proposal was made of layout which is, second phase investigated optimal sizes for widgets used for tasks basically, modified first layout. After three iterations of this that involve a sequence of taps (serial), such as text entry. As a testing process, final layout proposal was made. result, it has been shown that the minimal size of the element that 3. LAYOUT DESIGN are being pressed for single-target pointing tasks is 9.2mm and for The studies mentioned in the Introduction section were examined serial (multi-target) tasks is 9.6mm. This could be good quite thoroughly to see if there are some patterns on which all of measurement for the size of our elements (widgets …). the studies agreed. By empirical experiments, it shows that the Second study [7] evaluated three key sizes: 4mm, 7mm and movement of a thumb (right handed) in direction Northwest to 10mm) in the experiment, and the results showed the touch key Southeast (or vice versa) is quite difficult and should not be used, size of 10mm provided the best usability. In addition, the 7mm especially in repetitive tasks (see Figure 2). size provided statistically the same usability as the 10mm size for the two time-related measures. First study used only North to South (or vice versa) movement that were known to better match the thumb’s natural axis of rotation than East to West (or vice versa) movement, while this study did not restrict the movement direction. Some practical test were conducted to collect the data that were later analyzed and some facts were extracted from it. When some facts were determined during the process of observation they were put together into knowledge database which then contained all necessary facts that are needed for creating layout that will enable user to put less effort into device usage, prevent thumb from easy tiring and reduce possibility of “gorilla arm” side-effect. When certain facts were analyzed from the knowledge database, layout model was made as best as it could be made with most of those facts (not all), because some of them are in direct confrontation so not all of them can be fulfilled at the same time. 5. LAYOUT PROPOSALS When it was determined which applications are the best candidates for applying our layout model (some application are, as it was earlier mentioned, more or less thumb-oriented), proposals of their interface was made, according to author's research. Figure 2: Best (black) and worst (gray) trials by unit distance Figures 3, 4 and 5 show how commands can be shaped and and device. Green trials are significantly faster and red trials positioned to make the layout model we talked about. They are significantly slower than 25% of the trials of the same represent rough proposal for interfaces of following application in distance. respectful order: main menu navigation, calendar lookup, dialing All studies show that the lower right corner is the most difficult the numbers (phone mode) and in-talk mode. for thumb. It requires much effort to get to that area using a thumb on the left hand. It has been shown that the easiest area for thumb The additional improvement this layout brings is the possibility to is the mid-region. Also, it is very important to know that the determine whether the user is left or right handed and option for safety of the phone is a serious concern, because of the fact that users to resize and relocate buttons and commands at desired the phone is not stable in the hand while user is trying to reach application interface. That brings additional significance that this some of the corners, or try to perform some more difficult layout model is only suggested default according to general activities. testing results, but every user has different possibilities (hand size, thumb movement capabilities…) that makes him less or more In terms of usage of one hand in application, there are some unique so he would be able to adjust or proposed layout to fit his results based on experience and tests performed on volunteers. desire totally. There is possibility of easier change of the language Results tell that the easiest task for one hand is talking on the that is used for buttons titles. phone, dialing the numbers, contact lookup and usage of the built- in camera. On the other hand, the most difficult tasks were text As it was previously mentioned in this article, there were two entry, contact entry, messaging etc. Figure 1 shows that the most layout proposals that were made before the final proposal. Third difficult task is text entry. testing iteration was satisfying in comparison to the initial expectations. It’s important to point out that we didn’t come up The application that will be developed for thumb usage will be with whole basic layout design by ourselves. We took the consisted of call dialing, talking on the phone, contact and guidelines from the study which also done some work on this calendar lookup. subject and then we modified it so that it could be used on devices that were available to us for testing. 82 Figure 3: Initial layout proposals. Figure 4: Heat maps showing the positions of hits. 2. These dots are then used and processed in convex hull 2D 5.1 First Iteration algorithm, so that we can get graphical representation of Design that was made before first testing iteration is presented in polygon that is minimum size, but still contains all the hit Figure 3. Layouts were made for three phone modes. Menu mode, dots from the same finger tap. dial mode and phone call mode. Images represent these modes, 3. Finally, these polygons are overlaid and according to the respectfully. These layouts are made according to layout density of success, heat map is created. proposals of studies that were mentioned before. Then this heat maps were overlaid with layouts that were tested 5.2 Second Iteration and it looked like Figure 4. It is easy to see that some of the After testing the first proposed layout, received data was buttons were frequently either partially or even totally missed. For represented in the following way: example, volume “-“ button was frequently missed, button “6” was hard to hit because it was too small, button “9” was hard to 1. Each time tester tried to press one button (whether it is reach because it was “under” the users thumb (see Figures 7 and successful or not) that contact with touch sensitive screen is 8). So, these maps were analyzed, some conclusion were made caught by our software as array of screen dots. This is regarding them and made the necessary modifications. because screens we tested lack the possibility of sensing multiple contacts at the same time, so devices own firmware could not detect touched surfaces. Instead, they detected successive array of hit dots. 83 Figure 5: Final layouts (after three iterations). 5.3 Third Iteration every part of the screen is pressed with same surface when buttons Third and final iteration also brought some modifications after test are hit with thumb. results heat maps were analyzed. Changes were far less significant For phone in call mode, only volume and load speaker buttons are than those after first testing so we decided that this could be the considered, because other buttons match the ones from previous final layout for now. It’s important to mention the fact that layouts mode. After analyzing results of first testing, we came to realize represented in figures in this work are mostly those used for that volume “-“ button is too small for that zone of screen, so we testing right-handed users. Layouts for left-handed are basically had to move it a bit left a make bigger. done by mirroring the other ones over vertical axis, which is good In the future, we plan to continue our research on layouts for this enough for research of this magnitude. There was also some text kind of devices, but we intend to expand these studies to include input tested, but that was meant only for single word entry like text entry layouts, like virtual keyboard during text messaging. contact lookup, one-word message reply, etc. Final layouts are Regarding the issue of the difference between left-handed and presented by Figure 5. right-handed users, layout will remain “mirrored” as long as the 6. CONCLUSION button sizes and positions are considered. On the other hand, Zone of the screen that is the easiest for navigation for right- button functions will not be changed for numbers and letters. The handed people is lower left side of the screen. For left-handed reason for this is because left-handed users are already used to this people the lower right side of the screen is the easiest for interface and layout, so it would be easier for them that it remains navigation. Buttons located in that zone require small amount of the same. time to be reached and practically no thumb bending, which Drag and drop technique will also be tested and implemented in minimizes possibilities of “gorilla-arm”. According to this, the layout (screen locking like iPhone, icon moving, etc), but the most frequently used buttons should be placed on these locations, biggest problem will probably be multi-touch issue which cannot if possible. yet be tested due to lack of commercial devices that support that In case of phone menu mode, these buttons are navigational ones. on hardware and firmware level. Their size and exact position are result of the conclusion 7. REFERENCES previously mentioned along with modifications made during [1] Nambu Hirotaka, 2003. Reassessing Current Cell Phone Designs: testing iterations. As for other buttons related to the phone menu Using Thumb Input Effectively. mode, their location and size are also related to the frequency of [2] Amy K. Karlson, Benjamin B. Bederson and Jose L. Contreras-Vidal, their use, but mostly to function they execute. For example, select 2005. Studies in One-Handed Mobile Design: Habit, Desire and Agility. button is most frequently used and its activation can hardly give University of Maryland, College Park. any bad and irreversible consequence in case it is activated [3] Amy K. Karlson, Benjamin B. Bederson and Jose L. Contreras-Vidal, accidentally. Back button is also harmless like select button, but it 2006. Understanding Single-Handed Mobile Device Interaction. is made smaller because it is used less than the other one. Delete University of Maryland, College Park. and exit button, on the other hand, can have some consequence, so [4] Veljko B. Petrović, Darko Vasilev, Dejan Stokić, Milan Dobrota and they are placed in screen zones that will make them little harder Dragan Ivetić, 2009. Gimmobile class for marking touched pixels of one- handed touchscreen. University of Novi Sad. for user to get to than the select and back button, but still they [5] Danilo Basarić, Miloš Janjić, Nikola Rajačić and Srđan Farkaš and could be reached without big effort. This decision was made Dragan Ivetic, 2009. Gimmobile Usability Study Of Single Thumb Input because we wanted to minimize the possibility of accidental On Touchscreen Devices. University of Novi Sad. triggering of those buttons. [6] Pekka Parhi, Amy K. Karlson and Benjamin B. Bederson, 2006. Target In phone dial mode buttons with numbers must be positioned in Size Study for One-Handed Thumb Use on Small Touchscreen Devices. standard grid, because users are used to it. That grid is a bit [7] Yong S. Park, Sung H. Han, 2009. Touch key design for one-handed modified so that it follows thumbs easiest movement trajectory. thumb interaction with a mobile phone: Effects of touch key size and touch Their size is set according to empirical conclusions, because not key location. Pohang University of Science and Technology 84