Design standards for icons: The independent role of aesthetics, visual complexity and concreteness in icon design and icon understanding ☆

Icons play an important role in modern interfaces and therefore recent empirical research has focused on enhancing icon processing — that is, icon perception and icon function understanding. However, in existing sets, icons vary simultaneously across different icon characteristics, confusing the contribution of each to icon processing. We developed icon design principles for aesthetics, complexity, and concreteness, and used them to create 64 icons that varied independently along each characteristic. Participants reported the icon function and rated each icon in terms of aesthetics, complexity and concreteness. The manipulated characteristics had independent effects on icon processing, with two exceptions, for which we propose evidence-based solutions. Based on these findings we propose guidelines for designing icons for research purposes.


Introduction
Experimental methods are becoming increasingly important in the domain of design research.Again and again, research projects require different versions of an interface that vary with regard to specific characteristics.For example, an increasing number of psychological studies manipulate aesthetics of interfaces (e.g., operating systems, webpages, mp3 players, etc.) in order to assess the influence of varying aesthetics on user experience and performance [e.g.[1][2][3][4][5]].
The current study is concerned with icons, which form an integral part of interfaces.Icons play an important role in our daily lives.As pictorial signs, they express words, functions, or instructions in a nonverbal language.We see them at the train station, at the airport, in the museum, at the workplace, on the road as well as on almost every interactive user interface [e.g., [5][6][7]].One reason for the extensive use of iconic representations is their ability to make actions, objects, or concepts easier to find, recognize, learn, and remember compared to the use of text [8][9][10][11].In addition, icons are considered to be better understood by illiterate users or members of different language groups [12][13][14].While there is a broad agreement in industry and research on the usefulness of icons [15,16], there are countless different views on what to consider when designing icons.
The literature highlights four key characteristics used by a variety of icon designs; access to meaning, familiarity, visual complexity, and aesthetic appeal (e.g., [17]).These could be split into meaning-based (access to meaning, and familiarity) and visual characteristics (visual complexity and aesthetic appeal).
Access to meaning (also known as semantic distance or name agreement) relates closely to the meaningfulness of icons and the extent to which what is depicted visually allows individuals to extract the intended meaning of the icon.Familiarity can relate to familiarity with the icon image and/or familiarity with the intended meaning of the icon; the effects of these two components are difficult to separate out.In the current study familiarity was held constant, as all the icons were novel.We then chose icon concreteness to represent the meaning-based characteristic as it was ideal for novel, unfamiliar icons and also because concreteness correlates very highly with meaningfulness, and with semantic distance.Concreteness refers to the pictorialness of the icon or symbolthe more a symbol represents something that may exist in the real world (e.g., an image of a person, a common object, an animal or a plant) the more concrete it is.In contrast, abstract icons typically include combinations of shapes and lines to indicate meaning [18,19].
Visual complexity is defined here in terms of the number of components in an image, such as the number of horizontal, vertical and diagonal lines, the number of closed figures, open figures, and letters present in the symbol (e.g., [18,20,21]).There is strong evidence that visual complexity primarily affects visual search for icons on an interface while icon concreteness affects users' access to meaning (i.e., they have independent effects on performance [18]).Aesthetic appealor just appeal refers to mild aesthetic experiences made on the basis of simple judgements of liking by participants (see [22] for a review; and [17] for the most recent use of this definition).Because of reports on its effects on performance (see section 2 below), icon appeal is becoming increasingly valued and studied by interface designers and human factors specialists and was included in the study for this reason.
Both visual and meaning-based icon characteristics have been shown to be critical in how effectively icons, especially new and unfamiliar icons, are learned and understood, and how easy they are to interact with (e.g., how easy they are to find in an array of other icons and symbols; [e.g., [23,24]).However, in existing databases, icons can vary along those characteristics at the same time.For example, a set of icons may vary in terms of visual complexity and aesthetic design, and in terms of concreteness and visual complexity.Although this may not be problematic for developers and designers, it presents a significant problem when using icons for the purposes of research into icon perception and icon function understanding.For instance, if a team of researchers is interested in the effect of icon concreteness on icon function understanding, then they need to choose icons from existing icon sets that vary only in concreteness (high versus low), but not in any of the other icon characteristics (e.g., visual complexity, familiarity, meaningfulness, aesthetics, and so forth).
There are currently-two key problems which the current research aims to address. 1) First, existing icon corpora offer very few instances where the icon characteristics vary independently of each other.This raises the question of whether icon characteristics can realistically be fully independent of each other.2) There are currently no guidelines or instructions which provide information on the experimental design of aesthetic icons (i.e., which design strategies can be used in order to design an aesthetically pleasing or displeasing artefact).
To address these problems, the current study developed design guidelines and recommendations for the design of icons in the context of experimental research on icon processing allowing for the creation of better controlled novel icon sets for research.The current work has the added advantage of creating a better understanding of the characteristics that can enhance better user understanding of icons and performance with them.

