The Optimum Design of Motion Icon for Mobile Phone
Based on the Human Comfort Affection
Cheng-Hsun Hsieh 1, Shing-Sheng Guan 2, Ting-Chun Tung 1
Graduate School of Design, National Yunlin University of Science and Technology, 123,
Section 3, University Road, Touliu, Yunlin 640, Taiwan, R.O.C.
2
Department of Visual Communication Design, National Yunlin University of Science &
Technology, 123, Section 3, University Road, Touliu Yunlin, 640, Taiwan, R.O.C.
1
{ Cheng-Hsun Hsieh, Shing-Sheng Guan, Ting-Chun Tung: g9330805@yuntech.edu.tw }
Abstract. This study aims to find the correlation between the “moving rate”
and the “moving range” in different movements based on the human comfort
affection. The authors defined three basic kinds of movement- horizontal
moving, swinging and zooming- and using them to design the experimental
samples. Subjects were asked to judge the moderate, maximum, and minimum
moving rate in every moving range by their comfort affection. After the
analysis, each of the movement samples will create three regression equations.
Finally, according to the equations, the authors develop a program to help
designer set the motion icon more easily.
Keywords: Movement, Motion Icon, Optimum Design
1
Introduction
Icon is the basic element for graphic user interface. In the early years, due to the faint
of mobile’s hardware, icons used in mobile phone were almost static. At a later time,
some designers tried to use animated icon on the interface of mobile. Bringing
animation to user interface has both cognitive and affective benefits [1]. Besides,
animation can provide learners with explicit dynamic information that is either
implicit or unavailable in static graphics [5]. Motion icon could be stylization.
Programmer uses parameters to control the icon speed and moving area in order to
make it move. That’s a very different way from the frame by frame animated icon.
Furthermore, movement can enhance the human attention and lead human feeling.
Movement permeates all of life and is central to the human experience of electronic
media [3]. Movement can bring us positive or negative feeling. For example, if the
icon moves too fast, we feel uncomfortable. As a result, the aim of this study is to find
the correlation between the “moving rate” and the “moving range” in different
movement based on the human comfort affection.
2
Making Experimental Samples and Running Investigation
There are many different kinds of movement used on icon, but which one is more
presentable? The authors should define some basic kinds of movement for the
investigation. The particulars are as follows.
2.1 Defining Basic Movement
The craft of traditional (cartoon) animation was tremendously advanced by the Disney
animators of the 20s and 30s, and from this work emerged a set of design principles
and specific techniques. These techniques were also related to interactive systems [1].
Useful techniques from traditional animation include, for example, slow-in slow-out
movement, squash and stretch, movement in arcs, anticipation, follow-through and
secondary action [4]. In another early study, Vaughan (1997) had defined four
physical properties of animation to be : Path (the line the object movement creates),
Area (the use of space by the object), Direction (the direction of the animation) and
Speed (the speed and tempo of the animated object) [2]. Through numbers of
animation studies and considering the designer’s understanding of motion icon. The
authors defined three basic kinds of movement for motion icon: horizontal moving,
swinging and zooming. Fig.1 shows that the authors use Vaughan’s physical
properties to define the movement. However the authors replaced the “area” with
“moving range” and the “speed” with “moving rate” in the investigation.
Fig. 1. Three basic movement (from left to right): horizontal moving, swinging, and zooming
As shown in Fig.1, the bold line with an arrow on each end represents demonstrate
what direction of the movement is, and the length of the bold line shows the moving
path and range of movement. The moving rate of the horizontal moving is pixel/per
frame; the swimming is angle/per frame and zooming movement is scale/per frame.
Fig. 2 The size of the colorless mail icon is 26*20 pixel. It was put in the center of a frame
(107*107 pixel) to simulate the mobile screen.
2.2 Choosing Representative Icon
Due to the high utility rate of short message on mobile phone, a mail icon (26*20
pixel) was chosen as a representation (Fig.2). Then the authors used it to collocate the
three kinds of movement to make experimental samples. For avoiding the interference
from the color, all samples were colorless. The icon was put in the center of a frame
(107*107 pixel) to simulate the mobile screen. All of the samples were made by flash
and be shown on a 15” LCD monitor under a resolution of 1024*768 pixel.
2.3 Running the Motion Icon Investigation
Twenty-five students from National Yunlin University of Science and Technology
were invited randomly to carry on the judgment on moving rate of motion icon. The
subjects are from twenty to thirty-five at age and all of them have normal eyesight.
They were asked to adjust the moving rate under different moving range according to
their comfort affection. For example, the moving range of the horizontal moving
would increase 1 pixel in every step until it equal to 10 pixel, then the moving range
would increase 2 pixel in every step until it equal to 20 pixel. Therefore, subjects must
carry on the fifteen samples one by one. For each sample, they were asked to adjust
the moderate (the most comfortable rate), maximum (the maximum rate they can
stand), and the minimum (the minimum rate they can stand) moving rate. The moving
range setting of each movement samples has listed in Table 1.
Table 1. Samples’ Detail List
Movement
Moving Range Setting
Horizontal Moving 1,2,3,4,5,6,7,8,9,10,12,14,16,18,20
4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34
Swinging
,36,38,40,44,46
6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,3
Zooming
6,38,40,42,44,46,48,50
3
pixel
Total
Numbers of
Samples
15
degree
22
percent
25
Unit
The Linear Regression Analysis and Examination Program
After the investigation of the motion icon, the authors started to run the linear
regression analysis in order to understand the relationship between the moving rate
and the moving range. The authors made the moving range as the response variable
and the moving rate as the predictor variable, then put the data into the SPSS statistic
software package to do the linear regression analysis. After the analysis, each of the
movement samples will create three regression equations. Further analysis is as
following.
3.1 The Linear Regression Analysis of Horizontal Moving Icon
In Table 2., the Rsq value of the moderate, maximum and minimum moving rate are
0.987, 0.986, and 0.982 for the horizontal moving icon. Each of them were passed the
significance test (Sigf. = 0.00). Therefore, the linear regression equation of the
moderate moving rate for the horizontal moving icon can be: moderate moving rate =
0.678 + (0.077*moving range). In the same way, the linear regression equation of the
maximum moving rate can be: maximum moving rate = 1.61+ (0.127*moving range),
and the minimum moving rate can be shown as: minimum moving rate = 0.325 +
(0.044*moving range).
3.2 The Linear Regression Analysis of Swinging Icon
In Table 2., the linear regression equation of the moderate, maximum, and minimum
moving rate for the swinging icon can be: moderate moving rate = 0.985 +
(0.06*moving range); maximum moving rate = 2.853 + (0.085*moving range);
minimum moving rate = 0.335 + (0.035*moving range).
3.3 The Linear Regression Analysis of Zooming Icon
In Table 2., the linear regression equation of the moderate, maximum, and minimum
moving rate for the zooming icon can be: moderate moving rate = 0.764 +
(0.037*moving range); maximum moving rate = 1.77 + (0.051*moving range);
minimum moving rate = 0.152 + (0.022*moving range).
Table 2. Detail List of Samples
Horizontal Moving
Rsq
d.f.
F
moderate
.987
13
959.09
maximum
.986
13
926.93
minimum
.982
13
716.77
Swinging
Rsq
d.f.
F
moderate
.996
20
5334.57
maximum
.980
20
984.58
minimum
.987
20
1529.89
Zoomming
Rsq
d.f.
F
moderate
.995
20
3809.08
maximum
.989
20
1803.29
Sig
f
.00
0
.00
0
.00
0
Sig
f
.00
0
.00
0
.00
0
Sig
f
.00
0
.00
b0
.678
1.61
.325
b0
.985
2.853
.335
b0
.764
1.77
b1
.07
7
.12
7
.04
4
b1
.06
0
.08
5
.03
5
b1
.03
7
.05
minimum
.984
20
1248.42
0
.00
0
.152
1
.02
2
3.4 Building Examination Program
Finally, according to the three equations, the authors develop a program by Flash
to help designer decide the optimum setting between the moving rate and range more
easily. As shown in Fig 3, this program will display the moderate, maximum, and
minimum moving rate when the moving range be inputted. But when designer inputs
a moving rate over the maximum, a warring message will appear on screen.
1. Suggested Rate
2. Warring Message
3. Manual Moving Rate and Range
Fig. 3 This program will display the moderate, maximum and minimum moving rate if the
designer inputs the moving range. If they input a moving rate over the maximum, a warring
message will show on screen.
4
Conclusion
If the moving rate is over the maximum or lower minimum rate suggested by the
program, the user will feel uncomfortable. In spite of the designer can adjust the range
between maximum and minimum rate, the moderate rate suggested by the program is
an optimum value and recommended. This program provides a simple way to check
the setting of motion icon never against human comfort affection.
References
1. Chang, B.W., Ungar, D.: Animation: From Cartoons to the User Interface, Proceedings of
the 6th annual ACM symposium on User interface software and technology, Atlanta,
Georgia, United States (1993) 45–55.
2. Vaughan, L. C., Understanding Movement, Proceedings of the SIGCHI conference on
Human factors in computing systems, Atlanta, Georgia, U.S.A. (1997) 548-549.
3. Bacigalupi, M., The Craft of Movement in Interaction Design, Proceedings of the working
conference on Advanced visual interfaces, L'Aquila, Italy (1998) 174-184.
4. Lee, J. C., Forlizzi J., Hudson S. E., The Kinetic Typography Engine:An Extensible System
for Animating Expressive Text, Proceedings of the 15th annual ACM symposium on User
interface software and technology (2002) 81-90.
5. Lowe, R. K., Animation and learning: selective processing of information in dynamic
graphics, Learning and Instruction, no.13 (2003) 157-176.