Categorizing mobile user interface patterns using EFA

A mobile user interface is a specialized form of a user interface as it runs on mobile devices which has some limitations. It must be designed in a simple and engaging appearance. There is a guideline available that consists of eleven specific patterns of mobile user interface design to achieve this objective. This paper aims to regroup these patterns into smaller groups so that there is a simpler guideline. To do so, the Exploratory Factor Analysis (EFA) approach is being used. The result shows that the eleven patterns could be grouped into four categories. These categories depict the spectrum of mobile user interface design from mandatory to optional. A prototype is built based on this categorization.


Introduction
The mobile application has several characteristics that differentiate it from a conventional PC-based application. These kind of application are popular in several areas such as traveling [1], healthcare [2], [3], and e-commerce [4], [5]. The interaction between user and application takes places in a fast and limited environment. This is mainly because the mobile hardware is smaller as a trade-off to mobile ability, especially the screen size of the device [6], [7] and the battery size [8]. Moreover, it becomes a means to support people doing their task every day [9]. However, there are some advantages of a mobile application. According to [10], mobile applications have main characteristics such as pervasive, useful, affordable, personal, and context-aware. It also becomes a means to deliver contents and functions of mobile applications [4].
Mobile User Interface (MUI) is an interface of an application that runs on mobile devices. The application itself will operate the mobile devices in terms of its hardware [9]. Designing mobile application, including the interface, requires different pattern than the other type of application. Based on previous research [11], Mobile User Interface (MUI) should be simple, consistent and requires less user cognitive ability. In addition, any content that displayed on the screen should be the most important one to the user [7]. This will allow the user to finish their task quickly. It should be developed so that the user can interact easily, naturally, and engaged in the application [12]. Moreover, a well-designed user interface is directly correlated with the application's usability [4].
In [7] the interface of a mobile application is characterized by eleven patterns which are Vertical Stack, Filmstrip, Touch Tools, Bottom Navigation, Thumbnail-and-Text List, Infinite List, Generous Borders, Text Clear Button, Loading Indicators, Richly Connected Apps, Streamlined Branding. The aim of this paper is to categorize these patterns further so that there is a simpler understanding of the patterns which will, in turn, assist the developer in focusing the work of mobile user interface development. Exploratory Factor Analysis (EFA) is used to categorize the already known mobile user interface pattern. It is a common tool to reveal the unknown characteristics or factors from the known one [13].
This paper consists of five sections. After the introduction part, section two covers literature review about the development of a mobile user interface based on previous publications. Section three describes the methods employed in this research. Section four explains the research results followed by section five that will end this paper with concluding remarks and future works.

Related Works
Mobile devices are becoming a popular tool that has been used to finish various daily task [14]. A mobile application needs to appear beautifully in a mobile device [15] even though there is some limitation regarding to screen size, battery life, processing power, and memory capability. A good application design could increase the user's engagement in terms of social interaction and experience [1]. In addition, the websites or applications that run on the mobile devices should be able to provide various information in a various form regardless of the limitation. The mobile user interface is a part of a mobile application. Its function is crucial in terms of the interaction of the application with the user. The design of a mobile user interface becomes more complicated as the variety of contents and functions are increasing [4].
In [6] the pattern of a mobile user interface is divided into three main dimensions, i.e. utilizing screen space, interaction mechanism, design at large. Meanwhile, other works are categorizing mobile devices based on CPU, communication resources and LCD usage [8].
From the literature [7], it has been known that there are eleven patterns that specifically characterized mobile user interface, i.e. Vertical Stack, Filmstrip, Touch Tools, Bottom Navigation, Thumbnail-and-Text List, Infinite List, Generous Borders, Text Clear Button, Loading Indicators, Richly Connected Apps, Streamlined Branding.
Vertical Stack means that all the elements in the interface should be arranged in a vertical order to anticipate the various screen width of mobile devices. Filmstrip means that all elements containing the same kind of information should be arranged horizontally in multiple pages. Touch tools mean that the interface should only expose the touch interaction elements in order to help the user focus on the elements.
Bottom navigation means that the main application navigation menu should be arranged at the bottom of the screen. This is quite different with the PC-based application or website that placed the main navigation on the top of the page. Thumbnail-and-text List means that the element chosen by the user should have an image as a thumbnail to represent the text related to the element.
Infinite list means that all the elements that categorized in one group should be arranged infinitely vertical. Generous borders mean that every element should have enough space in its surrounding to separate it with other elements so that user can easily identify and interact with those elements. Text clear button means that the application should provide a button to delete all the contents in the textbox.
Loading indicators means that the application should show a loading sign when a particular element is being downloaded. This will help the user to know that application is still working to perform a task. Richly connected application means that the application should be able to interact with other application by providing an initial and basic data during the interaction process. Streamlined branding means that every identity element should in a small size so that it can be loaded and appear quickly in order to help the user easily recognize the application.