The role of design aesthetics in research
In the current study, we define design aesthetics as the design characteristics of an artefact including form, tone, colour, and texture, while we use the term aesthetic appraisal when we refer to the evaluative judgment of a subjective aesthetic experience of the interaction with an artefact [ [2], see also [25,26,22]] for the distinction between aesthetic appraisal and judgement].Recently there has been growing interest in the potential causal effect of design aesthetics on user behaviour and performance [see [27] for a recent review].Empirical evidence regarding this possible link has yielded conflicting results [28][29][30][31][32][33][34].
One reason behind the conflicting results might be the fact that design aesthetics in general, not only for icons, is a multi-dimensional concept, with a number of different characteristics contributing to making a visual stimulus appealing [e.g.[25,35]].In addition, these same characteristics that contribute to making something aesthetically pleasing may also affect user performance [e.g.[23,36], see [37] for review].For example, simple, concrete and familiar stimuli all tend to improve user performance in comparison to complex, abstract and unfamiliar icons and also make icons more aesthetically appealing [e.g.[38,37,39,40]].A major problem for existing icon corpora [e.g.[18,19]] is that they cannot control a priori for familiarity since they rely on existing icons which are more or less familiar to potential users.As a result, the extent to which a participant has previously encountered an icon is unknown even though this is known to be an important part of user evaluations of aesthetics and of user performance [e.g.processing fluency, mere exposure, [41,29,42,43]].The current study reports the first attempt to create icons that are orthogonally controlled across the key icon characteristics, generating design principles as part of this process.This has dual benefits, helping to improve icon design and showing how novel icon corpora can be created for research.

Design principles in icon design
The number of icon design initiatives and repositories is increasing.Several projects provide icons that can be reused in various contexts, such as Material Design [44] which is based on a unified representation according to regulated aesthetic criteria.In this example, the design criteria address different aspects of the icon, such as the outline of the shape (e.g., use consistent, geometric shapes), the structure grid (e.g., use a 24x24p grid) or the search for clarity (e.g., simplify icons for greater clarity and legibility).The Noun Project is another example of a collection of over 3 million icons, designed by a community of multiple designers [45].Because those icons are based on a template defined by the project leaders, they tend to be visually and technically coherent with one another, representing consistent sets.Nevertheless, the template may not be used as intended since it can be interpreted in different ways by designers and so is influenced by the designer's individual rules and preferences as they personalize their icon sets.
Another important evolution regarding icons, is the increasing development efforts and adoption of design systems, which imply constraints other than consistency or craftsmanship.For example, many brand identities are now adorned with a set of custom icons whose visual aesthetic is influenced by the constraints of a style guide (e.g., Google, n. d.-a), physicality or skeuomorphism [e.g., [46]], clarity [e.g.Swiss Federal Railways, [47]], or display size [e.g.smartwatch icons, [48]].
As mentioned earlier, the aim of the current work was to develop design-guidelines which allow the design of icon sets in which the icon characteristics vary independently from one another so facilitating work in the field of experimental design research.This manipulation of independent design characteristics would allow for a causal link to be made between design attributes and user performance.

