- 578 - 978-1-4799-5376-9/14/$31.00 ©2014 IEEE

Mobile Interface Studies about Style Description and Influential Factors

LI Yao，WANG Xin-yi School of Economics and Management, Beihang University, Beijing 100191, P.R.China

Abstract: The interface of smart phone is essential

to users’ experience. This paper focuses on the interface style and proposes a qualitative method that can assess the interface style. Firstly, the interface style of smart phone is defined. Secondly, an interview survey is conducted to find out main factors that influence the assessment of interface and 5 influential factors are summarized. It is suggested that the 5 factors should be paid more attention to improve the products’ interface. During the interview, it is found that some words are frequently used in the description of interface style. Finally, to find out these words, a questionnaire survey designed based on Microsoft’s Product Reaction Cards is carried out to describe the mobile phone’s interface style. From the questionnaire survey, an aggregate of 31 proper words is proposed to describe the interface style and categorized into 3 groups. The relationship between these words and factors should be studied further.

Key words: interface style, interview experiment, questionnaire, user experience 1 Introduction

Mobile interface is an essential medium for information transmission between users and mobile phones for successfully performing various tasks, especially with the upsurge of the amount of smart mobile phone. User interface, usually called human-machine interface, is the manipulate interface between users and machines [1]. A good user interface is artistic and understandable together with easy manipulation and guideline which can make users enhance their interests and efficiency [2]. A mobile phone usually has two types of user interfaces that are solid user interface (SUI) and software interface. SUI, also called entity interface, can be touched, seen and even felt, keys and screens included in this type. While what the screen reflects mainly depends on the software interface which are consistent of graphical user interface (GUI) and voice interface [3]. Nowadays, there are more and more smart mobile phones with large screen. As a result, the user’s visual focus is mainly concentrated on the screen. Especially after the application of touch-screen technology, the information input and output are integrated into the screen, which lead the user’s manipulation and access to information involved with the screen, especially the software interface [4]. In this

research, our definition of interface style is mainly based on GUI, which is the mutual transmission of information media between users and the mobile phones.

User interface style is vital in UI design. In Hasan B & Ahmed M U’s research, interface style is treated as an external factor in TAM (technology acceptance model) to examine its effects on behavior intention to accept and use a system and findings showed that interface style had direct effect on behavioral intention to use the system [5]. Thus, interface style is much related to a satisfactory using experience. To define the mobile phone interface style studied by us, we cited the definition of the website interface style. Sui Yong defines the interface style of the website as the overall experience the website brought to the visitors. This abstract concept can be affected by the color, graphs, text combined with the layout, guideline and the interactive mode of the website. He also believes that the interface style is a combination of content and form as well as the designers’ subjective ideas and the website’s objective characteristics. It is easy to feel but difficult to describe [6].

We define the mobile interface style as the overall feeling a mobile phone, especially what the screen presents. The feelings may be influenced by the mobile phone’s usability and aesthetics. Our research mainly wants to figure out the most essential factors that influence the evaluation of an interface style and which words can be used to describe different factors. 2 Literature review

Mobile phone consumers have various demands for the smart phone both in functions and designs while manufactures are trying their best to meet consumers’ requirements. However, the development phase of mobile phones is relatively short compared with consumer appliances. As a result, to minimize the designers’ effort, some evaluation methods are needed to be applied in the design process [7]. There are many experiments and researches about the evaluations or guidelines for the interface designing of both website and mobile devices. Chun Cheng Hsu uses principal component analyses method to analyze his experimental data and concludes the emotional factors and the functional factors that affect users’ evaluation of a website. Both factors should be paid attention during the design, but put different emphasis on different styles,

2014 International Conference on Management Science & Engineering (21th) August 17-19, 2014 Helsinki, Finland

- 579 -

