Appraisals of Salient Visual Elements in Web Page Design

This is an electronic reprint of the original article. This reprint may differ from the original in pagination and typographic detail. Author(s): Title: Year: Version: Please cite the original version: All material supplied via JYX is protected by copyright and other intellectual property rights, and duplication or sale of all or part of any of the repository collections is not permitted, except that material may be duplicated by you for your research use or educational purposes in electronic or print form. You must obtain permission for any other use. Electronic or print copies may not be offered, whether for sale or otherwise to anyone who is not an authorised user. Appraisals of Salient Visual Elements in Web Page Design Silvennoinen, Johanna; Jokinen, Jussi Silvennoinen, J., & Jokinen, J. (2016). Appraisals of Salient Visual Elements in Web Page Design. Advances in Human-Computer Interaction, 2016, Article 3676704. https://doi.org/10.1155/2016/3676704 2016 Research Article Appraisals of Salient Visual Elements in Web Page Design Johanna M. Silvennoinen and Jussi P. P. Jokinen Department of Computer Science and Information Systems, University of Jyvaskyla, Mattilanniemi 2, 40100 Jyv¨ askyl¨ a, Finland Correspondence should be addressed to Johanna M. Silvennoinen; joha[email protected] Received 29 November 2015; Revised 9 March 2016; Accepted 16 March 2016 Academic Editor: Thomas Mandl Copyright © 2016 J. M. Silvennoinen and J. P. P. Jokinen. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited. Visual elements in user interfaces elicit emotions in users and are, therefore, essential to users interacting with different software. Although there is research on the relationship between emotional experience and visual user interface design, the focus has been on the overall visual impression and not on visual elements. Additionally, often in a software development process, programming and general usability guidelines are considered as the most important parts of the process. Therefore, knowledge of programmers’ appraisals of visual elements can be utilized to understand the web page designs we interact with. In this study, appraisal theory of emotion is utilized to elaborate the relationship of emotional experience and visual elements from programmers’ perspective. Participants (𝑁=50) used 3E-templates to express their visual and emotional experiences of web page designs. Content analysis of textual data illustrates how emotional experiences are elicited by salient visual elements. Eight hierarchical visual element categories were found and connected to various emotions, such as frustration, boredom, and calmness, via relational emotion themes. The emotional emphasis was on centered, symmetrical, and balanced composition, which was experienced as pleasant and calming. The results benefit user-centered visual interface design and researchers of visual aesthetics in human-computer interaction. 1. Introduction Visual design of user interfaces is significant to users interacting with different software. Through visual user interfaces, constructed of visual elements (i.e., color, size, and shape), interfaces communicate to the users and are expected to be both visually and emotionally appealing. However, visual user interface design is rather complex, because there is no universal formula of visual design to be applied in all user interface design contexts to elicit positive emotional experiences. Visual elements can be designed in countless different combinations and therefore, the same information content can be designed to appear in numerous visual forms which affect the users in different ways. For instance, different user interface genres, such as online banking web pages, are expected to visually represent the context in an appropriate way. If users’ expectations and visual design solutions are not considered in the design process, interaction can lead to negative emotional outcomes, such as frustration. Thus, numerous perspectives are required to be considered when designing visual user interfaces. One approach is to empirically examine how visual elements are emotionally experienced and how this knowledge informs user interface design decisions. This information is especially important when considering programmers’ appraisals of visual elements. This is because often in a software development process programming and general usability guidelines are considered as the most important parts of the process, while neglecting experiential aspects of the interaction conveyed with visual user interfaces. Therefore, in addition to the traditional efforts in humancomputer interaction, current and future user interfaces need to be developed in a novel way to match the potentials offered by the newest computing technologies and the users’ requirements based on their visual and emotional experiences. From a user-centered perspective, the rapid development of user interface technologies demands clarification of how visual elements should be utilized in user interface design to promote positive user experience. The improvement of visual aesthetics in user interface design enhances understandability of the product, by improving visual organization, clarity, and conciseness of user interfaces [1],andmoreprofoundunderstandingofhowvisualelements are experienced contributes to enhanced visual usability of Hindawi Publishing Corporation Advances in Human-Computer Interaction Volume 2016, Article ID 3676704, 14 pages http://dx.doi.org/10.1155/2016/3676704 2Advances in Human-Computer Interaction user interfaces [2, 3], that is, how people represent visual elements and how the visual aspects of objects relate to the functions afforded by them. Moreover, in the current era of visual user interfaces, usable designs need to highlight aesthetic expression as meaningful presence for users instead of just providing designs as functional tools [4]. However, the snowballing research of user interface design has, until now, largely left aside the study of how visual elements in user interface design elicit emotional experiences. Current research of experiencing visual user interface designs, in the research area of visual aesthetics in humancomputer interaction, has mainly focused on the overall impression of visual user interfaces (e.g., [5–7]), as a means of enhancing user experience with aesthetic pleasantness (e.g., [8]). In addition, more detailed approaches have focused, for example, on typography [9] and on high-level attributes (e.g., [10]). These high-level attributes include, for example, unity and prototypicality [11], novelty [12], and typicality and novelty [13]. Therefore, research of visual aesthetics in human-computer interaction lacks knowledge of emotional responses in experiencing low-level attributes, that is, visual elements (e.g., [14]), such as color, size, and balance [15]. In thispaper,appraisaltheoryofemotion[16–18]isutilizedto elaborate the relationship of emotional user experience and visual elements. Therefore, this study adopts an interactionist approach to human-technology experience; that is, it does not merely focus on either user interface design properties or users’ impressions and preferences of visual user interface designs, but analyses screen-based visual elements and their appraised dimensions together. Screen-design based approach focuses on detecting the visual properties of design components and their spatial organization in user interfaces [19], which affect user experience. How these identified visual elements are appraised is the key to understanding their role in human-computer interaction and in web page design. According to Tractinsky [10], usability experts and designers have come to the conclusion that these two aspects of design, visual aesthetics and usability, could and should coexist in the same context of use. Before this shift in the first decade of the 21st century, visual aesthetics and usability were often seen as having a contradictory relation in that when one was emphasized, the other one was automatically omitted. The shift has emerged mostly because recent research corroborates a positive correlation between aesthetic and usability principles (e.g., [5, 6, 19–22]). Due to this shift, aesthetic qualities are currently emphasized in designing software for human-computer interaction. In addition, advancements in computer graphics have opened a variety of new design possibilities, which have increased the importance of aesthetic design of user interfaces providing emotional experiences. Yet, often in software development process, only the implementation of software (e.g., programming) and the traditional, general usability design [23] are considered as the most important parts [24]. In reality, users’ experiential needs are not taken into account in the software development process [25]. The essential deficit in user interface design lies in the absence of visual user interface design specialists in the process. Therefore, in this study, appraisals of salient visual elements are addressed from the point of view of future programmers and engineers. Focusing on programmers’ emotional experiences of visual elements in web page designs provides information on the visual elements that are considered essential and the way they are appraised. Understanding the appraisal process of the most salient visual elements among future programmers enriches the visual user interface design practice in software development and provides insights into visual design solutions applied in current user interface designs that we interact with. The rest of the paper is organized as follows. First, the background concerning the visual elements and their capability in eliciting emotions in human-computer interaction is described with the appraisal theory of emotion. This is then concluded with presenting the research questions of the study. Second, the method is described including participant information, research procedure, stimuli, and dataanalysis.Third,theresultsarepresentedanddiscussed. Finally,theconclusionsarepresentedwithfutureresearch and limitations of the study. 2. Visual Elements and the Emotion Process Establishing the connection between visual elements and the emotion response is one of the key elements in developing theory for describing visual elements in human-computer interaction. Visual elements in user interfaces are important factors in experiencing technological products due to their potential of eliciting attributed emotions and the ability to elicit actually felt emotions [26]. Additionally, visual elements are capable of evoking strong emotional responses in technology interaction and thus affect the overall experience [27]. While the psychological research on emotion has already posited the cognitive process, which connects an external event to emotional experience [16–18], this process has not yet received a satisfactorily discussion in user experience literature. However, research connecting the psychological theory of appraisal with emotional experience in humantechnology interaction has started to produce promising examples concerning this [28–30]. Visual elements as the constructing units in user interfaces are the components through which the emotional process of experiencing visual user interfaces can be understood and approached in detail. By exploring users’ emotional experiences of visual elements, an in-depth view on visual aesthetics in human-computer interaction can be approached. Emotional aspects of visual user interface design have been studied in relation to trust. For instance, beauty of simplicity [31],visualappeal[32],andcolorappeal[33]havebeenstated to affect feelings of trust in interacting with user interfaces. However, more profound and detailed knowledge is needed in order to understand how and which visual elements in user interfaces elicit emotions and in which contexts. In this study, visual representations that draw on the theories of two-dimensional pictorial elements are utilized as theoretical vehicles to create novel insight into experiencing visual user interface design. The dispensation of visual theory is in that it provides knowledge of exact visual elements, such as size, value, hue, orientation, contrast, texture [34], shape, proportion, and position [1] and, for instance, form Advances in Human-Computer Interaction 3 and expression [35], which are seen as visual elements inherent in contemporary user interfaces. Mullet and Sano [1] refer to visual language in designing visual user interfaces. Through visual language, based on visual elements, user interfaces communicate to the users. Visual language of user interface design is divided into visual design factors which are visual characteristics (shape, color, position, texture, size, orientation, etc.) in a specific set of design elements (point, line, volume, plane, etc.) and the factors by which they relate to each other, such as balance, structure, proportion, and rhythm. These elements facilitate exploring the salient visual elements that draw attention to website design, elicit emotions in users, and affect the interaction between users and user interfaces. Further, visual theory serves as a starting point in the study because aesthetic impressions conveyed by visual representations influence users’ experiences of user interface qualities [6] that may promote positive feelings on user interfaces [36] due to the emotional nature of visual experience [37–39]. The cognitive process in which emotion episodes occur is called appraisal [16–18]. Appraisal is the evaluation of the personal significance of an event and its consequences and consists of multiple levels, such as motivational changes, physiological responses, and subjectively categorized emotions[18,39].Therearevariousmodelsofappraisal,which differ in the details of the emotion process, but most agree that the event is appraised at least from the following dimensions: implications to personal goals, pleasantness, causality, coping,andconformity[18,28,40].Eachisdiscussedherebriefly, and their relation to visual user interface design is considered. Events which satisfy one’s personal goals are usually appraised as positive, while goal-incongruent events are appraised as negative [16]. The appraisal dimension of goalrelevance is understandably very salient in human-computer interaction research and design: usability problems, including visual usability problems, are usually taken to cause goalincongruent events, which elicit negative emotions. Obstructions to efficient, goal-congruent use of systems result in frustration and anger, while successful mediation of the goal-oriented action results in feeling of competence [29, 30, 41]. However, pleasantness of an event is also appraised independently of the personal goals and current motivations, especially with the so-called aesthetic emotions, which can be contrasted with utilitarian emotions [39]. This notion is central in user experience research, where the focus is more on the noninstrumental side of interaction [42]. Positive experience of a user interface is not necessarily related to the immediate goals of the user. The causality dimension of the appraisal process considers responsibility, that is, who caused the event and what was the motive behind these actions [18]. The agency can be attributed to oneself, such as when a user feels competent after being successful in demanding tasks [29, 41], or to other actors, for example, when evaluating visual user interface design choices made by designers. It is also possible to attribute the cause of the event to nonhuman agent. An example of this appraisal would be the aggression towards an inanimate object, such as a computer, when the goals of the actor are obstructed [43]. The coping dimension refers to the potential of the subject to manage the event or the emotion which results from the event. Coping is an individual’s adaptation effort to events and as such is not associated only with negative events [44, 45]. Therefore, a response to a goal-incongruent computing event may result in either enthusiasm or anxiety, depending on how much the individual expects to be able to exert control over the event. There are two main coping strategies, problem-centered and emotion-centered. For example, in human-computer interaction, individual differences in how people are able to solve interaction problems and how well they are able to cope with their emotions play a significant role in the user experience process [29]. The conformity dimension of appraisal refers to the compatibility of the event in relation to self-concept and social norms and values [18]. Anger, for example, is the result of an event in which causality is attributed to someone who is appraised to act in a deliberate norm violation. In user interface design, violating the norms of established design practices may, therefore, cause negative emotions even if the norm-violating aspects do not cause goal-incongruent use events. Of the all possible appraisal dimensions, perhaps the most frequently used scheme for describing emotion is the combination of valence and arousal [40]. Valence refers to the pleasantness of the experience and arousal to how much the emotion is associated with activation. For example, feeling calm is pleasant but not an active emotion, while feeling energetic is a pleasant and active emotion. Sadness is a negative and deactivating emotion, and anger is a negative and arousing emotion. While these two are not the only relevant dimensions of emotional experience, they are often the most salient and can be used for rich descriptions of emotion in human-computer interaction [41]. Regarding emotional experiences of pictorial representations, for instance, works of art can differ in their potential to cause arousal. Works of art which possess ability to evoke high arousal are most likely perceivedasdramaticanddynamic,andworksofartwithlow potentialonelicitingarousalaregenerallyperceivedasstatic and harmonious [46]. Thispaperfocusesonstudyingthemostsalientvisual elements in user interfaces and their relation to emotions attributedandelicitedbythemfromtheperspectiveoffuture programmers, in order to provide usable insight for the evaluation and design of visual elements in user interfaces that promote user experience and thus to benefit usercentered visual user interface design. This study focuses on the following research questions: What are the most salient visual elements in web pages from programmers’ point of view?Whatkindofemotionsdothesalientvisualelements elicit? How are the salient visual elements evaluated in the appraisal process? 3. Method 3.1. Participants. Participants (𝑁=50) expressed their impressions and emotions regarding visual website designs with 3E-templates. Of the participants, 17.5% were female and 82.5% male. The average age of the participants was 25.4 years (SD = 5.4 and range 20–46). The participants 4Advances in Human-Computer Interaction were allowed to return the templates anonymously without information that could be used to identify them, because the data collection was organized as a part of a university course.Thus,thereportedageandgenderinformationis from40participants,whiletenparticipantsansweredwithout identification information. However, the average age of the 40 participants did not differ much from the average age of the participants in the course: the average age of the participants inthecoursewas25.0years(SD=5.8andrange19–50). All the participants were university students, mainly from the Faculty of Information Technology. 67.5% of the participants who returned the templates with identification information were students of computer science, 27.5% were students of information systems, and 5% of the students were from other majors. From the students in the course, 66.7% had a major in computer science, 26% were students of information systems, and 7.3% were from other majors. The circumstances of the data collection were designed similarly foralltherespondents.Thestimuliofthestudyandthe data collection template were presented to the participants at the same time with the same advice in an auditorium, and theparticipantswereallottedthesameamountoftimefor answering the template. 3.2. Research Procedure. The data collection was conducted as a part of a University course about user-centered design. The data was collected from the lecture dealing with layout design. The lecture introduced the participants with relevant terms to describe the user interfaces. From the beginning of the lecture, the participants were familiarized with the design process in general, the evaluation methods of visual user interfaces, and visual elements, such as visual rhythm, dynamics, balance, tension, symmetry, contrast, Gestalt laws, and other various different design principles. People who are experienced in creating visual representations are more capable of analyzing them and more aware of their responses to visual phenomena [47]. Therefore, the introduction of the visual design terminology was conducted to provide the participants a starting point for utilizing verbal vocabulary to express their visual experiences. The numerous terms were equally emphasized and the participants were not forbidden to use other terms to express their impressions. If the data would have been collected with questionnaires, with predetermined concepts of visual elements and emotion terms, the data would have been a result of a conception of the researchers’ understanding of emotions attributed to visual elements. Therefore, the data was collected with the 3E- (expressing emotions and experiences) template [48, 49]. The 3E- template was selected as a data collection method to allow respondents to express their thoughts both verbally and nonverbally: by writing and drawing (Figure 1). After the introductory part of the lecture, participants were introduced to the 3E-template and asked to write and draw their thoughts and impressions of two still pictures of web pages, with a focus on the compositional elements of the web pages. The participants were not aware during the introductory partofthelecturethat they wouldneedtoreport their impressions of user interface designs with visual design Figure 1: The 3E-tempalate. “Only aligned to the left side. Diagonal shapes →not very calm. The arrow has some kind of function, but not so efficient, disgust” “By squinting one’s eye the title is easier to detect” Figure 2: Examples of written expressions from one template. terminology. In the templates, participants did not describe their impressions only with the concepts presented in the lecture, and they did not mention some of the presented concepts at all. The participants took approximately 20 minutes in answering the two templates. The research data is comprised of the written and drawn reflections and interpretations on the compositional aspects of the example web pages. A total of 100 templates were returned, as each participant evaluated two web pages. One template was returned without any written or drawn reflections and was therefore excluded from the analysis. The templates that comprise the data were mainly used by the participants to express their impressions of the UIs in written form. Examples of written expressions in the speech and think bubbles are presented in Figure 2. 3.3. Stimuli. The objects for the compositional reflection were two web pages (Figures 3 and 4) from the CSS Zen Garden web page gallery, web pages created with CSS-based design [50]. All the gallery web pages have the exact same content but altering visual appearances. The web pages were Advances in Human-Computer Interaction 5 Figure 3: The first user interface used in data collection. Figure 4: The second user interface used in data collection. selected to serve as stimuli, because the altering visual designs with the same content enable reflecting on the visual elements of the designs without concentrating on the content. In addition, the CSS Zen Garden web pages were selected as the stimuli in order not to bias the respondents with product expectations [51], such as brand experience. The CSS Zen Garden web pages were surveyed for two example layouts that would differ from each other, especially with regard to the amount of elements that divide the surface such as lines, shapes, and the overall use of space. The web pages were first divided into two categories and then compared step by step, finally resulting in two example web pages. Emphasis on a choice of web pages according to their differentiating elements was made in order to provoke participants towards a comparative analysis between web page layouts. Bell [52] also emphasizes that evaluations with content analysis are often comparative. The web pages were, therefore, selected with a comparative setting, regarding the pages’ differences in constructing visual elements. This was achieved in the study by using two different web pages with similar content but differing visual appearances. In addition, these two web pages were asked to be reflected in detail. Therefore, the two selected web pages were considered sufficient for the present study with a comparative setting, since all pictorial representations are constructed with visual elements. A broader sample of stimuli could be studied in future research. But first, it is essential to understand in detail which elements are considered important and what kind of emotions is attributed to them. 3.4. Data Analysis. When people experience pictorial representations, such as visual user interfaces, numerous visual elements are encountered [53]. People may experience visual elements as both explicit and simple but also as elements involving interpretation. Therefore, the research method should facilitate the combination of the analysis of qualitative and quantified issues. As Collier [54] points out, a studied phenomenon must first be examined without premature analyses of the data, maintaining a focus on preexistent structures and points of interest. First, a data-driven content analysis was conducted to detect and describe the user 6Advances in Human-Computer Interaction interface elements depicted by the informants after having looked at the selected user interfaces. Second, the elements found and defined were quantified in order to identify the visual elements that are considered most salient in visual user interface design, particularly in layout design from the programmers’ perspective. The aim was to find the visual elements that have drawn the most attention and can be seen to have importance due their frequent emergence and significance of the content. The quantification of the explicitly written words representing specific objects is important, but it also relates to the qualitative procedures. Krippendorf [55] emphasizes the meaning of context in content analysis. Texts and images are always produced in some specific cultural context and they also refer to wider cultural context. This aspect was considered by first deploying the interpretative viewpoint as an independent phase before quantifying the found elements. The methodological decisions for the study are influenced by the nature of the visual viewpoint: instead of directly analyzing visual user interfaces, the data is comprised of participants’ descriptions of the two example web pages. Therefore, many methods, for example, semiotics and iconography [56], as well as social semiotic visual analysis [57], are not applicable because they assume that the data along with the object of analysis are visual images. Furthermore, even though the data collected by other methods (such as eye tracking) could enable the extraction of specific points of attention,itwouldbeimpossibletoanalyzewhichparticular element draws attention, color, form or, for instance, a visual tension between the elements. The analysis of the visual elements was conducted with these two procedures, which supported the analysis from two different viewpoints. The emotions elicited by salient visual elements were analyzed with same procedure. The data analysis proceeded as follows. First, the data was observed as a whole by reading the templates. The purposewastofirstfocusonthevisualelementsina neutral context in order to gain an understanding of the visual elements that are seen as important in visual user interface design despite the emotions they might evoke. The second phase was to create categories of relations and then to critically combine several different categories of relations between elements into main categories. For instance, from the example illustrated in Figure 2, the first observation about left side alignment is related to the spatial organization as isthesecondnotionofdiagonallines.Stabilityrefersto symmetryandtheroleofthearrowisrelatedtoperceived functionality. The human figure in the templates was only used in a few templates to illustrate emotions by drawing facial expressions. Almost none of the drawings emphasized the written content or the facial emotions of the figure but brought to attention something without a clear connection to the written content. Due to these characteristics of data, the focus of the analysis was on the written texts describing the visual elements and emotions attached to them. After the researchers had acquainted themselves with the data, an interpretation framework was developed and used to assist in the analysis. The interpretation framework included the items, which directed the focus on a conceptual level during the data analysis, in interpreting and comparing interesting insights within the data. The interpretation framework consisted of compositional interpretation [58] and visual elements in user interface design [1]. Compositional interpretation refers to describing the appearance of images with a detailed terminology. This form of visual analysis requires contextual knowledge of pictorial representations and a particular way of looking at images (“the good eye”), which is not methodologically explicit but functions as visual connoisseurship and is a specific way of describing images. Compositional interpretation focuses on the image itself by trying to comprehend its significance mostly by focusing on its compositionality. Interpretation does not focus on “external factors” such as the kind of messages the image sends and whether it has some functional meaning. The terminology of compositional interpretation includes several components. The first component is the content, that is, what the image actually shows. The second component is color, which is more specifically defined with concepts of hue, saturation value, and the harmony of color combinations. The third component is spatial organization, which includes volume, lines, static and dynamic rhythm, geometrical perspective, logic of figuration (how the elements of a picture offer particular viewing position outside the photo), and focalisers (the visual organization of looks and gazes inside the picture and in relation to the viewer’s gaze). The fourth is light: the type of light that is represented and its sources. The last component is expressive content, which describes the “feel” of the image combining the effect of the subject matter and visual form. Compositional interpretation approach is established in Art History and is usually used in studying paintings [58]. Visual user interfaces canbecomprehendedaspaintingsor,inamoregeneral viewpoint, as any two-dimensional pictorial representation that is constructed with visual elements, such as lines and shapes. Compositional interpretation can, therefore, also be extended to analyzing visual user interfaces. Mullet and Sano [1] present visual user interface design factors, which are shape, color, position, texture, size, orientation, point, line, volume, balance, symmetry, scale, contrast, structure, proportion, rhythm, and position. The emphasis on visual factors in user interface design is to provide insight into designing good visual usability and effective visual communication. They also point out that negative space (i.e., empty or white space between visual elements and objects, opposite to active space) and grouping are important components in visual user interface design. The interpretation framework combined the discussed visual elements and guided the detection of the concepts related to visual elements in the coding phase of the analysis. The elements were derived from the two approaches described above and created the content of the interpretation framework. The interpretation framework included, but was not restricted to, the following components: color (hue, saturation, value, and harmony of color combinations), spatial organization, geometrical perspective, volume, lines, points, size, texture, shape, static and dynamic rhythm, orientation, balance, symmetry, scale, structure, proportion, negative space, grouping, position, figuration logic, focalisers, contrast, and light. From Advances in Human-Computer Interaction 7 a compositional interpretation, the expressive content component was excluded from the interpretation framework in the analysis of salient visual elements, because of its emphasis on subject matter evoking emotionality which was not in focus in the first analysis phase of this study. The interpretation framework functioned as a “theoretical lens” in the analysis. The analysis required accuracy and concentration in detecting tiny nuances in finding the relations between the different visual elements, which required close attention in detecting how many altering ways there are, for instance, todescribetheuseofspaceinuserinterfaces.Thegoalwas to create a model that illustrates the hierarchical order of visualelements.Thestructureofthemodelisdata-drivenbut the logic is validated using theoretical framework of visual language. The analysis of the emotions elicited by visual elements followed a procedure similar to the analysis of the salient visual elements. First, all templates were regarded as a whole with the focus on finding the emotions that had been expressed constantly and drawn most attention in relation to the salient visual elements. The construction of the interpretation framework for emotions was based on the appraisal theory of emotion, in which the appraisal of the subjective significance of an event results in subjective emotional experience. Overall, the participants used emotion words or categories clearly less often than visual elements: in total, 26 emotion words or categories in relation to visual elements were observed. Here, the interest was especially in the relationship between the visual elements of a user interface and the subjective emotional experience, that is, the feelings which arise as a response to visual elements. The interpretation framework for analyzing the emotion responses was derived from the appraisal dimensions described above. For the observed emotions, a relational theme which refers to the narrative explanation of the emotion was constructed [17]. The narrative can be constructed with the appraisal dimensions. For example, frustration is an unpleasant (valence) and activating (arousal) emotion, but this is not enough to understand frustration. Frustration results when there is an obstruction preventing the subject from reaching her goals, and the subject still feels some power over the situation [18, 29]. Therefore, in order to understand an emotional response, such as when a user is frustrated at a computer program, a thematic explanation relating the goals of the user to the events of the use, as well as a reference to the coping possibilities of the user, is required [29]. A template was included into the emotion analysis if it contained a common emotion word that is included in lists of emotions, (e.g., [18]) or was an appraisal dimension, for example, pleasant [40]. The following words relating to emotions were expressed: frustration, anxiety, calmness, apprehension, boredom, disgust, energetic, pleasant, disturbing, threatening, and confusing. From these, five thematic groups were created: frustration (including “frustration” and “disturbing” as the latter is part of the appraisal profile for frustration), calmness (which included “calmness,” “apprehension,” and “energetic” because they belong to the same appraisal dimension), “confusion,” “boredom,” and “pleasantness.” Other words were discarded from the analysis, “Everything in this side (left). The picture guides the gaze to the left side menu, not in balance” “Only black color, is something missing. Dark, boring” Figure 5: Examples of written emotional expressions from one template. because they were mentioned in connection with the visual elements, which were not analyzed here due to their low frequency. Each thematic group was given a relational theme and was then connected to the visual elements in order to establish the explanatory logic between the user interface design and the emotional response. Examples of expressed emotions in relation to visual elements are presented in Figure 5. 4. Results All the 100 templates were analyzed by writing down all the described elements in the templates and by counting the frequency of their occurrence. The number of times each visual element was mentioned in a template and the number of participants who at least once mentioned the visual element are presented in Table 1. The table illustrates the second level classification of visual elements. Different utterances were used to describe, for instance, guiding the gaze, such as “thepicturedirectsthegazetotheleftsidemenu,” “the gaze moves from up right to left down along with the title, and in addition, the gaze is guided with a separate arrow,” and “...directs the gaze outside of the user interface.” All these different notions were coded in the first phase of the analysis and were classified to the group of guiding the gaze in the secondphaseoftheanalysis.Visualelementsthathadbeen mentioned only three times or less were excluded from the analysisduetothelowfrequency. The interpretation framework guided the detection of written reflections of the described elements. For instance, the interpretation framework did not include usability, which emerged from the data as a connective factor between relations of different elements, especially in terms of visual usability of the user interfaces. In many templates, think bubbles were used to express additional reflections, mostly aboutthesupposedfunctionalityoftheuserinterface.The results of the study are data-driven; the most salient visual 8Advances in Human-Computer Interaction Table 1: Notions of visual elements by participants. Visual elements Notions/participants Guiding the gaze 21/17 Compositioningeneral 15 Grouping 8/7 Grouping with similar contents & functions 10 Grouping with colors 1 Clarity 23/22 Symmetry 7 Asymmetry 8 Balance 14 Imbalance 20/19 Negative space 21/20 Active space 1 Impression of overall use of space 9 Alignment 13 Centering 12 Diagonal lines 15 Horizontal lines 9/8 Vertical lines 7 Lines in general 2 Understandability 5 Legibility 8 Font size & area 12 Font color 8 Background picture 9 Background color 9 Color contrast 22 Font contrast 3 Contrast in general 6 Layers 3 Colors in general 18 UI as a whole 8/7 Square 2 Golden ratio 1 Horizontal composition 2 Straight corners 1 Square 3 Visual tension 3 Color composition 1 Impression of 3-dimensionality 2 elements emerged from the data through content analysis, in which the theoretical framework was used to assist in detecting the utterances describing different elements. Therefore, the background theory of the visual language [1] and compositional interpretation [58] aided the analysis as a theoretical lens in detecting the visual elements as well as organizing the categories to hierarchical relations. For instance, the classification of the two main categories of visual elements, spatial organization and color and contrast, was conducted by reflecting on the background theory. The salient visual elements are presented in Figure 6. The hierarchical structure of the results illustrates the different levels of visual elements from the lowest-level elements (e.g., diagonal lines) through the visual elements of organizing the lowest-level elements (e.g., alignment and asymmetry) to the main design dimensions (e.g., spatial organization), resulting as positioning of the viewer in appraising the most salient visual elements. Positioning of the viewer gathers all the results under one definition and functions as the main process outcome in experiencing visual user interfaces. Positioning of the viewer (including figuration logic and focalisers) was seen as a visual strategy that guides the viewer’s gaze in the user interface, which functions through visual elements guiding the gaze. Overall, positioning of the viewer refers to the user interface’s ability to communicate the whole content in a visual manner that is quick and easy to grasp. Positioning the viewer was discussed in relation to visual elements contributing to spatial organization and color and contrast. Spatial organization and color and contrast were seen to apply both to communicability and to visual usability and interaction. Spatial organization and color and contrast are the main dimensions in visual user interface design language (e.g., [1]), which can be further described in detail with lower-level visual elements contributing to these higher level design dimensions. Spatial organization was emphasized by focusing on grouping and negative space. Imbalance, balance, asymmetry, and symmetry were seen as the primary visual elements affecting grouping and the use of negative space. In addition, grouping and the use of negative space through imbalance, balance, symmetry, and asymmetry were seen as contributing to the spatial organization of visual user interface elements in creating an impression of the user interface as a consistent totality, in which visual elements contribute to the impression of the user interface as a whole. Grouping of similar contents and functions were seen as substantive factors creating clarity. Spatial organization through balance and symmetry was seen as important regarding the overall use of space. Grouping and negative space were further discussed in terms of aligning or centering the content. In the data, spatial organization was reflected in detail and visual elements referring to this category were often mentioned. Grouping with similar content and functions and negativespacewereseeninrelationtothecompositionoftheuser interfaceingeneralandimpressionofoveralluseofspace. Observations of balance and imbalance were seen in relation to symmetry and asymmetry. Alignment to the left or right and centering the content were seen to affect impressions of balance, imbalance, symmetry, and asymmetry. An important relation was often found between diagonal, horizontal, and vertical lines in creating impression of overall use of space and guiding the gaze. Diagonal, horizontal, and vertical lines were especially emphasized and seen as visual elements that guide the gaze forward. A strong emphasis was placed on describinghowthevisualelementsfunctionandhowthey support visual usability and interaction, especially the ways by which visual elements direct attention in the user interface towards the most important areas. Submit your manuscripts at http://www.hindawi.com Computer Games Technology International Journal of Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Distributed Sensor Networks International Journal of Advances in Fuzzy Systems Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 International Journal of Reconfigurable Computing Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Applied Computational Intelligence and Soft Computing Advances in Artificial Intelligence Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Advances in Software Engineering Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Electrical and Computer Engineering Journal of Journal of Computer Networks and Communications Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Advances in Multimedia International Journal of Biomedical Imaging Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Artificial Neural Systems Advances in Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Robotics Journal of Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Computational Intelligence and Neuroscience Industrial Engineering Journal of Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Modelling & Simulation in Engineering Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 The Scientific World Journal Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Hindawi Publishing Corporation http://www.hindawi.com Volume 2014 Human-Computer Interaction Advances in Computer Engineering Advances in Hindawi Publishing Corporation http://www.hindawi.com Volume 2014