Summary of the design process
Three key icon design characteristics were considered, namely icon aesthetics, complexity and concreteness while icon familiarity was held constant as all icons were novel in the set [37].Based on an extensive systematic evaluation of existing icon sets, a series of specific design recommendations were developed.These design recommendations were then used to develop a new set of icons.For each icon, eight different versions were created, allowing variation of concreteness (concrete vs abstract), complexity (simple vs complex) and design aesthetics (appealing vs unappealing; see Fig. 2).
The efficacy of these design manipulations was assessed by asking participants to rate the characteristics of the new icon set.If the design manipulations were successful, we would expect that subjective ratings of the newly created novel icons would vary systematically in R. Collaud et al. accordance with the design principles used in the current studyaesthetics, complexity and concreteness.For this study, eight icon-functions were employed: blow, clean, cut, go around, hoover, pest control, screw, water (see Annexe 1,8 Final Icons' Sets).These functions have been chosen as part of a different project with a view to being used in a gamebased application, and correspond to action icons [49].They were also chosen as they are less likely to be familiar to observersboth in terms of symbolic representation and in terms of a function (unlike functions such as play, or fast-forward, and so forth).

Initial set-up
Before proceeding to design the icons in terms of the three characteristics that are visual complexity, appeal, and concreteness (see Section 3.3), the first step of the present design process was to identify key design principles following recent design-recommendations [42,44,50,51].First a 24 × 24 squares vector-grid was defined as a main design structure (see Fig. 1).All curves, extremities (e.g., vector handles), geometric shapes and lines (e.g., diagonal, angles, etc.) have been placed into this grid structure.This constraint encouraged consistent and proportional visual compositions by reducing variability regarding the positioning of graphical elements.All icons were designed with vector graphics to allow the resulting icons to be displayed in various contexts (e.g., from retina screens to large-scale signage systems).
Moreover, we defined 1 square (or pixel) as the icons' main stroke width for pixel-perfect accuracy.This is helpful to avoid visual outline deviations, sharpen visual precision on various display sizes and ensure a high-level of craftsmanship [e.g.[52]].Finally, in order to focus on the main design characteristics of appeal, complexity, and concreteness, all icons were designed using only black and white colors [e.g.[53][54][55]].
To independently manipulate the three selected design characteristics, great importance was attached to the fact that each design measure influenced one characteristic (e.g., complexity) but not the others.For example, applying a filter to change an appealing icon into an unappealing one should neither impact its complexity nor its concreteness characteristic level.In the following sections, the design process as well as the design parameters used to develop the three design characteristics are described in detail.

Design layers
Three pictorial layers were defined to develop the eight versions of each new icon-function (see Fig. 2).We used a human body metaphor to facilitate the visual representation of those layers.The first layer, describing the primary structure of an icon, the skeleton.Two structures, one abstract, one concrete, were then created to manipulate icon concreteness.The second layer, the flesh, is the visual matter around the main structure.This matter can evenly wrap the structure (e.g., variation of the stroke thickness), or be spread in a more unevenly detailed distribution (e.g., unique vs hatched lines).This second layer addresses the manipulation of icon complexity creating two variations (simple and complex parameters) of the two designs resulting from the first layer.As an intermediate result, four icon-versions are resulting (concrete simple, abstract simple, concrete complex, abstract complex).In the third layer, the skin, aesthetic filters were applied to each icon version, creating series of four appealing and four unappealing icons.

Defining design-principles for each icon-characteristic
Icon design usually follows requirements of aesthetics and visual communication of common graphic design practice.While there exist some general design-recommendations (e.g., Gestalt principles, [56]) and general icon design-recommendations (e.g., icons should be concise and useful to a wide variety of different users [57]), the domain lacks clear and empirically evaluated rules for icon design.To address this issue, the current project developed specific icon design-principles to manipulate key icon characteristics in a systematic way.Table 1 summarizes those design principles and the following sections describe them and provide recommendations about how to apply the resulting design specifications for future icon design.

Concreteness characteristic: Designing icon "skeleton" by interpreting its meaning
The concrete parameter reflects the visual appearance of an ordinary object or a familiar form, such as an image of a tree, while the abstract parameter expresses the intent behind a concept, such as the act of growing a tree.Based on those observations, we developed 3 designprinciples to design abstract and concrete icons, shown in Table 1.The inspiration principle is the beginning of this design journey.At this very moment, the designer needs to brainstorm ideas that could express the selected icon-meaning (e.g., to dig).To narrow down the scope of possibilities, this principle suggests identifying both object-and conceptrelated references.From these inspirations, the designer's task is to establish a first skeleton of the icons that would express its function.According to the expression principle, concrete icons are a visual simplification of figurative objects (e.g., a spade).After analysing the selected object, the designer will draw its very essential components in the defined pixel-grid.Abstract icons imply a simplification of nonfigurative concepts (e.g., to remove matter) such as actions, movements, or changes of state.Based on the composition principle, the designer's task is to interpret the icon meaning and represent its essence with different types of shapes.Combining simple geometrical figures will help drawing icons structure in a non-figurative way.We can argue that those abstract shapes can express the concept behind them instead of being seen as a particular object.Inversely, concrete icons will be designed with elaborated combined shapes, which results as an original representation of a specific object.
Designer's Reflections: To control for icon familiarity (i.e., design new and unfamiliar icons), well-known explicit shapes such as letters or figures should not be used.In a similar vein, graphical symbols (e.g., arrows) should be used with parsimony, so that unnecessary similarities can be avoided when designing different icons.For example, for the icon function "blow", the use multidirectional curves (see Fig. 3B) can be better than waved arrows (see Fig. 3A) because arrows come with an undesired increase in visual complexity.However, the use of an arrow could be helpful to better understand the meaning of a more elaborate icon function such as for example "to bypass an obstacle" (see Fig. 4).Although highly demanding for the designer in terms of synthesis skills, by following these principles of designing for simplicity (e.g., using only essential shapes for both abstract and concrete skeletons), it is possible to develop icons with a consistent visual complexity.

Complexity characteristic: Designing icon "flesh" by applying normative rules
While the concreteness skeleton layer consisted primarily of creative reasoning and design intuition, the complexity parameter defines design rules by reasoning in a normative way.Because visual complexity is quantifiable, it can be manipulated quantitatively [e.g.[58]].The simple parameter was defined by deduction, during an extensive design research phase where various graphical styles and sketches were created.The visual hypotheses came from the most convincing emerging graphical results.These principles are summarized in Table 1 and the resulting icons following the principles for the complexity characteristic are shown in Fig. 5.
According to the multiplicity principle, a simple icon should be designed using only primary construction lines.Constraining the variety of design elements will create a clean, normative version of its skeleton, which can be easily translated into a complex icon.The designer will manipulate these design elements by multiplying the unique lines and   dots to generate visual noise similar to a raster.Those interventions will create multiple layers of reading, such as texture, hierarchy of information or focus depth while preserving the simple icon's overall structure.The principle of diversity demands that simple icons are drawn using contiguous and mainly straight lines, and unique stroke outlines.
Those lines are displayed with the same thickness, without variation, based on the main grid ratio (1/24px).To create complex icons, this principle implies the designer to vary strokes and dots thicknesses that to obtain more complex icons.The resulting icons will be visually less contrasted than the simple ones, giving an implicit feeling of repetition and variety, while offering a wide diversity of elements to process.Finally, the principle of brevity demands that the simple icon contains only essential graphical elements needed to understand the icon's meaning.In contrast, for complex icons, more than just using more lines or different stroke thicknesses, the brevity principle suggests adding extra non-essential details to the icons, which leads to an increase in visual complexity.Designer's Reflections: During the design process, we discovered that brevity (or what is sufficient) can vary depending on the expression of the icon-function.For example, insufficient graphical information can lead to an ambiguous understanding of the icon-function.This was the case with one of the early versions of the function "to dig" (see Fig. 6A), which was mistaken by some participants with an airplane.The final version (see Fig. 6B) is still striped down, but in a more elaborate way: a handle ends the stick, the spade shape is more typical and has been tilted.Moreover, its final design is more compatible with the action of diggingthe spade appears in an "action ready" state that implies its function.Those subtleties, part of an iterative design process (ideate, evaluate, adapt, release) applied for each icon individually, were important to properly represent the icons' meaning.

Aesthetics characteristic: Designing icon "skin" by manipulating visual perception
The aesthetic characteristic is the last layer of the proposed design process.Previously compared to the skin of a body, it is the overall aesthetic envelope of the icons.It is manipulated by applying specific design principles to the previously designed icon variations.The design principles to create appealing and unappealing icons are shown in Table 1.
While the appealing parameter influences how icons are perceived in terms of care and craftsmanship, the unappealing parameter is the designer's paradox.Our first series of unappealing icons were created by using principles such as a naïve design style, a voluntary lack of precision, outline deformations or a low resolution (pixelation) rendering.In preliminary design iterations, nearly 60 different filters (visual transformations) were applied to appealing icons (cf.Annexe 2, filter experimentations) to transform them into unappealing ones.These simple manipulations quickly proved insufficient in initial user tests.First, icons were not always perceived as unappealing by participants.Second, applying an unappealing filter to appealing icons made the intention too obvious, so the participants did not consider the design as serious.Indeed, they seemed to recognize the intention and the filter used.
Next, we employed a bottom-up approach in formulating the unappealing parameter, by conducting a qualitative analysis of two existing published icon-sets, that have been evaluated in large normative studies [19,59].A total of 839 icons were ranked according to their scores of perceived appeal.The icons with the lowest scores were classified and analysed to isolate singularities and similarities that make them unappealing.This process led to the identification of seven filters that define the unappealing parameter (see Fig. 7).
To complete our set of unappealing design filters, we developed additional ones, such as thin outlines, shape inclination, stretchiness or relative sizes of graphic elements.Finally, we distributed those filters to propose 3 design-principles: balance, coherence, nuance.
According to the balance principle, aesthetic design can be achieved, by harmoniously matching shapes in the main grid ratio or by filling the space by distributing positive (black) and negative (white) spaces evenly.Following recent recommendations from the literature [60], a white margin (2px) is added around each icon to unify their size and proportion wherever they are displayed.Moreover, the graphical components layout is inspired by established aesthetic principles, such as the golden ratio proportions [61], the rule of thirds arrangement [62], or the grid system harmony [63].Finally, all graphical components (lines, dots, angles, etc.) are aligned on the pixel grid and used as a structural reference (see Fig. 8).
Applying the balance principle from an appealing perspective will help creating icons with high standards of craftsmanship [e.g.[25]], commonly used in many systems or brands.The result will certainly be successful, but due to the strong rationalization of its design, it will be easier to resemble other existing icons used in various contexts.Nevertheless, the resulting aesthetic will have the advantage of providing a more comforting feeling, as part of the visual culture of an average person.On the other side, the balance principle suggests that the structure of unappealing icons should be designed without harmonious use of the grid.Ideally, the different design elements should be deformed without consistency, with exaggerated proportions and even overlap each other.The result of this manipulation will certainly be extreme and unprecedented in terms of design, and will provide a sense of novelty, even inconsistency.
Focussing on icon outlines, the coherence principle differentiates appealing and unappealing design-parameters according to their Complex icons are directly based on simple icons, but include other elements, such as dotted, hatched, and multiplied lines.Those additional graphical components are repeated to create additional details, such as a raster system or textures, providing secondary layers of graphical information.Also, multiple outline widths, still based on the main grid ratios, are used to create more complex variations in the drawings.For example, instead of simply outlining the object of the icon (e.g., the spade), multiple varied outlines complexify the perception of this object, by adding more detail (e.g., ground textures, reflection on the shovel, etc.).regularity and predictability.Appealing icons will be drawn using more plain shapes, even isolated ones with soft, rounded contours.The designer's mastery will be felt in the roundness of the design, which conveys their intention.Conversely, unappealing icons will tend to be designed in a more brutal manner, suggesting that not everything is intentional.For example, the shapes used may overlap, the sequence of curves may be very incisive, there will also be breaks, even pixelation.These different elements, as well as those transmitted by the balance principle, which addresses the structure of the icon, are also inspired by the concept of symmetry, widely used in image processing.
The concepts of uniformity and consistency are addressed by the last design-principle: nuance.Nuance describes filters influencing the very nature of the icon's stroke, its continuity, variability or ending.For an appealing effect, elements such as filiform outlines, links or rounded terminations are expected to be used.The main thing here is the expression of the uniform and coherent aspects communicated by the visibility of the design system.For an unappealing effect, this uniformity will be nuanced by a variety of elements.The outlines may be contrasted (their thickness varying along the line) and the type of terminations will differ.
Designer's Reflections: Often using a single filter per design principle was not sufficient to transform an appealing icon into an unappealing one as intended.Therefore, we used a combination of design-principles (see Table 1) in the design process of each icon.For each design principle, specific filters (e.g., degree of rotation, percentage of relative size, etc.) were set randomly.As a result, an appealing icon can be converted into multiple variations of an unappealing one.In addition, the randomly assigned combination of various design-principles makes the filter-effect less obvious to participants of a study using these icons.Fig. 9 shows an example of the application of different design-principles to the "to dig" icon.

Empirical evaluation of the design principles
The design process described above led to a first set of 270 icons.Out of these 270 icons, a final sample of 64 icons was selected, based on 8 varied icon functions and their overall visual novelty.The final set of icons used in this study is presented in the Appendix (see Annexe 1).The eight icon functions selected were: blow, water, screw, pest control, hoover, go around, cut, clean.As noted earlier (see Fig. 2 and Fig. 10) eight different icon versions were created, differing regarding design aesthetics (high vs low), concreteness (concrete vs abstract) and complexity (complex vs simple).Fig. 10 illustrates the combination of the three design characteristics, resulting in 8 different designvariations.
Each of the icons in the set was rated by participants for concreteness, complexity, aesthetic appeal and comprehensibility.Our predictions for empirical investigation into the effect of our icon design process of the perception of icons on each of the manipulated characteristics, and on icon function understanding are summarized below and illustrated in Fig. 11.
Manipulation checks: It was expected that appealing icons would be rated more highly for appeal than unappealing icons.Similarly, it was expected that complex icons would be rated as more complex than   simple icons in the set and that concrete icons would receive higher ratings of concreteness than abstract icons.
Checks of independence: In addition, it was expected that the manipulations were independent from each other, meaning that design aesthetics would not influence ratings of perceived concreteness and complexity, concreteness would not influence perceived aesthetics and complexity and complexity would not influence perceived aesthetics and concreteness.
Icon understanding: It was expected that ratings of icon comprehensibility would be correlated with icon concreteness, with concrete icons being better understood than abstract ones.Both the aesthetic appeal and visual complexity of the icons were not expected to be related to icon comprehensibility.Eighty percent of the participants were female, 18 % male and 2 % selected "other" when asked about their gender identity.Participants were recruited via mailing lists and the social networks of the research labs involved in this study.

Study design
Following the three-factorial repeated-measures design (illustrated in Fig. 10), each participant rated a single icon of the possible eight, for each of the eight functions in terms of aesthetics, concreteness, complexitya total of 8 ratings.Presentation order for the icon-Fig.10.Illustration of the study experimental design.The study was based on a 2 (aesthetics: appealing vs unappealing) X 2 (concreteness: concrete vs abstract) X (visual complexity: simple vs complex).Examples of icons for each of the 8 resulting conditions, for the icon function "to dig".variations followed a Latin-Square design.Participants were randomly assigned to the eight groups of the Latin-Square, with 34 or 35 participants per group.

Dependent measures
There were four dependent measures.Each icon was rated with regard to perceived complexity, perceived concreteness, and perceived attractiveness.Each rating was accompanied by a short description of the concept under evaluation.For each subjective rating, a Likert scale ranging from 1 to 6 was used, with verbal anchors for the extreme values.The items, descriptions, and verbal anchors are presented in Table 2.
In addition, participants were asked to describe the icon function as free text.Text answers were then analysed by one author of this article regarding their match with the intended function on a scale ranging from 1 (does not match at all) to 6 (matches exactly).

Procedure
Participants were recruited via several institutional mailing lists and social media.Participants were asked to use a desktop computer or a laptop to complete this online study.Participants were asked for details of their gender and nationality and then asked to rate eight icons, one for each given icon function, in terms of how they evaluate the icon's visual complexity, concreteness, aesthetics, and which function did they think the icon denoted (see Table 2).Each of the 64 icons was seen by 34 or 35 participants.The approximate time needed to complete the survey for each participant was about 5 min.

Statistical analysis
Individual ratings of the 276 participants were pooled on icon level.This means that ratings for each icon in each condition was calculated by the means of the 34 or 35 participants that had rated that icon.Icon ratings per condition were analysed using four different factorial analyses of variance (ANOVAs), one for each dependent measure.Effect sizes (partial eta squared or η 2 p) of 0.01 can be considered small while effects of 0.06 are medium and 0.14 are large [see [64,65]].Effect sizes for each independent variable on each dependent measure appear in Table 4.

Results
Below we report four different analyses of variance (ANOVAs), each examining the effect that manipulations of icon aesthetics, concreteness, and visual complexity, on participants' ratings of aesthetics, complexity, concreteness and understanding icon function.The means for each type of rating as a function of each of the manipulated variables appear in Table 3.The effect sizes for each manipulated variable on the dependent variable are shown in Table 4.
There were no significant interaction effects on perceived aesthetics (all Fs < 1).

Perceived complexity
A 2 (Aesthetics) X 2 (Complexity) X 2 (Concreteness) ANOVA was carried out on icon complexity ratings showed a significant main effect of manipulated complexity on complexity ratings, with complex icons rated as more complex than simple icons, F(1, 56) = 88.08,p <.000, η 2 p =.61.This large effect indicates a successful manipulation of icon complexity.

Perceived concreteness
A 2 (Icon Aesthetics) X 2 (Complexity) X 2 (Concreteness) ANOVA on icon complexity ratings showed a significant main effect of concreteness manipulation, F(1, 56) = 54.21,p <.000, η 2 p =.49, with higher concreteness ratings for the more concrete compared to abstract icons.This indicates successful manipulation check for icon concreteness.
There was also a significant main effect of icon aesthetics on ratings of icon concreteness, F(1, 56) = 16.69,p <.000, η 2 p =.23, with appealing icons being rated more concrete compared to unappealing ones.Fig. 12 shows the effect of icon aesthetics on perceived concreteness separately for each icon function (see Discussion section for details).The manipulation of icon complexity did not show a significant effect on concreteness ratings, F(1, 56) = 2.20, p =.14, η 2 p =.04.None of the interaction effects reached significance (F aesthetics x concreteness (1,56) = 2.64, p =.11, η 2 p =.05; all other Fs < 1).

Understanding of icon function
A 2 (Icon Aesthetics) X 2 (Complexity) X 2 (Concreteness) ANOVA on accuracy of understanding icon function showed a significant main effect of icon concreteness, F (1, 63) = 23.40,p <.001, η 2 p =.30, with more accurate evaluations of icon meaning for the concrete icons compared to the abstract ones (Table 3).
In a second set of analyses, we considered the fact that manipulated aesthetics has a significant influence on perceived concreteness.Therefore, we examined the effect of icon aesthetics and complexity on

Table 2
Summary of measures taken for each icon.icon function understanding while accounting for icon concreteness, by including it as a covariate.A 2 (Icon aesthetics) X 2 (Icon complexity) Analysis of Covariate (ANCOVA), with perceived concreteness as the covariate, on accuracy of icon function understanding showed a significant main effect of icon aesthetics, F (1, 63) = 8.77, p =.04, η 2 p =.06, and a significant main effect of icon concreteness (as the covariate), F (1, 63) = 25.04,p <.001, η 2 p =.30.No other main effect or interactions were significant (all F values < 1).

Examining the best predictors for icon function understanding
A regression analysis was carried out on icon function understanding scores as the dependent (outcome) variable.The model included the following variables: perceived complexity, perceived concreteness, perceived aesthetics, and the interaction between perceived concreteness and perceived aesthetics.
The model was significant, accounting for 53 % of the variance in understanding of icon function in our sample, F (4, 63) = 17.09, p <.001.Neither perceived complexity nor perceived aesthetics were significant predictors (β complexity = 0.13, p >.05, and β aesthetics = 0.26, p >.05, respectively).However, perceived concreteness was a significant predictor of icon function understanding scores, β = 1.90, p <.001, as was the perceived concreteness * perceived aesthetics interaction, β = 0.97, p =.02.This suggests that perceived concreteness and perceived aesthetics are a significant predictor of icon function understanding.

Discussion
This study developed a set of new icons according to specific design principles.The goal was to use these design principles to manipulate each icon characteristic independently of other icon characteristics and examine the effect on icon perception and icon function understanding.
The following evaluations were carried out to examine the extent to which these goals were achieved: Table 3 Descriptives (M = mean, SD = standard deviation) of subjective icon ratings of attractiveness, complexity, concreteness, and of icon function understanding, as function of manipulations of icon aesthetics, concreteness, and complexity.1. Evaluation of the newly developed icon set in order to assess the effectiveness of the elaborated design recommendations.2. Evaluation of the independent contribution of each design characteristic on icon perception.3. Evaluation of the influence of each icon design characteristic on icon function understanding.
An important driver of this work was that existing icon corpora for use in experimentation rely on using existing icons.This means that prior familiarity with the icons, which is a key factor in determining users' perceptions and performance [23], is difficult to control properly in icon research.

Independent manipulation of icon characteristics
Findings of the empirical evaluation of the icon set indicate that design-manipulations of the three design characteristics (i.e., design aesthetics, complexity, concreteness) worked very well on each of the dependent measures (i.e., ratings of aesthetic appeal, complexity, and concreteness), yielding large effect sizes (Table 4).More specifically, manipulation checks confirmed that design manipulations of aesthetics, complexity, and concreteness, led to the ratings of aesthetic appeal, complexity, and concreteness to vary in accordance with the design principles that were systematically applied.
The other key goal of the current work was to design an icon set where each icon characteristic acted independently of the others on users' perceptions.This was partially the case.For instance, although the manipulation of icon concreteness only influenced ratings of icon concreteness, the manipulation of icon complexity also had an influence on the perceived aesthetics of the icons (i.e., participants rated icons that were designed to be complex, as being more appealing), and the manipulation of aesthetics also had a significant influence on perceived icon concreteness (i.e., participants rated icons that were designed to be appealing, as being more concrete).
The effect of complexity on aesthetic appeal is not too surprising, given the breadth of evidence showing that visual complexity is a key contributor in making something appealing (e.g.[38,39] for summaries of related literature).Previous research on icon characteristics [19] has shown that correlations between appeal and other characteristics varied from medium to high.Similarly, Reppa and McDougall [29] have argued that aesthetic appeal is a multi-dimensional construct and that, as a result, it is influenced by many factors including meaningfulness [66,67], familiarity [22,43,68], and concreteness [69,70].Taken together, this work suggests that appeal cannot easily be separated from, or varied orthogonally to, the components it encapsulates.Thus, despite our best efforts, appeal did correlate with visual complexity.However, using the current design principles, we consider it a successful attempt that the way we manipulated complexity has a smaller effect on aesthetic appeal than on perceived complexity.
The effect of design aesthetics on ratings of concreteness is particularly interesting and can offer useful insights for designers.A detailed analysis of the effect of aesthetics on perceived concreteness is illustrated in Fig. 12, separately for each of the eight icon functions.The four icon functions for which aesthetics had an effect on perceived concreteness, contained a suggested, but precise movement: 1) "to go round": the road path goes around the mountainan arrow turns around a circle; 2) "to screw": the helical trace represents the screw pitcha spiral arrow represents the screwing; 3) "pest control": the spray is directed towards the bugthe projection involves a movement of a dead leaf; 4) "to cut": cutting plotcutting action.The extreme distortions resulting from the application of filters for the aesthetics manipulation (e.g., the "relative deformation"-filter) might make it more difficultor even impossibleto read and understand this movement and thereby likely influenced the subjective concreteness ratings (e.g., for "go round": one does no longer recognize a trajectorythe arrow no longer rotates around the circle; for "to screw": the path is no longer helicalthe spiral is not recognizable; for "pest control": the spray is not directed at the cockroachwhich makes it difficult to see the projection).In contrast, the other four functions for which aesthetics had either no, or only a small, effect on concreteness ratings (i.e., blow, water, hoover, clean) contained a suggested movement which was less precise and with no specific direction.Because their structure did not imply a precise movement that needs to be deciphered in order to understand the meaning of the icon, the application of the aesthetic manipulation did not affect the evaluation of their concreteness.
In summary, it appears that for an icon containing an action based on a precise, geometric movement, the "relative deformation" filter (balance design principle) should not be applied.This is because the filter intervenes exclusively on the icon structure, which might be the origin of the influence of the aesthetics manipulation on concreteness ratings (i.e., first layered step of the design process).While this assumption needs to be empirically evaluated in future research, two recommendations can be made for the design process.
1) During the first phase of the design process, avoid representing functions with precise movements.The "cut" function could be represented with a pair of scissors instead of a cutter, "screw" with an English wrench instead of a screw.2) Adapt the design-principles elaborated above, by avoiding interventions on the icon structure for functions containing precise movement.
Nonetheless, as shown in Table 4, the effect sizes of icon manipulations on non-related subjective measures (e.g., complexity manipulation on perceived aesthetics, and aesthetic manipulations on perceived concreteness), were very small.The generally small effect sizes can be considered as a promising indicator that it is possible to design icons that differ independently with regard to the three design characteristics.

