PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Proposal for Right-Centric ActionBar Layout to facilitate single-handed content consumption for Android Applications Rajapaksage Isuru Kusumal Rajapakse Swinburne University of Technology
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Table of Content Abstract... 3 Introduction... 4 Background... 4 Purpose... 5 Definitions of terms... 5 Assumptions... 6 Design Proposal... 7 Default ActionBar Layout... 7 Alternative ActionBar Layout... 7 Important Design Changes and Considerations... 8 Facilitating Reachability... 8 Maintaining Contextual Back button... 8 Method... 9 Usability Experiment on Alternative ActionBar Layout... 9 Procedure... 10 Task Instructions... 10 Task Sequence... 11 Task Procedure... 12 Sample Task Questionnaire... 13 Analysis... 14 Collected Data... 14 User Preference Results... 14 Conclusion... 16 Bibliography... 17 Appendix... 18 RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 2
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Abstract This document focuses on proposing an ActionBar Layout and Design Pattern for right-hand dominant individuals to facilitate one-handed content consumption. Assumption made here is that the already existing layout for Android s Action-bar is left-bias as in it is much easier for a left-dominant individual to consume content with just one hand. For this particular reason, the purposed right-dominant design can be used to eliminate these biases by allowing users to chose their preferred layout. As a part of this proposal and study, a usability study will be conducted to determine the preference of the layout changes. Keywords: Android, Design Guidelines, ActionBar, Right-dominant, hand usage. RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 3
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Introduction Background 40% of the times people use their phones, they simply just consume content without any inputs via keys or the screen. 49% of those times, they use their phones using just one hand (UX Matters, 2016). 67% of those people were observed to be using their right thumb on the screen, suggesting that most of the users are essentially right-centric. However, Android s AppBar Layout seems to be designed in a way that people who are left-centric (those who use their phones predominantly with their left hand) could navigate through the app to easily consume content with just one hand. In contrast, people who are right-centric faces a great difficulty in doing the same tasks, as most of the navigation controls are located at the opposite end. Summary of how people hold their mobile phone Single-handed 40.32% Both handed portrait 9.38% Both handed horizontal 19.05% Cradled 10.08% Single-handed voice calls 21.17% (UX Matters, 2016) This is greatly apparent with the bigger phone models (5+ inches) as most of the users seems to struggle reaching all four corners of the screen using just one hand. Inconveniently most of the navigation controls seems to be located in this unreachable areas, but for those who are left-centric, it is not so. This inherently suggest that the AppBar layout is bias towards those who are left-centric. RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 4
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Purpose This research report mainly consist of two distinct sections. One section is mainly focusing on a proposal for an alternative design layout for Android s ActionBar and ActionBar Design Pattern that would allow Right-Centric dominant individuals to effectively consume content using just one hand. The second section of this report would be a detailed usability experiment that was conducted in order to determine the user preference (and other metrics) to the different layouts. Both these sections would be ultimately answer the following question Have right-dominant individuals already adapted to the left-bias ActionBar layout in Android Applications? If they are, what difficulties do they face in consuming content single-handed. If they are not, what changes can be made to the layout in order to facilitate single-handed content consumption The proposed Action bar layout will be free of any biases as it would provide means for the user to dynamically switch the layout for the one they desire. Essentially user will be deciding which layout they wish to use, and they can choose the desired layout simply by enabling in settings. Definitions of terms Terms used Left-Centric Right-Centric ActionBar App Drawer Definition People who use their phones predominantly with their left hand, when asked to use the phone single handed People who use their phones predominantly with their left hand, when asked to use the phone single handed Part of an Android Application s layout that holds all the action buttons and and navigation controls Drawer that is pulled in from the left that holds all the navigation pages and controls RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 5
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Assumptions Following is the major assumption made for this research report, that is Android s ActionBar Layout is inherently left-biased, in a way that people who are left-centric (those who use their phones predominantly with their left hand) could navigate through the layouts to easily consume content with just one hand. In contrast, right-centric people faces a great difficulty in doing the same The above assumption was drawn from the following observations ActionBar s App Drawer button (main navigation button) is located in the hardto-reach area of the screen The navigation drawer itself pops in from the left side of the screen and can be easily accessed from left hand, rather than the right hand. Navigation Drawer located in Hard-toreach region, rendering it out of reach Navigation Drawer located in moderatelyreachable region Right-oriented user s reach-heat diagram for the ActionBar Most frequently used tabs are tended to listed first from left-to-right, making it more difficult for a left centric person to navigate to the most frequently used tabs, in a tab layout. App drawer could be invoked from a simple gesture by sliding the finger from the left edge of the screen, and this can be easily done by the left-oriented individuals and may deem difficult for the right-oriented individuals, especially if the phone is more that Left-oriented user s reach-heat diagram for the ActionBar RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 6
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Design Proposal Default ActionBar Layout The default action bar layout consist of the navigation controls at the far left of the bar, along with the Title of the current view, followed by the Filter arrow next to the title. Collapsed menu can be found to the far right of the bar, followed by contextual action buttons. The Drawer handle is later swapped for the Back (Up) button is imply users is going back a screen. Note that in the default App bar this is pointed towards Left which is intuitive to left-to-right reading order Drawer Handle Back button Title Title Content Filter Action Icons Collapsed menu Although the actual layout is different from app to app, they all follow the guidelines set by Android s Material design. Snapped fab Alternative ActionBar Layout The alternative ActionBar layout is mostly the same for the most of the layout. The navigation controls at the far right of the bar, along with the Title of the current view, followed by the Filter arrow next to the title. Collapsed menu can be found to the far left of the bar, followed by contextual action buttons. Note that the Back button is still showing left arrow, as that would still make the most contextual sense Action Icons Snapped fab Title Drawer Handle Back button Content RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 7
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Important Design Changes and Considerations Facilitating Reachability To facilitate users to consume content with a single handed, this particular layout s app drawer handler is moved to the far right, and the contextual action buttons are moved to the left. However the order of the action buttons are left unchanged as this would help the user apply pre-existing knowledge 16dp 16dp Order not swapped Title is still left aligned Title 20 16dp 16dp Further more, the title is still aligned left, as this makes much more sense linguistically, however the disadvantage is the increased white spacing between the drawer and the title, and also possible limits to the number of characters the title could hold without folding Content Back button s direction is still pointing to left 16dp Maintaining Contextual Back button We are often used to the notion that the back is always on the left (this is because of the left-to-right reading order), and this introduce a functional parity for those who are right-centric, as they find it difficult to tap the back button, which is one of the most frequently used buttons. The solution is the simply flip the layout but still keep the same sense of direction to back, in order to make more contextual sense. Furthermore, the draw animation of the app drawer should also facilitate the same direction, as otherwise would be quite contradictory to the direction of the arrow App drawer pulled in from the right RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 8
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Method Usability Experiment on Alternative ActionBar Layout This Usability experiment will be focused on determining the user s preference and user adaptability for the proposed layout which facilitates the single handed content consumption. The preference of a user to a particular layout could be depended on the following variables. Keep in mind that not all the depended variables are taken into consideration for this particular experiment, and they are justified as below, Dependent Variable Measured? Justification Left-handed or Right-handed No The rate of left-handedness in holding the mobile phone doest correlate with the rate of lefthandedness of the general population Holding hand left or right Yes The right-handed people may prefer the alternative layout, as this is what we are essentially measuring Context of Use Eg:- Sitting, Standing, Leaning, Walking, Walking occupied, Sleeping Fixed to Sitting Although it would be interesting to see how the context of use could easily sway the preference of one opinion to the other, this results in too many depended variables to be measured Phone dimensions and weight Fixed Again, It would be interesting to see how the size of the phone could easily sway the preference of one opinion to the other, this results in too many depended variables to be measured Orientation Fixed ActionBar in horizontal orientation is rarely seen through apps The following are chosen as the candidates for the Independent variables (once to be measured ) Independent Variable How? Description User preference Task Completion Time User feedback form Measuring time taken for each task Users of the layout are asked to complete a form that ask them to rate each Use a stop-watch to measure time taken to complete each of the tasks. RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 9
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Procedure Task Instructions The following are the tasks designed to measure the preference of the left-centric layout and and justification of each of the tasks Task 1 - Use WhatsApp to send a message 1. Tap on the Chat bubble to open up the virtual keyboard to send a message to Isuru 2. Type Hi on the virtual keyboard and tap Enter to send the message 3. Open the Settings menu and Mute Isuru from the conversation 4. Go Back to your chat list Left Right Task 2 - Use the Camera App to take a Photo 1. Switch the Camera from Back-facing to Front-facing Camera Left Right Control 2. Turn the Camera Timer Off 3. Turn front facing Flash Off 4. Snap a Photo 5. Open Gallery to review the last taken photo graph Task 3 - Send a Email using Gmail app 1. Tap the First Email in th Inbox 2. Tap Reply to reply to the mail 3. Tap on the Text field to compose a reply 4. Tap Send to send your reply 5. Tap Menu to open the navigation menu 6. Close the navigation menu by tapping out 7. Tap the floating Compose button Left Right RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 10
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Task Sequence In order to avoid the sequence biasses, a latin-square was prepared with random sequence of tasks, and each number is assigned to each of the sequence. Then, each of the participants are assigned to each of the groups and then proceeded to collect information A B C D E F Task-1-Left Task-1-Right Task-2-Left Task-2-Right Task-3-Left Task-3-Right A B C D E F A F A B C D E 1 B E B A D C F 2 C A C D E F B 3 D B F C A E D 4 E D E F B A C 5 F C D E F B A 6 12 11 10 9 8 7 Prototype Task 1 Task 2 Task 3 Participan t group Left Right Left Right Left Right Time taken in minutes and seconds #1 12 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #2 11 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #3 10 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #4 9 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #5 8 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #6 7 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #7 6 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #8 5 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #9 4 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #10 3 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx #11 xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx xx:xx.xx RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 11
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Task Procedure The following steps are followed strictly to maintain standard usability test procedure and also to make sure the collected data is viable, valid and correct. STEP 1 STEP 2 STEP 3 STEP 4 STEP 5 STEP 6 Ask the participant to read through the provided description and consent form and ask them to sign the print their names Ask the participant to ask any questions about the procedure if they seemed unclear about it Before handing over the task sheet to the participant, ask them to Hold the phone with their preferred hand and not to switch the hands during the task Keep the hand unsupported, keeping the complete weight of the phone to the hand Start the time as they begin to read the task sheet If they seems to be stuck on a certain task, you may provide little hints as the point of this study is not to test the actual layout, but to determine the preference of the design of the action bar in each layout Once each task is completed, stop the timer and record the time taken STEP 7 Ask them to complete the relevant questionnaire after each task, and you may elaborate more on the question if they ask you to. STEP 8 STEP 9 Continue on with the remaining tasks from the latin-squareassigned sequence Once all the tasks are completed, the data collection is complete Clearly remind to the participant that you're not testing the participants, rather testing your preference to the difference in layouts of the ActionBar, remind that they can agree to prefer one over the other, prefer neither of them, or even both of them. RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 12
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Sample Task Questionnaire Demography Form Age 18-22 23-27 28-32 32+ From which hand do you hold the phone with frequently? Left Right Are you Lefthanded? Righthanded? How often do you use your phone single handed? Most of the time Sometimes Occasional Rarely You re using an Android Phone iphone with ios Other Questions Task-1 1. Out of the two prototypes, which one was the easiest to be used single handed both left dominant layout right dominant layout neither 2. Out of the two prototypes, which one made most sense and was most intuitive to use both left dominant layout right dominant layout neither 2. Which layout do you prefer the most? both left dominant layout right dominant layout neither Other comments: Task-2 1. Out of the two prototypes, which one was the easiest to be used single handed both left dominant layout right dominant layout neither 2. Out of the two prototypes, which one made most sense and was most intuitive to use both left dominant layout right dominant layout neither 2. Which layout do you prefer the most? both left dominant layout right dominant layout neither Task-3 1. Out of the two prototypes, which one was the easiest to be used single handed both left dominant layout right dominant layout neither 2. Out of the two prototypes, which one made most sense and was most intuitive to use both left dominant layout right dominant layout neither 2. Which layout do you prefer the most? both left dominant layout right dominant layout neither RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 13
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Analysis Collected Data User Preference Results 5 Out of the two prototypes, which one was the easiest to be used single handed? 6 Out of the two prototypes, which one made most sense and was most intuitive to use? 4 Which layout do you prefer the most? 10 Which layout do you prefer the most? 3.75 4.5 3 7.5 2.5 3 2 5 1.25 1.5 1 2.5 0 0 Task 1 Task 2 Task 3 Task 1 Task 2 Task 3 0 Task 1 Task 2 Task 3 0 Combined Both Right Left None Both Right Left None Both Right Left None Both Left Right None 44s 700ms Overall Task Completion Times 33s 525ms 22s 350ms 11s 175ms 0 Task 1 Left Task 1 Right Task 2 Left Task 2 Right Task 3 Left Task 3 Right #1 #2 #3 #4 #5 #6 #7 #8 RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 14
36s 30s 24s 18s 12s PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Time completion for Task 1 Average Average 6s 38s 31s 667ms 25s 333ms 19s 12s 667ms 6s 333ms 0 Left Time completion for Task 2 Right Average Average 0 Left Right 45s 37s 500ms 30s 22s 500ms 15s 7s 500ms Time completion for Task 3 Average Average 0 Left Right RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 15
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Conclusion From the result I obtained for the preference of the two left-centric and right-centric layouts, it was quite visible that the majority actually preferred the default left-centric layout as most of the comments left by the participants gravitate more towards it being more familiar to use, This is also quite visible in task completion times, and the left-centric layout seems to be a little faster on average in all three tasks Surprisingly the second most voted preference was actually both, Implying that if the user was provided a choice in choosing one layout of their preference, they would be a possible option that they would look into. RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 16
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Bibliography I. Google design guidelines. 2016. Introduction - Material design - Google design guidelines. [ONLINE] Available at: https://material.google.com. [Accessed 19 November 2016]. II. Do users interact with their mobile devices with their dominant hand? Réalités Parallèles Games user research User Experience. 2016. Do users interact with their mobile devices with their dominant hand? Réalités Parallèles Games user research User Experience. [ONLINE] Available at: http://realites-paralleles.com/2014/02/do-users-interact-with-theirmobile-devices-with-their-dominant-hand/. [Accessed 19 November 2016]. III. How Do Users Really Hold Mobile Devices? :: UXmatters. 2016. How Do Users Really Hold Mobile Devices? :: UXmatters. [ONLINE] Available at: http://www.uxmatters.com/ mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php. [Accessed 20 November 2016]. RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 17
PROPOSAL FOR RIGHT-CENTRIC ACTIONBAR LAYOUT Appendix The Following pages include the following, 1. Collected Raw data 2. Consent Forms 3. Prototype Layouts RAJAPAKSAGE ISURU KUSUMAL RAJAPAKSE 18
Isuru Isuru Type a message Type a message 1 2 Isuru Isuru View contact Hi 22:42 Media Hi 22:42 Mute Wallpaper More Type a message Type a message 3 4 task-1-xs - November 21, 2016
Isuru Hi 22:42 Type a message Complete 5 6 task-1-xs - November 21, 2016
Isuru Isuru Type a message Type a message 1 2 Isuru View contact Isuru Hi 22:42 Media Hi 22:42 Mute Wallpaper More Type a message Type a message 3 4 task-1-xs-fliped - November 21, 2016
Isuru Hi 22:42 Type a message Complete 5 6 task-1-xs-fliped - November 21, 2016
MODE MODE 1 2 OFF MODE MODE 3 4 task-2-xs - November 21, 2016
OFF OFF MODE MODE 5 6 Complete 7 task-2-xs - November 21, 2016
MODE MODE 1 2 OFF MODE MODE 3 4 task-2-xs-flip - November 21, 2016
OFF OFF MODE MODE 5 6 Complete 7 task-2-xs-flip - November 21, 2016
Primary Isuru Kusumal Rajapakse Check this out! 3 Nov Check this out! Isuru Kusumal Rajapakse to me 20 Sep View details Someone stole my copy of Microsoft Office, they are going to pay. You have my Word Reply Reply all Forward 1 2 Reply Reply From alex@gmail.com From alex@gmail.com To Isuru Rajapakse To Isuru Rajapakse Re: Check this out! Compose email Re: Check this out! Nice Puns! 3 4 task-3-xs - November 21, 2016
Primary Primary Isuru Kusumal Rajapakse Check this out! 3 Nov Isuru Kusumal Rajapakse Check this out! Alexander the great alex@gmail.com 3 Nov 5 6 Primary Isuru Kusumal Rajapakse Check this out! 3 Nov Complete 7 8 task-3-xs - November 21, 2016
Primary 3 Nov Isuru Kusumal Rajapakse Check this out! Check this out! Isuru Kusumal Rajapakse to me View details 20 Sep Someone stole my copy of Microsoft Office, they are going to pay. You have my Word Forward Reply all Reply 1 2 Reply Reply From alex@gmail.com From alex@gmail.com To Isuru Rajapakse To Isuru Rajapakse Re: Check this out! Re: Check this out! Compose email Nice puns! 3 4 task-3-xs-fliped - November 21, 2016
Primary Primary 3 Nov Isuru Kusumal Rajapakse Check this out! 3 Nov Isuru Kusumal Rajapakse Check Alexander this out! the great alex@gmail.com 5 6 Primary 3 Nov Isuru Kusumal Rajapakse Check this out! Complete 7 8 task-3-xs-fliped - November 21, 2016