Usability Studies on Mobile User Interface Design Patterns: A Systematic Literature Review

Mobile platforms have called for attention from HCI practitioners, and, ever since 2007, touchscreens have completely changed mobile user interface and interaction design. Some notable differences between mobile devices and desktops include the lack of tactile feedback, ubiquity, limited screen size, small virtual keys, and high demand of visual attention. These differences have caused unprecedented challenges to users. Most of the mobile user interface designs are based on desktop paradigm, but the desktop designs do not fully fit the mobile context. Although mobile devices are becoming an indispensable part of daily lives, true standards for mobile UI design patterns do not exist. This article provides a systematic literature review of the existing studies on mobile UI design patterns. The first objective is to give an overview of recent studies on the mobile designs. The second objective is to provide an analysis on what topics or areas have insufficient information and what factors are concentrated upon. This article will benefit the HCI community in seeing an overview of present works, to shape the future research directions.

[1]  Fong-Gong Wu,et al.  The Elder's Discrimination of Icons With Color Discrimination on the Cell Phone , 2010 .

[2]  Jung-Yong Kim,et al.  Evaluation of the cognitive ability among aging groups using mobile phone , 2010 .

[3]  Hong-In Cheng,et al.  Senior — Friendly icon design for the mobile phone , 2010, 6th International Conference on Digital Content, Multimedia Technology and its Applications.

[4]  Seungmoon Choi,et al.  Tactile effect design and evaluation for virtual buttons on a mobile device touchscreen , 2011, Mobile HCI.

[5]  Zainab Hamza,et al.  Study of Touch Gesture Performance by Four and Five Year-Old Children: Point-and-Touch, Drag-and-Drop, Zoom-in and Zoom-out, and Rotate , 2014 .

[6]  Gerhard Fischer,et al.  User Modeling in Human–Computer Interaction , 2001, User Modeling and User-Adapted Interaction.

[7]  Hyeon-Jeong Suk,et al.  Changing the color attributes of icons to inform of the application status , 2014, The 18th IEEE International Symposium on Consumer Electronics (ISCE 2014).

[8]  Ergonomic requirements for office work with visual display terminals ( VDTs ) — Part 11 : Guidance on usability , 1998 .

[9]  Mendoza G. Alfredo,et al.  Analyzing Learnability of Common Mobile Gestures used by Down Syndrome Users , 2015, Interacción.

[10]  Emanuele Panizzi,et al.  Multidimensional sort of lists in mobile devices , 2014, AVI.

[11]  Eui Seung Jung,et al.  Touchable area: An empirical study on design approach considering perception size and touch input behavior , 2015 .

[12]  Helen Petrie,et al.  Designing for Accessibility , 2017, INTERACT.

[13]  Stephen A. Brewster,et al.  The Effects of Encumbrance and Mobility on Touch-Based Gesture Interactions for Mobile Phones , 2015, MobileHCI.

[14]  J E Moulder,et al.  Mobile phones, mobile phone base stations and cancer: a review , 2005, International journal of radiation biology.

[15]  Samiullah Khan Durrani Data entry error in mobile keyboard device usage subject to cognitive, environmental, and communication workload stressors present in fully activated emergency operations centers , 2009 .

[16]  Daniel Vogel,et al.  Shift: a technique for operating pen-based interfaces using touch , 2007, CHI.

[17]  Stephen A. Brewster,et al.  Towards the Temporally Perfect Virtual Button: Touch-Feedback Simultaneity and Perceived Quality in Mobile Touchscreen Press Interactions , 2014, TAP.

[18]  M. Satyanarayanan,et al.  Mobile computing , 1993, Computer.

[19]  Andy Cockburn,et al.  Zoofing!: faster list selections with pressure-zoom-flick-scrolling , 2009, OZCHI '09.

[20]  Shijian Luo,et al.  Effects of smartphone icon background shapes and figure/background area ratios on visual search performance and user preferences , 2014, Frontiers of Computer Science.

[21]  Martina Ziefle,et al.  Cultural influences on the comprehensibility of icons in mobile–computer interaction , 2008, Behav. Inf. Technol..