examples are given in the research [8]. Wonkyu Park proposes a systemic approach to develop comprehensive guidelines for user interface of a mobile phone, having taken usability principles, common UI components and guideline properties into consideration [9]. While Jeongyun Heo focuses on the usability and he proposes a framework, including indicator level, criteria level and property level, which is on the basis of a multi-level, hierarchical model of usability factors, in an analytic way, for evaluating the usability of a mobile phone [10]. Ting Zhang’s research mainly aims at the relation between user’s subjective perceptions and the usability of mobile phone to find out the most important factors for indicating overall perceived usability and how they contribute to the overall usability. Finally the research comes up with an innovative instrument for explaining and measuring the usability of handsets based on the result of survey studies analyzed using principal component analysis and equamax rotation method [11]. Yong Gu Ji’s studies are much easier to be put into practice and the result of the research is a “must-have usability” checklist that enables UI practitioners to evaluate software UI design with an enhanced traditional approach and explore potential usability problems comprehensively from a holistic perspective [12].

While usability is commonly focused, there are some researches concerning about the interface aesthetics. Antonella De Angeli’s research uses menu-based web interface and metaphor-based interface to test six sections’ relation with the web preference, while aesthetic appreciation is included. The results show all the six main sections are with high reliability. During this experiment, aesthetic is classified into two type: classical aesthetics and expressive aesthetics and the results show that metaphor-based interface is preferred on expressive aesthetics and rated as more engaging [13]. Kurosu‘s experiment has also proved that the user may be strongly affected by the aesthetic aspect of the interface even when they try to evaluate a mobile phone from functional aspects [14]. Besides, there are also some research studied the relationship between usability and aesthetics. For example, in Alexandre N. Tuch’s experiments, participants used on of four different versions of the same online shops, differing in interface aesthetics (low vs. high) and interface usability (low vs. high) to do the same task and the rate the online shop. The results show that the users’ affective experience with the usability of the shop might serve as a mediator variable within the aesthetics-usability relation [15].

However, the research about the evaluation of mobile interface style from a comprehensive view, taking both usability and aesthetics into consideration, and how the evaluation comments are formed is inadequate. This study aims to summarize the major factors that influence users’ evaluation from users’ real comments and what adjectives are suitable for describing interface style. It is hoped that this research could serve as future references when designing new visual styles and provide valuable insights for phone designers and developers to select a

proper style based on users’ evaluation and their own products’ nature.

Study one aims to find out factors that influence the evaluation of interface style through users’ interview. 3 Study one: interview experiment 3.1 Method introduction

Interview is an effective method in user experience design research which is often used together with other methods [16]. In this stage, we used interviews with users to gather the first-hand information when users commenting on an interface style. We conducted this experiment in a laboratory. During participants’ descriptions, we wrote down the points related to the interface styles no matter the comments were positive or 3.2 Procedure

In this part we showed the participants 6 different pictures representing 6 different interface designs and each picture was made up of 8 mobile phone’s typical using interface including the main screen, lock screen, dialing, contacts, contact list, message, on the phone, file manager. Then we let the participants comment on the picture as much as possible. Meanwhile we also raised some questions about the usability and aesthetics, such as “Why do you like or dislike this design”, “Which part of the design attracts you”, “Do you think it’s easy to use” “Is it a comfortable interface” to make participants say more.

3.3 Participants

There are total 104 participants involved in our experiment. The participants are mainly undergraduates and postgraduates from Beihang University. The participants are consisted of 50 percent of male and 50 percent of female whose ages range from 19 to 30 years old. They all have at least 3 months experience of using smart mobile phone.

3.4 Results

From the interview records, we coded 38 points, both positive and negative, mentioned during the interview procedure and calculate the times each point mentioned towards each interface design’s every typical using interface. The results show each design have good comments as well as bad ones, though these points are different, they can be concluded into several factors. To ascertain the factors, we held up a focus group to discuss what the factors should be, one teacher, two masters and one undergraduate involved. We exchanged the thoughts about the experiment process and analyzed the talking records.

Finally, we summarized five factors that influence the assessments of the interface. They are color matching, message layout, personal style preference, aesthetics of the interface, and information comprehension. The definition of each conception is shown in the Tab.1. These five factors are comprehensive, not only covering

- 580 -

