User-Friendly Menu for New-Age Mobile Phones - CEUR-WS (PDF)

76 User-Friendly Menu for New-Age Mobile Phones Ivan Peric University of Novi Sad Bulevar Despota Stefana 2/76 21000 Novi Sad, Serbia +381(0)60/166-3016 [email protected] Oliver Sipos University of Novi Sad +381(0)64/643-9883 [email protected] ABSTRACT 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. 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 – User-centered design; I.3.6 [Computer Graphics]: Methodology and Techniques – Ergonomics General Terms Design, Human Factors Keywords Mobile phones, user-friendly interface, adaptable menu, adaptive menu, ergonomics, thumb-navigation 1. INTRODUCTION Ergonomics has been a major point of interest since early stages of mobile phones and as the technology evolved, so did design that helped improve user's experience. It is concerned with the ‘fit’ between the user, equipment and their environments. It takes account of the user's capabilities and limitations in seeking to ensure that tasks, functions, information and the environment suit each user. 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 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 [1]. While this was applauded by large group of users (but less then majority), platform developers didn't seem to contribute much to this new wave of mobile device. In order to preserve quality of user experience in their interaction with the device, they simply enlarged target objects. For example, application menu icons grown from 9mm (Samsung's previous models) up to 14mm (Samsung Galaxy S II). This solved some of the problems, but not all of them. 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. Figure 1: Area covered by basic thumb movement. 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). 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.  77 2. PROBLEM'S CORE AND AVAILABLE SOLUTIONS 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) [2], except for bottom area which is sometimes reserved for some basic shortcuts. Figure 2: Current mobile OS market share. Android 4.0 [3], iOS 5 [4] and Windows Phone 7 [5] are currently most represented in modern mobile phones so it will be most productive to analyze their guidelines in user interface. As for other OS interface designs, and proposals based on scientific research, there have been countless different ideas, some of them brilliant, but most of them still focus on regular-size screens, and there's almost none worth mentioning when it comes to new-age big-screen devices [6]. Even design guidelines for previously named mobile operative systems skip to mention anything about significant change in UI for large screens. 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). Figure 3: Increased menu icons. 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. 3. USER-FRIENDLY LAYOUT PROPOSAL – SUI 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. 3.1 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 [7][8]. 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. 3.2 Layout Proposal 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. Figure 4: Simple navigation component. 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. 3.3 SUI Setup and Examples 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.  78 Figure 5: SUI at work: a) layout setup; b) application menu with SUI user-defined layout. 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). Figure 6: SUI vs. TouchWiz UI 4.0: a) TouchWiz app menu layout; b) SUI app menu layout. 4. TESTING SUI 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. 4.1 Volunteer Testers 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). Table 1: Volunteers by Age and Gender. Gender <20 20-40 >40 Male 17 37 3 Female 5 23 2 Table 2: Volunteer’s Handedness and Hand Size. Gender Smaller Average Larger Right-handed 11 41 14 Left-handed 6 13 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 [9]. Based on these facts, we separated testers into 6 groups, 3 groups per gender, according to hand length: • Female smaller: less than 165 mm, • Female average: 165 - 175 mm, • Female larger: more than 175 mm, • Male smaller: less than 185 mm, • Male average: 185 - 195 mm, and • Male larger: more than 195 mm. 4.2 Test Scenario 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. 5. TEST RESULTS 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. 5.1 SUI Setup Statistics 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 most- likely 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.  79 Figure 7: Usage of areas for navigational component in SUI setup: a) Expected usage; b) Actual usage. 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). Figure 8: Number of setups per user. 5.2 User Satisfaction Each tester was prompted to grade SUI after using it. Grade scale was from 1 to 5, where: • 1 is Unsatisfactory, • 2 is Satisfactory, • 3 is Good, • 4 is Very Good, and • 5 is Excellent. 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 experience both SUI and built-in TouchWiz before judging how good SUI is. However results of "SUI vs. TouchWiz" poll where more than encouraging. Figure 9: SUI user grades statistics. 5.3 SUI vs. TouchWiz 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). Figure 10: User's choice between SUI and TouchWiz. Table 3: Five Most Common User Reasons for Choosing SUI Reason No. of Occ. Adaptivity 57 No hardy-reachable items 43 More items on the screen 39 Highlighting of most used items 31 Easier navigation 27 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  80 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. 6. CONCLUSION 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 device- specific 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. 7. ACKNOWLEDGMENTS Our thanks to our friends, colleagues and other volunteers for taking time to help us test SUI. 8. REFERENCES [1] Shumaker, D. 2009. Extrapolation the Screen Size of Android Mobile Phones Over Time. http://gdgt.com/discuss/extrapolating-the-screen-size-of- android-mobile-phones-over-time-gw4/ [2] Mobile Operating System. Wikipedia. http://en.wikipedia.org/wiki/Mobile_operating_system [3] Android Design 2012. http://developer.android.com/design/style/metrics-grids.html [4] iOS Human Interface Guidelines. 2012. iOS Developer Library. https://developer.apple.com/library/ios/#DOCUMENTATIO N/UserExperience/Conceptual/MobileHIG/Characteristics/C haracteristics.html#//apple_ref/doc/uid/TP40006556-CH7- SW1 [5] Simmons, Ch. 2011. Windows Phone 7 Design Guidelines. MSDN Blogs. http://blogs.msdn.com/b/silverlight_sdk/archive/2011/01/07/ windows-phone-7-design-guidelines-cheat-sheet.aspx. [6] J. Gong, P. Tarashewich 2004. Guidelines for handheld mobile device interface design. Proceedings of the 2004 DSI Annual Meeting. [7] Workshop on Social Adaptive User Interfaces (SoAUI'07) September 11, 2007 Rio de Janeiro, Brazil. Retrieved 8 October 2011. [8] Malinowski, edited by Matthias Schneider-Hufschmidt, Thomas Kühme, Uwe 1993. Adaptive user interfaces : principles and practice. Amsterdam: North-Holland. ISBN 978-0-444-81545-3. [9] Agnihotri, A. K.; B. Purwar, N. Jeebun, S. Agnihotri 2006. Determination Of Sex By Hand Dimensions. The Internet Journal of Forensic Science. Retrieved 2007-12-24.