Abstract

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. Introduction

The emergence of computers into workplaces and home during the 1970s has brought attention to the interaction between people and computer systems; and, thus, the field of Human-Computer Interaction (HCI) began to emerge during the same period [1]. HCI encompasses extensive areas and designing effective user interface (UI) is one of the areas that has always been emphasized, as effective interfaces provide potential to improve overall system performance [2]. It is a great challenge to design an effective UI, as it requires understanding of different disciplines; for example, user’s physical and cognitive capabilities, sociological contexts, computer science and engineering, graphic design, and work domain [2, 3]. An effective user interface would be created based upon perspectives from the disciplines.

HCI consistently evolves in response to technological changes. At the first stage, HCI focused on how to facilitate convenient means for a single user to use a computer on a fixed platform, such as desktop computers. At the second stage, HCI was no longer confined to stationary computers. Mobile innovation started in the late 1990s. Many actions and feedback under small-sized screen and a limited number of buttons became an area of focus in the HCI community [4]. In 2007, many companies, such as LG, Apple, and HTC, released new models of mobile devices. The new models were no longer equipped with keypads; instead, they were replaced by touchscreens. This caused a major shift on research attention ever since [5, 6].

There are more than billion smartphone users worldwide which include a large proportion of nongeneric users—children, the elderly, and users with disorders or disabilities. Although mobile platforms are becoming an indispensable part of daily lives, true standards for mobile UI design patterns do not exist. Seemingly, most of the designs are based on the desktop paradigm [7]. The desktop paradigm may be applicable, but there are notable differences between mobile devices and desktops, including the lack of tactile feedback, limited screen size, and high demands of visual attention. Apart from differences in physical qualities, contexts of use between desktop computers and mobile devices are different. Desktop computers are stationary, whereas mobile devices can be used anywhere or even while users are walking, carrying objects, or driving. Thus, desktop designs do not fully fit mobile context.

There is a need to see an overview of usability studies on mobile UI design, to ascertain the current state of knowledge and research and to comprehend research gaps. This article provides systematic review of the existing studies on mobile UI design patterns. The first objective is to give an overview of recent studies on mobile designs. The second objective is to provide analyses 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 and knowledge gaps, to shape the future research directions.

2. Theoretical Backgrounds

2.1. Usability

Usability is a core terminology in HCI. It has been defined as “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use” [8]. The term usability was coined in the early 1980s to replace “user-friendly,” which was vague and contained subjective connotation [9]. Usability is crucial to any products because if the users cannot achieve their goals effectively, efficiently, and in satisfactory manner, they can seek for alternative solutions to achieve their goals [10]. A usable product seeks to achieve three main outcomes: (1) the product is easy for users to become familiar with and competent in using it during the first contact, (2) the product is easy for users to achieve their objective through using it, and (3) the product is easy for users to recall the user interface and how to use it on later visits [11].

Usability criteria ensure that the products meet the three outcomes. There are several usability criteria mentioned in literature, for instance, effectiveness, efficiency, satisfaction, safety (error tolerance), utility, learnability (easy to learn), memorability, and engaging [11, 12]. The objective of usability criteria is to enable the assessment of product usability in terms of how the product can improve user’s performance [12]. Some of the usability criteria are very much task-centered, where specific tasks are separated out, quantified, and measured in usability testing [13]. For example, efficiency which refers to how fast the user can get their job done [10] can be measured by time to complete a task or learnability can be measured by time to learn a task [12]. These criteria can provide quantitative indicators of how productivity has improved [12]. Some of the usability criteria can hardly be measured by using quantitative measurement, such as satisfaction and engagement, as they are subjective and basically involve human emotion. There are several factors which contribute to overall satisfaction, and the factors may include entertaining, helpfulness, aesthetically pleasing, and rewarding, or there are some negative qualities such as boring, frustrating, and annoying [12]. When it comes to evaluation whether users have pleasant or terrible experience, it is difficult to objectively measure. This is where user experience has become another core terminology in HCI.

2.2. User Experience

User experience (UX) has been defined as “the combined experience of what a user feels, perceives, thinks, and physically and mentally reacts to before and during the use of a product or service” [14]. Basically, an important concept in UX is the process by which users form experiences since they first encounter the product and as the product is used throughout a period [15]. UX can be explained by three characteristics. The first one is the holistic nature of UX. What is meant by holistic nature is that UX encompasses a broad range of qualities and includes not only the visual, tactile, auditory aspects of the system but also how the system functions under an appropriate usage environment or context [4]. The second characteristic is that UX focus is heavily tilted towards user’s perspective. UX is often misunderstood for UI (user interface), as their abbreviations are similar. UI tends to tilt towards computer side, and UI evaluations are often subjected to quantitative measurement or usability testing. UX, in contrast, concerns how users think, feel, and behave [4]. The third characteristic is that UX has strategic value in firm’s development of a product or service. UX has recently become an important topic worth consideration by top executives [4].

The goal of designing for UX is to encourage positive feelings (e.g., satisfying, enjoyable, exciting, motivating, and fun) and minimizing negative feelings (e.g., boring, frustrating, annoying, and cutesy) towards the product. Unlike usability goals, UX goals are subjective qualities and concerned with how a product feels to a user. There were attempts to utilize quantitative measurements to measure user’s emotion. The measurements were adopted from medical applications, such as measuring pulse and blood pressure, or using facial electromyography (EMG) and electroencephalography (EEG) to reflect computer frustration [13]. However, its validity in measuring user experience remains questionable. Although usability and UX are different, they are not completely separated. In fact, usability is part of user experience. For example, a product that is visually pleasing might evoke positive first-contact experience; however, if its usability was inadequate, it could damage overall user experience. Apart from usability, other core components of UX include useful and desirable content, accessibility, credibility, visually pleasing, and enjoyment [15].

2.3. User Diversity

One of the most important design philosophies in HCI is the universal design. It is the process of creating products that can be accessed by as many people as possible, with the widest possible range of abilities, operating within the widest possible range of situations [16]. To make products that can be used by everyone is impossible; however, designers can try to exclude as few people as possible, by ensuring that the products are flexible and adaptable to individual needs and preferences [17]. To accomplish universal design goals, the understanding of user diversity is needed. There are several dimensions of user diversity that differentiate groups of users.

The first dimension is disabilities. Much of experimental research has been conducted to understand how disabilities affect interaction with technology. The main efforts of studies were to study the users themselves, their requirements for interaction, appropriate modalities, interactive devices, and techniques to address their needs [18]. The research includes visual impairments, auditory impairments, motor and physical impairments, and cognitive impairments [18]. Visual impairments greatly affect human interaction with technology, as human relies on vision to operate computer systems. Visual impairments encompass a wide range of vision problems related to acuity, accommodation (ability to focus on objects at different distances from the eyes), illumination adaption, perception of depth, and color vision [19]. Minor visual impairments can usually be addressed by magnifying the size of interactive elements, increasing color contrast, or selecting appropriate color combinations for color-blinded users [18]. Unlike visual impairments, blindness refers to a complete or nearly complete vision loss [20]. Blind users benefit from audio and haptic modality for input and output. They are supported by screen readers, speech input and output, and Braille displays [18]. Auditory impairments (or hearing impairments) can also affect interaction with technology. The impairments may vary in degree, from slight to severe. Majority of people with hearing impairments have lost their hearing usually through aging. They have partially lost perception of frequency (cannot discriminate between pitches), intensity (need louder sounds), signal to noise (distracted by background noise), and complexity (can hardly perceive speech) [19]. Some people were prelingually deaf, either were born deaf or had lost their hearing before they can speak [21]. Some strategies to address hearing impairments are to provide subtitles or captions to auditory contents or to provide sign-language translation of the contents [21]. Motor and physical impairments interfere with interaction with technology. Although causes and severity of motor impairments vary, the common problems faced by individuals with motor impairments include poor muscle control, arthritis, weakness and fatigue, difficulty in walking, talking, and reaching objects, total or partial paralysis, lack of sensitivity, lack of coordination of fine movement, and lack of limbs [18, 19]. The main strategy to address motor impairments is to minimize movement and physical effort required for input, for instance, using text prediction, voice input, switch control devices, and eye-tracking [18, 19]. Besides the aforesaid impairments, cognitive impairments can also limit user’s interaction with technology. Cognitive impairments can be the result of brain injury, Alzheimer’s disease and dementia, dyslexia, Down’s syndrome, and stroke [18, 19]. Cognitive disabilities limit user’s capacities to think, to remember (either long-term or short-term), to sequence thoughts and actions, and to understand symbols [18, 19]. The strategies are to keep user interface simple, provide simple methods for remembering, provide continuous feedback about position in the system, provide longer time to complete task, and support user’s attention [19].

