Keywords

1 Introduction

With the vigorous development of the app market, applications are nowadays commonly found in everyday life. From the perspective of app marketing, outer shapes of graphical icons seem to act as silent salespersons. Icon design plays a key role in app marketing, for icon presentation is the most prominent feature that attracts customers’ attention. Thereafter, customers are induced to interact with the app involved and to purchase it in the end. Evidently, graphical icons have become a standard function of most graphical user interfaces(GUI) [1]. Also, GUI’s have been widely used in computers and mobile devices, such as kiosks, ATM, tablets, and dashboard cameras [2, 3], in addition to other specialized areas like cash registers, medical environments, and operating industrial machinery [4]. In practical operation, users click or touch the GUI on a screen to receive and process large quantities of numerical as well as graphical data [5]. In that way, users can intuitively input instructions and interact with the device [6]. Well-designed icons enable users to search rapidly, minimizing errors. Consequently, icon design is an important part of GUI design.

Graphical icons have standardized functions, enabling users to locate the needed instruction or program among a wide variety of icons [1]. In consequence, well-designed graphical icons effectively help users to handle large numbers of alphanumeric symbols. Alternatively, on a low-resolution screen, like that of a smartphone, users can easily find the needed function or target which is presented in a relaxing way [4]. On the other hand, designers tend to create increasingly complex icons so that they may provide a lot of information in a limited space and catch users’ great attention [2]. Besides, with diversified presentation modes of icons today, users cannot find their needed interface or function instantly while searching for a particular icon on the main menu. In other words, they are faced with some operational problems.

GUI’s allow users to operate computers and execute program instructions with the help of graphical icons [7]. Hence, graphical icons play an important role in communication between users and interfaces. An icon is not just an identifiable image of an object but also has a border, background, and label interpreting the image [8]. Moreover, the memory of an icon lasts longer than that of a printed word [9]. Graphical icons are now widely used for such interfaces as menus, thumbnails or symbols in a window, representing certain particular functions in the system and transmitting visually implicit messages to users [8]. Gittins suggested that the outline of an icon should be solid, closed, sharply-contrasting, and smooth [10]. An open figure should be avoided, for users tend to mistake it for being closed. The contrast of the icon should be clear and steady, but using color to produce contrast should be avoided. Though the icon itself has no meaning, it will possess a consensual meaning through human association and recollection. Only after some particular contents are combined with specific ideas does the icon convey a meaningful message. Therefore, the psychological factors of humans exert a significant effect [8].

Good icons help to achieve such positive results as reducing operational errors, shortening the mission time, and enhancing users’ satisfaction level [5]. A well-designed icon is capable of conveying the intended message properly to users. In addition, different styles of icon design affect users’ operation, recognizability, and satisfaction level [2]. For that reason, many researchers explored the influences of icon operation and screen size on users in the hope that operational efficiency might be improved [11, 12]. The distance between icons and icon size affect how fast users scan the GUI. Moreover, an icon put at the corner of a touchscreen affects its operation [5]. A target measuring 9.2 to 9.6 mm is large enough to be manipulated on a small touchscreen [13]. Instead of the visible size of the key, average users prefer a key measuring 20mm2, which falls within the identifiable range of touch [14]. The optimum viewing angle for a touchscreen is between 19° and 54.5° [15]. As for color, it not only draws users’ attention but has different implications in different situations. For example, red may connote attractiveness (positive) or shockingness (negative) while blue may mean renovation (positive) or arrogance (negative). Therefore, while an icon is operated by a user, the appeal of color is a crucial principle [16]. A good interface which can use feedback effectively will definitely attract users’ attention and enhance their operational performance [17].

