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.
Many studies closely examine usage of thumb in interaction with mobile devices. They were examined quite thoroughly to see if there are some ground rules on which all of the studies agreed. Conclusions we reached by analyzing these studies gave us more specific area of study on which we should focus, and also enough knowledge to build a layout's initial proposal that can be used for further testing.
Results tell that the easiest task for one hand is talking on the
phone, dialing the numbers, contact lookup and usage of the
builtin camera. On the other hand, the most difficult tasks were text
entry, contact entry, messaging etc. So, it shows that most difficult
tasks are those who require entering text into the phone. Basically,
all the applications that do not require excessive text entry can be
adapted for thumb use (see Figure 1). [
This work and study was part of a bigger project, which is, ultimately, with the same goal, but it is consisted of several studies (including ours). All teams that worked on this bigger project worked together in first steps of it. Those steps were basic research and project planning. One of the initial tasks was to determine which devices are interesting for our research, what platform these devices use and, most significantly, is there a way 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
mathematical tool that generates graphical representation which
help us understand data collected and stored by methods made by
other study [
Then, testing team took suggested layout implemented in second
team's software and bring it in hands of volunteer testers [
The studies mentioned in the Introduction section were examined quite thoroughly to see if there are some patterns on which all of the studies agreed. By empirical experiments, it shows that the movement of a thumb (right handed) in direction Northwest to Southeast (or vice versa) is quite difficult and should not be used, especially in repetitive tasks (see Figure 2).
All studies show that the lower right corner is the most difficult 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 is the mid-region. Also, it is very important to know that the safety of the phone is a serious concern, because of the fact that the phone is not stable in the hand while user is trying to reach some of the corners, or try to perform some more difficult activities.
In terms of usage of one hand in application, there are some results based on experience and tests performed on volunteers. Results tell that the easiest task for one hand is talking on the phone, dialing the numbers, contact lookup and usage of the builtin camera. On the other hand, the most difficult tasks were text entry, contact entry, messaging etc. Figure 1 shows that the most difficult task is text entry.
The application that will be developed for thumb usage will be consisted of call dialing, talking on the phone, contact and calendar lookup.
Regarding the size of the buttons on the touch screen, two studies were thoroughly examined.
First study [
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.
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. Figures 3, 4 and 5 show how commands can be shaped and positioned to make the layout model we talked about. They represent rough proposal for interfaces of following application in respectful order: main menu navigation, calendar lookup, dialing the numbers (phone mode) and in-talk mode.
The additional improvement this layout brings is the possibility to determine whether the user is left or right handed and option for users to resize and relocate buttons and commands at desired application interface. That brings additional significance that this layout model is only suggested default according to general testing results, but every user has different possibilities (hand size, thumb movement capabilities…) that makes him less or more unique so he would be able to adjust or proposed layout to fit his desire totally. There is possibility of easier change of the language that is used for buttons titles.
As it was previously mentioned in this article, there were two layout proposals that were made before the final proposal. Third testing iteration was satisfying in comparison to the initial expectations. It’s important to point out that we didn’t come up with whole basic layout design by ourselves. We took the guidelines from the study which also done some work on this subject and then we modified it so that it could be used on devices that were available to us for testing.
Design that was made before first testing iteration is presented in Figure 3. Layouts were made for three phone modes. Menu mode, dial mode and phone call mode. Images represent these modes, respectfully. These layouts are made according to layout proposals of studies that were mentioned before.
After testing the first proposed layout, received data was represented in the following way: 1. Each time tester tried to press one button (whether it is successful or not) that contact with touch sensitive screen is caught by our software as array of screen dots. This is 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. 2. These dots are then used and processed in convex hull 2D algorithm, so that we can get graphical representation of polygon that is minimum size, but still contains all the hit dots from the same finger tap. 3. Finally, these polygons are overlaid and according to the density of success, heat map is created.
Then this heat maps were overlaid with layouts that were tested and it looked like Figure 4. It is easy to see that some of the buttons were frequently either partially or even totally missed. For example, volume “-“ button was frequently missed, button “6” was hard to hit because it was too small, button “9” was hard to reach because it was “under” the users thumb (see Figures 7 and 8). So, these maps were analyzed, some conclusion were made regarding them and made the necessary modifications.
Third and final iteration also brought some modifications after test results heat maps were analyzed. Changes were far less significant than those after first testing so we decided that this could be the final layout for now. It’s important to mention the fact that layouts represented in figures in this work are mostly those used for testing right-handed users. Layouts for left-handed are basically done by mirroring the other ones over vertical axis, which is good enough for research of this magnitude. There was also some text input tested, but that was meant only for single word entry like contact lookup, one-word message reply, etc. Final layouts are presented by Figure 5.
Zone of the screen that is the easiest for navigation for righthanded people is lower left side of the screen. For left-handed people the lower right side of the screen is the easiest for navigation. Buttons located in that zone require small amount of time to be reached and practically no thumb bending, which minimizes possibilities of “gorilla-arm”. According to this, the most frequently used buttons should be placed on these locations, if possible.
In case of phone menu mode, these buttons are navigational ones. Their size and exact position are result of the conclusion previously mentioned along with modifications made during testing iterations. As for other buttons related to the phone menu mode, their location and size are also related to the frequency of their use, but mostly to function they execute. For example, select button is most frequently used and its activation can hardly give any bad and irreversible consequence in case it is activated accidentally. Back button is also harmless like select button, but it is made smaller because it is used less than the other one. Delete and exit button, on the other hand, can have some consequence, so they are placed in screen zones that will make them little harder for user to get to than the select and back button, but still they could be reached without big effort. This decision was made because we wanted to minimize the possibility of accidental triggering of those buttons.
In phone dial mode buttons with numbers must be positioned in standard grid, because users are used to it. That grid is a bit modified so that it follows thumbs easiest movement trajectory. Their size is set according to empirical conclusions, because not
For phone in call mode, only volume and load speaker buttons are considered, because other buttons match the ones from previous mode. After analyzing results of first testing, we came to realize that volume “-“ button is too small for that zone of screen, so we had to move it a bit left a make bigger.
In the future, we plan to continue our research on layouts for this kind of devices, but we intend to expand these studies to include text entry layouts, like virtual keyboard during text messaging. Regarding the issue of the difference between left-handed and right-handed users, layout will remain “mirrored” as long as the button sizes and positions are considered. On the other hand, button functions will not be changed for numbers and letters. The reason for this is because left-handed users are already used to this interface and layout, so it would be easier for them that it remains the same.
Drag and drop technique will also be tested and implemented in layout (screen locking like iPhone, icon moving, etc), but the biggest problem will probably be multi-touch issue which cannot yet be tested due to lack of commercial devices that support that on hardware and firmware level.