The second dimension is age. Age influences physical qualities and abilities, cognitive abilities, and how a person perceives and processes information. The elderly and children are the two major age groups that have age-dependent requirements [18]. There are several definitions of children. Some studies include adolescence (13–18 years) into childhood, whereas some studies focus only on children under the age of 12 [18, 22]. Like the children group, there is no consensus on the cut-off point of old age. Most researchers regard 55 years as the beginning of old age. Nevertheless, there are enormous differences in abilities and problems within elderly group; for example, people aged 55 and people aged 90 are extremely different [19]. Therefore, the age range is further divided into two or three groups: young-old (ages 55 to 75) and old-old (over 75) or young-old (ages 65 to 74), old-old (ages 75 to 85), and oldest-old (over age 85) [19]. Old age is associated with declines in vision, hearing, motor function, and cognition [19]. Elderly people commonly have problems with vision acuity, depth of perception, color vision, hearing high frequency sounds, controlling coordination and movement, short- and long-term memory, and information processing speed [19]. Children have unique characteristics. They do not possess the same levels of physical and cognitive capabilities as the adults. They have limited motor abilities, spatial memory, attention, working memory, and language abilities. Thus, the general characteristics of the elderly and children need to be considered when developing products for these two age groups.

The third dimension is culture. Cultural differences include date and time format, interpretation of symbols, color meaning, gestures, text direction, and language. Thus, designers must be sensitive to these differences during the development process and avoid treating all cultures the same [18].

The fourth dimension is computer expertise. Some groups of users are unfamiliar with technology, for example, older adults and those with minimal or no education. Some strategies to address differences in expertise level include providing help options and explanations, consistent naming convention to assist memory, and uncluttered user interface to assist attention [18].

2.4. Mobile Computing

The first era of mobile devices dated back to the late 1970s and early 1980s. The models during this era were precursor to present time’s laptops and were originally intended for children. The focus of this era was to reduce the size of computer machine to support portability [23]. Mobile phones introduced during this period were still large and required enormous batteries [24]. Around ten years later, mobile devices reached the point where the sizes were small enough to be fit in a pocket. During the same time, the network shifted to 2G technology and cellular sites became denser; thus, mobile connectivity was easier than before. This led to the increase in consumer demand for mobile phones. Increased demand meant more competition for service providers and device manufacturers, which eventually reduced costs to consumers [24]. In the late 1990s, feature phones were introduced to the market. The phones were equipped with several “features,” such as cameras, games, wallpapers, and customizable ringtones [24]. Smartphone era started around 2002. Smartphones have the same capabilities as the feature phones; however, the smartphones use the same operating system, have larger screen size, and have a QWERTY keyboard or stylus for input and Wi-Fi for connectivity [24]. The most recent era starts in 2007 when Apple launched the iPhone [23, 24]. It was like smartphones; however, it presented a novel design of mobile interactions. It introduced multitouch display with simple touch gesture (e.g., pinching, swiping), and physical keyboard was completely removed from the phone. The iPhone was also equipped with context-awareness capabilities, which allowed the phone to detect orientation of the phone, or even the location of the users. It took a couple of years later for the competitors to match up with the Android operating system, mobile devices, and associated application store [23].

The challenges of mobile interaction and interface design have evolved over time. Early mobile interaction design involved physical design, reducing physical size while optimizing limited screen display and physical numeric keypads [23]. Later, the challenges evolved to the development add-on features, for example, digital cameras and media player. However, today challenges may have moved to a completely new dimension. Physical shape and basic size of mobile phones have remained unchanged for many years. The challenges may have shifted to the development of software application or designing mobile interaction [23].

3. Previous Reviews

There have been several previous reviews of mobile user interface; however, they did not focus on user interface design patterns. Instead, the focus was primarily on certain application domain of mobile devices. For instance, Coppola and Morisio [25] focused on in-car mobile use. Their article provided an overview of the possibilities offered by connected functions on cars, technological issues, and problems of recent technologies. They also provided a list of currently available hardware and software solutions, as well as the main features. Pereira and Rodrigues [26] made a survey on mobile learning applications and technologies. The article provided an analysis of mobile learning projects, as well as the findings of the analysis. Becker [27] surveyed the best practices of mobile website design for library. Monroe et al. [28] made a survey on the use of mobile phones for physical activities (e.g., exercising, walking, and running) and approaches for encouraging and assessing physical activities using mobile phones. Donner [29] reviewed mobile use in the developing world. His article presented major concentrations of the research, the impacts of mobile use, and interrelationships between mobile technology and users. Moreover, the article also provided economic perspective on mobile use in the developing world.

Some review articles concentrated on technical approach of mobile devices and user interface. For instance, Hoseini-Tabatabaei et al. [30] surveyed smartphone-based systems for opportunistic (nonintrusive) user context recognition. Their article provided introduction to typical architecture of mobile-centric user context recognition, the main techniques of context recognition, lesson learned from previous approaches, and challenges for future research. Akiki et al. [31] provided a review on adaptive model-driven user interface development systems. The article addressed the strengths and shortcomings of architectures, techniques, and tools of the state of the art. Summary of the evaluation, existing research gaps, and promising improvements were also stated. Cockburn et al. [32] provided a review of interface schemes that allowed users to work at focused and contextual views of dataset. The four schemes were overview + details, zooming, focus + context, and cue-based techniques. Critical features of the four approaches and empirical evidence of their success were provided.

Some previous reviews focused on mobile use in some user groups. For instance, Zhou et al. [33] made a survey on the use and design of mobile devices for older users, focusing particularly on whether and why older users accept mobile devices and how to design the elderly-friendly mobile devices. Their article provided a summary on technology acceptance of the elderly users, input devices, menus and functions, and output devices.

Some more reviews concerned the impact of mobile use. Moulder et al. [34] reviewed the evidence concerning whether radiofrequency emitted from mobile phones were a cause of cancer. The article provided summary from relevant medical research. Nevertheless, the evidence for a causal association between cancer and radiofrequency was weak and unconvincing.

4. Research Questions

This article surveys literature on usability studies on mobile user interface design patterns and seeks to answer the following two research questions:  RQ1: in each area, what factors were concentrated?  RQ2: what areas of mobile user interface design patterns had insufficient information?

5. Literature Search Strategy

Four phases were used to systematically survey literature: (1) listing related disciplines, (2) scoping databases, (3) specifying timeframe, and (4) specifying target design elements.

5.1. Listing Related Disciplines

The first phase was to list out HCI related disciplines, to cover user interface research from all related disciplines. Based on [3, 35], the related disciplines are as follows: computer science and engineering, ergonomics, business, psychology, social science, education, and graphic design.

5.2. Scoping Databases

The articles for review were retrieved from 24 online databases, based upon access provided by authors’ affiliation. The databases covered all disciplines mentioned in Section 5.1, and they were listed in Table 1.

5.3. Specifying Timeframe

The current article was confined to the papers published from 2007 to 2016. As stated, many companies released new touchscreen mobile devices in 2007, which was a turning point of research attention [5, 6].

5.4. Specifying Target Design Elements

The categories of major design patterns defined in the book Designing Mobile Interfaces, by Hoober and Berkman [7], were used to scope literature search. The categories were listed in Table 2.

There were altogether 10 categories of mobile UI design patterns. Some of them contained subelements; for instance, in input mode and selection, the subelements of this category were gesture, keyboard, input area, and form.

5.5. Inclusion Criteria

For each category of the design patterns, the papers which contained any of these keywords: mobile, user, and interface as well as the name of the category were retrieved; for instance, keywords used in retrieving papers about icons were “icon”; “mobile”; “user”; and “interface”. The subelements in the categories were also included in retrieval keywords.

The abstracts of all retrieved papers were initially read through. The papers which contained the input keywords but did not discuss or were not related to mobile user interface were omitted; for instance, papers related to networking were often retrieved in “navigation” category, as they contained the keywords “link” and/or “navigation.” Once the related papers were identified, their main contents were read through. The number of primary search results and the remaining papers in each category were listed in Table 3.

