- Email: [email protected]
Design Guidelines of Icon Pictures Based Upon Relationship Between Comprehensibility of Icon Function and Design Factors
Copyright © IFAC Man-Machine Systems, Kyoto, Japan, 1998
DESIGN GUIDEUNES OF ICON PICfURES BASED UPON RElATIONSHIP BETWEEN COMPREHENSmILITY OF ICON FUNCfION AND DESIGN FACI'ORS
Kazunari Morimoto, Takao Kurokawa and Ryo Takaoka Graduate School, Kyoto Institute of Technology Matsugasaki, Sakyo-ku, Kyoto 606-8585, JAPAN
Abstract: For characterizing iconic pictures, four design factors were proposed: concreteness, minuteness, dimensionality and functionality. The relationship between comprehensibility of icon function and these factors was analyzed based on the results of experiments for obtaining subjective evaluation of comprehensibility and subjective factor values of various icons. The results showed that the subjective factor values are useful in evaluating quality of iconic pictures. On the basis of the results guidelines for designing icons were proposed Copyright © 1998 IFAC Keywords: Picture elements, Evaluation, Ergonomics, ManlMachine interfaces, User interfaces
so many factors into consideration from the cognitive and semantic point of view. It is this that makes designing icons very difficult. The situation should be simplified by separating visual expression and semantic one. Though they are not independent each other and cannot completely be separated, the visual expression is roughly said to consist of visual elements such as color and shade, the number of lines used, the omission of details, while the semantic expression includes the selection of objects to be drawn, relative size of the objects and the attachment of labels. In this article we will focus our interest on visual expression of icons, putting away connotational semantics on the designing side for future studies.
1. INTRODUCTION Graphical representation of system states and functions can improve interaction between users and systems (Carr, 1998). Icons used in graphical user interfaces are the most familiar elements expressing system information. The objective of icon pictures is twofold; 1) to convey what is drawn and 2) to inform what it means (icon function). Many of the icons in use, however, do not give enough information about what is drawn, and hence users cannot understand their meanings in human-computer interaction (Morimoto et al. 1994). Although there are a lot of guidelines for designing interfaces, they fail to show clear and concrete methods of drawing icon pictures.
The aim of this article is to define four fundamental design factors that specify the appearance of icons, to explore the relat ion between comprehensibility of icon function and psychological values of the factors and to propose clear guidelines for drawing iconic pictures. In Section 2, the design factors are defined and Experiment I is described where comprehensibility of the function of icons drawn
The appearance of an icon is composed of elements that are both visual and semantic. If appropriately designed, they lead to understanding of the picture and meaning of the icon (Byrne, 1993). But it is hard to select elements to be drawn and unify them into an iconic picture in order to let it attain the objective as stated above. In designing iconic pictures designers have to take
143
in accordance with ranking of the factors was subjectively evaluated. Section 3 describes Experiment 11 that was carried out in order to derive design guidelines of icons with respect to two of the factors and the proposed guidelines are given in Section 4.
lines and the dot density in shades. The object of Rank 1 is drawn with just outlines as in Rank 1 of concreteness. In Rank 5 the picture contains many lines and shades.
Dimensionality : In order to represent the dimensionality perspective, shades and shadows are effectively used. The Rank 1 and 2 pictures are a 2D front or side view of the object. 3D clues are introduced in Rank 2 and the higher ones. In Rank 2, 4 and 5 shadows are expressed, perspective is begun to be adopted in Rank 3, and shades are drawn in Rank 5. Functionality: The Rank 1 picture is roughly the same as the picture of Rank 3 in dimensionality. In Rank 2 some lines or attachments related to the object's function is added. The object has some traces of having worked in Rank 3 and is just working in Rank 4. In Rank 5 a hand manipulating the object is attached.
2. EXPERIMENT I
2.1 Four design factors and designing icons There are many factors specifying the design details of iconic pictures. They include the size of icons, the number of colors used and the skill in drawing. But these are superficial and secondary factors in designing icons . After due consideration of properties intrinsic in the appearance of icons, we extracted four factors as the most fundamental that can control it and give useful guidelines for designing of icons; they are concreteness, minuteness, dimensionality and functionality.
2.2 Methods
Concreteness: This factor defines the degree of concreteness of iconic expression. In terms of this factor drawings vary from extremely abstract to highly concrete. Minuteness: The minuteness factor controls the degree of details of iconic expression. Drawings poor in this factor have just contours of the drawn objects. Dimensionality: Dimensionality is defmed as the extent of depth expression of the object under the restriction of two dimensions. Objects rich in dimensionality are expressed with shadows, shades and perspective. Functionality: The object has its own function, and it can be represented in the drawing. For example the drawing of a pencil alone has little functionality, but a pencil drawing with traces like curves and letters can show its function to some extent.
Ten objects were chosen for designing icons among stationery and things used in offices: "pencil", "magnifying glass", "printer" , "document", "trash can", "folder", "paintbrush", "eraser", "book" and "compass" . Each of them was then represented in twenty black and white drawings (5 ranks X 4 factors) on a white background as exemplified in Fig. 1. Therefore, we had a total of 200 icons. They were put to use as icons in Experiment I. Their size was 11 mm X 11 mm. Experiment I consisted of two sessions. In the first session, subjects subjectively evaluated the comprehensibility of the naturally assigned function of each icon on a five-point scale using the working screen shown in Fig. 2. Then they rated each icon's quality concerning a given factor using the rating method of ten points. Figure 3 shows a typical screen layout for rating, where the subjects dragged each icon to the position on the rating scale. We used the ratings to give the icon psychological value in each factor. Ten subjects who had experienced to use icons with some systems participated in Experiment I.
These factors can have qualitative and quantitative ranks in their own range. We defined five ranks in each factor from lower one (Rank 1) to higher (Rank 5). They serve as the rules in drawing a given object. The factors are not completely independent one another as easily understood. Concreteness: The Rank 1 picture in this factor is drawn with just outlines of the object. In Rank 2 some lines or curves are added to the picture of Rank 1 in order to increase its concreteness, and the Rank 3 has simple depth expression or lines in addition. In Rank 4 some attachments or further lines are represented on the picture of Rank 3. By adding depth clues like shades concreteness is augmented in Rank 5. Minuteness: As the rank goes higher, the detail of the picture is increased by changing the number of
Factor rank 2
concreteness minuteness dimensionality functionality
3
4
5
tP 1t? 1/1 /1 / tP 1t? 1/1 /l /
l I' l
/
l/
Fig. 1 Icon pictures of "pencil" drawn according to the definitions of the four design factors.
144
~ ~
• •
~
• • • 9 , •
, rn
,
~
• • ,
distance between pattern drawn by a rule was different with an icon.
~
Although the comprehensibility of the "book" icons showed a tendency to increase with the rank in concreteness, the shades added in the picture of Rank 5 were not effective in understanding the icon function. The same was found in the other icons in the factor. In the case of minuteness, the comprehensibility was highest in Rank 3 or 4. The higher concreteness of icons was, the higher their minuteness was, because concreteness and minuteness are highly dependent. This fact caused that the results of subjective evaluation were similar between both factors.
.:.;.:.:.;...;.:.:.: .................:...:.....:.:.:.: ...:.: ...:...:.....:.: ... :...:..:... :... :.:.:.: ...:.:.:.:.:.:...:..... :.:.:.......:.............:.....:...:.:.:.:.:.:.:.:.:.:.:.:... : .:.:.:.:.:. ~ '
;
....._-.---- .. --
..
--
...--
i Fig. 2 Workin~ screen presented to the subjects for subjectIve evaluation of comprehensibility of the icon function.
3D representation of the icons did not always have positive effect on recognition of the icon functions. Only in case of 3D objects such as "book", "eraser" and "printer", 3D cues were effective in understanding the icon functions. Flat objects should not be drawn with shades and shadows. As for functionality, the comprehensibility tended to increase with the rank in case of "book". However this was not found in the "pencil", "trash-can" and "eraser" icons. Though Authors had thought that the comprehensibility of the icons with a manipulating hand drawn (Rank 5) would be higher than the others, we had values lower than the other ranks. Concerning this result we supposed that it was difficult to recognize the hand drawn because of the small icon size and to understand the relation between the icon function and the hand drawn.
Fig. 3 :rypical screen presented to the subjects for ratmg.
3. EXPERIMENT II
2.3 Results
3.1 Icons designed and two design factors
Figure 4 shows the relationship between comprehensibility and the psychological factor value of the "book" icons. We could confirm Psychological intervals among pictures of icons represented according to the design rules were not equivalent. This finding assists that psychological
Four design factors used in Experiment I did not always depend on each other. For instance the picture of the best icon for the factor of concreteness was not evaluated on the factor of dimensionality.
5....-------------. 5 , . . . . - - - - - - - - -..... 5 ....-------------. Functionality ~mensiona~
1
4
4~2 ~
3
3 1
2
2
1 L -_______
o
~
5
5
3
1
____ Book
Book
~~~
10 0
4
5 10 Psychological factor value
Book 5
10
Fig.4 Comprehensibility as a function of psychological valuein case of "book" icons. The figures neighbouring data points indicate the rank in each factor.
145
Unfortunately the pictures of the most comprehensive icon couldn't determine. In order to propose design guidelines of icon only one icon picture must be derive from design factors adopted.
drawn with combination of the two design factors were represented in Fig. S. Design rules of concreteness are as follows . The picture of Rank cl is drawn with outlines of an object, and Rank c2 is added some lines to that of Rank cl. Rank c3 is painted gray color on an object to that of Rank c2. Rank c4 is added some lines to the picture of Rank c3. Rank cS is a photograph of real objects recorded by digital camera. Design rules of dimensionality are as follows . The picture of Rank dl is drawn without perspective representation. Rank d2 is drawn with perspective representation. Rank d3 is added shadow to that of Rank dl. Rank d4 is added shade to that of Rank d3. All pictures were drawn at the area of a regular square as well as Experiment 1.
The results of Experiment I showed three dimensional representations of icons were less effective on recognition of the icons' meaning. However the pictures of dimensionality were drawn independent to the factor of concreteness. Therefore high correlation in comprehensibility wasn't found between concreteness and dimensionality. On the other hand the relation between concreteness and complicatedness was very high. Therefore concreteness and dimensionality were adopted as design factors of icons tested in Experiment H. Nine kinds of objects used in the experiment were "pencil", "printer", "document", "trash can" , " folder", "paintbrush", "eraser", "book" and "compass". Each icon was designed to be assigned to one of five values of concreteness factor and to one of four values of dimensionality factor according to the design rules developed by the authors. Icons
3.2 Methods and apparatuses
Two experiments are carried out. First the comprehensibility of functions of icons was tested by five rating scales as well as Experiment I. Second psychological factor values of icons were evaluated
:
........ (CiLC::c:lI11PCiSS d4
~ : ~ : 11 : fI/ ~
L. : L·~ L.· L~ ......... :............ :.... ... .. ... :.......... ..:... ...... .
1
............ :............ :............ :............ ; .. - ,
..4.:. .I...!.:..I. .t.:. I. .! . I. ~. . .. !.. .I..!.. I. .!.. ~..!.. I..~
............ ............ ............ ............ ............ . ~
d2 ..
d1
.~ d4
j
~
1\ A: A~ A c2
c3
c4
fjl : Cl
/ 1/1/ 1/ /
A
c1
cS
........... .:............ :..........(~) ..~~~:~.. ~.rl
(ij
"0
~
? . '. 1 . . . .! . . .~. . .~. c1
~
~
~ d2 ...~...:...p. .i..~ . .:. ." . .:...,. ~
o d1 o · n :. 8 : I t) c2
c1
:
c4
c3
cS
...................................... ,...(~) .'p',r!rl~~,r. ............ :............:............ :.....(f.) ..~.r~~~
[ib~Jj ~ ~ ••
............ :... ........ .:............ :....... .. ... :........ :... . ................................................. .. ... ... .. .....
('11
c2
: II : 11 : _ . ~. . .#!? . . ~. ~ . ~.l . ~. ... ~ . . .~. .:... ~. . . . '!. . . ~..
d3blrilal. l.
u.
: (c) paintbrush
c3
D
c4
cS
~
lib Ij l• •
........ ..................... ...... ..... .. ......................
n
U
c1
n
~ . mftl
_
~
c2
c3
GiJ:id :a :a ~ It'
c4
j
.:
... ............... . : : .
~ : 9 : !11
dJ' :.
.
.......... .. :............ :....... .. ... :.
41 •
l'*tt',·
()
~ : ~ . ~
cS
c1
c2
(~)~ocument
. (9Lr~I~~r
:
:_
(# ~ @ ~ ~
c3
c4
,
cS
Q) book
Bl1li1lll d3 o l o ~ a l . 1 It [:J ~ 11 fiJ I d4
.. . .... ~ .. .... . . . . ~ ............ ~ ....••. . ... ~ .. .
... ........
:- .... . ....:. .. . .. .. . .
. .............
··6··1···6··1···.··'·.··1· ··~··
.... ...................................•.............:..... ...... .. f·· ··· ········,······ ·······:·
d2
d1
·o··I··rs··'·. · j··. · ,·. ·
.......................................:.............:.... .. ... ... .
c1
c2
c3
c4
cS
[:J ~
[1 1111
D~Eli] l~ c1 c2 c3 c4 cS Factor rank of concreteness
Fig.5 Icons used in the experiment H .
146
cS
using the rating of ten points . Experimental apparatuses were Macintosh (Apple) and a color display of high resolution.
10 trash
~9
can
tU
c 8 0
Cii
3.3 Subjects
cQ) 7 E 6 '5 0 5
-
Forty subjects participated in the experiments to evaluate the comprehensibility of functions and the psychological intervals among pictures of icons designed above. Twenty subjects were novice users who have not been experienced to operate a computer. On the other hand the other subjects have been usually used a computer of UNIX, Macintosh or Windows.
Q)
::J
~
1
o d1 o 1
2
3
4
5
6
7
8
9
10
Factor value of concreteness
3.4 Results and discussions
Fig. 6 Relationship between concreteness and dimensionality in subjective factor values.
Figure 6 shows the relationship between concreteness and dimensionality of subjective factor values of trash can icons. The psychological factor value of Rank cS in concreteness was shorter than that of Rank c3 and c4. This suggests the photographic pictures are not viewed as a real object. On the other hand the psychological factor value of Rank cS in dimensionality was shorter than that of the other icons. Figure 7 showed the concreteness of icon pictures increased in the factor values of concreteness except Rank cS which icon was drawn based on the photo images of the real object. It is difficult to draw precisely a picture of photo images of an object in small area. Therefore some retouching to the photo images was carried out to make similarly to real objects. Nevertheless the concreteness of the icons of Rank cS was evaluated lower than the icons of Rank c3 and c4. The other finding was that the comprehensibility of icons drawn with outline only was low.
d1 d3 d1 d3 d1 d3 d1 d3 d1 d3 d2 d4 d2 d4 d2 d4 d2 d4 d2 d4 Factor rank of dimensionality
Fig.7 Comprehensibility of "trash can" icons.
o III
•
trash can folder
,
ia. 4
•
x
Q)
Subjective factor values of icons in dimensionality increased in rank values. This result showed that the pictures represented according to the design rules stood in rows of psychological intervals. Comprehensibility of the icons except the Rank cS increased with degree of concreteness and dimensionality. In many cases the comprehensibility of the Rank d2 was higher than that of the Rank dl. This suggests it is important to draw icons with a bird's-eye view method. Furthermore the comprehensibility of the Rank d3 was higher than that of the Rank dl and d2 in "trash can", "printer" and "eraser". This suggests the appropriate usage of shadow and shade contribute to obtain higher comprehensibility. On the other hand there is significant caution in use of shadow or shade to "pencil", "folder" and so on.
.E
~
:is
'(jj
c Q) s:::. ~
a. E 1
8
Concreteness
o
1
2
3
4
5
Comprehensibility in novices
Fig. 8 Relationship between experts and ,novices in comprehensibility of "trash can" and" folder" icons. and folder icons. The correlation coefficients of icons except folder icon were above 0.89. On the other hand the correlation coefficient of folder icons was 0.64. The following tendency was obtained in folder icons. Comprehensive values of expert users were higher than that of novice users. The reason of
Figure 8 showed the correlation between novice and expert users about the comprehensibility of trash can
147
this results obtained would be estimate that novice users did not know the folder or not use it. Therefore they felt lost in evaluation. However this result suggests the degrees of comprehensibility except the folder icons dose not depend deeply on experience of computer operation.
and design elements of pictures of each design factor analyzed in Experiment H. Following guidelines to draw pictures of icons was derived from the results of the analysis and the design rules. (1) Not to use excessive representation of reality. (2) Not to draw an object with outline only. (3) Not to draw with shadows on flat or thin objects. (4) Not to use the shades preferably. (5) To use 3D representations to an object with many sides.
In order to clarify the relation between characteristics of icon pictures and comprehensibility, nine icons used were divided into three groups; thin, three dimensional and flat objects. "Compass", "pencil" and "brush" were included into the thin objects' group. "Trash can", "printer" and "eraser" were in the three dimensional objects' group. "Folder", "document" and "book" were in the flat objects' group. Figure 9 showed the mean values of comprehensibility of the three icon groups. As for dimensionality, comprehensibility of icons tends to increase with growing up the factor value as well as concreteness, and the highest comprehensibility was obtained at the Rank d4 of each three group. Comprehensibility of icons with shade became low. The influence caused by difference of factor values of dimensionality was very small in thin objects of Rank c3 and c4. For three-dimensional objects, comprehensibility of icons depends on the factor values of dimensionality. Icons of Rank d4 in threedimensional objects were easy to become understand. These findings were not gotten in Experiment I.
5. CONCLUSIONS The experimental results showed that the resultant psychological distance measure was significant in evaluating function of icons in the factors of concreteness, minuteness, dimensionality and functionality. According to the results, guidelines for expressing iconic pictures were proposed. Comprehensive icons make possible users lower cognitive stresses interacting with computer. In order to accomplish good iconic communication we must investigate thoroughly about the design factors according to the cognitive and psychological engineering. For further extension of this research examination about relation of concreteness and functionality is necessary.
ACKNOWLEGMENTS 4. PROPOSED GUIDELINES Authors wish to thank Mr. T. Yamamoto and Mr. Y. Morimoto who were under graduate students of Kyoto Institute of Technology for their cooperation in this work. This research was supported in part by a Grant-in-Aid for Scientific Research from Ministry of Education (No. 09680396).
Horton (1994) insists to draw an icon concretely and clearly as possible, on the other hand Meyhew (1992) points out to draw icons abstractly. Not only the relation between those two design factors used in Experiment I was not independent. Therefore it is difficult to present the most significant design factor for designing recognizable pictures of icons. However relationship between design factor values
REFERENCES Byme, D.M. (1993). Using icons to fmd documents: Simplicity is critical, INTERCHI'93, 446-453. Carr, D. (1998). Interaction object graphs: An executable graphical notation for specifying user interfaces. In: Formal Methods in HumanComputer Interaction (philippe, P. and Fabio, P. (Ed)), 141-155, Springer Horton,W.K (1994). The icon book, John Wiley & Sons. Mayhew, D.H. (1992). Principles and guidelines in software user interface design, Prentice Hall. Morimoto, K., Kurokawa, T., Nishimura, T. and Torii, T. (1994). Analysis of cognitive factors of icons based on subjective evaluation, Progress in Human Interface, 3, 2, 65-72. (In Japanese)
~4 :is (ij
~ 3
r. ~
a. E 2
8
o compuss+pencil+paintbrush D trash can+printer+eraser • folder+document+book O~~~~-T~~~~r-T-~~
d1 d3 d1 d3 d1 d3 d1 d3 d1 d3 d2 d4 d2 d4 d2 d4 d2 d4 d2 d4
Factor rank of dimensionality Fig. 9 Comprehensibility of three icon sets; thin, three-dimensional and flat objects.
148
DESIGN GUIDEUNES OF ICON PICfURES BASED UPON RElATIONSHIP BETWEEN COMPREHENSmILITY OF ICON FUNCfION AND DESIGN FACI'ORS
Kazunari Morimoto, Takao Kurokawa and Ryo Takaoka Graduate School, Kyoto Institute of Technology Matsugasaki, Sakyo-ku, Kyoto 606-8585, JAPAN
Abstract: For characterizing iconic pictures, four design factors were proposed: concreteness, minuteness, dimensionality and functionality. The relationship between comprehensibility of icon function and these factors was analyzed based on the results of experiments for obtaining subjective evaluation of comprehensibility and subjective factor values of various icons. The results showed that the subjective factor values are useful in evaluating quality of iconic pictures. On the basis of the results guidelines for designing icons were proposed Copyright © 1998 IFAC Keywords: Picture elements, Evaluation, Ergonomics, ManlMachine interfaces, User interfaces
so many factors into consideration from the cognitive and semantic point of view. It is this that makes designing icons very difficult. The situation should be simplified by separating visual expression and semantic one. Though they are not independent each other and cannot completely be separated, the visual expression is roughly said to consist of visual elements such as color and shade, the number of lines used, the omission of details, while the semantic expression includes the selection of objects to be drawn, relative size of the objects and the attachment of labels. In this article we will focus our interest on visual expression of icons, putting away connotational semantics on the designing side for future studies.
1. INTRODUCTION Graphical representation of system states and functions can improve interaction between users and systems (Carr, 1998). Icons used in graphical user interfaces are the most familiar elements expressing system information. The objective of icon pictures is twofold; 1) to convey what is drawn and 2) to inform what it means (icon function). Many of the icons in use, however, do not give enough information about what is drawn, and hence users cannot understand their meanings in human-computer interaction (Morimoto et al. 1994). Although there are a lot of guidelines for designing interfaces, they fail to show clear and concrete methods of drawing icon pictures.
The aim of this article is to define four fundamental design factors that specify the appearance of icons, to explore the relat ion between comprehensibility of icon function and psychological values of the factors and to propose clear guidelines for drawing iconic pictures. In Section 2, the design factors are defined and Experiment I is described where comprehensibility of the function of icons drawn
The appearance of an icon is composed of elements that are both visual and semantic. If appropriately designed, they lead to understanding of the picture and meaning of the icon (Byrne, 1993). But it is hard to select elements to be drawn and unify them into an iconic picture in order to let it attain the objective as stated above. In designing iconic pictures designers have to take
143
in accordance with ranking of the factors was subjectively evaluated. Section 3 describes Experiment 11 that was carried out in order to derive design guidelines of icons with respect to two of the factors and the proposed guidelines are given in Section 4.
lines and the dot density in shades. The object of Rank 1 is drawn with just outlines as in Rank 1 of concreteness. In Rank 5 the picture contains many lines and shades.
Dimensionality : In order to represent the dimensionality perspective, shades and shadows are effectively used. The Rank 1 and 2 pictures are a 2D front or side view of the object. 3D clues are introduced in Rank 2 and the higher ones. In Rank 2, 4 and 5 shadows are expressed, perspective is begun to be adopted in Rank 3, and shades are drawn in Rank 5. Functionality: The Rank 1 picture is roughly the same as the picture of Rank 3 in dimensionality. In Rank 2 some lines or attachments related to the object's function is added. The object has some traces of having worked in Rank 3 and is just working in Rank 4. In Rank 5 a hand manipulating the object is attached.
2. EXPERIMENT I
2.1 Four design factors and designing icons There are many factors specifying the design details of iconic pictures. They include the size of icons, the number of colors used and the skill in drawing. But these are superficial and secondary factors in designing icons . After due consideration of properties intrinsic in the appearance of icons, we extracted four factors as the most fundamental that can control it and give useful guidelines for designing of icons; they are concreteness, minuteness, dimensionality and functionality.
2.2 Methods
Concreteness: This factor defines the degree of concreteness of iconic expression. In terms of this factor drawings vary from extremely abstract to highly concrete. Minuteness: The minuteness factor controls the degree of details of iconic expression. Drawings poor in this factor have just contours of the drawn objects. Dimensionality: Dimensionality is defmed as the extent of depth expression of the object under the restriction of two dimensions. Objects rich in dimensionality are expressed with shadows, shades and perspective. Functionality: The object has its own function, and it can be represented in the drawing. For example the drawing of a pencil alone has little functionality, but a pencil drawing with traces like curves and letters can show its function to some extent.
Ten objects were chosen for designing icons among stationery and things used in offices: "pencil", "magnifying glass", "printer" , "document", "trash can", "folder", "paintbrush", "eraser", "book" and "compass" . Each of them was then represented in twenty black and white drawings (5 ranks X 4 factors) on a white background as exemplified in Fig. 1. Therefore, we had a total of 200 icons. They were put to use as icons in Experiment I. Their size was 11 mm X 11 mm. Experiment I consisted of two sessions. In the first session, subjects subjectively evaluated the comprehensibility of the naturally assigned function of each icon on a five-point scale using the working screen shown in Fig. 2. Then they rated each icon's quality concerning a given factor using the rating method of ten points. Figure 3 shows a typical screen layout for rating, where the subjects dragged each icon to the position on the rating scale. We used the ratings to give the icon psychological value in each factor. Ten subjects who had experienced to use icons with some systems participated in Experiment I.
These factors can have qualitative and quantitative ranks in their own range. We defined five ranks in each factor from lower one (Rank 1) to higher (Rank 5). They serve as the rules in drawing a given object. The factors are not completely independent one another as easily understood. Concreteness: The Rank 1 picture in this factor is drawn with just outlines of the object. In Rank 2 some lines or curves are added to the picture of Rank 1 in order to increase its concreteness, and the Rank 3 has simple depth expression or lines in addition. In Rank 4 some attachments or further lines are represented on the picture of Rank 3. By adding depth clues like shades concreteness is augmented in Rank 5. Minuteness: As the rank goes higher, the detail of the picture is increased by changing the number of
Factor rank 2
concreteness minuteness dimensionality functionality
3
4
5
tP 1t? 1/1 /1 / tP 1t? 1/1 /l /
l I' l
/
l/
Fig. 1 Icon pictures of "pencil" drawn according to the definitions of the four design factors.
144
~ ~
• •
~
• • • 9 , •
, rn
,
~
• • ,
distance between pattern drawn by a rule was different with an icon.
~
Although the comprehensibility of the "book" icons showed a tendency to increase with the rank in concreteness, the shades added in the picture of Rank 5 were not effective in understanding the icon function. The same was found in the other icons in the factor. In the case of minuteness, the comprehensibility was highest in Rank 3 or 4. The higher concreteness of icons was, the higher their minuteness was, because concreteness and minuteness are highly dependent. This fact caused that the results of subjective evaluation were similar between both factors.
.:.;.:.:.;...;.:.:.: .................:...:.....:.:.:.: ...:.: ...:...:.....:.: ... :...:..:... :... :.:.:.: ...:.:.:.:.:.:...:..... :.:.:.......:.............:.....:...:.:.:.:.:.:.:.:.:.:.:.:... : .:.:.:.:.:. ~ '
;
....._-.---- .. --
..
--
...--
i Fig. 2 Workin~ screen presented to the subjects for subjectIve evaluation of comprehensibility of the icon function.
3D representation of the icons did not always have positive effect on recognition of the icon functions. Only in case of 3D objects such as "book", "eraser" and "printer", 3D cues were effective in understanding the icon functions. Flat objects should not be drawn with shades and shadows. As for functionality, the comprehensibility tended to increase with the rank in case of "book". However this was not found in the "pencil", "trash-can" and "eraser" icons. Though Authors had thought that the comprehensibility of the icons with a manipulating hand drawn (Rank 5) would be higher than the others, we had values lower than the other ranks. Concerning this result we supposed that it was difficult to recognize the hand drawn because of the small icon size and to understand the relation between the icon function and the hand drawn.
Fig. 3 :rypical screen presented to the subjects for ratmg.
3. EXPERIMENT II
2.3 Results
3.1 Icons designed and two design factors
Figure 4 shows the relationship between comprehensibility and the psychological factor value of the "book" icons. We could confirm Psychological intervals among pictures of icons represented according to the design rules were not equivalent. This finding assists that psychological
Four design factors used in Experiment I did not always depend on each other. For instance the picture of the best icon for the factor of concreteness was not evaluated on the factor of dimensionality.
5....-------------. 5 , . . . . - - - - - - - - -..... 5 ....-------------. Functionality ~mensiona~
1
4
4~2 ~
3
3 1
2
2
1 L -_______
o
~
5
5
3
1
____ Book
Book
~~~
10 0
4
5 10 Psychological factor value
Book 5
10
Fig.4 Comprehensibility as a function of psychological valuein case of "book" icons. The figures neighbouring data points indicate the rank in each factor.
145
Unfortunately the pictures of the most comprehensive icon couldn't determine. In order to propose design guidelines of icon only one icon picture must be derive from design factors adopted.
drawn with combination of the two design factors were represented in Fig. S. Design rules of concreteness are as follows . The picture of Rank cl is drawn with outlines of an object, and Rank c2 is added some lines to that of Rank cl. Rank c3 is painted gray color on an object to that of Rank c2. Rank c4 is added some lines to the picture of Rank c3. Rank cS is a photograph of real objects recorded by digital camera. Design rules of dimensionality are as follows . The picture of Rank dl is drawn without perspective representation. Rank d2 is drawn with perspective representation. Rank d3 is added shadow to that of Rank dl. Rank d4 is added shade to that of Rank d3. All pictures were drawn at the area of a regular square as well as Experiment 1.
The results of Experiment I showed three dimensional representations of icons were less effective on recognition of the icons' meaning. However the pictures of dimensionality were drawn independent to the factor of concreteness. Therefore high correlation in comprehensibility wasn't found between concreteness and dimensionality. On the other hand the relation between concreteness and complicatedness was very high. Therefore concreteness and dimensionality were adopted as design factors of icons tested in Experiment H. Nine kinds of objects used in the experiment were "pencil", "printer", "document", "trash can" , " folder", "paintbrush", "eraser", "book" and "compass". Each icon was designed to be assigned to one of five values of concreteness factor and to one of four values of dimensionality factor according to the design rules developed by the authors. Icons
3.2 Methods and apparatuses
Two experiments are carried out. First the comprehensibility of functions of icons was tested by five rating scales as well as Experiment I. Second psychological factor values of icons were evaluated
:
........ (CiLC::c:lI11PCiSS d4
~ : ~ : 11 : fI/ ~
L. : L·~ L.· L~ ......... :............ :.... ... .. ... :.......... ..:... ...... .
1
............ :............ :............ :............ ; .. - ,
..4.:. .I...!.:..I. .t.:. I. .! . I. ~. . .. !.. .I..!.. I. .!.. ~..!.. I..~
............ ............ ............ ............ ............ . ~
d2 ..
d1
.~ d4
j
~
1\ A: A~ A c2
c3
c4
fjl : Cl
/ 1/1/ 1/ /
A
c1
cS
........... .:............ :..........(~) ..~~~:~.. ~.rl
(ij
"0
~
? . '. 1 . . . .! . . .~. . .~. c1
~
~
~ d2 ...~...:...p. .i..~ . .:. ." . .:...,. ~
o d1 o · n :. 8 : I t) c2
c1
:
c4
c3
cS
...................................... ,...(~) .'p',r!rl~~,r. ............ :............:............ :.....(f.) ..~.r~~~
[ib~Jj ~ ~ ••
............ :... ........ .:............ :....... .. ... :........ :... . ................................................. .. ... ... .. .....
('11
c2
: II : 11 : _ . ~. . .#!? . . ~. ~ . ~.l . ~. ... ~ . . .~. .:... ~. . . . '!. . . ~..
d3blrilal. l.
u.
: (c) paintbrush
c3
D
c4
cS
~
lib Ij l• •
........ ..................... ...... ..... .. ......................
n
U
c1
n
~ . mftl
_
~
c2
c3
GiJ:id :a :a ~ It'
c4
j
.:
... ............... . : : .
~ : 9 : !11
dJ' :.
.
.......... .. :............ :....... .. ... :.
41 •
l'*tt',·
()
~ : ~ . ~
cS
c1
c2
(~)~ocument
. (9Lr~I~~r
:
:_
(# ~ @ ~ ~
c3
c4
,
cS
Q) book
Bl1li1lll d3 o l o ~ a l . 1 It [:J ~ 11 fiJ I d4
.. . .... ~ .. .... . . . . ~ ............ ~ ....••. . ... ~ .. .
... ........
:- .... . ....:. .. . .. .. . .
. .............
··6··1···6··1···.··'·.··1· ··~··
.... ...................................•.............:..... ...... .. f·· ··· ········,······ ·······:·
d2
d1
·o··I··rs··'·. · j··. · ,·. ·
.......................................:.............:.... .. ... ... .
c1
c2
c3
c4
cS
[:J ~
[1 1111
D~Eli] l~ c1 c2 c3 c4 cS Factor rank of concreteness
Fig.5 Icons used in the experiment H .
146
cS
using the rating of ten points . Experimental apparatuses were Macintosh (Apple) and a color display of high resolution.
10 trash
~9
can
tU
c 8 0
Cii
3.3 Subjects
cQ) 7 E 6 '5 0 5
-
Forty subjects participated in the experiments to evaluate the comprehensibility of functions and the psychological intervals among pictures of icons designed above. Twenty subjects were novice users who have not been experienced to operate a computer. On the other hand the other subjects have been usually used a computer of UNIX, Macintosh or Windows.
Q)
::J
~
1
o d1 o 1
2
3
4
5
6
7
8
9
10
Factor value of concreteness
3.4 Results and discussions
Fig. 6 Relationship between concreteness and dimensionality in subjective factor values.
Figure 6 shows the relationship between concreteness and dimensionality of subjective factor values of trash can icons. The psychological factor value of Rank cS in concreteness was shorter than that of Rank c3 and c4. This suggests the photographic pictures are not viewed as a real object. On the other hand the psychological factor value of Rank cS in dimensionality was shorter than that of the other icons. Figure 7 showed the concreteness of icon pictures increased in the factor values of concreteness except Rank cS which icon was drawn based on the photo images of the real object. It is difficult to draw precisely a picture of photo images of an object in small area. Therefore some retouching to the photo images was carried out to make similarly to real objects. Nevertheless the concreteness of the icons of Rank cS was evaluated lower than the icons of Rank c3 and c4. The other finding was that the comprehensibility of icons drawn with outline only was low.
d1 d3 d1 d3 d1 d3 d1 d3 d1 d3 d2 d4 d2 d4 d2 d4 d2 d4 d2 d4 Factor rank of dimensionality
Fig.7 Comprehensibility of "trash can" icons.
o III
•
trash can folder
,
ia. 4
•
x
Q)
Subjective factor values of icons in dimensionality increased in rank values. This result showed that the pictures represented according to the design rules stood in rows of psychological intervals. Comprehensibility of the icons except the Rank cS increased with degree of concreteness and dimensionality. In many cases the comprehensibility of the Rank d2 was higher than that of the Rank dl. This suggests it is important to draw icons with a bird's-eye view method. Furthermore the comprehensibility of the Rank d3 was higher than that of the Rank dl and d2 in "trash can", "printer" and "eraser". This suggests the appropriate usage of shadow and shade contribute to obtain higher comprehensibility. On the other hand there is significant caution in use of shadow or shade to "pencil", "folder" and so on.
.E
~
:is
'(jj
c Q) s:::. ~
a. E 1
8
Concreteness
o
1
2
3
4
5
Comprehensibility in novices
Fig. 8 Relationship between experts and ,novices in comprehensibility of "trash can" and" folder" icons. and folder icons. The correlation coefficients of icons except folder icon were above 0.89. On the other hand the correlation coefficient of folder icons was 0.64. The following tendency was obtained in folder icons. Comprehensive values of expert users were higher than that of novice users. The reason of
Figure 8 showed the correlation between novice and expert users about the comprehensibility of trash can
147
this results obtained would be estimate that novice users did not know the folder or not use it. Therefore they felt lost in evaluation. However this result suggests the degrees of comprehensibility except the folder icons dose not depend deeply on experience of computer operation.
and design elements of pictures of each design factor analyzed in Experiment H. Following guidelines to draw pictures of icons was derived from the results of the analysis and the design rules. (1) Not to use excessive representation of reality. (2) Not to draw an object with outline only. (3) Not to draw with shadows on flat or thin objects. (4) Not to use the shades preferably. (5) To use 3D representations to an object with many sides.
In order to clarify the relation between characteristics of icon pictures and comprehensibility, nine icons used were divided into three groups; thin, three dimensional and flat objects. "Compass", "pencil" and "brush" were included into the thin objects' group. "Trash can", "printer" and "eraser" were in the three dimensional objects' group. "Folder", "document" and "book" were in the flat objects' group. Figure 9 showed the mean values of comprehensibility of the three icon groups. As for dimensionality, comprehensibility of icons tends to increase with growing up the factor value as well as concreteness, and the highest comprehensibility was obtained at the Rank d4 of each three group. Comprehensibility of icons with shade became low. The influence caused by difference of factor values of dimensionality was very small in thin objects of Rank c3 and c4. For three-dimensional objects, comprehensibility of icons depends on the factor values of dimensionality. Icons of Rank d4 in threedimensional objects were easy to become understand. These findings were not gotten in Experiment I.
5. CONCLUSIONS The experimental results showed that the resultant psychological distance measure was significant in evaluating function of icons in the factors of concreteness, minuteness, dimensionality and functionality. According to the results, guidelines for expressing iconic pictures were proposed. Comprehensive icons make possible users lower cognitive stresses interacting with computer. In order to accomplish good iconic communication we must investigate thoroughly about the design factors according to the cognitive and psychological engineering. For further extension of this research examination about relation of concreteness and functionality is necessary.
ACKNOWLEGMENTS 4. PROPOSED GUIDELINES Authors wish to thank Mr. T. Yamamoto and Mr. Y. Morimoto who were under graduate students of Kyoto Institute of Technology for their cooperation in this work. This research was supported in part by a Grant-in-Aid for Scientific Research from Ministry of Education (No. 09680396).
Horton (1994) insists to draw an icon concretely and clearly as possible, on the other hand Meyhew (1992) points out to draw icons abstractly. Not only the relation between those two design factors used in Experiment I was not independent. Therefore it is difficult to present the most significant design factor for designing recognizable pictures of icons. However relationship between design factor values
REFERENCES Byme, D.M. (1993). Using icons to fmd documents: Simplicity is critical, INTERCHI'93, 446-453. Carr, D. (1998). Interaction object graphs: An executable graphical notation for specifying user interfaces. In: Formal Methods in HumanComputer Interaction (philippe, P. and Fabio, P. (Ed)), 141-155, Springer Horton,W.K (1994). The icon book, John Wiley & Sons. Mayhew, D.H. (1992). Principles and guidelines in software user interface design, Prentice Hall. Morimoto, K., Kurokawa, T., Nishimura, T. and Torii, T. (1994). Analysis of cognitive factors of icons based on subjective evaluation, Progress in Human Interface, 3, 2, 65-72. (In Japanese)
~4 :is (ij
~ 3
r. ~
a. E 2
8
o compuss+pencil+paintbrush D trash can+printer+eraser • folder+document+book O~~~~-T~~~~r-T-~~
d1 d3 d1 d3 d1 d3 d1 d3 d1 d3 d2 d4 d2 d4 d2 d4 d2 d4 d2 d4
Factor rank of dimensionality Fig. 9 Comprehensibility of three icon sets; thin, three-dimensional and flat objects.
148