usability, aesthetics together but also the personal attitude. As for the color matching, 110 comments are focused on whether interfaces are in the same color style. Meanwhile, 20 comments refer to the number of colors in one interface and incompatible colors in one interface. As for the message layout, participants care about the locations of some important keys and icons mostly, such as function keys and photo icons. They also consider the rationality of the whole screen’s layout. As for personal style preference, they judge a design by the overall consistency of the interface style (139 comments) and whether it is fit for personal taste (82 comments). 74 comments show that they expect designers should focus more on the aesthetics of some important interface elements. At the same time, 44 comments show that they care more about the entire aesthetics. The understandability of the shown message has been referred less than the other four factors. Some comments show that the understandability of an interface such as the size of the word and the meaning of the icons should be more considered. Besides, some parts of an interface should not be only for beauty but also show clear meanings.During the interviews, we found that when

describing the interface style, some words are commonly used to stress the same factor. For example, “consistent” is the mostly used word in the comments on color matching. When participants comment on the information and comprehension, some words related to using experience are preferred, such as “clear” and “smart”. Though there is a trend, none specific data was collected. In the next stage, we will explore the words suitable for interface style description. 4 Study two: Words questionnaire study 4.1 Method introduction

To find out the words suitable for describing interface style, we cite a method used by Microsoft Company to test the usability of a website.

For example, in order to solve the difficulty arises for getting user input on intangibles such as “desire” and “fun” in a formative usability tests, Joey Benedek and Trish Miner from Microsoft proposed a very different approach to capturing post-test subjective reactions to a product. They presented a set of 118 cards with

Tab.1 Summary of the interview experiment

Dimension Definition Components

Mobile Phone's Interface Style

Color Matching

The use of color should be reasonable which play a significant role on the user's cognition and emotion.

Maintaining the same color of the basic colors of the interface

Variety of the colors used

Information Layout

Phone interface design should prioritize the important elements that are frequently visited in a prominent position

Consistency of the layout of the same type of interface

Reasonable size and location of interface elements (function keys, icons, avatars)

Reasonable overall layout of the interface

Personal Preference of Style

The style of each interface as well as the elements should be consistent. The interface style needs to fit user’s preferences.

The consistency for the overall style

Consistency for the shape of the function keys

Consistency of each combination of images and text interface

Choice of the type of style

Aesthetics of the Interface

Interface elements including texts, icons, background images and others should be designed nicely.

Consistency for Icon design, avoiding excessive elements of visual confusion arising

Make users understand easily when using color to make information distinctive

Aesthetics of interface elements (text, icons, background images, buttons, avatars, etc.)

Aesthetics of the overall design

Information comprehension

Interface elements including text, icons and other should be easy-to-understand and they should meet the users’ habits.

Use of a reasonable font size, meeting with users' habits

Reasonability of the contrast between background and text color

Use of appropriate text spacing and line spacing

Clearness of the meaning of pictures and icons not just for decorating interface

- 581 -

containing adjectives (e.g. Novel, Fresh, Personal ) [17]. With consideration for removing the potential bias of giving positive feedback in the lab context, at least 40% of set consisted of negative words or phrases and tried to make the set cover a wide variety of dimensions. Each word was placed on a separate cue card and the set was given to the participant at the end of usability evaluations. The users would then simply select the words they felt described the system. They are free to choose as many or as few words as they wish [18]. The main advantages were that this technique does not rely on a questionnaire or rating scales and users do not have to generate words themselves. This method is not only a theoretical research achievement but also a method using in companies’ practical product test. In China, there has been experiment to measure clothing e-store visual style by the words description method [19]. Besides, MSN has used similar methods to test their newly-released MSN explorer and got some innovative design solution [20].

In this study, we aim to find out proper adjectives to describe the interface style of mobile phone which can be used in the similar test of mobile phone.

4.2 Pilot study: initial style reaction words

Our method is similar with theirs, but different in some degree. Firstly, we obtained some potential words for describing user interface style from Benedek and Minter’s Product Reaction Cards. Then, we also explored words from mobile phone’s propaganda to get possible words and phrases for using to labeling user interface style. Finally, with the method of team brainstorming and one focus group, we discussed the results above and then identified an initial words pool of interface style. In a summarizing, we get total 52 words (Tab.2), 13 of

Tab.2 Initial style reaction words

Accordant Crowded Gorgeous Plain

Advanced Elegant Handsome Poor Quality

Artistic Exquisite High quality Quality -focused

Business-related Fashionable Humanized Retro

Busy Flat Innovative Serious

Clear Flexible Leisure Sharp

Colorful Fluent Loose Smart