From Table 3, the input mode and selection category had the highest remaining papers—27—followed by icons (14 papers), information control (9 papers), buttons (7 papers), page composition, display of information, and navigation (4 papers each). The control and confirmation, revealing more information, and lateral access categories had no relevant papers. In each category, the papers which shared the common ground were grouped together, to posit research theme in each design pattern.

6. Research Overview

This section provided an overview of prior research and studies on each category of mobile UI design pattern conducted since 2007.

6.1. Page Composition

Page composition is a very broad term for interface design. A composition of a page encompasses various components, including scrolling, annunciator row, notification, title, menu patterns, lock screen, interstitial screen, and advertising [7]. Only menu was discussed in this section. The other elements that were overlapped with other topics would be discussed later (i.e., scrolling) or out of the scope of this current article (i.e., annunciator row, notification, title, lock screen, interstitial screen, and advertising).

Menu method is a popular alternative to traditional form of retrieving information [36]. It plays a significant role in overall satisfaction of mobile phones [37]. The primary function of menus is to allow users to access desired functions of applications or devices. Early research on menus was carried out on many topics. The research primarily examined effectiveness of menu patterns and relevant components on desktop platform. The research included 2D and 3D menus, menu structures (depth versus breadth), menu adaptation, item ordering (categorically and alphabetically), item categorization, task complexity, menu patterns (hierarchical and fisheye), help fields, methodological studies, and individual differences [36].

The first few studies of menus on mobile devices are due to small screen of devices. The guidelines or principles that are generally applied from menus on personal computers should be reexamined. Early studies on desktops show that 3D menus can convey more information than 2D menus. In mobile context, superiority of 3D menus can be inconclusive as the screen size is more limited. In Kim’s study [36], 2D menu (i.e., list menu) was compared with three types of 3D menus (i.e., carousel, revolving stage, and collapsible cylindrical trees) on mobile phone. The performance of menus was measured by task completion time, satisfaction, fun, and perceived use of space. The results partially substantiated previous studies. With respect to overall metrics, 3D menus outperformed 2D menus; however, the 2D menus surpassed 3D in high breadth level [36]. In fact, there are more types of 2D and 3D menus that have not been examined, and they can be further studied.

Besides menu components, prior research showed that user factors had influences on menu usability. The topics included user language abilities, spatial abilities, visual characteristics, and user expertise [36]. The scope became narrower and it examined primarily on age and cultural differences since 2007.

Prior research highlighted cultural influences on usability. The research was mostly at superficial level (e.g., text, number, and date and time format), whereas that at implicit cognition level was rare. Moreover, they were mostly conducted in desktop environment [38]. Thus, applying the findings from desktop research to mobile environment remained unsettled. Kim and Lee [38] examined correlation between cultural cognitive styles and item categorization scheme on mobile phones. They found different user preferences towards categorization of menu items. Dutch users (representing Westerners) preferred functionally grouped menus, for instance, setting ringtones and setting wallpaper, as they shared a common function—setting. In contrast to Dutch users, Korean users (representing Easterners) preferred thematically grouped menu, for instance, setting wallpaper and display, as they shared a common theme—pictorial items. Menus should be optimized to fit user’s cognitive styles and preferences to enhance system usability [38].

Apart from cultural differences, influence of age differences on menu usability was also studied. As people aged, there are changes and decline in sensation and perception, cognition, and movement control, for instance, decline in vision acuity, color discrimination, hearing, selective attention, working memory, and force controls [39]. These changes influence computer use. Thus, user interface must be designed to support the unique needs of older users. A study found that aging had influences on menu navigation. Menu navigation is an important concern when designing a menu, as an effective menu leads users to correct navigational path. Effective menu is related to several components, including the structure of the menu, its depth and breadth, and naming and allocation of menu items. Menu navigation is also associated with individual factors: spatial ability, verbal memory, visual abilities, psychomotor abilities, and self-efficacy, and these individual factors are age-related [40]. Menu navigation is more challenging on mobile devices, as the menus are implemented on limited screen space and users can partially see the menus; thus, users need to rely on working memory more than on desktops. Arning and Ziefle [40] studied the menu navigation on mobile environment with younger (average age = 23.8) and older users (average age = 56.4), all of whom were experienced computer users. The performance of menu navigation was measured by task completion time, number of tasks completed, detour steps, and node revisited. Prior to navigation tasks, preliminary tests were conducted to measure user’s spatial ability, verbal memory, and self-efficacy. The results of the preliminary tests indicated that spatial ability, verbal memory, and self-efficacy of younger users were significantly higher than older users. The navigation tasks found differences on user’s performance. Task completion time, number of tasks completed, detour steps, and nodes revisited of older users were significantly greater than those of younger users; in other words, younger users outperformed older users on mobile menu navigation [40]. However, further analysis found that the variable which had the best predictive power for navigation performance was not age but spatial ability; age was only a carrier variable that was related to many variables which changed over the lifespan. Although all older users in their study were experienced computer users, the study found that more than half of them were not able to build a mental model of how the system was constructed. Their study also found that both verbal memory and spatial ability were related to strategies employed in menu navigation. Users with high spatial ability navigated through information structure based on their spatial representation of menu structure, while users with high verbal memory referred to memorization of function names in navigation [40].

With many individual factors and diversity of users, one-size-fits-all system is impossible to achieve, and tailoring product to fit all segments of users is very costly. An alternative solution is to allow users to adapt the interface (adaptable interface) or to allow the interface to adapt itself (adaptive interface). Both types of interfaces locate frequently used items in a position that can be easily selected by the users; thus, menu selection time can be reduced [41]. However, each of them has its own weaknesses. On adaptive interface, no special knowledge of users is required, as the interface can adapt itself; however, users can have difficulty in developing mental model of the system due to frequent change of item location. On adaptable interface, users can autonomously manipulate location of items, but users need to learn how to move items to intended position [42]. Prior studies on desktops show that adaptive interfaces have potential for reducing visual search time and cognitive load, and adaptive interfaces can be faster in comparison to traditional nonadaptive interfaces [43]. Nevertheless, these two approaches have been less studied on mobile devices. Park et al. [44] examined conventional adaptive and adaptable menus, adaptive and adaptable menus with highlights on recently selected items, and traditional menu. The study found that the traditional menu had higher learnability as the menu items did not change their positions. However, the traditional menu did not provide support for frequently selected items, and this type of menus became less efficient when the number of items was large. Adaptable menus were more robust but required a significant amount of time to learn adaptation and to memorize which items to adapt. The adaptable menu with highlights on recently selected items helped users recognize which items should be adapted. Performance of the adaptive menus was similar to the adaptable one; however, constantly changing item locations made it difficult for users to develop stable mental representation of the system. In sum, the results showed that adaptable menu with highlights were in favour by most users, as the highlights could reduce memory load for adaptation [44].

6.2. Display of Information

On desktops, users are constantly surrounded by ocean of information. Many information display patterns help users in filtering and processing relevant visual information. Examples of information display patterns include different types of lists, including vertical list, thumbnail list, fisheye list, carousel, grid, and film stripe [7]. Effective patterns should reflect user’s mental models and the way users organize and process information.

Limited screen size has caused a design challenge to information display patterns and effectiveness of applying desktop designs to mobile platform unsettled. Since 2007, research has been directed to reassessment of display pattern usability, specifically on efficiency, error rate, and subjective satisfaction. In [45], the fisheye list was compared to the vertical list on satisfaction and learnability, which was measured in terms of task execution time in this study. The study was carried out with 12 participants, aged 10 to 39. The results showed that the vertical list was better than the fisheye menu in task execution time; thus, the vertical list was superior to the fisheye list in terms of learnability. Despite being more efficient, the vertical list was less preferred as the fisheye menu was more visually appealing [45]. Another study compared a list-based to a grid-based interface on click-path error and task execution time. The two layouts were very common on mobile devices [46]. The prototypes in Finley’s study were mobilized versions of the existing website of a university. He ran the experiment with 20 participants, who were experienced mobile phone users, and all of them were students, staffs, or faculty members of the university. The results showed that grid-based interface was significantly more efficient, and it was rated as more appealing and more comfortable by the users [46].