It has long been the chief concern of researchers and interface designers to utilize the shape features of 2D and 3D graphical icons in a complex main menu. Thus, clear information can be offered to users, visual interference be lowered, users’ recognition be improved, and overall performance be enhanced. At present, the research on graphical icons mainly concentrates on size, distance [2, 18,19,20], contrast [20], and users’ subjective satisfaction level [19]. On the other hand, there is little research on the shape features and presentation modes of 3D icons. In view of that, this study analyzed the shape features of 2D and 3D icons, investigating their design elements, viewing angles, and depth comprehensively. In the end, the main design components of 2D and 3D icons were identified. The findings herein can serve as a reference for icon designers and researchers in the future.

2 Design Elements of 2D and 3D Icons

The shape composition of a figure is an important characteristic of design. Different ways of composition produce different visual effects [21]. An icon is a graphical interface with meaning that can convey messages quickly and be remembered easily. The icon is composed of figures whose qualities are multiple, including shape composition, color, and texture. There are three types of shape composition: point, line, and plane composition. Overlapping relationships include direction, position, space, distance, connection, and grouping. Direction is divided into three types: horizontal, vertical, and angular direction [21]. Consisting of points and lines, the icons available on the modern market are divided into two types: 2D icon (Fig. 1) and 3D icon (Fig. 2). To capture users’ attention, many icons provide versatile visual effects, so various icons have distinct modes of presentation with different results [22].

Fig. 1.
figure 1

2D icon

Full size image
Fig. 2.
figure 2

3D icon

Full size image

2.1 Icon Composition

Before the widespread use of computers, research on icon design was relatively meager, primarily concerned with public information symbols. There are no more than two kinds of figures used for public information symbols, i.e., outline figures and solid figures [21]. A solid figure refers to one whose area surrounded by the outline is fully painted in a single color while an outline figure is composed of the outer lines, with the area surrounded by the outline being left blank. Solid figures are composed of planes while outline figures are composed of line-composed, imaginary planes. Outline figures have more details than solid figures; namely, the former are more complex than the latter. Outline figures are usually used to weaken the prominence of an icon; that is, a contour line is employed to form the icon shape instead of filling the icon with color to highlight it. Outline figures are intended to make the icon visible without highlighting it excessively. Easterby [23] and Sanders and McComick [24] think that solid figures are more eye-catching than outline figures.

The above is chiefly concerned with icon design in public information symbols or books. Horton [8] suggested that icons can be divided into two types: outlines and silhouettes. The outline style uses lines to draw prominent inner details while the silhouette style fully colors the area surrounded by the outline, with a solid color contrasting with its background. Silhouettes are generally used for roads and packaging signs. Outlines are less emphatic while silhouettes are overly emphatic [8]. Regarding the icons on electronic devices, Lin et al. suggested that there are two kinds of icon composition: line composition and plane composition [25]. Line-composed icons (Fig. 3) refer to outline figures consisting of lines while plane-composed icons (Fig. 4) refer to solid figures consisting of planes [24, 26]. In the former, the areas surrounded by the outline are left blank while in the latter, the areas surrounded by the outline are fully painted in a single color. According to the findings of Lin et al., plane composition is more eye-catching than line composition [25].

Fig. 3.
figure 3

2D line-composed icon

Full size image
Fig. 4.
figure 4

2D plane-composed icon

Full size image

Like 2D icons, 3D icons are divided into two types: line composition (Fig. 5) and plane composition (Fig. 6). Yet, presentation of 3D icons is more complex than presentation of 2D icons. It is because the way to present depth of 3D icons varies with different shapes.

Fig. 5.
figure 5

3D line-composed icon

Full size image
Fig. 6.
figure 6

3D plane-composed icon

Full size image

2.2 Border

Borders are used to limit the range of an image, being an active element of icon design [8, 27]. Consistent borders provide all icons with a uniform shape and size while individual images do not [8]. An icon with borders not only attracts a user’s attention but also guides his or her sightline to the icon [28]. However, if the icon border is used improperly, distractors are likely to increase, which will lower search speed [29]. As a result, while an icon is being designed, its shape must be devised carefully. Meanwhile, borders should be added so that users may spot the icon easily and clearly, with search time shortened [1]. At present, some of the icons have borders (Fig. 7) while the others do not (Fig. 8). Furthermore, borders should be designed in accordance with the shape of an icon. There have been a lot of studies on icon borders. One of the findings indicated that non-border, round borders, and square borders show no significant difference in terms of search time [4]. Another study on the CRT monitor indicated that diamond borders are more difficult to detect than round or square borders [22]. In terms of correct response time, triangular borders take a longer time than round borders [28].