Consistent Fresh Low Special

Concise Friendly Metallic Stereo

Cool Fun Mild Sterile

Convenient Garish Novel Stimulating

Cute Gentle Old Svelte

Creative Graceful Organized Technology-r-related

them from the Microsoft’s Product Reaction Cards, 28 words from the brainstorming process and 11 from the phone advertisement. Then, to ascertain the appropriateness of these words, we design a questionnaire survey. Response to all survey items were recorded on a seven-point Likert-type scale from (1) strongly unsuitable and (7) strongly suitable. We are not only hand out the questionnaires directly, but also put them on the website. 4.3 Participants

We get 213 valid copies of the questionnaire in total, 65 from the website and 148 from the paper. There are 118 male and 95 female taking parts in our survey, ranging from 17 years old to 50 years old. They all have the experiences using smart mobile phones. The time span of their using ranges from a week to 4 years. Besides, their phones’ operating systems are multiple including Android, IOS, Windows phone and others, while the mostly used ones are Android and IOS. They were asked to read an introduction about the research first, and then complete an informed consent form before the questionnaires. Respondents were ensured that their participation was voluntary and their responses were anonymous. It took approximately 5 minutes to complete a questionnaire. 4.4 Results

To test whether the participants are seriously to the test or not, we put the same questions twice deliberately. Thus, we can judge it by their answers to the same question. If the answers have big differences, for example your first answer is 2 but the second one is 6, we believe he or she does not take this survey seriously. Through this method we wipe off 10 invalid copies of questionnaire. Then we calculate each word’s score and got their mean, mode, median score and other related index. We put all the words in a sequence by their mean score from low to high then the mode and median. As a consequence, there are some words whose mean, mode and median score are very low, in other words, they are top in the sequence. For example, the word “poor quality”, whose average score is only about 2.23, median score 2 and mode 1, sequencing at the top position. The consequence indicates that not all the words in our word pool are suitable for describing mobile phones’ interface style from users’ perspective. We also calculated the frequency a score is chosen during each word’s selection, such as the word “creative” has been scored as 7 for 37 times. We use each word’s average score, median score, mode score and the times selected in each score together with subjective judgment as criteria to select the final words to describe interface style. Finally, we get 31 proper words in total which can be seen in the Tab.3.

We use the criteria mentioned before as dimensions to cluster analysis using SPSS 20.0 with the selective words and they are made up into 3 groups, seen in the Fig 1.

- 582 -

Tab.3 Selected style reaction words

Accordant Elegant Gentle Organized

Advanced Exquisite Graceful Quality- focused

Artistic Fashionable Handsome Smart

Clear Flexible High- quality Special

Consistent Fluent Humanized Stereo

Concise Fresh Innovative Svelte

Convenient Friendly Leisure Technology-related

Creative Fun Mild

These three groups are overall description, detailed

description and description related to using experience negative description. Each group only includes several words that we come up with at present and more words need to be added.

Fig.1 Three groups of words to describe interface style 5 Discussion

Our research stresses the interface style and the influential factors using a new method. The main purpose of this study is to help to create a perfect experience for users or at least give some tips for the designers while they establish their own design. The first experiment shows that users’ thoughts on mobile phone interface may be different from each other but there are still some common points that can be concluded as five factors. These five factors are comprehensive, not only covering usability and aesthetics but also the personal attitude. It is recommended that during a new interface design these five factors should be paid more attention to

achieve a high level users’ degree of satisfaction. How these five factors contribute to the entire interface style evaluation will be studied. From the consequence of the following experiment, we can see that the description of the mobile phone’s interface can be classified into different groups. However, even words are all suitable for describing mobile phone’s interface, there are differences between the various perspectives. In our study, we propose three groups but it cannot cover all perspectives. It offers the mobile phone designers a method to test whether the reaction of customers is fit for their product positioning. These results can be designed as a tool to examine a mobile phone’s interface degree of satisfaction based on specific test target. These results also can be used in selecting a proper interface style for their products based on users’ comments and evaluation together with their products’ nature.

We hope these two studies can provide interface designers some inspirations or tips and then users can enjoy a better using experience. Further study about the relationship between interface style description and influential factors should be done.

References