Besides the layouts, there has been an argument that interaction concepts established on desktops work only with restrictions [47]. Due to limited screen size, list scrolling and item selection can be more demanding on mobile devices than on desktops. Breuninger et al. [47] compared seven different types of touch screen scrolling lists on three metrics: input speed, input error, and user subjective rating. The seven types of list included (1) scrollbar, (2) page-wise scrolling with arrow buttons, (3) page-wise scrolling with direct manipulation, (4) direct manipulation of a continuous list with simulated physics, (5) direct manipulation of a continuous list without simulated physics, (6) direct manipulation of a continuous list with simulated physics and an alphabetical index bar, and (7) direct manipulation of a continuous list without simulated physics and with an alphabetical index bar. The results indicated that there were variations in efficiency of different list scrolling mechanisms. The input speed and error rate of “page-wise scrolling with direct manipulation without physics” were significantly higher than other interaction types. Although the differences between other interaction types were not significant, participants most preferred direct manipulation with simulated physics [47].

To compensate difficulty of input precision, interaction with mobile devices was sometimes done through a stylus, pressure sensing, or alternative interaction styles. Quinn and Cockburn [48] proposed “Zoofing,” which was a list selection interface for touch or pen devices. The experiment asserted that the Zoofing technique outperformed conventional scrolling interaction on selection time and input errors [48].

6.3. Control and Confirmation

Physical and cognitive limits of human users often cause unwanted errors that can be trivial to drastic. On computer systems, control and confirmation dialogues are being used to prevent errors, typically user errors. A confirmation dialogue is used when a decision point is reached and user must confirm an action or choose between options. Control dialogue is used to prevent against accidental user-selected destruction, for example, exit guard and cancel and delete protection [7]. Since 2007, there has been no research regarding control and confirmation dialogues on mobile devices.

6.4. Revealing More Information

Two common types for revealing more information are to display in a full page and revealing in a context. Revealing in a full page is generally part of a process, where large amounts of content will be displayed. Revealing in context is generally used when information should be revealed quickly and within a context. Some of the patterns for revealing more information include pop-up, window shade, hierarchical list, and returned results [7]. Since 2007, there has been no research regarding patterns in revealing more information on mobile devices.

6.5. Lateral Access

Lateral access components provide faster access to categories of information. Two common patterns for lateral access are tabs and pagination. There are several benefits of using lateral access, including limiting number of levels of information users must drill through, reducing constant returning to a main page, and reducing the use of long list [7]. Since 2007, there has been no research regarding lateral access on mobile devices.

6.6. Navigation (Links)

A link is a common element available on all platforms. It supports navigation and provides access to additional content, generally by loading a new page or jumping to another section within the current page [7]. Early research was primarily conducted on desktop environment and mainly supports web surfing.

Navigation on small screen of mobile devices can be more challenging. Typical web navigation technique tends to support depth-first search. In other words, users select a link on a page, then a new page would be loaded; and the process would repeat until the users find the information they need [49]. This method is more difficult on mobile environment, as the navigation is constrained by small screen size. It was found that search behavior on mobile device was different from that on desktop. Most mobile users used mobile devices for directed search, where the objective was to find a predetermined topic of interest with minimum divergence by unrelated links [49, 50]. Some alternative solutions to tackle this issue were to show a thumbnail of the page [51]. However, the thumbnail approach may benefit only desktops. Thumbnail is a scaled down version of the target page. Thus, it contains exceeded unnecessary amount of information when displayed on mobile screen. An alternative method may be needed for mobile devices. Setlur et al. [49] and Setlur [50] proposed context-based icons “SemantiLynx” to support navigation on mobile devices. SemantiLynx automatically generated icons that revealed information content of a web page, by semantically meaningful images and keywords. User studies found that SemantiLynx yielded quicker response and improved search performance [49, 50].

Another challenge to navigation on mobile devices is to display large amount of information on a small screen. Large amount of information makes it more difficult for users to navigate through pages and select information they need. Early research on desktop employed gaze tracking technique to utilize navigation; however, peripheral devices and software were required in this approach [52]. Cheng et al. [53] proposed a new method for gaze tracking which utilized the front camera of mobile devices. The performance on the prototype was satisfactory; however, comparison to conventional navigation technique was still lacking.

Another challenge for mobile interaction is the need for visual attention [54]. As stated, contexts of use of desktop computers and mobile devices are different. Desktop computers are always stationary, whereas mobile device is ubiquitous. Users can use mobile devices while doing some other activities, such as walking, carrying objects, or driving. This brings about inconvenience when users cannot always look at the screen. Aural interface or audio-based interface is an alternative solution. Users can listen to the content in text-to-speech form and sometimes look at the screen. However, it is difficult to design aural interface for large information architecture. Backtracking to previous pages is even more demanding, as users are forced to listen to some part of the page to recognize the content. Yang et al. [54] proposed topic- and list-based interface to support backnavigation on aural interface. In topic-based backnavigation, the navigation went back to visited topic, rather than visited pages. In list-based backnavigation, the navigation went back to visited list of items, rather than visited pages. The study found that topic-based and list-based backnavigation enabled faster access to previous page and improved navigation experience.

6.7. Buttons

Button is one of the most common design elements across all platforms. It is typically used to initiate actions (i.e., standalone button) or to select among alternatives (i.e., radio button) [7]. Early research covered several topics, including button size and spacing, tactile and audio feedback, and designing for users with disabilities [5558].

Since 2007, research direction has been strongly influenced by touchscreen characteristics. Touchscreen enabled more versatility in interface designing as a large proportion of the device is no longer occupied by physical buttons; however, this brings about a new design challenge—the lack of physical response and tactile feedback. Without physical responses, users have less confidence on the consequences of their actions which eventually compromise system usability [59]. Studies indicated that tactile feedback improved efficiency, error rate satisfaction, and user experience [60]. Nevertheless, not all types of the feedback are equally effective. There are certain factors that contribute to tactile feedback quality. The first factor is the realistic feel of physical touch. Park et al. [59] compared different styles of tactile effects, to evaluate perceived realism of physical response and user preference. The varied styles of tactile effects included slow/fast, bumpy/smooth, soft/hard, weak/strong, vague/distinct, light/heavy, and dull/clear responses. The results found that participants preferred the clear or smooth tactile clicks over dull ones for virtual buttons [59]. Besides the realistic feel of physical touch, simultaneity of touch-feedback and the effects of latency is another factor that influences tactile feedback quality. In [58], latency was varied from 0 to 300 ms. for tactile, audio, and visual feedback modalities. The results showed that long latency worsened perceived quality. The perceived quality was satisfactory when latency was between 0 and 100 ms. for visual feedback and between 0 and 70 ms. for tactile and audio feedback. When the latency condition was 300 ms., quality of the buttons dropped significantly for all modalities of feedback [58]. Koskinen et al.’s study [60] considered user preference towards different tactile feedback modalities. They compared three conditions of virtual button feedback—(1) Tactile and audio, (2) tactile and vibration, and (3) nontactile—to find the most preferred style of feedback. The results suggest the using nontactile feedback was least preferred by the users. It also yielded the lowest user performance which was measured by time to complete tasks and error rate. Tactile and audio feedback was more pleasant and better in user performance than the tactile and vibration one; however, the differences were not significant [60].

Another challenge is the high demand for visual attention. As stated, mobile devices are designed for ubiquity. Users may need to do some other activities simultaneously while using the devices. Pressing virtual buttons can be more difficult, and incorrect operations can occur more frequently as users need to divide their attention to the environment. To compromise high error rate, studies on spatial design of virtual buttons were carried out to explore the appropriate button size, spacing between buttons, and ordered mapping of buttons [5557]. Conradi et al.’s study [56] investigated the optimal size (5 × 5 mm, 8 × 8 mm, 11 × 11 mm, and 14 × 14 mm.) of virtual buttons for use while walking. The results found significant differences on errors and time on task between the smallest size (5 × 5 mm) and all other button sizes. Walking also had a significant influence on errors for all button sizes. The influence was magnified with smaller buttons. The findings of this study suggested that larger buttons were recommended for the use while walking [56]. Haptic button is another approach to tackle the challenge. Pakkanen et al. [61] compared three designs for creating haptic button edges: simple, GUI transformation, and designed. The stimuli in the simple design were accompanied with single bursts, and identical stimuli were utilized whether towards or away from the buttons. GUI transformation stimuli were combined with several bursts. When moving over the edge, the burst raised from the minimum to maximum, and the burst decreased from maximum to minimum when moving away from the edge. In designed stimuli, when moving off the button, there was a single burst which simulated slipping off the buttons. The results indicated that simple and designed stimuli were most promising. Furthermore, stimuli with fast, clear, and sharp responses were good choice for the haptic button edge. Another complementation for the demand for visual attention is to utilize physical buttons, such as a power-up button [62]. Spelmezan et al. [62] showed a prototype that can use a power-up button to operate functions, such as clicking, selecting a combo box, and scrolling a scrollbar. Even though the preliminary experiment yielded promising results, the prototype required the installation of additional sensors: proximity sensor, and pressure sensor [62].

