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