Methods
Ten groups of observer consist of 4-5 people each is taking a role as examiner of the mobile appearance of popular sites. There are 32 sites that have been visited. Most of the sites are social networking sites and news portal.
These websites are then being analyzed by observers to identify whether they have characteristics of a mobile user interface or not. The evaluation is based on mobile user interface pattern published in [7]. After examine and interact with the mobile version of the application, the observers than decide the existence of patterns. If the pattern exists, they will score the websites with 1 value, otherwise 0.
After that, we held an exploratory factor analysis (EFA) to categorize the eleven factors into several groups. There are five steps in EFA as adopted from [16] and depicts in Figure 1.

Figure 1. Steps of EFA
According to [16], the first step of EFA is the evaluation of the data. This is mainly a process to determine whether the data is appropriate for EFA analysis. The data will be examined using KMO (Kaiser-Meyer-Olkin) and Bartlett's Test. KMO evaluates the correlation between an item with another item in EFA. The score of KMO is between 0 and 1. The bigger score indicates the stronger correlation between the particular item with another item. The KMO test is supported by Bartlett's Test that evaluates the relationship's strength among variables. The significance score of Bartlett's Test should be less than 0.05 that shows that there is a strong relationship.
The second step is factor extraction. This is the main process of EFA. The result from this phase is a new model of categorization. In this research, the principal component analysis is employed as it is the most used method. The third step is factor retention. The objectives of this phase is to determine which factors are maintained for the next step with the cumulative percentage of variance test.
The fourth step is a selection of the rotational method. This step aims to identify the correlation between a variable with more than one construct. The most used method for this step is the Varimax rotation. Finally, the last step is the interpretation which labeling the group of constructs from the EFA process. All the process is done by SPSS.

Result and Discussion
This research used 32 data as a source for EFA analysis. Based on KMO and Bartlett's Test, this source is adequate for EFA. As depicted in Table 1, the score of KMO reaches 0.579. The minimum KMO value allowed to run EFA is 0.5 [16]. The score is relatively low since it is close to the minimal value. However, it is still enough to run EFA. The Bartlett's Test shows a significance score that less than 0.05. Thus, there is a strong relationship between variables under evaluation of EFA. After six iterations of EFA using SPSS 16, there are four groups of mobile user interface patterns coming up as depicted in Table 2 that will labeled and interpreted in the following section. Each pattern is categorized based on the highest loading factor within a group.  The EFA result is returning four groups of user interface pattern. Group 1 consists of four patterns, i.e. vertical stack, bottom navigation, generous borders, and streamlined branding. Group 2 consists of four patterns, i.e. filmstrip, touch tools, thumbnail-and-text list, infinite list. Group 3 consists of two patterns, i.e. text clear button, loading indicators. Group 4 consists of one pattern, i.e. richly connected applications.
Based on the result above, these four groups could be seen as the design spectrum of user interface design.

Figure 2. The spectrum of MUI design
As depicts in Figure 2, the spectrum spans from mandatory in Group 1 to optional patterns in Group 4. Mandatory means that the patterns should be adopted in the application interface while the optional means that the pattern is adopted when it needed only.

Case Study
A case study is conducted to implement the result from the previous section. A prototype of a mobile application was built based on four new categories. The development of the prototype is focusing of the design of mobile user interface and to put the required elements in an appropriate way. The application that was built here is mobile learning. It has several main features which include downloading course material, monitor the announcements, doing online quizzes and also monitor their score.
The development of the prototype is divided into four phase. Phase 1 consists of four activities, i.e. designing all elements in a vertical stack, put all the link of main navigation in a bottom of the screen which is in a fixed position. Then, make sure to spare enough space for the finger to click on the required elements. Finally, put the application logo on small-sized elements. The result of phase 1 is depicted in Figure 3.   Figure 3. The user interface from step 1 (Overall look) Phase 2 consists of the design of similar screen that must be displayed parallel in filmstrip format, provide a prioritizing interface on touch elements, put a thumbnail on the side of each text element to help the user better understand the element, and finally create the infinite list of contents. The result from this phase is depicted in Figure 4.  The last phase is to connect the application with other application by capturing and exchanging basic application data, such as user profile. This could be done by utilizing embedded phone feature as a hub between applications. The design from this phase could be seen in Figure 6.

Conclusion
Mobile user interface design needs a different approach than conventional PC-based application. The main constraint of the design is the devices' screen size. Moreover, it needs to be simple so that the content to appear can be loaded quickly. According to EFA process conducted in this research, there is a spectrum of mobile user interface design from the most mandatory features to the optional features.
Future research will be done on expanding the application under evaluation. There are various categories of application that will enhance the analysis result. Moreover, the study could be done to make an inquiry regarding the effect of a well-designed mobile user interface on the usability of the application as a whole.