Besides the lack of tactile feedback and demand for visual attention, touching gesture can be hard for users with fine motor disabilities. Pressing a small size button requires high precision in fine motor control, and different contact time on buttons may alter actions (e.g., touching and pressing). Sesto et al. [55] investigated the effect of button size, spacing, and fine motor disability on touch characteristics (i.e., exerted force, impulses, and dwell time). The results showed that touch characteristics were affected by the button size, but not spacing. The users with fine motor disability had greater impulses and dwell time when touching buttons than nondisabled users. The findings of this study can guide designers in designing an optimal size and touch characteristics to enhance accessibility of virtual button [55].

6.8. Icons

An icon is a visual representation that provides users with access to a target destination or a function in a cursorily manner [7]. Icons serve altogether three different functions. Those functions are (1) an access to a function or target destination, (2) an indicator of system statuses, and (3) a changer of system behaviors [7]. The topics of early research extended to various areas, including the use of icons to convey application status; interpretation of icon meaning, icon recognition, and comprehensibility of icons; appropriate size of an icon; and influences of cultural and age differences on icon interpretation [6365].

Since 2007, research has been directed to two major areas: icon usability and influences of individual differences (age and culture). Research on icon usability examined several icon qualities and how they affected system usability. Usability of an icon is usually determined by findability, recognition, interpretation, and attractiveness [66]. On mobile devices, the usability measurement criteria can be different. Touch screen allows direct manipulation using a finger. Interactive elements became smaller on a mobile touchscreen; thus, the finger occlusion often occurs. Touchable area is one of the mobile usability components that dictates an activation area of an interactive element. Im et al. [67] studied the suitable touchable area to improve touch accuracy for an icon. The study looked into the icon width-to-height ratio (0.5, 0.7, and 0.9) and the grid size (3 × 4, 4 × 5, 5 × 6, and 6 × 8). User performance was determined by input offset, hit rate, task completion time, and preference. The study found that 3 × 4 and 4 × 5 grid sizes and the icon ratio of 0.9 had better performance than the others [67]. In addition to touch accuracy, shape and figure-background ratio of icons had the effect findability. In a vast array of icons, visual search time must be minimized to assure system usability and user satisfaction. Luo and Zhou [68] investigated the effects of icon-background shape and the figure-background ratio on findability. Seven background shapes in Luo and Zhou’s study [68] included (1) isosceles triangle, (2) isosceles trapezoid, (3) regular pentagon, (4) regular hexagon, (5) rounded square, (6) square, and (7) circle. Five figure-background ratios were 90%, 70%, 50%, 30%, and 10%. The results showed that unified background yielded better findability. The optimal ratio was, however, related to a screen size; the smaller the screen, the higher the figure-background ratio [68].

Being aesthetic is another criterion of icon usability, and color contributes to aesthetic quality of an icon. However, preference towards colors and color combinations can be difficult to measure objectively. Huang [69] explored the degree of agreement of subjective aesthetic preferences for different icon-background color combinations. In total, 3306 color combinations were rated. The results showed that 30 color combinations consistently had high preference scores. The rating was consistent between male and female participants; specifically, there was no significant effect of gender differences. Thus, it was suggested to use certain color combinations to create appealing aesthetics. Besides aesthetic values, colors are also used to convey messages [69]. Ju et al. [70] conducted a study to find out whether there was a relationship between the change of icon colors and the implicit message behind the changes. The study found that participants could perceive the relationship between application status and the change of colors [70].

The second research direction on icons was to investigate the effects of individual differences on icon usability. The focus was on cultural differences [63, 70, 71] and age differences [64, 65, 7276]. The studies on cultural differences primarily concerned icon interpretation and whether it was affected by culture. The results, however, were not consistent. Only some of the studies found cultural influences on icon interpretability, whereas some did not. Ghayas et al. [72] compared the user performances from two different cultures: Malaysian and Estonian. The results found that Malaysian users could interpret more concrete icons than abstract icons, whereas Estonian users performed better with abstract icons [72]. Chanwimalueng and Rapeepisarn [77] compared performances of Easterners (Thai, Malaysian, and Indonesian users) and Westerners (Finnish and German users). In contrast to Ghayas et al. [72], no cultural differences on icon recognition, interpretation, and preference were found in Chanwimalueng and Rapeepisarn’s study [77]. Rather, icon recognition was influenced by icon concreteness and abstractness. Pappachan and Ziefle [71] investigated the cultural effects on icon interpretation as well. The results showed that icon interpretability greatly depended on icon complexity and concreteness. The results of Chanwimalueng and Rapeepisarn [77] and Pappachan and Ziefle [71] imply that culture may have only small effect, and icon interpretation should be regarded as cultural-unspecific. Abstractness causes larger effect and deteriorates icon usability.

Similar to the studies on cultural differences, the primary concern of the studies on age differences focused on icons interpretation. Since 2007, several studies have been conducted, and their results were consistent. Gatsou et al. [65] carried out a study to find any differences in recognition rate among age groups. The participants underwent the recognition test on sample icons that were selected from different mobile device brands. Although the participant’s recognition rate varied among icons, the recognition rate dropped as age increased. Kim and Cho [76] conducted an evaluation study to evaluate multiple cognitive abilities of different age groups, including button comprehension, icon interpretation, vocabulary comprehension, menu comprehension, perceived icon size, and perceived text size. The study found that performance time and error rate increased as age increased. Koutsourelakis and Chorianopoulos [75] also studied whether typical mobile phone icons could be interpreted by senior users. Younger and older participants underwent the icon recognition test. There were significant differences in icon recognition and interpretation performance of younger and older users. The results of Gatsou et al. [65], Kim and Cho [76], and Koutsourelakis and Chorianopoulos [75] suggested that the older participants had more problems using mobile icons. More studies looked into what factors contribute to icon usability for senior users. Leung et al. [64] found that the factors included semantically close meaning (i.e., natural link between icon picture and associated function), familiarity with icons, labelling, and concreteness [64]. Ghayas et al. [72] also found that visual complexity affected icon usability for senior users. Apart from icon interpretation, icon color is another important icon characteristic that assists icon discrimination. Kuo and Wu [73] studied the discrimination of colors and no-saturation icons and color combination between icons and interface background. The results showed that colored icons were more distinguishable than no-saturation icons for elder users. Some color combinations were more difficult for older users to differentiate, such as green and blue. Salman et al. [74] proposed the participatory icon design that could reduce system complexity and increase usability. The results of participatory approach in icon design were successful.

The studies of Gatsou et al. [65], Leung et al. [64], Ghayas et al. [72], and Koutsourelakis and Chorianopoulos [75] show the effect of age on icon usability. The older users have problems in interpreting icons, probably because of technological inexperience. Icon characteristics—complexity, concreteness, semantic closeness, and labelling—contributed to icon usability. These should be regarded as age-unspecific.

6.9. Information Control

Limited size of mobile devices constraints the amount of information to be displayed on the screen. Information control mechanisms such as zooming and scaling, searching, and sorting and filtering have been utilized to assist users in finding, accessing, and focusing on intended information while minimizing unrelated information [7].

Zooming and scaling provide the ability to change the level of detail in dense information, such as charts, graphs, or maps [7]. There are several techniques used in zooming, for instance, on-screen buttons, hardware buttons, interactive scale, and on-screen gesture. Early studies on zooming covered several areas, including screen size, readability, font size, selection precision, and designing for visual-impaired and senior users [78, 79].

Since 2007, research direction on zooming is influenced by the limited screen size. Zooming methods are determined by device manufacturers, and there was no evaluation carried out to examine their usability. Garcia-Lopez et al. [78] examined the most efficient, effective, and satisfying zooming methods by comparing zooming techniques from 19 different devices. The study found no significant differences on efficiency and effectiveness among zooming techniques. Nevertheless, users preferred using links to zoom in and zoom out.

Zooming on a touchscreen relies on gesture. Children at very young age have limited fine motor skills; thus, they can probably face difficulty in manipulating gestures. Hamza [80] carried out research to examine children ability to perform touch screen gestures. The results showed that young children (aged 4 and 5) were able to do gestures; however, older children were more accurate in the interaction with the screen. Although children were able to interact with the screen, the size of the targets had significant effect on accuracy [80].