Fig. 7.
figure 7

2D icon with border

Full size image
Fig. 8.
figure 8

2D icon without border

Full size image

Likewise, some of the 3D icons have borders (Fig. 9) while the others do not (Fig. 10). Generally speaking, 2D icons employ borders to highlight themselves so that users may detect the range easily and clearly. However, 3D icons rarely use borders, for borders may occlude the icons, causing disturbance to users.

Fig. 9.
figure 9

3D icon with border

Full size image
Fig. 10.
figure 10

3D icon without border

Full size image

2.3 Polarity

There are two types of polarity displayed on the screen: positive (Fig. 11) and negative polarity (Fig. 12). Positive polarity refers to black images on a white background while negative polarity refers to white images on a black background [30]. Besides, Horton suggested that icons may be presented in two other modes: positive contrast and negative contrast [8]. Positive contrast means that the icon is brighter than its background while negative contrast means that the icon is darker than its background. Positive polarity performs better than negative polarity in terms of search time [31]. Shieh and Ko investigated how the color combination of the target/background and single/simultaneous presentation affect preference for VDT icons [32]. Their findings indicated that black targets (black-on-white or black-on-yellow) and black backgrounds (red-on-black or yellow-on-black) are best-liked, followed by white targets (white-on-red or white-on-black) and white backgrounds (blue-on-white or red-on-white). What’s more, regarding recognizability of icons, colorless targets (black-on-white or white-on-black) and color targets show no significant difference in preference. As for subjective preference, white-on-black and black-on-white icons are preferred by average users [33]. By combining two characteristic elements of icons, i.e., polarity and border, Lin et al. got the new element called the background, which was divided into three types: positive background (Fig. 13), negative background (Fig. 14), and non-background (Fig. 15) [25]. In terms of attention, negative background performs the best, positive background ranks second, and non-background performs the worst.

Fig. 11.
figure 11

Positive polarity

Full size image
Fig. 12.
figure 12

Negative polarity

Full size image
Fig. 13.
figure 13

Positive background

Full size image
Fig. 14.
figure 14

Negative background

Full size image
Fig. 15.
figure 15

Non-background

Full size image

2.4 Shade

The side of an object facing a light source is called the light-receiving surface while the side backing onto the light source is called the shady surface, or the shade. The shade of a 3D cylinder is presented differently from that of a cuboid. There are two ways to present a shade: plane and gradient shades. Typically, plane shades are used to present the 3D effects of cuboids (Fig. 16), gradient shades are used to present cylinders (Fig. 17), and diffusive gradient shades are used to present balls (Fig. 18). In general, 3D line-composed icons have no shades, so lines are used to separate thickness. By contrast, 3D plane-composed icons can use bright or dark shades to present different sides; however, cuboids, cylinders, and balls are presented in different ways.

Fig. 16.
figure 16

Plane shades of cuboids

Full size image
Fig. 17.
figure 17

Gradient shades of cylinders

Full size image
Fig. 18.
figure 18

Diffusive gradient shades of balls

Full size image