Effect of manipulated aesthetic appeal, complexity, and concreteness on icon function understanding
A key requirement of icons and symbols is that they are easy to understand and learn by the users.The current study examined the effect icon design characteristics of aesthetic appeal, complexity and concreteness had on users' understanding of icon function.The results showed that both concreteness and aesthetic appeal contributed to icon understanding with concrete icons more likely to be understood than abstract ones, and, when concreteness was accounted for, appealing icons more likely to be understood compared to unappealing icons.The rather large effect size of design aesthetics on icon understanding (as seen in Table 4) can be attributed to the effect of individual filters applied for the aesthetic manipulations.While this measure was of secondary importance for this study, it is important to be able to manipulate visual aesthetics of icons without influencing the understanding of their icon function.Future developments of the icon set will show which filters allow for a manipulation of perceived aesthetics without influencing icon understanding.

Contribution to the wider research community
The current study is the first to create unappealing icons by systematically using (or violating) specific design principles.Since the goal in design practice is generally to achieve positive reactions to aesthetical appeal, there is very little work existing on principles of negative aesthetics [with some exceptions such as [71,72]].Indeed, our experience from the design process was that the design of unappealing icons caused the most difficulties.Nonetheless, our recommendations for the design of negative aesthetic experiences are novel and of interest for current ongoing research that wishes to examine the effects of not only positive but also negative aesthetics on user behaviour and performance.

