Abstract
Visual attractiveness is increasingly seen as an essential factor in perceived usability, interaction, and overall appraisal of user interfaces. Visual elements in technological products are capable of evoking emotions and affective responses in users. In this paper, we focus on the role of visual usability and visual aesthetics in an experimental research setup. This study examined user experiences and preferences in relation to the visual elements of color and perceived dimensionality of two different mobile application contexts. Quantitative and qualitative data were collected using two online questionnaires in order to gain insights to user preferences of visual elements in the two different mobile applications. The results imply that colors highly improve hedonic and pragmatic qualities of an application with a task-oriented functionality, as well as an application for entertainment purposes. We found that two-dimensionality (2-D) was generally preferred by the participants. The impression of three-dimensionality (3-D) was seen as a confusing and unnecessary element in the task-oriented mobile application context. The results of this study enhance understanding of the role and the influence of visual elements on user experience. Visual elements contribute to pragmatic user experience component in terms of visual usability and to hedonic user experience component in terms of subjective preferences of visual aesthetics. In addition, the methodological approach can be utilized to study the role of visual elements in pragmatic and hedonic user experience components with different visual elements and regarding different types of user interfaces.
Tips for Usability Practitioners
The following findings, based on the results of this study, have practical value for usability, user experience, and design practitioners:
- Consider visual elements such as color and perceived dimensionality as they influence both user preferences and perceived usability when testing the appeal of a mobile application.
- Pay attention to visual elements as the constructing units of UIs because they influence hedonic and pragmatic user experience components and, therefore, are strong determinants of the success of technological products.
- Use colors for organizing information, creating continuity and consistency, and enhancing visual usability and influence on users’ emotions. Select colors in relation to the type and style of the mobile application and user expectations.
- Consider that black and white color schemes can function as a basis for carefully considered stylistic impressions; however, black and white color schemes in mobile applications were not generally preferred and therefore require consideration.
- Consider, carefully, the role of perceived three-dimensionality in designing mobile applications. Perceived three-dimensionality in mobile applications was not preferred in the task-oriented or entertainment application.
- Use a mixed methods approach. We highlight that it is essential to effectively analyze the quantitative and qualitative data in a dialogue and select the mixed methods approach that supports the study design and the research problem.
Introduction
People prefer products not only for usefulness and usability, but also for a good user experience (Thüring & Mahlke, 2007). Besides the traditional view regarding the importance of functionality and usability, the importance of the visual design of user interfaces (UIs), often referred as visual aesthetics in HCI, is taken into consideration in many studies (e.g., Desmet & Hekkert, 2007; Hassenzahl, 2001; Hassenzahl, 2003; Hassenzahl & Monk, 2010; Thüring & Mahlke, 2007; Tractinsky, 2012). Existing studies have shown that product aesthetics, for instance regarding visual appearance of UIs, plays a significant role when people are choosing between different technological products before interacting, for example, the pre-use phase (Crilly, Moultrie, & Clarkson, 2004). Because aesthetic information is evaluated immediately, it is largely responsible for the users’ first impressions (Tractinsky, Cokhavi, Kirschenbaum, & Sharifi, 2006). Immediate assessments of attractiveness (Tractinsky et al., 2006) and, for instance, trustworthiness (Cyr, Head, & Larios, 2010) are made based on visual appearance of UIs.
Research results show that visual attractiveness and perceived usability are related (Thüring & Mahlke, 2007; Tractinsky et al., 2006; Sonderegger, Zbinden, Uebelbacher, & Sauer, 2012; Tractinsky, 2012). It has claimed that what is beautiful is also usable (Tractinsky, Katz, & Ikar, 2000). However, Lindgaard and Dudek (2003) showed that visual attractiveness does not always lead to good usability ratings. One possible explanation for the conflicting results was that users focused on different aspects of use depending on whether their goal was to have fun or to accomplish tasks. It is known that perceived usability is more important when people accomplish tasks, and hedonic, pleasure-oriented aspects are more important when they intend to have fun (Hassenzahl, 2008).
Studies concerning visual aesthetics in HCI have mainly focused on high-level attributes (Tractinsky, 2012), such as unity and prototypicality (Veryzer, & Hutchinson, 1998), typicality and/or novelty (Hekkert, Snelders, & Wieringen, 2010; Hung & Chen, 2012). Therefore, the available study literature lacks information for HCI visual aesthetics, such as low-level attributes (Tractinsky, 2012), also defined as visual elements (Mullet & Sano, 1995) or psychophysical properties (Hekkert & Leder, 2008). In addition, previous studies have shown that product type and usage situation influence user experience (e.g., Gross & Bongartz, 2012; Lee, 2013). The context in which the visual elements appear highly influences the aesthetic effects (Hekkert & Leder, 2008). User experience is a highly dynamic, subjective, and complex phenomenon (e.g., Law, Roto, Hassenzahl, Vermeeren, & Kort, 2009) and can be subdivided in different phases of use: pre-use, use, post-use, repetitive use, past use, and re-use (Pohlmeyer, 2011).
The role of visual elements in different mobile application contexts has not been investigated. Therefore, the goal of this paper is to understand how visual elements influence user experience in two different mobile application contexts. The focus is on the perception-based evaluation of user experience in an anticipated use situation, that is, pre-use phase. Do user experience and preferences change in relation to visual elements in two different mobile application contexts? The first mobile application is for task-oriented and more practical context of use, a mobile transport system application, whereas the second is an application for entertainment purposes.
The visual elements studied in this paper are color and perceived dimensionality. Perceived dimensionality means creating an impression of three-dimensionality (3-D) of UI objects in a two-dimensional (2-D) surface (Poulin, 2011). Perceived dimensionality can be achieved through highlighting and shadowing that stimulates the sensation of a raised surface.
The scope of this study is presented in Figure 1. The colorful area of the figure represents the scope of our study. The aim of this study is to find out how color and perceived dimensionality are preferred in different types of mobile applications and how color and perceived dimensionality are related to different aspects of user experience (overall appraisal, hedonic, and pragmatic product qualities) in an anticipated use-phase. The results provide insights into user preferences of perceived dimensionality of UI elements and color in mobile application UIs, as well as whether people change their preferences of color and perceived dimensionality of UI elements according to the type of application. Designers could utilize the results in designing mobile applications according to user preferences and the specific mobile application types. The methodological approach could be utilized to study visual elements in different mobile application types.
Figure 1. The scope of the study.
Visual Elements in User Interface Design
When users experience products, they perceive numerous visual elements (Zettl, 1999). Visual elements are essential in UI design due to the communicative ability inherent in them (Galitz, 2007; Mullet & Sano, 1995; Schlatter & Levinson, 2013). However, there is no Holy Grail for a universal design language to be applied to all contexts involved in visual design (Tractinsky, 2012). Therefore, it is important to study visual elements in specific UI contexts. In addition, many design principles have been presented (e.g., Lidwell, Holden, & Butler, 2003), but user preferences and experiences of visual elements in mobile application UIs have not been taken into account. Perceived dimensionality is widely used in visual representations, and it is seen as visually dynamic and engaging in graphic design (Poulin, 2011). Knowledge of user preferences of perceived dimensionality in mobile UIs is important due to the visual effectiveness of perceived dimensionality. The 2-D and 3-D impressions of UI objects have different effects on how the objects are perceived. For UI objects in 3-D, this includes perceived height, width, and depth, which make the objects stand out from the background surface. This perceived 3-D impression of visual volume can be conveyed with several design principles, such as shading the receding surfaces and with overlapping elements (e.g., Frutiger, 1997). On the contrary, 2-D objects lack perceived visual volume. Therefore, they are not perceived to stand out from the background surface. They are rather seen as flat objects belonging to the background surface. Perceived 3-D elements in UIs can be, for instance, buttons, icons, and boxes. In HCI, 3-D can also refer to 3-D virtual environments and 3-D displays, with a sensation of 3-D space. In this study the focus is on the perception of UI objects in 3-D and 2-D.
HCI studies have mainly focused on virtual environments with the sensation of 3-D space, for instance, designing interactive systems with perceived 3-D spaces is supposed to enhance user engagement (Sutcliffe, 2009). Ark, Dryer, Selker, and Zhai (1998) suggested that a realistic representation of 3-D objects contributed positively to task performance, and the usage of 3-D ecological, realistic interfaces was recommended rather than 2-D iconic UIs. Kim, Proctor, and Salvendy (2011) studied cell phone menus as perceived 3-D elements. Their study concluded that more information can be included to 3-D menus than 2-D menus, and 3-D menus may also enhance the usability of the limited screen space in mobile devices. Besides the perceived dimensionality, color design is also an important aspect of experiencing and designing mobile UIs. In graphic design, color is one of the most communicative and powerful visual element. Color is often seen as a primary visual element that can add visual interest in any visual compositions (e.g., Poulin, 2011). However, in HCI, color has been studied mostly in relation to web pages (e.g., Kim, Lee & Choi, 2003). Coursaris, Swierenga, and Watrall (2008) studied the effects of color temperature and gender on perceptions of web page aesthetics. They found out that gender had no effects, but cool color combinations (blue to light blue) were preferred more than warm color combinations (red to orange). Cyr et al. (2010) studied color appeal in website design across cultures. Their results revealed that color appeal in websites has significant value for trust and satisfaction, and there were differences in reactions to website colors between cultures, concluding that color can be used in website design to influence users’ emotions, perceptions, and reactions.
Research Objective
The objective of our research is to investigate the relation of visual elements, color and perceived dimensionality of UI elements, in mobile applications according to user preferences and liking in an anticipated use situation (pre-use phase). We also investigated the perception-based evaluation of user experience components, for example, pragmatic and hedonic product qualities and attractiveness (Hassenzahl, 2003), in relation to different visual elements. The following are our research questions:
- Do color and perceived dimensionality of UI elements influence user experience and user preferences of mobile applications?
- Do user experience and user preferences of visual elements change in relation to different types of mobile applications?
Analysis of qualitative data will provide insight to the reasons behind user preferences of visual elements and possible changes of preferences according to the different types of mobile applications.
Hypothesis
We assume that color and perceived dimensionality of UI elements have significant influences on the perception and evaluation of hedonic and pragmatic product qualities as well as liking and preferences. This assumption is based on the essential role of visual elements in UI design and the communicative ability inherent in them (e.g., Galitz, 2007; Mullet & Sano, 1995; Schlatter & Levinson, 2013).
Additionally, we hypothesize that the influences of color and perceived dimensionality on user experience components, preferences, and liking differ in relation to the type of the mobile application, because aesthetic effects of visual elements are dependent of the context in which they appear (e.g., Hekkert & Leder, 2008).
Method
This study followed a mixed methods sequential explanatory design (Creswell & Plano Clark, 2007) by explaining quantitative results with qualitative data. Quantitative and qualitative data were collected from two different mobile application contexts with two separate online questionnaires utilizing a between-subject design. The two mobile applications used in this study were a local transport application and an entertainment application. A UI with black and white color scheme served as a control condition to investigate the influence of color on user experience components and the appeal of those components. The UI design elements “color” (black and white or colored) and “perceived dimensionality” (2-D or 3-D) were tested as within-subject factors. Therefore, each questionnaire presented four versions of the specific application: one black and white 2-D, one color 2-D, one black and white 3-D, and one color 3‑D. (see Figures 2, 3, 4, and 5).
Qualitative content analysis (Krippendorff, 2004) was conducted in order to understand reasons behind user preferences of visual elements. Users’ written descriptions were first categorized thematically to sections in relation to numerical ratings accompanied with the amount of participants given the rating. Second, the rating categories were analyzed and categorized thematically regarding descriptions of preferences: what were the reasons behind liking or disliking the UI version. The analysis consisted of familiarization, organization, and categorization of the data, followed by the analysis process with interpretation and conversation with the data.
Stimulus Material
The preparation of the stimulus material followed a 2 × 2 experimental design with the independent factors of “color” (black and white, color) and “perceived dimensionality” of UI elements (2-D and 3-D). The stimulus material consisted of UI screen captures assuming an anticipated use (pre-use phase) of two mobile applications.
Preferences between different alternatives employ us on a daily basis. Judgments and evaluations of appeal are more easily carried out when possibilities of comparing alternative options are provided (e.g., Peevers, Douglas, & Jack, 2008). In designing the stimulus material this possibility was taken into account by using a within-subject design for the color and perceived dimensionality factors. In addition, all four designs were shown at the same time to provide the participants with the ability to compare and evaluate the designs together.
The first UIs of the mobile application for a local transport system represent the task-oriented functionality for a practical context of use (Figures 2 and 3). This mobile application is for searching public transport routes and connections from different locations. The application’s UI screen capture displays search results from one location to another and gives different connections for users to compare and select the most suitable option. The second application is an application for entertainment purposes (Figures 4 and 5). This mobile application is for voice recording, where the animal that was selected by the participant repeated the participant’s recorded voice using a funny voice, facial expression, and body gesture.
Color
Investigating the visual element “color” in a different context of use, we prepared two UI versions using two different color schemes: a black and white color scheme served as a control condition in relation to a UI with color (Figures 2 and 3). The colored version consisted of two primary hues, red and blue in the most central functional elements, and a secondary hue of green. In the colored UIs of the mobile transport system application, the blue and red colors were added to the bus and metro signs to resemble the colors of these vehicles in Helsinki’s local transport system. The green color was added to the horizontal line that represented the actual time. Although the data collection was conducted among German participants, they got instructions that the UI screen captures displayed local transport information from Helsinki, Finland.
Figure 2. Transport application: A is black and white 2-D, and B is the color 2-D.
Figure 3. Transport application: A is black and white 3-D, and B is the color 3-D.
In the colorful version of the mobile application for entertainment purpose, we included a secondary hue of orange and brown, which was the combination of all three primary colors: red, blue, and yellow (e.g., Itten, 1973).
Figure 4. Entertainment application: A is black and white 2-D, and B is the color 2-D.
Figure 5. Entertainment application: A is black and white 3-D, and B is the color 3-D.
Perceived dimensionality
Two different perceived dimensionalities of UI objects were investigated (2-D and 3-D). The perceived 3-D volume of the objects was created by adding interposition, texture gradient, and shading to 2-D elements. Interposition means that overlapping shapes create a sense of 3-D depth in 2-D surface (e.g., Arnheim, 1974; Costache, 2012). Texture gradient was applied when the texture of a surface varied in density. Areas with more density are perceived to be further away. The same idea applies to shading and shadows (e.g., Lidwell et al., 2003). The perceived three-dimensionality was added to the UI elements that included functionalities, which also increased the affordances of these objects. The overall impression of UIs did not highlight a sensation of 3-D space, but rather an impression of volume in the UI components. Pictures on the buttons (bus, metro, and cows) as well as the buttons themselves included added dimensionality with perceived depth (Figures 3 and 5). The amount of objects manipulated by color and perceived dimensionality were equal in both applications.
Participants
Based on the experimental design, two groups of participants were involved in the study. A total of 37 participants (24 female, 13 male; age: M = 25.68, SD = 4.28) completed the online questionnaire in the first portion of this study that tested the four versions of the local transport application. These participants were mostly students of bachelor (37.8%) and master (59.5%) degree programs in different subjects of study (e.g., cognitive science, mathematics, informatics, biology, human factors, engineering, neurology science, psychology, and philosophy). For the second portion of the study, evaluating the four versions of the entertainment application, 25 participants (17 female, 8 male; age: M = 29.16, SD =3 .34) completed the second online questionnaire. For this online questionnaire 88% of the participants had a bachelor’s degree in similar subjects as participants who participated in the first online questionnaire. Only 8% (two people) had no university degree. Participants were recruited by email lists and were German speaking. They participated voluntarily and did not receive any reward. The online questionnaires were conducted online using LimeSurvey®, which is a free open source survey application. All the participants used their own desktop computer or laptop for viewing the stimulus mobile application pictures and answering the questionnaire. The survey application showed the pictures of each application approximately in the size of 320 x 430 pixels, and the four versions of each application were shown at the same time. Regarding the display of the colors on different mobile devices, the designs were tested in a natural context as people will always have different mobile devices when they use the application. Thus, the test was done in the actual usage context and a variation on screen quality.
Research Procedure
The procedures for both online questionnaires for each application were equivalent. Each questionnaire had three sections for each application: an AttrakDiff-mini section, a 7-point Likert-type scale measuring how well participants liked each application, and an open-ended question section. The presentation order of UI versions was counterbalanced. The four different UI versions of each application were displayed next to each other so that the participants were able to see all the versions at the same time.
Participants evaluated the four UI versions of the application using a version of the AttrakDiff-mini questionnaire developed by Hassenzahl and Monk (2010). This questionnaire was conducted using a semantic differential ranging from ugly (1) to beautiful (7).Using the modified AttrakDiff-mini questionnaire, participants evaluated each UI based on items such as pragmatic product qualities, identification, stimulation, and attractiveness. The mean value from these four subscales of the AttrakDiff-mini questionnaire resulted in an “overall UX” score.
After completing the AttrakDiff section of the questionnaire, participants rated how well they liked each UI version. We measured “liking” as a single item using a 7-point Likert scale with anchors for extremes (I like it: 1= not at all, 7 = totally). Then, participants selected the best and worst UI from the four versions of each application.
Finally, participants answered eight open-ended questions. Follow up questions were asked in relation to each four screen capture versions of each application: What do you like or dislike about this version? What do you think about 2‑D and 3-D visual design and why? How do you feel about the choice of color for the different versions and why? Which version do you like the most and why? Which version do you dislike the most and why?
Results
The focus of this study was to investigate how color and perceived dimensionality of UI components influence user preferences and the anticipated experience in two different mobile application contexts. Participants did not interact with the applications; they only viewed four screen captures of the application.
User Preferences—Local Transport Application
Participants were asked to select one UI as the best version and one UI as the worst version from the four UI options of local transport application screen captures. The same procedure applied for the evaluating the entertainment application. They did not rank the four UIs into preferential order.
Best UI
Twenty-four participants (64.9%) named the 2-D colored UI version as the best option. Seven participants (18.9%) preferred the 3-D colored UI, and only three (8.1%) preferred the black and white 2-D version as well as the black and white 3-D version. The 2-D colored UI version was preferred for several reasons. One participant said, “clear, color contrasts are well designed, design is functional orientated and not unnecessarily confusing.” The overall impression of the UI was seen as clear, legible, and functional, which was achieved by color contrasts. Colors were also seen as organizers of the content. This UI was also valued because no unnecessary elements or effects, such as shadows, were included. The combination of the colors and 2-D was seen as the best degree of simplicity. Colors were also seen as vivid, beautiful, and attractive. Some of the participants commented that “with color it looks fresher and livelier” and “the colors are beautiful.”
Worst UI
Twenty-six participants (70.3%) did not prefer the black and white 3-D version, whereas only six participants (16.2%) did not favor the black and white 2-D version. Four participants (10.8%) did not prefer the 3-D colored UI. Only one participant (2.7%) rated the 2-D colored version as the worst option. The 3-D black and white UI version was not preferred; participants said that it was “dark, unclear and lacking of color contrast.” Participants described their preferences, for instance, with the following words: “content is barely distinguishable from the rest because of non-colored and even dark shadows.” The shadows creating the perceived 3-D volume were seen as unnecessary effects. As described by one participant, the black and white color scheme was “all shades of gray, looks dull and confusing.”
Analysis
We used a multiple analysis of variance (MANOVA) with repeated measurements. The analysis included “color” and “perceived dimensionality” as independent variables, and “liking,” as well as user experience components (pragmatic product quality, identification, stimulation, attractiveness, overall user experience) as dependent variables. Overall, regarding these dimensions, the colored version was evaluated better than the black and white version (see Figure 6). The following effects revealed a significant main influence of color:
- pragmatic product qualities: F(1,35) = 4.41, p = 0.04, η²PART = 0.1
- identification: F(1,35) = 15.36, p < 0.001, η²PART = 0.30
- stimulation: F(1,35) = 29.84, p < 0.001, η²PART = 0.46
- attractiveness: F(1,35) = 15.22, p < 0.001, η²PART = 0.30
- liking: F(1,35) = 8.20, p < 0.001, η²PART = 0.19
- overall user experience: F(1,35) = 20.05, p < 0.001, η²PART = 0.40
Figure 6. Transport application: main effect of color on UX components (*p < 0.05, **p < 0.01, ***p < 0.001). Semantic differential with 1 = negative and 7 = positive evaluation for subjective rating scales (pragmatic qualities, identification, stimulation, attractiveness, and overall UX) utilizing the AttrakDiff-mini questionnaire. Liking measured by single-item 7-point scale ranging from 1 (not at all) to 7 (totally). Error bars represent standard deviation (SD). Overall, the 2-D version was evaluated as better than the 3-D version. The perceived dimensionality had significant main influences on the following (see Figure 7):
- pragmatic product qualities: F(1,35) = 4.63, p = 0.04, η²PART = 0.12
- attractiveness: F(1,35) = 5.01, p = 0.03, η²PART = 0.13
- liking: F(1,35)=10.15, p=0.01, η²PART=0.23
- overall UX (only a marginal significant effect): F(1,35) = 3.21, p = 0.08, η²PART = 0.08
Figure 7. Transport application: main effect of dimensionality on UX components (*p < 0.05, **p < 0.01). Semantic differential with 1= negative and 7 =positive evaluation for subjective rating scales (pragmatic qualities, identification, stimulation, attractiveness, and overall UX) utilizing the AttrakDiff-mini questionnaire. Liking measured by single-item 7-point scale ranging from 1 (not at all) to 7 (totally). Error bars represent standard deviation (SD).
User Preferences—Application for Entertainment Purpose
Prior experience with other gaming applications was asked and entered to MANOVA as co-variable. No significant interaction with any dependent variable occurred.
Best UI
Fifteen participants (60%) preferred the colored 2-D version (Figure 4B) the most. Ten participants (40%) preferred the colored 3-D version (Figure 5B) over all others. Some participants justified their preferences for the 2-D colored UI version by stating the following: “because colorful and clearly structured” and “colors are strongest, sketching seems relaxed and playful.” This 2-D version was seen as the clearest, funniest, and most creative. The style of the color design in the figures was considered important. The figures were seen as comic-like figures. The second most preferred UI version was the 3-D colored UI version. In this version the colors were also highlighted, but the way the colors were rendered in 3-D figures was not preferred as much as in the 2-D version.
Worst UI
Sixteen participants (64%) evaluated the 3-D black and white version as the worst (Figure 5A). Eight participants (32%) rated the 2-D black and white version (Figure 4A) the worst, and only one person (4%) thought the 3-D colored version (Figure 5B) was the worst option. The 3-D black and white UI was seen as too dark, unclear, and “difficult to distinguish between elements” due to the lack of colors. In addition, the perceived three-dimensionality without colors was seen as an unusual combination.
Analysis
For analyzing, a MANOVA with repeated measurements was performed. It included color and perceived dimensionality as independent variables, and liking as well as user experience components (pragmatic product quality, identification, stimulation, attractiveness, overall user experience) as dependent variables. The following effects revealed a significant main influence of color:
- attractiveness: F(1, 22) = 13.63, p = 0.001, η²PART = 0.38
- liking: F(1,22) = 10.15, p = 0.003, η²PART = 0.23
- overall user experience: F(1, 22) = 7.61, p = 0.01, η²PART = 0.26
- pragmatic product qualities (only a marginal significant effect on color): F(1,35) = 3.49, p = 0.08, η²PART = 0.14.
Within Bonferroni adjusted post-hoc tests, significant main effects of color on pragmatic product qualities (p = 0.008), identification (p < 0.001), stimulation (p < 0.001), attractiveness (p = 0.001), liking (p < 0.001), and overall UX (p < 0.001) have been detected (Figure 8).
Figure 8. Entertainment application: main effect of color on UX components, liking, and overall UX using pairwise comparison. Bonferroni adjusted post-hoc test (*p < 0.05, **p < 0.01, ***p < 0.001). Semantic differential with 1 = negative and 7 = positive evaluation for subjective rating scales (pragmatic qualities, identification, stimulation, attractiveness, and overall UX) utilizing the AttrakDiff-mini questionnaire. Liking measured by single-item 7-point scale ranging from 1 (not at all) to 7 (totally). Error bars represent standard deviation (SD).
Perceived dimensionality did not have any main effects on any dependent variable. No significant interaction occurred for color and perceived dimensionality on any dependent variable either.
Conclusion
In this paper, user experiences and preferences in relation to visual elements in two different mobile application contexts were studied. The results show that visual elements contribute to experiential aspects of mobile applications. Color was highlighted as an important visual factor in both mobile applications. The participants reported that color is an important element regarding personal affective preferences, such as beauty, attractiveness, and vividness. From a functional viewpoint color was seen, for instance, as an organizer of information and contributor to a clearer overall impression of the UI due to the color contrasts. Therefore, these results emphasize the importance of color design for effective visual usability. The colors in the entertainment application were also preferred because of the style of the figures. Participants described the style of the figures as comic-like and reminded them of children’s books, and that the sketching of the figures made them more charming (these descriptions only occurred for the colored 2-D version, not for the colored 3-D version). Therefore, the ways by which colors and the perceived dimensionality are included into a UI design can create a sensation of some specific style and should be taken into account in a design process. These subtle stylistic impressions can be acknowledged by studying user preferences of visual elements in specific mobile application contexts.
The black and white color scheme was disliked from affective and functional viewpoints. Black and white color schemes are used in various design objects as a unifying style. However, in the mobile application UI design, the black and white color scheme was described, for example, as boring and too gray. From a functional viewpoint, different actions and functionalities were considered difficult to be distinguished from each other. It can be concluded, that the color in a UI has a higher influence on a variation of different user experience components than perceived dimensionality of UI elements. Colored UIs are perceived as more a pragmatic and hedonic valuable, which can be verified by the increased attractiveness and liking by the participants.
Colorful UIs are generally preferred over black and white UIs, independent from the type of the mobile application.
However, perceived dimensionality has different influences depending on the type of mobile application used. For task-oriented applications (e.g., local transport system) additional perceived 3-D volume had a negative effect on the perceived pragmatic product qualities: attractiveness and liking. From a functional point of view the two-dimensionality of UI elements was perceived to be clearer, simpler, and easier to grasp than UI elements in 3-D. From an affective viewpoint, two-dimensionality appeared to the participants as more stylish and authentic. In addition, the overall appearance with two-dimensionality was seen from a positive perspective, which was mainly achieved by simplicity. From a functional viewpoint, three-dimensionality was seen as an unnecessary element, which mainly confuses and makes the overall appearance of the UI more complex without including more information. In contrast to these findings, previous studies recommended the usage of perceived three-dimensionality in computer UIs (Ark et al., 1998; Sutcliffe, 2009). However, according to our results three-dimensionality was not preferred in mobile application UIs with a more practical and task-oriented context. Nevertheless, perceived dimensionality did not have a significant influence on user experience and liking regarding the entertainment application. Therefore, the context has to be taken into account when designing and using specific perceived dimensionalities in mobile applications.
Limitations of the Study
Visual design is not universally understood similarly in different cultures. For instance, in some cultures, different meanings are attached to dimensions of visual space and can be strongly influenced by a culture’s style of writing and reading direction (e.g., van Leeuwen & Kress, 2006). Moreover, colors carry lots of cultural design traditions and symbolic meanings (e.g., Cyr et al., 2010). Therefore, the results of this study can be extended to be applied in many Western countries. In addition, the results of the present study may not be directly generalized to all kinds of mobile applications and usage situations. For example, using colors in mobile applications, the intended style and color combinations need to be considered according to the specific context.
Future Research
In this study, user preferences of visual elements, color and perceived dimensionality, in different mobile applications were studied focusing on the anticipated use-phase in a user experience life cycle (Pohlmeyer, 2011). Therefore, users viewed screen captures of the UI versions and did not interact with the applications. Interaction with technological products often occurs by first gaining perceptual knowledge and experiences of a product, after which information gained by other sensory modalities supplements the interaction (Ludden, Schifferstein, & Hekkert, 2009). Therefore, the results presented in this paper could be further examined and elaborated on. User preferences could be studied in relation to real interaction (use-phase) with a mobile application. In addition, future research could take into account experiences conveyed through other sensory modalities than just perceptual modality. Further research could, therefore, focus on the role of visual elements in a more holistic understanding of a user’s experience in interacting with technological products. Future research steps could also focus on resolving what kind of impact different use-phases (pre-use, use, post-use, repetitive use, past use, and re-use) has on interacting with mobile applications constructed from visual elements and other design features. Moreover, user preferences of visual elements could be studied in relation to different kinds of mobile applications.
Acknowledgements
This work was supported by Deutsche Forschungsgemeinschaft (DFG) and Deutscher Akademischer Austauschdienst (DAAD).
References
Ark, W., Dryer, C. D., Selker, T., & Zhai, S. (1998). Representation matters: The effect of 3-D objects and spatial metaphor in a graphical user interface. Proceedings of HCI ´98, People and Computers XIII, (pp. 209–219). London: Springer.
Arnheim, R. (1974). Art and visual perception: A psychology of the creative eye. Berkeley and Los Angeles: University of California Press.
Coursaris, C. K., Sweirenga, S. J., & Watrall, E. (2008). An empirical investigation of color temperature and gender effects on web aesthetics. Journal of Usability Studies, 3(3), 103–117.
Costache, I. D. (2012). The art of understanding art. Oxford, UK: Blackwell Publishing Ltd.
Creswell, J. W., & Plano Clark, V. L. (2007). Designing and conducting mixed methods research. Thousand Oaks, CA: Sage.
Crilly, D., Moultrie, J., & Clarkson, P. J. (2004). Seeing things: Consumer response to the visual domain in product design. Design Studies, 2, 547–577.
Cyr, D., Head, M., & Larios, H. (2010). Colour appeal in website design within and across cultures: A multi-method evaluation. International Journal of Human–Computer Studies, 68, 1–21.
Desmet, P. M. A., & Hekkert, P. (2007). Framework of product experience. International Journal of Design, 1(1), 57–66.
Frutiger, A. (1997). Signs and symbols. Their design and meaning (2nd ed.). Cham, Switzerland: Syndor Press GmbH.
Galitz, W. O. (2007). The essential guide to user interface design: An introduction to GUI design principles and techniques (3rd ed.). Indianapolis, IN: Wiley Publishing, Inc.
Gross, A., & Bongartz, S. (2012). Why do I like it? Investigating the product-specificity of user experience. Proceedings of the 7th Nordic Conference on Human-Computer Interaction: Making Sense Through Design (pp. 322-330). New York: ACM.
Hassenzahl, M. (2001). The effect of perceived hedonic quality on product appealingness. International Journal of Human-Computer Interaction, 13(4), 481–499.
Hassenzahl, M. (2003). The thing and I: Understanding the relationship between user and product. In M. A. Blythe, A. F. Monk, K. Overbeeke & P. C. Wright (Eds.), Funology: From usability to enjoyment (pp. 1–12). Dordrecht: Kluwer Academic Publishers.
Hassenzahl, M. (2008). Aesthetics in interactive products: Correlates and consequences of beauty. In H. N. J. Schifferstein, & P. P. M. Hekkert (Eds.), Product experience (pp. 287–302). Amsterdam: Elsevier.
Hassenzahl, M., & Monk, A. (2010). The inference of perceived usability from beauty. Human-Computer Interaction, 25(3), 235–260.
Hekkert, P., & Leder, H. (2008). Product aesthetics. In H. N. J. Schifferstein & P. P. M. Hekkert (Eds.), Product experience (pp. 259–286). Amsterdam: Elsevier.
Hekkert, P., Snelders, D., & Wieringen, P. C. W. (2010). „Most advanced, yet acceptable“: Typicality and novelty as joint predictors of aesthetic preference in industrial design. British Journal of Psychology, 94(1), 111–124.
Hung, W. –K., & Chen, L. L. (2012). Effects of novelty and its dimensions on aesthetic preference in product design. International Journal of Design, 6(2), 81–90.
Itten, J. (1973). The art of color: The subjective experience and objective rationale of color. New York: Van Nostrand Reinhold.
Kim, J., Lee, J., & Choi, D. (2003). Designing emotionally evocative homepages: An empirical study of the quantitative relations between design factors and emotional dimensions. International Journal of Human-Computer Studies, 59, 899–940
Kim, K., Proctor, R. W., & Salvendy, G. (2011). Comparison of 3-D and 2-D menus for cell phones. Computer in Human Behavior, 27, 2056–2066.
Krippendorff, K. (2004). Content analysis: An introduction to its methodology (2nd ed.). Thousand Oaks, CA: Sage.
Law, E. L. C., Roto, V., Hassenzahl, M., Vermeeren, A. P. O. S., & Kort, J. (2009). Understanding, scoping and defining user experience: A survey approach. Proceedings of the 27th International Conference on Human Factors in Computing Systems, CHI 2009 (pp. 719–728). New York: ACM.
Lee, S. (2013). Understanding user experience with computer-based applications with different use purposes. International Journal of Human-Computer Interaction, 29(11), 689–701.
Lidwell, W., Holden, K., & Butler, J. (2003). Universal principles of design. Beverly, MA: Rockport Publishers.
Lindgaard, G., & Dudek, C. (2003). What is this evasive beast we call user satisfaction? Interacting with Computers, 15(3), 429–452.
Ludden, G. D. S., Schifferstein, H. N. J., & Hekkert, P. (2009). Visual-tactual incongruities in products as sources of surprise. Empirical Studies of the Arts, 27(1), 3–89.
Mullet, K., & Sano, D. (1995). Designing visual user interfaces: Communication oriented techniques. Upper Saddle River, NJ: Prentice Hall.
Peevers, G., Douglas, G., & Jack, M. A. (2008). A usability comparison of three alternative message formats for an SMS banking service. International Journal of Human-Computer Studies, 66, 113–123.
Pohlmeyer, A. E. (2011). Identifying attribute importance in early product development. Ph.D. thesis, Technische Universität Berlin, Germany.
Poulin, R. (2011). The language of graphic design: An illustrated handbook for understanding fundamental design principles. Beverly, MA: Rockport Publishers.
Schlatter, T., & Levinson, D. (2013). Visual usability, principles and practices for designing digital applications. MA: Morgan Kaufman.
Sonderegger, A., Zbinden, G., Uebelbacher, A., & Sauer, J. (2012). The influence of product aesthetics and usability over the course of time: A longitudinal field experiment. Ergonomics, 55(7), 713–730.
Sutcliffe, A. (2009). Designing for user engagement: Aesthetics and attractive user interfaces. Synthesis Lectures of Human-Centered Informatics, 2(1), 1–55.
Thüring, M., & Mahlke, S. (2007). Usability, aesthetics, and emotions in human-technology interaction. International Journal of Psychology, 42, 253–264.
Tractinsky, N. (2012). Visual aesthetics. In M. Soegaard & R. F. Dam, (Eds.). The encyclopedia of human-computer interaction (2nd ed.). Aarhus, Denmark: The Interaction Design Foundation. Tractinsky, N., Cokhavi, A., Kirschenbaum, M., & Sharifi, T. (2006). Evaluating the consistency of immediate aesthetic perceptions of web pages. International Journal of Human-Computer Studies, 64(11), 1071–1083.
Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 13, 127–145.
van Leeuwen, T., & Kress, G. (2006). Reading images. The grammar of visual design (2nd ed.). Taylor & Francis e-Library.
Veryzer, R. W., & Hutchinson, J. W. (1998). The influence of unity and prototypicality on aesthetic responses to new product designs. Journal of Consumer Research, 24(4), 374–385.
Zettl, H. (1999). Sight, sound, motion: Applied media aesthetics. Boston: Wadsworth Publishing Company.