Shades can be used for 3D icons to show depth. For instance, shades used for a cuboid button can show whether it is convex or concave. Specifically, shades placed on the right and bottom present convexness while shades placed on the left and top present concaveness [7]. In the case of one viewing angle, or viewpoint, the ways to present convexness or concaveness vary with different shapes of icons. That is, the way to present convexness or concaveness of a round icon is different from that to present convexness or concaveness of a cuboid icon. Take the buttons frequently used for a GUI for example. Convexness or concaveness of a cuboid button is presented through heavy and light plane shades. To be exact, to present a convex button, light shades are placed on the left and top, and heavy shades are placed on the right and bottom (Fig. 19). On the contrary, to present a concave button, heavy shades are placed on the left and top, and light shades are placed on the right and bottom (Fig. 20). As for a round button, gradient shades are used instead of plane shades. The shade of the inner circle should be consistent with that of the outer circle to show convexness in the front view (Fig. 21). Instead, the shade of the inner circle should be different from that of the outer circle to show concaveness in the front view (Fig. 22).

Fig. 19.
figure 19

Convex cuboid button in front view

Full size image
Fig. 20.
figure 20

Concave cuboid button in front view

Full size image
Fig. 21.
figure 21

Convex round button in front view

Full size image
Fig. 22.
figure 22

Convex round button in front view

Full size image

To explore the relationship between the design elements of icons and visual aesthetics, Gaun and Chen defined the presentation elements of icon design under the concepts of Kansei engineering [34]. The shadow effect of icon design was divided into three types: non-shadow, plane shadow, and gradient shadow. To achieve a certain shadow effect, gradient shadows and non-shadow can be employed to enhance the positive rating for aesthetics. Furthermore, Gaun et al. investigated how different local features, such as presentation modes and design techniques, affect users’ Kansei images of the whole icon [35]. Their findings indicated that shadow effects have the greatest influence on perception of “bold-aesthetic” vocabulary. In other words, plane shadows are suitable for bold Kansei images.

2.5 Shadow

A shadow is the range produced by an object obstructing a light. The image of a shadow is two-dimensional, and its size and shape vary with the angle of the light. Generally, the shadow plays an auxiliary role in icon design. Its main function is to provide observers with clues about the direction and location of the light source. There are four kinds of shadows in a 2D icon: non-shadow, cast, drop, and back shadow. Non-shadow means that there is no shadow of the icon (Fig. 23). A cast means that the light source illuminates the object vertically from above, causing its shadow to contact the bottom of the object and appear on the surface below (Fig. 24). A drop means that the light source also illuminates the object vertically from above, but the bottom of the object does not contact its shadow, creating the illusion of the object floating in the air (Fig. 25) [8]. The back shadow means that the light source illuminates the object from the front and that its shadow contacts the back of the object, with part of the shadow visible (Fig. 26). Similarly, shadows of 3D icons are divided into four types: non-shadow (Fig. 27), cast (Fig. 28), drop (Fig. 29), and back shadow (Fig. 30).

Fig. 23.
figure 23

2D non-shadow

Full size image
Fig. 24.
figure 24

2D cast

Full size image
Fig. 25.
figure 25

2D drop

Full size image
Fig. 26.
figure 26

2D back shadow

Full size image
Fig. 27.
figure 27

3D non-shadow

Full size image
Fig. 28.
figure 28

3D cast

Full size image
Fig. 29.
figure 29

3D drop

Full size image
Fig. 30.
figure 30

3D back shadow

Full size image

3 Conclusions

This study investigated the shape features of 2D and 3D icons comprehensively, including design elements, viewing angles, and depth. The design elements covered are icon composition, border, polarity, shade, and shadow. Shades and shadows are used differently for 2D and 3D icons. Specifically, 3D icons use shades to present light or dark sides. Besides, the ways that shades are presented on cuboids, cylinders, and balls are different. Cuboids use plane shades to present different sides, cylinders use gradient shades to present lightness or darkness, and balls use diffusive gradient shades to present cubic effects. Therefore, the ways that shades are presented on icons are greatly different. However, many 2D icons use gradient or diffusive shades to achieve particular effects. This causes much confusion to viewers, so it should be avoided.

The modern world is faced with an increasingly aging population, so the demand and market of the aged have expanded rapidly. The authors suggest researching the icons suitable for the elderly. The findings herein identify design elements of 2D and 3D icons and may serve as a reference for those engaged in icon design and research in the future.