We are taught to draw letters and digits according to certain
rules. For example, the digit 5 is drawn by starting with the
vertical line, then the half circle, and finally, the horizontal
line at the top. The resulting digit will have a sharp 90-de-
gree angle on the top left corner. However, the digit 5 is often
drawn in a single, continuous stroke, starting at the top, ending at the bottom. During fast writing, it is hard to achieve
the sharp 90-degree angle in the top left part; the resulting
character will be indistinguishable from the letter S.
WESTERN STROKE ORDER RULES
• Figure 5. A user interface sketch drawn very quickly, without specific technique (left), and with
technique inspired by Chinese calligraphy (right). It takes approximately the same time to complete each sketch.
inner (rule 5) by first drawing the
overall frame, then subframes, and
so forth. This is similar to Western
drawing technique, where the artist
focuses on the overall proportions
first, then on the increasing level of
detail.
2. Draw subframes and other
components from left to right (rule
3), then from top to bottom (rule
4). Examples of such components
include buttons, radio buttons, and
form fields.
3. Draw the largest components
first, then the smaller components.
The large components define the
overall structure. The smaller components are filled in first on the left,
then on the right, top, and bottom,
going from outer to inner. Dividing
lines are an example of large elements that can divide the various
parts of the user interface.
each square such that all the space
of the square is used. The student
then also learns to control the sizing
and proportions of the characters. It
is easy to make such practice sheets
oneself. Try starting with grids of 2 x
2 cm squares.
Now You Know
By following the basic stroke order
inspired by Chinese calligraphy, you
can quickly draw recognizable and
consistent sketches of user interfaces with distinct angles and balanced proportions. Several elements
from Chinese characters look like
user interface components, and with
practice these can be jotted down
very quickly on paper. Proportions
are ensured by starting on the
outside with the overall shape and
sketching inward toward increased
level of detail.
November + December 2012
interactions
• The digit 5 is correctly written by first
drawing the bottom part (top), then
adding the top line (middle); or incorrectly in a single stroke (bottom).
ABOUT THE AUTHORS
Frode Eika Sandnes is a profes-
sor in the Faculty of Technology,
Art and Design at Oslo and
Akershus University College of
Applied Sciences. His research
interests include interactive and
intelligent technologies. He is the founder of
Norway’s first master’s program in interaction
design with a focus on universal access.
Hua-Li Jian is an associate pro-
fessor in the Faculty of
Technology, Art and Design at
Oslo and Akershus University
College of Applied Sciences. Her
research interests include linguis-
tics, with an emphasis on prosody
in languages and speech processing.
Reaping the Benefits
Through Practice
Chinese schoolchildren first practice the simple shapes to learn the
correct stroke orders. Drawing each
shape just a few hundred times will
yield noticeable results. Once the
stroke sequence is in the hand, one
can practice writing the characters
as quickly as possible while maintaining the correct stroke order and
a consistent style.
Chinese character practice books
come printed with grids of squares.
The student writes each character in
DOI: 10.1145/2377783.2377796
© 2012 ACM 1072-5520/12/11 $15.00