[1]Luo Shijian, Zhu Shangshang, Sun Shouqian. Human-computer interface design [M]. Beijing: Machinery Industry Press, 2002: 25-61. (in Chinese) [2]Davis F D, Bagozzi R P, Warshaw P R. User acceptance of computer technology: A comparison of two theoretical models [J]. Management Science, 1989, 35(8): 982-1003. [3]Zhu Yu, Wang Yi, Huang Haiyan. Visual language analysis and style design art study of mobile phone's interface [J]. Packing Engineering 2008, 28(12): 218-220. (in Chinese) [4]Zhu Yu.Visual language analysis and aesthetic individuation design study of mobile phone’s interface [D]. Xi’an: Xian University of Technology, 2008. (in Chinese) [5]Hasan B, Ahmed M U. Effects of interface style on user perceptions and behavioral intention to use computer systems [J]. Computers in Human Behavior, 2007, 23(6): 3025-3037. [6]Sui Yong. An analysis on the website visual genre [J]. Journal of Beijing Institute of Graphic Communication , 2008, 16(3): 69-72.(in Chinese) [7]Kallio T, Kekäläinen A. Improving the effectiveness of mobile application design: User-pairs testing by non-professionals [M]// Mobile Human-Computer Interaction-Mobile HCI 2004. Springer Berlin Heidelberg, 2004: 315-319. [8]Chun-Cheng Hsu. Factors affecting webpage’s visual interface design and style [J]. Procedia Computer Science, 2011(3): 1315-1320 [9]Park W, Han S H, Kang S, et al. A factor combination approach to developing style guides for mobile phone user interface [J]. International Journal of Industrial Ergonomics, 2011, 41(5): 536-545.

Overall description Detailed description

Accordant

Consistent

Innovative

Stereo

Svelte

Elegant Exquisite

Fashionable Fun

Gentle Leisure

Mild Special

Description related to

using experience

Clear Convenient

Creative Concise

Flexible Fluent

Friendly Humanized

Graceful Organized

Quality-focused

Smart

Technology-related

Words not contained in

the three groups

Artistic

Advanced

Fresh

Handsome

High quality

- 583 -

[10]Heo J, Ham D H, Park S, et al. A framework for evaluating the usability of mobile phones based on multi-level, hierarchical model of usability factors [J]. Interacting with Computers, 2009, 21(4): 263-275. [11]Zhang T, Rau P L P, Salvendy G. Developing instrument for handset usability evaluation: A survey study [M]// Human-Computer Interaction. Interaction Design and Usability. Springer Berlin Heidelberg, 2007: 662-671. [12]Ji Y G, Park J H, Lee C, et al. A usability checklist for the usability evaluation of mobile phone user interface [J]. International Journal of Human-Computer Interaction, 2006, 20(3): 207-231. [13]De A A, Sutcliffe A, Hartmann J. Interaction, usability and aesthetics: What influences users’ preferences? [C]// Proceedings of the 6th conference on Designing Interactive systems. ACM, 2006: 271-280. [14] Kurosu M, Kashimura K. Apparent usability vs. inherent usability: experimental analysis on the determinants of the apparent usability[C]// Conference companion on Human factors in computing systems. ACM, 1995: 292-293. [15]Tuch A N, Roth S P, Hornbæk K, et al. Is beautiful

really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI [J]. Computers in Human Behavior, 2012, 28(5): 1596-1607. [16] Park J, Han S H, Kim H K, et al. Developing elements of user experience for mobile phones and services: Survey, interview, and observation approaches [J]. Human Factors and Ergonomics in Manufacturing & Service Industries, 2011. [17]Benedek J, Miner T. Measuring Desirability: New methods for evaluating desirability in a usability lab setting [J]. Proceedings of Usability Professionals Association, 2003: 8-12. [18]Albert W, Tullis T. Measuring the user experience: collecting, analyzing, and presenting usability metrics [M]. Newnes, 2013. [19]Liu Chang. Clothing E-store visual style research based on consumer perception [D]. Dong Hua University, 2012. (in Chinese) [20]Williams D, Kelly G, Anderson L. MSN 9: New user-centered desirability methods produce compelling visual design [C]// CHI'04 Extended Abstracts on Human Factors in Computing Systems. ACM, 2004: 959-974.