[22]  Barry Smyth,et al.  Who, what, where & when: a new approach to mobile search , 2008, IUI '08.

[23]  Gavriel Salvendy,et al.  A survey of what customers want in a cell phone design , 2007, Behav. Inf. Technol..

[24]  Kup-Sze Choi,et al.  Facilitating mathematics learning for students with upper extremity disabilities using touch-input system , 2015, Disability and rehabilitation. Assistive technology.

[25]  Takashi Komuro,et al.  A zooming interface for accurate text input on mobile devices , 2013, CHI Extended Abstracts.

[26]  Lise Busk Kofoed,et al.  Design for All , 2003 .

[27]  Waiwit Chanwimalueng,et al.  A study of the recognitions and preferences on abstract and concrete icon styles on smart phone from Easterners and Westerners' point of view , 2013, 2013 International Conference on Machine Learning and Cybernetics.

[28]  Xiangshi Ren,et al.  Designing Motion Gesture Interfaces in Mobile Phones for Blind People , 2014, Journal of Computer Science and Technology.

[29]  Krzysztof Z. Gajos,et al.  Design Space and Evaluation Challenges of Adaptive Graphical User Interfaces , 2009, AI Mag..

[30]  K. Fujimura,et al.  Mobile search: how to present search results for older users , 2007, 2007 IEEE International Conference on Industrial Engineering and Engineering Management.

[31]  Shumin Zhai,et al.  The performance of touch screen soft buttons , 2009, CHI.

[32]  Dixie L. Thompson,et al.  Usability of Mobile Phones in Physical Activity-related Research: A Systematic Review , 2014 .

[33]  Skye Raupp,et al.  Keyboard layout in eye gaze communication access: typical vs. ALS , 2013 .

[34]  Suziah Sulaiman,et al.  Mobile phone Icons recognition and cultural aspects , 2014, 2014 International Conference on Computer and Information Sciences (ICCOINS).

[35]  Nigel Bevan,et al.  Usability is Quality of Use , 1995 .

[36]  Patrick M. Finley,et al.  A Study Comparing Table and List-Based Smartphone Interface Usability , 2013 .

[37]  Dimitrios Zevgolis,et al.  From icons perception to mobile interaction , 2011, 2011 Federated Conference on Computer Science and Information Systems (FedCSIS).

[38]  Lourdes Moreno,et al.  Accessibility to Mobile Interfaces for Older People , 2013, DSAI.

[39]  Roope Raisamo,et al.  Comparison of three designs for haptic button edges on touchscreens , 2010, 2010 IEEE Haptics Symposium.

[40]  Rahim Tafazolli,et al.  A survey on smartphone-based systems for opportunistic user context recognition , 2013, CSUR.

[41]  Eva García,et al.  Comparing Zooming Methods in Mobile Devices: Effectiveness, Efficiency, and User Satisfaction in Touch and Nontouch Smartphones , 2015, Int. J. Hum. Comput. Interact..

[42]  Amy Ogan,et al.  ZoomBoard: a diminutive qwerty soft keyboard using iterative zooming for ultra-small devices , 2013, CHI.

[43]  Sus Lundgren,et al.  Alchemy: dynamic gesture hinting for mobile devices , 2011, MindTrek.

[44]  Jorge Ribeiro,et al.  Design and Evaluation of a Mobile User Interface for Older Adults: Navigation, Interaction and Visual Design Recommendations , 2013, DSAI.

[45]  Satoshi Muraki,et al.  Effects of age, thumb length and screen size on thumb movement coverage on smartphone touchscreens , 2016 .

[46]  Andreas Holzinger,et al.  On Some Aspects of Improving Mobile Applications for the Elderly , 2007, HCI.

[47]  Joel J. P. C. Rodrigues,et al.  Survey and analysis of current mobile learning applications and technologies , 2013, ACM Comput. Surv..

[48]  Xiang Cao,et al.  LensMouse: augmenting the mouse with an interactive touch display , 2010, CHI.

[49]  Jungchul Park,et al.  Adaptable versus adaptive menus on the desktop : Performance and user satisfaction , 2007 .

