Shannon L. Halgren, Tony Fernandes, Deanna Thomas
FIGURE 1
Figure 1. Frame from a sample Amazing Animation movie.
The Claris Interface Design Group was initially approached by the Amazing Animation product marketing
lead and
asked to provide interface design support to the development team and possibly do some usability testing.
The program
was already in Alpha which meant time was of essence and interface changes involving significant recoding
was going
to take a lot of convincing. However, the development team was extremely open to design and usability
input which
allowed positive interface changes to occur.
The Design Group immediately dedicated an interface designer and a usability specialist to the project.
These two
individuals worked on both the testing and design phases of the project. After the first round of usability
testing, a
visual designer was added to the team to help with the design phases of the project.
After some negotiation, we were allowed to perform our usability test at an interactive learning computer
lab. This was
a private business where children could come in after school or during the summer and work on basic
reading and math
skills using interactive software. We set up a computer and video camera in a corner of the busy computer
lab. When
the kids had a breaking point in their lessons, they were allowed to come over to our station and play with
our product.
The switch from math to movie making seemed to be a welcome change.
After the first few children had come and left our testing station, we were left with the unrefutable
conclusion that
observing kids interact with software is in no way similar to observing adults interact with software; we
were in an
entirely new world of computer usage. Our carefully prepared test scripts and questionnaires were left
unused. Our
empirical methods and procedures crashed to the floor when our questions and prompts to stay on track
were repeatedly
ignored. The kids were much more interested in such unpredictable tasks as hitting the mouse button
repeatedly to
create 10s of new screen characters by the second or dragging a character around the screen in an endless,
frantic loop.
Eventually, we were taught by the kids that observation with some guidance was the preferred method of
conducting a
kids usability test. We suggested things we'd like to see the children do with our product (like make a
movie), but had
to remain flexible and follow the child's preferred path through our product. In the end, we probably
learned a lot more
about how kids will use our product from this observational method than from any test script we could have
created.
Over the course of the study, our ability to interact with the kids also improved. Kids seemed to have two
distinct
modes of interaction with us. They either told us everything that was on there mind about our product and
the world in
general, or they told us nothing which left figuring out their thought process one big puzzle. One thing we
began to
learn was that an unanswered question appeared to mean "I don't know" or "no". If the child knew the
answer or the
answer was positive, they usually proudly shared the answer.
Most kids' interaction with our prototype was not the streamlined movie-making session that was hoped for.
Figure 2
displays Amazing Animation as it first appeared upon launching. Kids' typical first path through our
prototype is listed
on the screen.
FIGURE 2
Figure 2. Typical Sequence Using the Opening Screen of Our Prototype
The complexity of the interface and the overwhelming number of controls made it difficult to keep on a
movie-making
track. Kids know how to push buttons and they do it with great glee and disregard for the consequences.
Our kids
quickly got themselves trapped in advanced paint and movie-making modes which surpassed their expertise.
They also
loved clicking on the character buttons at the bottom of the screen. Each click of a character button placed
a new
character on the center of the screen. Before the child knew what was happening, a mass of arms, legs, and
bodies was
assembled in center-screen and waiting for action.
The next hurdle for kids to jump was to figure out how to record a character's movement and then watch the
animation.
The intended path for this task was to hit the record button, move a character around the screen, hit Stop, hit
Rewind, hit
Play to view the animation, and finally, hit Stop to stop the animation which played in an endless loop. Our
kids,
however, preferred to hit only the Play button. To them, "Play" meant having fun, not starting a movie.
When the Play
button was hit before any recording was performed, all the characters' arms and legs began to move (an
automatic
feature of characters), but their bodies remained glued to center-stage. This was wildly amusing at first, but
became
quickly boring. After futilely trying to stop the movement and/or delete any extra characters, kids
eventually became
tired with our prototype and came to the conclusion we had a boring product.
When redesigning the interface for this product, we paid close attention to making the process of moving
through the
interface much simpler. The first step towards this end was to remove many of the controls from the
opening screen.
Only the very basic movie controls were left. Advanced paint and movie controls were moved out of sight
to pull-out
drawers located at the bottom of the screen. We felt drawers offered a metaphor that kids could relate to,
contrary to
abstract tool palettes containing numerous icon controls found in adult products. Kids have most likely had
experience
storing objects such as toys or tools in drawers that can be opened and closed.
Selecting the up and down arrow controls to the right of the drawers displayed different sets of drawers
containing
different tools. We were hoping that by hiding the advanced tools, the novice users would not stumble onto
them and
get lost in their functionality. Rather, only the advanced users who might want the advanced tools would go
looking for
more options. This redesign allows the product to be engaging and usable for a wider range of ages and
abilities. For
reference, our redesigned screen is pictured in Figure 3.
The process of creating a movie was made more intuitive by displaying only tools directly related to movie
making on
the default opening screen. The most efficient process for creating a movie is to select a background, select
desired
characters and sounds, record the characters movement and finally playback the movie. The three drawers
at the
bottom of the screen are placed in the order that they should be used; scenes or backgrounds first, stamps or
characters
next, and finally, sounds.
Contrary to the old design, recording of movement in the new design is done automatically when the
character is
dragged around the screen. The old design required the pressing of the record button. We found kids did
not recognize
the button labeled "REC" as record and even so, didn't realize that recording was a key element in movie-
making. To
provide feedback when the product is recording, a melody is played and the frame counter located below
the Play
button increases as new frames are recorded. If no action is taken, after a few moments an auditory prompt
provides the
next step towards making movie. While we found that the auditory prompt was a useful way of providing
help to kids,
it does provide problems when localizing and therefore, isn't the ideal solution. More thought will be given
to this for
version 2.
After the character has stopped moving across the screen, and thus recording has stopped, the letters on the
play button
move up and down. This draws attention to the button. When pressed, the movie will automatically rewind
to frame
one and play once through eliminating the rewind and stop steps necessary in the original design.
FIGURE 3
Figure 3. Opening Screen of the Redesigned Prototype.
Observing kids use our prototype very clearly showed us where assumptions were made that kids use a
computer like
adults. Adult Graphical User Interface (GUI) controls such as scroll bars, window close boxes, menus, and
paint tools
were all problematic for most kids. Some of the older kids we tested were computer savvy and had worked
with these
controls, but all the younger ones were at a loss in situations like figuring out how to close an open window
which only
displayed the typical title line close box.
In general, our redesigned interface took out adult interface controls. Drawers of tools which automatically
closed
replaced typical toolbars and window close corners. The drawers were labeled not only with an icon, but
also with text
to increase recognition. Drawers were also given ample space so scrolling for more options was kept to a
minimum.
Standard paint tools were either cut because of their complexity (e.g., the eyedropper and lasso tools) or
presented in a
more kid-friendly manner. For example, the text tool previously placed on the tool palette using the
standard "A" icon,
was moved to a drawer with an ABC icon and label stating "Letters". The new drawer presents different
font, style and
size options in labeled sections (see Figure 4).
FIGURE 4
The text tool location in the original and redesigned prototype. Original Prototype -
Standard text tool brings up a text palette. Redesign - Text drawer is accessible only by switching to the
tools mode using the arrow buttons. Drawer label is more
kid-friendly.
The VCR metaphor used for the movie controls in the original prototype was also missed by kids. For the
most part the
movie controls were not recognized as familiar and so were not used correctly. The rewind, fast forward,
and step
frame controls were rarely touched. Play and Stop, however, were selected a great deal, but often at
inappropriate
moments.
Our redesign tried to reduce the dependence on these adult metaphors. The movie metaphor was still
present, but only
visibly when using the advanced controls. Large colorful, animated Stop, Start, and Record buttons which
were only
displayed when it was appropriate to use them, replaced the standard VCR control panel (see Figure 5).
FIGURE 5
The text tool location in the original and redesigned prototype. Original Prototype -
Movie controls are presented using a standard VCR control metaphor. Redesign - Movie controls are
simplified by enlarging and animating buttons which are only displayed when relevant.
The older kids who tested our prototype were quick to tell us that our characters and backgrounds were too
babyish. In
some situations it was clear that they were a little embarrassed to be using the product in the social
atmosphere where
we were testing. Ideas for new characters and backgrounds were quite different for the different age groups
and
between girls and boys. This finding forced us to step back and critically think through which ages we
wanted to
market this product towards and select content and features based on that decision. We also increased the
number,
content, and quality of backgrounds and stamps available.
After some negotiating with the development team and making a few modifications, our redesigned
interface was
quickly implemented and within a few weeks we were ready for another usability test. We went back to the
same
location for testing and were fortunate enough to have some of the same kids as well as different ones look
at our new
design. We were pleased to find that many of the usability issues we found in the original prototype had
been solved
with our redesign.
Some problems still existed in the interface which were addressed in subsequent design changes. For
example, the
original buttons for switching between the modes of drawers at the bottom of the screen were too big and
attention-
grabbing. Little kids were still pushing them and then getting lost in the advanced features. We reduced the
button size
and toned down their appeal. Additionally, more sets of drawers containing advanced features were added.
We moved
from having to sets (beginning and advanced) to four; Basic, Movies, Effects & Tools. These four
categories which
were labeled were used to group the drawers into meaningful groups which allow users to more accurately
guess drawer
contents. The final buttons used are the ones shown in Figures 3 and 4.
Another group of controls that required iterative design were the move, resize, and rotate controls. These
tools could
be used during recording to record the movement, growth or reduction of character size, or character
rotation. On the
other hand, they could also be used to get the character in the desired state and position before recording
started. In the
prototype tested in our first study, these more advanced editing controls were displayed in the tool palette
(see Figure 6,
Stage 1). The icons for these tools were not recognized by kids nor were the subtleties of using each in the
two
different record states understood.
In the first redesigned interface, the controls were moved to a "Squish" drawer located in one of the more
advanced
modes, Tools (see Figure 6, Stage 2). The icons were redesigned so that they all contained a consistent
element, the
triangle. Because in the new design, recording was made automatic when a character is dragged across the
screen,
additional controls had to be added that allowed moving, resizing, and rotating the character to be done
while recording
or while paused before recording. In this design the controls in the left column were static and represent
manipulations
that will not be recorded. The icons in the right column were animated to suggest that while using them
actions will be
recorded. The animations of the right column icons were also used to help enhance icon meaning. The top
move icon
pictured the triangle being dragged in a diagonal path across the icon. The middle resize icon displayed the
triangle
being expanded from very small to the size of the icon. Finally, the bottom rotate icon displayed the
triangle being
turned around and around. These animations continually play while the Squish drawer is open.
The Stage 2 redesign was an improvement over the original design, Stage 1, because young kids did not
stumble onto
these tools and get lost in their functionality. Older kids who found the tools, however, had difficulty
figuring out what
they did. The final design of this drawer shown in Figure 6, Stage 3, regrouped the icons and added labels
for enhanced
meaning even further.
FIGURE 6
Stages of Move, Resize and Rotate Tool Design. Stage 1 - Abstract adult icons in large
tool palette. Stage 2 - Tools in drawer only accessible in Tools mode. Icons contain consistent elements
and are animated to
enhance icon meaning. Stage 3 - Labels are added and icons are grouped to enhance meaning even further.
Unfortunately, after our second round of usability testing and redesign the members of the interface design
team needed
to move on to different projects and thus their involvement with Amazing Animation lessened.
Nonetheless, members
from the development and marketing teams felt strongly about meeting with our target market one last time.
This time
a beta version of the product was dropped off at the computer lab of a local middle school. The lab
instructor agreed to
let some classes use the product during lab time. Students were given incentive to use the product by being
allowed to
participate in a Claris-sponsored contest to find the best kid-created movie. Contest-winning movies were
later used for
PR and marketing purposes. One week after drop off a team went back to see what kids had created with
Amazing
Animations. Each lab class which used the product was given a brief presentation by the product developer
and were
allowed to ask questions about the product or his job. Afterwards, the kids broke up into small groups to
continue
making their movies. Groups were observed and interviewed about the product. Unfortunately, no one
from the
Design Group was able to attend these classes, so no specific data was gathered about the success of our
redesigns such
as the text drawer or move, resize and rotate buttons. We can only hope the redesigns enhanced usability as
we
expected.
The design process of creating the Amazing Animation interface was unique, challenging, and fun on a
variety of
levels. Initially, this seemed like an impossible mission. Our team was brought in post-alpha, initially told
we could
make few, if any changes which would require major recoding, and given roughly a month's time to work
our magic.
Nonetheless, the developer's willingness to go along with our changes and the incredibly quick turn around
times we
were all able to make, allowed significant, positive changes to happen.
The product interface was significantly reworked to adapt to the playful, experimental, exploratory method
of use that
children brought to the product. We focused on improving usability and engagability for a wide age range
of users by
simplifying many features and processes, making some features more visible, and by hiding advanced
features and tools
in drawers to prevent users
who are just messing around from stumbling onto them.
This project was an all too rare example of the ideal user- centric development cycle. The product team
collectively
agreed to put the effort forth to gather user's input and then to really listen to that input. All redesign that
was done was
based on information gathered from real users; the kids. The developers and design team worked
cooperatively to
develop a usable product in a timely fashion. This project was truly a design success story!
Finally, the experience of designing for and testing children was a welcome challenge from the world of
adult products
which now feels a bit mundane. Our team learned a great deal from this project about working with kids
and our
enthusiasm for working on more kids products has greatly increased.
Shannon is a Usability Engineer in the Interface Design Group at Claris Corporation. Her job is to manage
usability
testing at Claris. She earned her Masters and Ph.D. degrees in Human-Computer Interaction at Rice
University.
Shannon designed and helped conduct the usability tests associated with this project and participated in
many of the
interface design decisions.
Tony is manager of the Interface Design Group at Claris. The group is responsible for the UI design of
Claris' Windows
and Mac products. He participated in the field testing of this product as well as in the development of
design solutions
to the problems encountered.
Deanna is a Visual Designer in the Interface Design group at Claris Corporation. Her job is to create visual
information
be way of icons, navigation in dialogs and product identities for Claris. She received her Bachelor of Fine
Arts in
Studio at the San Francisco Art Institute and her Master of Fine Arts at University of North Texas. A six
year veteran
of the Apple community, her involvements with visual interface also include (of late) PowerTalk &
AppleSearch.
Deanna provided the visual interpretation of our design brainstorming sessions and gave Amazing
Animation much of
its look and feel.
Abstract
The development of the interface for Amazing Animation was a challenging, unique, and a rewarding
experience for our Interface Design Group at Claris. Given the constraints of a very tight timeframe and
working with a user population we were unfamiliar with, our group was able to make numerous
improvements which had a tremendous impact on the product's usability. This having been our first time
designing for and testing children, we learned volumes about this unique user population. Design
assumptions and testing methodologies used in adult products must all be reworked for kids. This paper
describes the progression of Amazing Animation interface and points out the lessons learned about testing
and designing for kids along the way.
Keywords
Interface Design, Kids Software, Designing for Children, Testing Children
PRODUCT DESCRIPTION
Kids ages 5-14 can use Amazing Animation to create movies, video games and interactive school projects.
Kids stamp
animated characters and sounds onto pre-drawn backgrounds to make stories about space, dinosaurs,
underwater life,
and many other topics. Amazing Animation automatically records characters movement across the screen
to be
replayed over and over. New characters and backgrounds can be drawn using the drawing tools or clip art
can be
imported and animated. Text and sounds are used to narrate the movies. Frame-by-frame editing is
possible, as are
special effect transitions between frames. A frame from a typical Amazing Animation movie is presented
in Figure 1.
THE ORIGINAL STATE OF AFFAIRS
THE FIRST STEP: USABILITY TESTING
All parties involved agreed that usability testing would be the first step towards interface improvement of
Amazing
Animation. Being that this was the first kids' product our team had tested, we had to quickly shift from an
adult to a kid
world. Our Usability Studio at Claris was not appropriate for testing children; the desk was too high, the
chairs too big,
and the modern office decor did not shout Sesame Street. Therefore, we decided the best option for us on a
limited
timeframe would be to perform a field test.
USABILITY RESULTS & LESSONS LEARNED
We're Not in Kansas Anymore: Testing Kids is Not Like Testing Adults
Follow the Yellow-Brick Road: Provide a Clear Path Through the Interface
Don't Push an Adult Interface on Kids
Don't Push Adult Metaphors on Kids
The original prototype we tested used two strong metaphors that may have been appropriate for adults, but
were usually
lost on kids. The first metaphor, that of making a movie that contains individual, sequenced frames was too
abstract for
children. Kids understand animation only at a cursory level - animation is things moving. The features that
allowed
kids to edit individual frames were also too easy to stumble into and get confused about. Again, in the
redesign, these
advanced features were taken off the basic, default opening screen.
Target Age is Critical: Do Your Home Work
ROUND 2 OF TESTING & REDESIGN
Drawer Mode Redesign
Move, Resize, & Rotate Tools Redesign
ONE LAST MEETING WITH KIDS
CONCLUSION
PRESENTER'S BACKGROUND AND PROJECT INVOLVEMENT
Shannon L. Halgren
Tony Fernandes
Deanna Thomas