Limitations and future work
Although this study was conducted with academic rigor, some limitations need to be discussed.The sample recruited for the empirical study consists of participants of a very specific cultural background.For example, the concrete version of the function "to vacuum" can be pictured with a hoover.Nevertheless, several design-workshops conducted in the United Kingdom and Switzerland have shown that British participants are used to the upright version of a vacuum cleaner, while Swiss participants are used to the canister one.In addition, the sample consisted of Swiss participants identifying to a large part as female.Differences in gender and in cultural background need to be taken into consideration for future evaluations of the icon set.In this regard, future studies need to assess to which degree the developed icons are perceived in a similar way in different cultures [c.f.[73,74]].If the results of such culture-comparative studies show differences in the assessment of the icon characteristics, the design recommendations elaborated in this piece of research would also have to be adapted culture-specifically. Also, for some icon functions, the icon structure was adapted between the different design versions (c.f.concreteness characteristic).The decision was made with the aim of achieving the largest possible effect for our design manipulations.This needs to be taken into consideration for future use and developments of the icon set.
With regard to the design parameters that were manipulated, future studies may want to augment this work by incorporating color into the icon design.Color is an important influencing factor for aesthetical experience [25,75,76] and plays an important role in design practice as well [e.g., [77,78]].For the current study, however, it was decided not to consider color as a design component, in keeping with the existing standardized icon sets used in academic research [e.g.[18,19]] and existing icon databases (e.g., Noun Project, and Material Design).In addition, considering color would have added a considerable increase in theoretical complexity to the already rather demanding design process.It might however be interesting to include color in future studies using our icon set.