Searching is another information control function which allows users to quickly access specific information within a long list or huge data array [7]. Early studies on search covered several topics, including load and query, full-text search, and voice input [81, 82]. Research direction on search function since 2007 is also influenced by the limited screen size. Search function normally requires user-supplied text to query the results; however, the limited screen size constrains text input convenience and precision [83]. Thus, searching on mobile devices can be more demanding. An alternative solution to tackle the challenge is by minimizing a demand for user-supplied text. Shin et al. [82] proposed a semantic search prototype, to reduce the amount of full-text search. Semantic approach enables keyword-based search where users can search for intended information without entering exact search terms. A preliminary experiment revealed better user experience results using the proposed prototype compared with full-text search [82]. Church and Smyth [83] suggested that context information, such as time and location, should be integrated to mobile search to help search engine in retrieving more relevant information. For instance, when users in a shopping mall searched by the word “Apple”, the users would be more likely to look for an Apple Store than the nearest apple farm. In this approach, users would be less likely to experience a long list of irrelevant search results. However, no preliminary experiment was conducted to compare the context-based search with the conventional one. Gesture-based interaction is also utilized to enable fast mobile search. Li [81] proposed a gesture-based search technique which enabled a fast access to mobile data such as contacts, applications, and music tracks by drawing gestures. A longitudinal study showed that gesture search enabled a quicker way for accessing mobile data, and users reacted positively to the usefulness and usability of gesture search technique [81].

The previous paragraph discussed how limited screen size constrained user text entry and how that affected the design of information search and retrieval. Apart from that, limited screen size also influences the amount of search results to be displayed at a time. Early web design guidelines suggested that the number of search results per page should be around 30–40 sites, as users usually do not look at the search results that are not in top 30 [84]. The study was intended for desktop platform and carried out only with adult participants. Zhou et al. [85] conducted a study to investigate how many search results should be displayed on mobile device for older users. Older adults have decline in their selective attention [39]; thus, they may be able to grasp limited amount of information at a time. The results showed that most of the participants in the study preferred 30–40 search results per page, which was consistent with the existing guideline.

Sorting and filtering is another important information control function used on mobile devices. Sorting and filtering aids exploratory search by disclosing search options to narrow relevant results [7]. Early studies on sorting and filtering focused on data organizational patterns. Sorting and filtering criteria are usually predefined and cannot be changed, and the system generally allows users to apply only one criterion at a time. However, in practice, multiple criteria could be applied in sorting and filtering. Panizzi and Marzo [86] proposed that the users should be enabled to sort items by using multiple criteria. However, no preliminary experiment was conducted to evaluate the proposed framework, and the authors did not highlight how the proposed idea was related to mobile-specific context.

6.10. Input Mode and Selection

Input and selection concern the methods by which users communicate to computer devices. On desktops, user input is received from major peripheral devices, such as keyboards and mice, and output is displayed through different channels. In contrast, a touchscreen works as both input and output channels. This has brought about changes to input methods; for instance, mouse gestures are replaced by touch gestures, and physical keys are replaced by virtual miniature keys. This has made data inputting on mobile devices more challenging task.

Prior to 2007, research objectives can be classified into two main areas. The first one was to study factors that affected input accuracy, for instance, visual distraction, user’s sensorimotor coordination, blindness, and aging [8791]. The second one was to improve input accuracy, for instance, changing keyboard layouts and increasing input feedback [92, 93]. Since 2007, research objectives are becoming more diverse. The objectives can be classified into seven areas: effects of finger and thumb on input accuracy, user factors, novice users, external factors, eye-free interaction, large form input techniques, and alternative input methods.

A number of studies were carried out to examine how finger and thumb interaction affected input accuracy. When entering text, users preferred to use their finger than a stylus [94, 95]. As the size of the keys is too small, finger occlusion often occurs. A small size of a key can also induce the lack of visual perception; in other words, a finger can block user’s perception while they are pressing the key. This consequently affects input accuracy. It has been suggested that the appropriate size for a key that guaranteed a greater hit rate was 9.2 mm, with 95% touchable area [96]. A touchable area is an area around the key that could activate the respective key. An intended key might not be selected if the touchable area is too small (e.g., 90%), but larger touchable area (e.g., 99%) does not necessarily yield more precise selection as it could activate unintended neighboring keys. These numbers, however, were based on touch interaction tests with an index finger [96]. On actual usage, some users prefer using their thumb, while other users prefer using their finger. Compared to finger-based interaction, research found that thumb-based interaction on virtual keyboards showed a 30% drop in throughput, as well as a significant drop in speed and accuracy. Furthermore, thumb-based interaction had lower stability in hand gripping [97]. Despite apparent drawbacks of thumb-based interaction, users prefer using it [98]; perhaps thumb-based interaction freed the other hand from the screen to attend to other events [99]. A few studies looked into designs for thumb-based interaction and found that there were four factors that impacted accuracy of thumb-based interaction: the size of the key, key location, thumb length, and user age [100, 101]. Similar to index finger interaction, input accuracy of thumb interaction increased as the size of the key increases, and the key must be located within the areas that can be easily reached by a thumb, which were the bottom-left, the center, and the upper-right area [100]. Thumb coverage area was also influenced by users’ thumb length and their age. Older users and users with longer thumbs were likely to leave unreached space around the bottom-right corner and the bottom edge of the screen [101]. This suggested consideration for positioning interactive elements for generic and older users. The studies, however, did not discuss handedness and thumb lengths of different ethnicity.

Besides effects of finger and thumb, other aspects of user factors were examined. Major interest was on elderly users. Usability assessment and accessibility issues have always come after technology. Seemingly, there is a necessity of establishing design guidelines for elderly users, as it was reported that elderly users faced difficulties in using mobile phones as the phones were not properly designed for them [102]. To tackle difficulties, there were applications that modified default interface into a more accessible and friendly interface for elderly users. Diaz-Bossini and Moreno [87] compared sample interface-modifying applications against accessibility guidelines, but they found that the applications did not meet requirements for accessibility. The study was, however, based on accessibility guidelines for websites (e.g., W3C, WDG) as there was a lack of guidelines for mobile context [87]. A set of design recommendations for elderly users was presented by De Barros et al. [88]. The recommendations covered navigation, interaction, and visual design, but the recommendation did not address specific differences between desktop and mobile devices. Moreover, they were based merely on observation [88]. This illustrates the need of empirically based guidelines to assist designers in designing accessible applications in mobile context.

More studies were carried out to assess usability of the existing input methods. Stößel [103] compared younger and older users on gestures with variation in familiarity (i.e., familiar versus unfamiliar gestures). In general performance, older users performed accurately as younger users; however, the older users were significantly slower (1.3 times slower) and less accurate with unfamiliar gesture [103]. This suggests consideration for choosing gesture and specifying gesture time-out time for older users. Text entry is another challenging task for elderly users. The lack of haptic feedback and small key size make it harder for the elderly to accurately select targets [104]. Several input controls, such as autocompletion, word prediction, drop-down list, and using locally stored data, are adopted from desktops to facilitate manual text entry [7]. However, the input controls were not as efficient as on desktops. Rodrigues et al. [104] presented five keyboard variants to support manual text entry. These variants were different in color, width, size, and touch area of most probable letters or displaying predicted words. Although all variants slightly improved input errors, there were variations in their efficiency. Color, width, and predicted word variants were more visually distracting, and they were slower than size and touch area variants and QWERTY keyboard. This suggested consideration for choosing appropriate keyboard variant and text-entry support for elderly users [104]. Input usability assessment studies for children users were rarer. A study by Anthony et al. [89] investigated usability of visual feedback for adult and children users. They found that participants of both age groups seemed confused by the absence of feedback, but the results were magnified for children [89]. Anthony et al.’s study [89] was one of a few studies that investigated children users and input on mobile devices. Yet, many areas were left unexamined for children users, and it could be an opportunity for future research.