[50]  Peter Graf,et al.  Age-related differences in the initial usability of mobile device icons , 2011, Behav. Inf. Technol..

[51]  G. Blair,et al.  The Visual Display , 2017 .

[52]  Kyong-Ho Lee,et al.  Semantic search for smart mobile devices , 2013, IUI '13 Companion.

[53]  Konstantinos Chorianopoulos,et al.  Icons in mobile phones: Comprehensibility differences between older and younger users , 2010 .

[54]  Kun-Pyo Lee,et al.  Culturally adapted mobile phone interface design: correlation between categorization style and menu structure , 2007, Mobile HCI.

[55]  Audrey Girouard,et al.  Bending Blindly: Exploring Bend Gestures for the Blind , 2016, CHI Extended Abstracts.

[56]  Thomas Alexander,et al.  Optimal Touch Button Size for the use of Mobile Devices while Walking , 2015 .

[57]  Milena M. Head,et al.  Computer use by older adults: A multi-disciplinary review , 2010, Comput. Hum. Behav..

[58]  Lisa Anthony,et al.  Children (and adults) benefit from visual feedback during gesture interaction on mobile touchscreen devices , 2015, Int. J. Child Comput. Interact..

[59]  Suziah Sulaiman,et al.  Qualitative study to identify icons characteristics on mobile phones applications interfaces , 2013, 2013 IEEE Symposium on Wireless Technology & Applications (ISWTA).

[60]  Ben Shneiderman,et al.  Research-Based Web Design & Usability Guidelines [2006 edition] , 2006 .

[61]  Olivier Chapuis,et al.  Controlling widgets with one power-up button , 2013, UIST.

[62]  Jonathan Donner,et al.  Research Approaches to Mobile Use in the Developing World : A Review of the Literature , 2007 .

[63]  Curtis B. Irwin,et al.  Effect of Touch Screen Button Size and Spacing on Touch Characteristics of Users With and Without Disabilities , 2012, Hum. Factors.

[64]  C. Nicolle,et al.  Accessibility and Usability Requirements for ICTs for Disabled and Elderly People: a Functional Classification Approach : Helen Petrie , 2001 .

[65]  Denis Dochain,et al.  COD AND VFA'S CONTROL IN A TWO-PHASE ANAEROBIC DIGESTION PROCESS , 2007 .

[66]  Vidya Setlur,et al.  Wish I hadn't clicked that: context based icons for mobile web navigation and directed search tasks , 2011, IUI '11.

[67]  Shih-Miao Huang,et al.  The rating consistency of aesthetic preferences for icon-background color combinations. , 2012, Applied ergonomics.

[68]  Benjamin B. Bederson,et al.  A review of overview+detail, zooming, and focus+context interfaces , 2009, CSUR.

[69]  Mexhid Ferati,et al.  Aural browsing on-the-go: listening-based back navigation in large web architectures , 2012, CHI.

[70]  Mark Dunlop,et al.  Improved form navigation on mobile devices , 2014, 2014 6th International Conference on Computer Science and Information Technology (CSIT).

[71]  Katsumi Watanabe,et al.  Interference Between Accustomed Number–Space Mappings and Unacquainted Letter–Space Mappings in a Button Press Task , 2013, Hum. Factors.

[72]  Gavriel Salvendy,et al.  Use and Design of Handheld Computers for Older Adults: A Review and Appraisal , 2012, Int. J. Hum. Comput. Interact..

[73]  Inki Kim,et al.  Performance Comparisons Between Thumb-Based and Finger-Based Input on a Small Touch-Screen Under Realistic Variability , 2015, Int. J. Hum. Comput. Interact..

[74]  Steven Hoober,et al.  Designing Mobile Interfaces , 2011 .

[75]  Xinyu Zhang,et al.  Ubiquitous keyboard for small mobile devices: harnessing multipath fading for fine-grained keystroke localization , 2014, MobiSys.

[76]  N Louveton,et al.  Driving while using a smartphone-based mobility application: Evaluating the impact of three multi-choice user interfaces on visual-manual distraction. , 2016, Applied ergonomics.

