Even the quick peek at the specs of upcoming or currently most popular mobile phones makes you come to a conclusion that they are getting physically thinner, yet taller and wider even though technology is getting smaller. Screen size is the main reason for this. As many manufacturers surpass 3.5” display barrier to bring more information and options to the screen, challenge is laid upon the software to keep the benefits of one-handed interaction available to users. In this paper, we will focus on problem that appears on some of the most popular mobile platforms: application menu. Combining usage statistics, minimalistic design and ergonomics point of view, we created solution that is generic, but still follows most of the major platforms design guidelines.
At the start of 21st century, mobile phones started to be available to almost every human being capable of holding and affording it. Latter condition loosened much in the last decade, because with each new generation of mobile device, older one got cheaper. So, even people with very limited budget can afford older mobile phone of previous generation. Advances in technology and societies constant desire for improving communication systems made mobile phone market rapidly expand and that was assisted by a large number of manufacturers. This caused mayhem in mobile phone designs. There were countless attempts to revolutionize mobile phone industry, and most of them obviously BCI’12, September 16–20, 2012, Novi Sad, Serbia.
Copyright © 2012 by the paper’s authors. Copying permitted only for private and academic purposes. This volume is published and copyrighted by its editors. Local Proceedings also appeared in ISBN 978-86-7031-200-5, Faculty of Sciences, University of Novi Sad. failed because now we can point out only two mainstream design categories of mobile phones: bar and slate.
A bar (slab, block, or, commonly in the United States, candy bar) phone takes the shape of a cuboid. It is named because of its resemblance to a candy bar in size and shape. A slate phone is a subset of the bar form that, like a slate computer, has minimal buttons, instead relying upon a touchscreen and virtual QWERTY keyboard.
End of the first decade of 21st century and the beginning of the
second brought slate-type phones that surpassed 3.5" barrier [
Even if your hand is big enough so that you can reach far top corners of display, you will cover most of it with your hand which means that you will have to make a couple of difficult movements in order to navigate and still observe most of the screen (see Figure 1). Difficult movements do not only bring fatigue to user's thumb, they also decrease stability of user's grip on the device. It's obvious that solution has to come in software enhancements, and if the screen sizes keep this trend, even user with big hands will be asking for a way to use their new device with one hand. This is where adaptive and adaptable interface could come to rescue. Instead of choosing one of these two types of interface, we decided to create a mixture that will make phone of any size easy for interaction for every user. For future reference, we will address this interface proposal as SUI (Simple User-friendly Interface).
No matter how you hold your mobile device, if your hand is a
regular size, you will not be able to cover some areas of the
screen with your thumb without changing the way you hold the
device. Since all areas of the screen are treated equally in major
OS interfaces (see Figure 2) [
Android 4.0 [
Their design guidelines indicate that suggested element size should be ~9mm, or 48x48 pixels for screens with medium dpi. They also suggest 64x64, 72x72 or 96x96 for high and extra-high dpi, in order to keep elements size at ~9mm. But, reality has shown that new versions of these operative systems have items with increased size up to 14mm and that OS UI designers decided to handle possible thumb inaccuracy caused by bigger dimensions by scaling up interactive elements (see Figure 3).
Ergo, even though screens have grown larger, some parts of UI do not display more information or interactive elements from their predecessors, which should essentially be their purpose. That’s why we tried to come up with UI that will really exploit advantages of mobile phones with extra large screens and improve user experience.
As we mentioned earlier in this paper, this layout proposal will focus on one of the most used parts of UI that is also one of the most affected by increase in screen size – application menu. SUI solves this problem with adaptive layout.
An adaptive user interface (also known as AUI) is a user interface
which adapts, that is changes, its layout and elements to the needs
of the user or context and is similarly alterable by each user
[
These mutually-reciprocal qualities of both adapting and being adaptable are, in a true AUI (sometimes referred to as an AUII), also innate to elements that comprise the interface's components; portions of the interface might adapt to and affect other portions of the interface. This later mechanism is usually employed to integrate two logically-distinct components, such as an interactive document and an application (e.g. a web browser) into one seamless whole.
The user adaptation is often a negotiated process, as an adaptive user interface's designers ignore where user interface components ought to go while affording a means by which both the designers and the user can determine their placement, often (though not always) in a semi-automated, if not fully automated manner.
SUI has a simple application menu navigation component (see Figure 4). It has “Home” button and two additional buttons that help user to navigate through application menu pages. Swipe gesture has taken over application menu navigation in most mobile operative systems, mostly because navigation buttons took too much space on the screen. Since screens have grown, we will show that it is possible to increase number of interactive items on the screen, add navigational component and improve user experience at the same time.
Since SUI is adaptable interface, it enables user to setup layout orientation however he wishes (see Figure 5), which makes it universal for both left- and right-handed users without any restrictions regarding their hand size. On the other side, SUI does some self-modification on its own. It modifies menu items size and highlighting according to frequency of their usage. Also, user is allowed to change places and highlight particular menu items as a part of the setup process.
First of all, it’s important to mention that SUI layout divides application menu area into grid whose dimensions depend on screen features (resolution, physical size and dpi). During initial setup user can choose where to place navigational component, as well as direction and radius of items placement (items are spreading in a radial manner). Secondly, user can change item positions and highlighting, after SUI has generated layout according to previous setup step. User can rerun these steps at any time, but other than that, the rest of menu modifications rest on SUI’s usage statistics.
As mentioned earlier in this paper, SUI tracks user interaction and highlights most popular interactive items. Since avoiding repositioning is strongly advised, items are highlighted by increase in size and addition of background outer glow (see Figure 6).
Since SUI is meant to solve problems occurring with commercial devices, we decided to do controlled testing with commercial device that we found most suiting - Samsung Galaxy S II. With its 4.3 inch ~217 dpi screen and modern UI it was a perfect device to test how well SUI will perform versus it's built in TouchWiz UI v4.0.
Main goals of testing were measuring user satisfaction with SUI, user’s opinions of SUI versus TouchWiz, and time needed for users to setup SUI. User satisfaction and opinions were collected after test procedure. Setup time is extracted from SUI's statistics which keeps data about user’s interaction.
We tried to find as much testers as we could, and achieve as much diversity in their handedness, hand size, age and gender as possible. Testing process was conducted over the period of two weeks and the final number was 87 volunteers. Tester diversity was quite satisfying (see Tables 1 and 2).
The average length of an adult male hand is 189 mm, while the
average length of an adult female hand is 172 mm. The average
hand breadth for adult males and females is 84 and 74 mm
respectively [
Users were given commercial testing device (Samsung Galaxy S II) with SUI and unlimited amount of time to setup and test SUI until they find layout that suits them the most. After that, users were required to use layout they selected for some time, so that they could verify its optimal setup, and highlighting functionality. Finally, SUI was disabled, so user can test TouchWiz application menu and compare it to SUI. Test completion percentage was 100%, since tasks at hand were rather simple.
We gathered feedbacks from all test volunteers, analyzed SUI's phone interaction statistics for each tester and after some time spent on data analysis, we came to a conclusion we we're hoping for: SUI prevailed over TouchWiz and, more importantly, enhanced users experience with large screen phone.
This was probably the aspect that surprised us the most during testing procedure of SUI. Although significant number of users placed navigational component in the area we presumed is mostlikely to be selected, there were also some quite unexpected setups (see Figure 7). Actual results are displayed in a form of a heat map, where brighter areas represent more used selection in setup. Differentiation of right-handed user results over left-handed user results seemed unnecessary to us, because our goal was to make universal solution for all users. experience both SUI and built-in TouchWiz before judging how good SUI is. However results of "SUI vs. TouchWiz" poll where more than encouraging.
Number of setups before reaching optimal layout per user was not so high, and the time needed to setup SUI and verify layout was shorter than expected. Of course, many users kept trying another layouts even when they found the one they liked the most, because they liked the idea of many different possibilities and combinations, and they wanted to try as much of them as they could (see Figure 8).
After testing both SUI and TouchWiz users were prompted to choose which one they found better and easier to use, and to enter the reason for their decision. Most of the users chose SUI and we we're able to single out couple of reasons that repeated through the list of user comments (see Figure 10 and Table 3).
Average grade was 4.24 (for more precise data, see Figure 9) which didn't meet our expectations at first. But after a deeper analysis, we concluded that most of these users didn't have much experience with phones with large screen, and that it was probably our mistake to expect higher grades than these because they didn't experience navigational problems with them before, and tests weren't designed in a way that will allow user to
We were also keen on checking out users critics of UI, because it could give us a way to proceed with SUI evolution. Apart from reasons that are not SUI-related, or the issues that are neither resolved in TouchWiz, there were no significant comments. So, we decided to focus on the latter. What can we do to make SUI even better? Users said that a purpose or function should be found for empty space that sometimes remains on the far corners of the screen. Even though we had a couple ideas about that space, we didn't implement none of them, because we failed to find which would be the best one, and we believed that adding this to user poll will be unnecessary at that moment because we still didn't knew if the core idea of SUI is better of existing solutions at all.
Main goal of this research was to find better solution for application menu of modern mobile phones with big screens. Most users that tested both SUI and currently one of the most popular mobile user interfaces (TouchWiz) have chosen SUI as a better option. With this in mind, we came to a conclusion that current mobile operative system do not do much to improve users experience for phones with large screens and that carefully designed simple and adaptable interface could just do the trick. In the hindsight, all we did is brought back simple navigation component to the interface (this time on screen), returned items size to 9mm as they were before (so that more information and interactive elements could be placed on screen) and gave a user a chance to setup his own layout. Simple, yet effective combination of changes managed to improve user’s interactive experience. Of course, we are aware that job is still not done. Our main concern is space that is left empty in the far corners of the screen that user pronounced hard to reach. We could display system status info, time and weather, or maybe even preview of most used icons from next menu screen.
Even though SUI is not based on clear mathematical model because user interface design has no globally defined rules/formulas/definitions. Instead, it is mostly based on organization-, device type-, manufacturer-, or even devicespecific guidelines which can variate significantly. So, we came up with theory that we could not verify in any other way except by testing proposed solution empirically. SUI could improve users interactive experience with the upcoming mobile phones which tend to get bigger because of their hi-resolution screens with large dimensions.
Our thanks to our friends, colleagues and other volunteers for taking time to help us test SUI.