Besides age differences, the research focus was on users with disorders or disabilities. The most popular topics were in users with blindness. The lack of tactile buttons obstructed blind users in locating interactive components and inputting commands. A common practice is to use audio augmentation techniques, such as voice-over (a.k.a. screen reader) and speech recognition [90, 91]. However, audio augmentation techniques can be interfered with by background noise [90], and the performance of audio augmentation techniques is also influenced by algorithm recognition accuracy. Recent studies have designed and developed a gesture-based set of commands [90] and tangible bendable gestures for blind users [91]. The studies highlighted that the gestures designed for blind users should be logical and easy to learn and remember, as blind users rely much on their memories [91]. Other topics on user factors include users with upper extremity disabilities [105], users with ALS [106], and users with Down’s syndrome [107]. This group of users face difficulties in precisely controlling their hands; thus, designers should consider selecting simple gestures (e.g., tapping) and flexible error handling and avoiding gestures that involve a great degree of hand-eye coordination (e.g., dragging and rotating).

A few studies looked into novice users. Mobile input methods could spell trouble for inexperienced users. Standard QWERTY keyboard bombarded users with many keys, and touch gestures had no standards or guidelines to show the users what they could do or how they could interact with the systems [92, 93]. Geary [93] proposed alternative keyboard layouts to assist novice users. The more frequently used characters, based on MacKenzie and Soukoreff [108] and NetLingo.com [109], were arranged closer to the center of the keyboard, as it was the area that can be easily reached when users used one or two thumbs to type. However, the results of the experiments in Geary’s study indicated no significant improvement from standard QWERTY was found. Lundgren and Hjulström [92] proposed visual hinting for touch gestures. However, the idea of visual hinting was not empirically verified, and it was not tested whether visuals were the best way to hint interaction [92].

Apart from user factors, external factors also influenced input efficiency. Durrani [110] found that environmental condition, cognitive load, and communication load had effects on input efficiency.

Eye-free interaction was another research interest. Besides the absence of tangible buttons, environmental contexts of use of mobile devices were also different. Desktop computers were stationary, whereas mobile devices were ubiquitous. When users used mobile devices, they may simultaneously move or do other activities. This could turn input and selection into demanding tasks. While users needed to focus on mobile screen which required high visual attention, they also needed to pay attention to their environment at the same time [111]. Ng et al. [112] found that input accuracy for tapping interaction dropped to 65% while users were walking and to 53% while they were carrying objects. Input accuracy for tapping was noted as the highest among other touch gestures. Eye-free interaction can be optimal solution to increase accuracy. Nevertheless, there were no empirical studies that may lead to establishing design guidelines for eye-free interaction. Touch screen interface is also gaining popularity in in-car interactive systems. This can be a great design challenge. As stated, a touch screen highly demands visual attention; however, when using in-car touch screen, the touch screen can minimally distract user (i.e., driver) from the main task which was driving. Otherwise, it could lead into an accident. Louveton et al. [111] assessed three different interface layouts and interaction: binary selection (e.g., yes/no), list selection, and slide bar. The results indicated that the binary selection was most efficient and demanded the lowest eye fixation, whereas the slide bar was least efficient and demanded the highest eye fixation [111]. However, more usability studies are needed to identify appropriate layouts and interaction for in-car interactive systems.

A form input can be a design challenge, as it can be too complex to display or to navigate on a small screen. There were only few studies that compared different input forms. Balagtas-Fernandez et al. [113] assessed two layouts (i.e., scrolling list and tabs), two input methods (i.e., keyboard and modal dialogue), and two menu designs (i.e., device menu and context menu). The results indicated that the scrolling, modal dialogue, and the device menu were more efficient [113]. El Batran and Dunlop [114] compared two form navigation methods: tabbing and pan and zoom. The results showed that the pan and zoom technique was more efficient. Nevertheless, there are more styles of input forms and navigation techniques that can be subjected to usability assessment.

Alternative input methods were another research interest. The main objective of the studies in this category was to propose novel techniques to improve input accuracy. As the key size was very small, finger occlusion usually occurred. One solution to compensate finger occlusion was the regional correction. Regional correction was a dictionary-based predictive text-entry method that activated not only the intended key but also neighboring keys. This method selected valid words available in a dictionary for automatic input correction. A study found that the regional correction method reduced time and the number of touches required to complete text entry, but only when the keys were small (i.e., 18 pixels). No significant differences were found between using and not using the regional correction when the keys were large (i.e., 26 and 34 pixels) [115]. Some novel techniques were also proposed to deal with input imprecision. Koarai and Komuro [116] proposed a system which used two cameras in combination with a touch panel to track user input. The preliminary experiment revealed a lower number of errors when the proposed technique was used, comparing to nonzoomed text entry. However, the proposed technique required the installation of additional equipment [116]. Some mobile gears, such as a smart watch, had a very compact-size screen; thus, entering text from such devices is even more difficult. Oney et al. [79] proposed an interaction called zoom-board to enable text entry from ultrasmall devices. The proposed technique used the iterative zooming to enlarge tiny keyboard to comfortable size. The preliminary experiment showed promising input rate from zoom-board interaction [79]. Some other novel techniques include lens gestures [117], multistroked gesture [118], ambiguous keyboard input [119, 120], effect of key size [115], and five-key text-entry technique [121]. Nevertheless, these novel techniques required empirical evaluation, to validate their usability with collected evidence.

7. Findings

To recapitulate, this article seeks to answer two research questions:  RQ1: in each area, what factors were concentrated?  RQ2: what areas of mobile user interface design patterns had insufficient information?

This section elaborates the findings from surveying the literature.

Table 4 shows the information about page composition research. The range of research on page composition since 2007 was narrower than before 2007. The concentration on this area was whether limited screen size affected menu usability, efficiency, user preference, and satisfaction. There were several topics that were unexamined by experimental studies.

Table 5 shows the information about display of information research. The range of research since 2007 was wider than before 2007. However, the topics were still very limited. The concerns in this area were if limited screen size affects list access, efficiency, selection errors, and satisfaction. Several topics were unexamined by experimental studies.

Table 6 shows the information about control and confirmation research. There has been no research on control and confirmation. There were several topics that were unexamined by experimental studies. This demonstrates a huge research gap in this area.

Table 7 shows the information about revealing more information research. There has been no research on revealing more information. There were several topics that were unexamined by experimental studies. This demonstrates a huge research gap in this area.

Table 8 shows the information about lateral access research. There has been no research on lateral access. There were several topics that were unexamined by experimental studies. This demonstrates a huge research gap in this area.

Table 9 shows the information about navigation research. The range of research topics since 2007 was wider than before 2007. However, the topics were still very limited. The major concerns in this area were whether content navigation was affected by screen size and how to tackle the demand for visual attention in navigation, efficiency, selection errors, and satisfaction. There were several topics that were unexamined by experimental studies.

Table 10 shows the information about button research. The topics of research since 2007 were greater than before 2007. The concerns in this area were to simulate realistic feeling of physical buttons on touchscreen. The factors of interest include user preference, experience, accuracy, errors, efficiency, exerted force, impulse, and dwell time. There were several topics that were unexamined by experimental studies.

Table 11 shows the information about icon research. The major concerns in this area were influences of cultural and age differences on icon interpretation, aesthetic qualities of icons, and touchable areas of icons. The factors of interest include icon recognition and interpretation.

Table 12 shows the information about information control research. The major concerns in this area were how small screen size of mobile devices affects zooming, searching, and filtering. The factors of interest include efficiency, effectiveness, and precision.

Table 13 shows the information about input mode and selection research. The range of research topics since 2007 was wider than before 2007. The factors of interest include input accuracy, efficiency, errors, key size, touchable area, location of interactive elements, and eye fixation.

8. Discussion, Conclusions, and Limitations

Mobile platforms have called for attention from HCI community. Although there are several studies investigating dimensions related to mobile user interface, a standard of mobile user interface design patterns has not been established. This current article provides an overview of the existing studies on mobile UI design patterns and covers altogether 10 different categories.

8.1. Discussion

The research on page composition (menu) was quite narrow. Since 2007, the topics included usability assessment of 2D and 3D menus, adaptive menus, influence of cultures on item categorization scheme, and influence of aging on menu navigation. The primary concern was whether the limited screen size affected menu usability. The factors of interest included menu efficiency, user preference, and satisfaction, as it is important for users to promptly select the target menu item and complete intended tasks in timely manner. This positively affects users’ preference and satisfaction towards the system. In menu navigation study, verbal memory and spatial abilities were also subjected to investigation, as they were related to navigation performance. The review showed that data from menu research are insufficient to establish guidelines for mobile menu patterns. Empirical-based knowledge of what type of menus should be used in what context is still lacking. Many important elements of menu composition were unexamined, for example, menu depth and breadth, item ordering, task complexity, and assessment of other menu layouts. Other user groups with unique needs, such as children and user with disabilities or disorders, were also uninvestigated.