Conclusion
In conclusion, the current work is the first attempt to systematically define and empirically evaluate recommendations for icon design in a scientific context.We showed for the first time, that using those design principles, icon characteristics can be manipulated independently of each other.We also showed that the manipulated characteristics can have independent effects on icon perception and icon function understanding.There were two exceptionsthat is, the manipulation of icon aesthetics led to increased ratings of concreteness, and the manipulation of complexity led to increased rating of aestheticsand we proposed ways to ameliorate such effect in future icon design studies.The suggested recommendations to design coherent icon sets according to specific rules and requirements can be considered as a design toolbox, which can serve both practitioners and scientists.The resulting set of 64 newly developed icons represents a professional collection of icons which are of same size and ratio, scalable, and available in various file formats.The set is published with this study and hence accessible to the research community.In addition, we make the item set freely available for research purposes through creative commons.

Fig. 1 .
Fig. 1.The 24x24px grid used to design the icon sets.

Fig. 3 .
Fig. 3. Abstract icons for the function "to blow".Panel A: using an unnecessary arrow.Panel B: using spirals to express the airflow movement.Fig. 4. Abstract (A) and Concrete (B) icons for the function "to bypass an obstacle".

Fig. 5 .
Fig. 5. Simple (A) and Complex (B) icons propositions for the function "to dig".The figure illustrates the key principles for the characteristic of complexity.Complex icons are directly based on simple icons, but include other elements, such as dotted, hatched, and multiplied lines.Those additional graphical components are repeated to create additional details, such as a raster system or textures, providing secondary layers of graphical information.Also, multiple outline widths, still based on the main grid ratios, are used to create more complex variations in the drawings.For example, instead of simply outlining the object of the icon (e.g., the spade), multiple varied outlines complexify the perception of this object, by adding more detail (e.g., ground textures, reflection on the shovel, etc.).