[77]  Stephen A. Brewster,et al.  The effects of walking speed on target acquisition on a touchscreen interface , 2011, Mobile HCI.

[78]  I. Scott MacKenzie,et al.  Phrase sets for evaluating text entry techniques , 2003, CHI Extended Abstracts.

[79]  Topi Kaaresoja,et al.  Feel-good touch: finding the most pleasant tactile feedback for a mobile touch screen button , 2008, ICMI '08.

[80]  Fong-Gong Wu,et al.  Visual and manual loadings with QWERTY-like ambiguous keyboards: Relevance of letter-key assignments on mobile phones , 2015 .

[81]  Austin Henderson,et al.  Interaction design: beyond human-computer interaction , 2002, UBIQ.

[82]  Luís A. Castro,et al.  Technology and Aging , 2015 .

[83]  Oscar Pastor,et al.  Including multi-stroke gesture-based interaction in user interfaces using a model-driven method , 2015, Interacción.

[84]  Jennifer Preece,et al.  Teaching and learning human-computer interaction: past, present, and future , 2013, INTR.

[85]  Yijun Yu,et al.  Adaptive Model-Driven User Interface Development Systems , 2014, ACM Comput. Surv..

[86]  Daniel Gonçalves,et al.  Developing a Multimodal Interface for the Elderly , 2013, DSAI.

[87]  Jinwoo Kim,et al.  Design for Experience , 2015, Human–Computer Interaction Series.

[88]  Jose L. Contreras-Vidal,et al.  Studies in One-Handed Mobile Design: Habit, Desire and Agility , 2006 .

[89]  Xiang Xiao,et al.  LensGesture: augmenting mobile interactions with back-of-device finger gestures , 2013, ICMI '13.

[90]  Allison Woodruff,et al.  Using thumbnails to search the Web , 2001, CHI.

[91]  Donghun Lee,et al.  Effect of key size and activation area on the performance of a regional error correction method in a touch-screen QWERTY keyboard , 2009 .

[92]  Vidya Setlur SemantiLynx: context based icons for mobile web navigation and directed search tasks , 2010, Mobile HCI.

[93]  Jungchul Park,et al.  Human complementary menu design for mobile phones , 2007, IFAC HMS.

[94]  Klaus Bengler,et al.  The Safest Way to Scroll a List: A Usability Study Comparing Different Ways of Scrolling through Lists on Touch Screen Devices , 2013, IFAC HMS.

[95]  Sung H. Han,et al.  One-handed thumb interaction of mobile devices from the input accuracy perspective , 2010 .

[96]  Maurizio Morisio,et al.  Connected Car , 2016, ACM Comput. Surv..

[97]  Yang Li Gesture search: a tool for fast mobile data access , 2010, UIST '10.

[98]  Heinrich Hußmann,et al.  Evaluation of User Interface Design and Input Methods for Applications on Mobile Touch Screen Devices , 2009, INTERACT.

[99]  Kyungdoh Kim Derivation and evaluation of 3D menu designs for Smartphones , 2011 .

[100]  Colette Nicolle,et al.  Why Inclusive Design Guidelines , 2001 .

[101]  Juan Pablo Hourcade,et al.  Evaluating one handed thumb tapping on mobile touchscreen devices , 2008, Graphics Interface.

[102]  Danielle A. Becker Best Practices of Library Mobile Website Design: A Literature Review , 2015 .

[103]  Martina Ziefle,et al.  Effects of age, cognitive, and personal factors on PDA menu navigation performance , 2009, Behav. Inf. Technol..

[104]  Liang Fang,et al.  A cluster information navigate method by gaze tracking , 2013, UIST '13 Adjunct.

[105]  H. Hollands,et al.  The prevalence of low vision and blindness in Canada , 2006, Eye.

[106]  Eui S. Jung,et al.  Investigation of Icon Design and Touchable Area for Effective Smart Phone Controls , 2015 .

[107]  Christian Stößel,et al.  Familiarity as a factor in designing finger gestures for elderly users , 2009, Mobile HCI.