The research on display of information was limited and covered only a few areas. The research included usability evaluation of list scrolling styles and different list patterns (i.e., fisheye and vertical list and grid and vertical list). The key issue was whether list access and usability were affected by a limited screen size. A novel list scrolling technique was also proposed. The factors of interest were efficiency, selection errors, and satisfaction, as it is important for users to promptly access the target item with minimum errors. This positively affects their preference and satisfaction towards the system. The review showed that empirical data are not sufficient to draw a guideline for display patterns of information. Other list layouts and possible effect of number of items are left unexamined. Moreover, the number of participants in the research was considerably low. Other user factors that may have potential effects, such as elderly users, children, and user with disabilities, were not studied. Clearly, the knowledge of what type of display should be used in what context and for which group of users is still lacking.

There has been no research on control and confirmation, revealing more information, and lateral access categories. These categories are important design elements on mobile devices. The primary function of control and confirmation is to prevent errors, especially user errors. There is an enormous knowledge gap which needs to be filled. For example, error message design cannot be directly adopted from desktop platform; they must be adjusted to fit small size dialogue. Touch screen is also prone to user errors, in particular with users that have difficulties or have not fully developed the control of their fine muscles (e.g., the elderly, children, and user with upper extremity disabilities). Error prevention and error recovery mechanisms needed to be designed for these groups of users. The function of revealing more information is to display larger information for users. With limited screen size, adopting information revealing techniques from desktops can be ineffective. Moreover, the knowledge of what revealing techniques should be used in what context is still lacking. Nevertheless, these issues have not been empirically examined. Lateral access is another important design element. Some examples of lateral access are pagination and tabs. Lateral access provides a faster access to intended information and reduces the use of long lists. With limited screen size of mobile devices, it is still unexamined whether adopting lateral access techniques from desktops is practical.

The research on navigation (links) was limited and covered only some areas. The research included previewing content of web pages, gaze tracking, and designing aural interface. The key concerns were motivated by limited screen size and high demand for visual attention. The factors of interest were efficiency, accuracy, and navigation experience, since it is important for users to accurately and promptly access the target link and find intended information as quick as possible. This positively affects their experience of using the system. More empirical studies are needed to establish guidelines for navigation on mobile screen. Other user factors that may have potential effects are also needed to be examined.

The research on buttons was motivated by the lack of physical response and tactile feedback. The lack of tactile feedback makes users unconfident of their actions which consequently deteriorates system usability. Thus, the primary objective was to simulate realistic response of physical buttons. The research topics included characteristics of response that gave realistic feeling of buttons, latency of response, and usability of different feedback modalities. Unlike other categories that focus on efficiency, the factors of interest of button research primarily concern user preference and experience since it is important for users to experience the realistic response that resembles physical button. Some other studies looked into spatial design of buttons (i.e., button size and spacing), in order to find optimal design that needed less visual attention and match the fine motor abilities of users. The array of factors of interest include accuracy, errors, and efficiency for generic users and exerted force, impulse, and dwell time of pressing for users with fine motor difficulties.

Unlike other categories, the research on icons was almost platform-unspecific. The topics heavily focused on influence of age and culture on icon usability. The factors of interest were icon recognition and icon interpretation, as it is crucial for users to correctly identify and select the right function that they want. Senior users faced greater problem recognizing and interpreting icons; however, it was due to technological inexperience. It was found that, regardless of culture or age, the factors that contribute to icon usability were icon concreteness, low visual complexity, close semantic distance, user familiarity with icons, and sensible labelling. More studies examined visual qualities of icons, namely, color combination, shape and size of icons, and their influence on icon usability. Only icon study can be regarded as mobile-specific. The study examined optimal touchable area of an icon since it is important for users to select the intended icons, without activating neighboring functions.

Information control encompasses zooming, searching, and sorting and filtering. The research topics were influenced by limited screen size of mobile devices. Studies on zooming included evaluation of different zooming methods and zooming gesture performance of children users. The factors of interest of evaluation study concern efficiency and effectiveness as it is important for users to be able to zoom in and out and promptly select the target item and complete intended tasks in timely manner. The factor of interest of zooming and children study concerns only accuracy, but not efficiency. For children users, it is more important for them to understand gestures and accurately use their hand to do gestures than timely finish their task. Children users have exploratory behaviors; thus, measuring efficiency does not match their behavior. Studies on searching were new searching techniques, including semantic search, context-based search, and gesture-based search. The factors of interest were efficiency and precision, as it is important for users to quickly search for information from accurate and relevant search results. A new idea was proposed in sorting and filtering category; however, the idea was not demonstrated or verified.

As stated, input mode and selection contribute the highest number of papers; thus, the research topics were considerably diverse. The topics were motivated by limited screen size of mobile devices. The first area of topics concerned effects of finger and thumb on input accuracy. Although some mobile models were equipped with a stylus, users prefer using their finger. As the key size is small, finger occlusion often occurs. The factors of interest were accuracy, efficiency, and errors, since it is important for users to promptly and precisely supply input with minimum errors. Other factors include key size, touchable area size, and location of interactive elements as they also contribute to input accuracy and efficiency. However, no studies considered potential factors that would affect touch accuracy, such as handedness, and finger and thumb length of different ethnicity. The second area of topics concerned user factors. The key issue was to study whether and how user characteristics affect input. User groups that were included in the studies were mainly elderly users, blind users, and users with upper extremity disabilities or difficulties. Only one study focused on children. The factors of interest are accuracy and efficiency because it is important for users to promptly and precisely supply input. The third area of research focused on novice users. Mobile devices bombard novice users with many input keys and touch gestures are not visible. The factors of interest are accuracy and efficiency because it is important for novice users to quickly learn the system and precisely supply input. The fourth area concerned external factors. It was found that environmental condition, cognitive load, and communication load affect input accuracy and efficiency. The fifth area concerned eye-free interaction. The topics in this area were motivated by high demands for visual attention, and mobile ubiquity. Without physical buttons, users cannot rely on their touch to locate interactive elements. Moreover, users could attend some other activities (e.g., walking, carrying objects, and driving) while simultaneously using mobile devices. As a result, users cannot always fix their eyes on the screen. The factors of interest included accuracy, efficiency, and errors because it is important for users to promptly and precisely supply input with minimum errors. For in-car interaction, eye fixation was also a factor to study, as the interface cannot distract users from driving. However, more evaluations are needed to find out which input layouts and interaction are suitable for in-car interaction. The sixth area concerned complex input form, as an input form can be too complex to display on a small screen. Only a few studies examined and compared input forms. The factors of interest included accuracy, efficiency, and errors because it is important for users to quickly and correctly supply input with minimum errors. The last area of research topics concerned alternative input methods. The objective of the research in this area was to propose novel techniques to compensate input accuracy. Only some of them carried out experiment to assess the proposed techniques. Similar to other areas, the factors of interest included accuracy, efficiency, and errors because it is important for users to quickly and correctly supply input with minimum errors. Nevertheless, the proposed techniques still require empirical evaluation.

8.2. Conclusions

The review was made on 68 papers. Input mode and selection contribute the highest number of papers—27 papers. There were no papers discussing the designs of mobile user interface on three categories—(1) control and confirmation, (2) revealing more information, and (3) lateral access. Early research on mobile user interface was made with engineering approach, for instance, proposing new techniques, new interaction styles, and prototyping. Since 2010, the focus has gradually shifted to usability evaluation of design patterns and to studying user factors (e.g., age, culture, and disabilities).

To recapitulate, the review clearly shows that touch screen is the major factor that forms research directions of mobile user interface. Important touch screen qualities that shape research directions are limited screen size, lack of physical response and tactile feedback, invisible gesture, mobile ubiquity, and high demand for visual attention. The review also showed that there is an enormous knowledge gap for mobile interface design. There are some categories where no research can be found, despite their importance to mobile interface and interaction design. Several categories have insufficient empirical-based data to establish a solid design guideline, and there is still a need to assess more factors that influence its usability.

8.3. Limitations

During the review, inconsistency in terminologies used to refer to each design element was common. For example, list is also referred to as linear or vertical menu, and grid menu is also referred to as table-based menu. All papers with different terms that were considered by the authors of this article are included in the review. However, some papers may be missing due to the use of different terms.

Conflicts of Interest

The authors declare that there are no conflicts of interest regarding the publication of this paper.