Fig. 6 .
Fig. 6.Simple icons propositions for the function "to dig".Panel A: the ambiguous simple icon, wrongly interpreted as an airplane.Panel B: the unambiguous simple icon for the function "to dig".

Fig. 8 .
Fig. 8.All lines start and end on a pixel, angles base their extremities and radius on them, as well as the stroke thickness.
A total number of 276 participants took part in an online experiment.Participants' age ranged from 18 to 62 years (M = 25.81,SD = 7.83).

Fig. 11 .
Fig. 11.Illustration of our predictions and the results of our empirical investigation into the effect of our icon design process of the perception of icons on each of the manipulated characteristics, and on icon function understanding.Thick lines represent strong effect sizes (larger than 0.4), and the thin line represents weaker effect size (0.2).

Fig. 12 .
Fig. 12. Effects of icon aesthetics on ratings of concreteness for each icon function (error bars represent 95 % CI).

Table 1
Design-principles of the concreteness, complexity, and aesthetics characteristics.Each row represents a design principle.

Table 4
Summary of the effect sizes of the different independent variables (aesthetics, concreteness and complexity) on the dependent variables (perceived aesthetics, perceived concreteness, perceived complexity and function).Bold indicates significant effects of the manipulated icon variable on the reported measure.
Bold indicates significant main effects.