Conference PaperPDF Available

Storyboarding: an empirical determination of best practices and effective guidelines

Authors:

Abstract and Figures

Storyboarding is a common technique in HCI and design for demonstrating system interfaces and contexts of use. Despite its recognized benefits, novice designers still encounter challenges in the creation of storyboards. Furthermore, as computing becomes increasingly integrated into the environment, blurring the distinction between the system and its surrounding context, it is imperative to depict context explicitly in storyboards. In this paper, we present two formative studies designed to uncover the important elements of storyboards. These elements include the use of text, inclusion of people, level of detail, number of panels, and representation of the passage of time. We further present an empirical study to assess the effects of these elements on the understanding and enjoyment of storyboard consumers. Finally, we demonstrate how these guidelines were successfully used in an undergraduate HCI class.
Content may be subject to copyright.
Storyboarding: An Empirical Determination of Best
Practices and Effective Guidelines
Khai N. Truong
University of Toronto
Department of Computer Science
Toronto, ON M5S 3G4 Canada
khai @cs.toronto.edu
Gillian R. Hayes & Gregory D. Abowd
Georgia Institute of Technology
College of Computing & GVU Center
Atlanta, GA 30332-0280 USA
{gillian, abowd}@cc.gatech.edu
ABSTRACT
Storyboarding is a common technique in HCI and design for
demonstrating system interfaces and contexts of use. Despite
its recognized benefits, novice designers still encounter
challenges in the creation of storyboards. Furthermore, as
computing becomes increasingly integrated into the
environment, blurring the distinction between the system and
its surrounding context, it is imperative to depict context
explicitly in storyboards. In this paper, we present two
formative studies designed to uncover the important elements
of storyboards. These elements include the use of text,
inclusion of people, level of detail, number of panels, and
representation of the passage of time. We further present an
empirical study to assess the effects of these elements on the
understanding and enjoyment of storyboard consumers.
Finally, we demonstrate how these guidelines were
successfully used in an undergraduate HCI class.
Author Keywords
Storyboarding, user centered design, HCI education
ACM Classification Keywords
H5.2 [Information Interfaces and Presentation]: User
Interfaces- Theory and methods, User-centered design.
INTRODUCTION
The practice of creating storyboards has a long history,
particularly in communities such as those for developing
film, television segments and animations [6]. However, there
is a lack of literature on research of this practice within the
areas of HCI and design. As a result, novice designers often
lack tacit knowledge about storyboarding that expert
designers find obvious after much practice and experience.
Furthermore, although storyboarding is an effective, low-
fidelity prototyping technique, novice and professional
designers alike face challenges in creating storyboards for
new innovative applications. As interactive computing moves
off the desktop, storyboards must demonstrate not only the
details of a specific interface but also higher level concepts
surrounding user motivation and emotion during system use.
Users increasingly need to see and understand the context,
including the environment of use, physical embodiment of a
system, and user interactions with and reactions to system
elements. Thus, storyboards must depict not only a user’s
interaction with ubiquitous computing technology but these
other factors as well.
In this paper, we highlight the stages in successful storyboard
generation. We reveal the design elements common to
storyboards created and used by novice and professional
designers and HCI specialists. We note differences between
the practices of the novice designers and the professionals.
We then discuss how the uncovered design elements impact
the understandability of a storyboard from the perspective of
a potential end-user, for both familiar and novel applications.
We describe the expert practices of professional designers for
creating storyboards and relate those to the processes and
challenges reported by novices. Finally, we present
generalized guidelines that designers may use as a first step
in creating storyboards and report on our initial experience
applying these guidelines in an introductory HCI project
class.
BACKGROUND & RELATED WORK
A storyboard is a short graphical depiction of a narrative.
Storyboards can be used for a variety of activities. In
designing new technologies, storyboards often illustrate an
envisioned scenario of how an application feature works.
Rosson and Carroll described four kinds of scenarios that
designers can use in the development of a software
application [11]. During the analysis phase of software
development, designers study the current practices of
stakeholders and perform field studies to generate problem
scenarios. During the design phase, designers use activity
scenarios to introduce concrete ideas about how the user’s
requirements can be met through high-level functionalities
introduced by a new system that will inherently affect the
user’s current activities. Then designers create information
design scenarios, which specify representations of a task’s
objects and actions that will help users perceive, interpret and
make sense of the proposed functionalities. Finally,
Permission to make digital or hard copies of all or part of this work fo
r
p
ersonal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that copies
b
ear this notice and the full citation on the first page. To copy otherwise,
or republish, to post on servers or to redistribute to lists, requires prio
r
specific permission and/or a fee.
D
IS 2006, June 26–28, 2006, University Park, Pennsylvania, USA.
Copyright 2006 ACM 1-59593-341-7/06/0006...$5.00.
12
interaction design scenarios specify how users would interact
with the system to perform the new activities.
The use of scenario-based design methods can be beneficial
in two specific ways [11]. First, use case descriptions are
important in discussing and understanding how technology
reshapes human activity. Second, these scenarios can be
created before the system is built and its impacts are felt.
Likewise, the use of storyboards provides similar benefits.
Furthermore, the specific wording in text-based scenarios can
influence the understanding of and reaction to a system.
Thus, designers often use storyboards rather than scenarios as
a less biased visual depiction of the same information.
Existing research storyboarding tools such as Silk [8],
DENIM [9], and DEMAIS [3] support interaction scenarios,
conveying to users how to interact with the envisioned
system. For example, Silk allows designers to sketch user
interfaces easily; the system recognizes the designer’s ink
strokes and can be placed into simulation mode to allow the
user to experience the envisioned interaction. These tools
enable designers to visually convey the envisioned
interaction for a specific class of applications. Such
storyboards act as low-fidelity versions of the application,
which designers can use to study the usability of the
interface. These storyboards do not require the embodiment
of the larger context of use that can be critical in the design
of off-the-desktop applications.
Commercial products marketed specifically for storyboard
creation [2, 14, 15] are available, but they are designed for
experts and can be difficult for novices to use. These
difficulties arise from the inherent complexity of the tools
and their multimedia focus, both of which were reported to
be confusing. Also, expert designers expressed that the
greatest challenge for them is storytelling. These software
products are not designed to support that process and may
even be detrimental to it, because they do not provide
complete creative flexibility in terms of what can be
developed. Thus, most designers have co-opted other
products intended for different purposes. A more detailed
discussion of these products is presented later in this paper.
METHOD
We conducted three studies to determine a structured set of
guidelines for creating storyboards. First, we gathered and
analyzed storyboards created by students in graduate and
undergraduate HCI classes and by expert designers and
professional storyboard artists to determine the key features
often included in storyboards, analyzed through an
established framework for visual storytelling [10]. We also
interviewed individuals from these two groups to understand
the processes used and challenges encountered in developing
these artifacts. Finally, we conducted a controlled study in
which we systematically varied different features to
understand their effects on understandability and enjoyment
of the storyboards by storyboard consumers. The features to
vary were selected based on the existing literature on visual
storytelling and on the findings from the artifact analysis.
Artifact Analysis
We reviewed project artifacts created from 32 teams from
different offerings of an introductory HCI class taught at our
university over the previous four years. From this group, we
gathered storyboards from the sixteen projects that produced
them. Although most instructors of this course encouraged
students to design off-the-desktop applications, some teams
developed storyboards for desktop applications.
Additionally, we gathered 26 storyboards created by expert
designers and HCI professionals. These artifacts included
those from product design teams for major companies as well
as those created by expert designers from industrial and
academic research labs. All of these storyboards depicted
concepts for novel technologies in the early design phases of
product development at their companies.
Through this artifact evaluation, we were able to uncover the
salient features of storyboarding. Two researchers examined
each artifact, measuring it along twelve recognized
dimensions taken from an analysis for visual storytelling
[10]. The individual evaluations were then discussed among
a team of three researchers to reconcile any points of
difference. Finally, during these discussions, the novice
artifacts were compared as a group with the expert artifacts,
considering these dimensions and the stories being portrayed.
This comparison highlighted ways in which novice
storyboards can be improved, particularly as we explored the
allied processes used to create them.
Semi-Structured Interviews with Novice & Expert
Designers
Participants in the interviews included eight novice and five
expert designers who had experience with creating
storyboards. Interviews lasted one hour and were conducted
at places of the participants’ choosing. The novice designers
Figure 1. Novice designers often included a series of screenshots of
a non-functional interface rapidly created using Visual Basic®
with a long textual description of the envisioned scenario. The
particular details of this example are not significant, but it
illustrates this trend.
13
that we interviewed were members of different project teams
from introductory HCI classes from whom we had previously
gathered storyboards. Three of the expert designers work for
a large technology company; one a user interface designer,
the second an interaction designer, and the third an
information architect. The fourth expert participant is an
industrial designer for a large software security company.
The final expert participant is a multimedia designer for a
small graphics company. The interviews focused on the
creation process and the challenges typically encountered in
that process.
Survey of Storyboard Consumers
Over a four-week period, 97 participants responded to a
multi-part survey in which they were shown four pairs of
storyboards created by the researchers for the study. Each
pair told a similar or the same story but with one design
element varied. These design elements were uncovered
during the artifact analysis and interviews and will be
discussed in more detail in the Results section but are
summarized as follows:
Inclusion of text in the form of captions, labels, or
speech/thought bubbles,
Length of the storyboard in terms of number of
individual frames,
Level of detail - classified along a spectrum from
low (stick figures with little background) to photo-
realistic (with detailed background images),
Explicitness of time passing (e.g., through use of a
clock), and
Inclusion (or exclusion) of human actors.
The four pairs shown were randomly selected from a
potential twenty pairs that included ten systems currently in
everyday use and ten ubiquitous computing applications
intended for everyday use. We held four of the five elements
constant for each pair and varied the fifth, with each variable
being tested on two pairs of familiar and two pairs of novel
application storyboards. Survey participants responded with
their interpretations of the story represented in each
storyboard. A time limit was placed on this question in an
effort to ensure that the respondent indicated only initial
impressions of the storyboard. Additionally, the survey asked
participants to rate the difficulty of each storyboard and
indicate which factors did or would help or hinder their
understanding. After both storyboards in a pair were
presented and questions about each answered, the
respondents then described differences perceived between the
two versions of the story. These responses were coded
independently by two researchers for perceptions of
understandability, aesthetic quality, and entertainment. Of the
97 respondents, 68 answered questions for all four pairs and
85 answered all questions for at least one application.
RESULTS
In this section, we present the results of the three studies. We
present the processes garnered from both novices and experts
involved with storyboard creation. We then present the five
attributes that comprise storyboards and the range of values
for those attributes that could be present. Finally, we discuss
how the values of these attributes coupled with the story and
interfaces being represented affect both the process of
storyboard creation and the understandability and enjoyment
of the storyboard by readers.
Storyboarding Process
Throughout our interviews with novice and expert designers,
participants reported beginning with a similar storyboarding
process. Designers typically brainstorm individually about
design alternatives, capturing their ideas in quick sketches
using pencil and paper. Next, the designers meet as a group
to discuss their ideas. Experts regularly meet in front of a
shared visual work surface, usually a whiteboard. This wall
can then act as both a timeline and a source of inspiration
throughout the creation process. The students we interviewed
tend instead to meet in a common study area. During this
meeting, designers compare and contrast their visions of the
storyboard. By discussing their ideas and reviewing early
artifacts, the team can develop a shared understanding of the
application and greater context of use for a given design. At
this stage, the storyboarding process begins to differ greatly
between the novice and expert designers, with novices
tending to work closely together and experts separately,
returning periodically for critique sessions with the group and
then iterating alone.
The biggest challenges reported by the student designers we
interviewed include 1) not knowing what to start drawing and
Figure 2. Web-based survey to study user requirements in
understanding storyboards.
14
2) not being “skilled” in drawing. Working co-located was
one solution repeatedly mentioned for addressing these
hurdles. These work sessions lasted between one and eight
hours with the groups we interviewed. Co-location allowed
the design teams easily to share artifacts within the group for
quick feedback. As a result, they often iterated directly upon
their artifacts rather than creating discrete versions of the
storyboard. A second advantage to their choice to work
closely together was the ability to borrow directly from each
other’s artifacts through tracing or digital copies. Reusing
successful artifacts was reported to be a significant advantage
by all the interview participants primarily because
participants did not view themselves as having artistic skill.
All of the novices we interviewed created many more
sketches than they ultimately used. Novice design teams
reported generating at least two to three times the number of
sketches needed. Individual designers generated a collection
of sketches for an envisioned interaction, often trying to
create the same story using several different approaches.
Once completed, the team together would narrow the
collection of sketches and piece them together to form a
storyboard. In those situations in which holes still existed in
the story, someone from the design team would draw a new
panel to fill that hole. The students reported needing to create
so many extra sketches, because they were unable to envision
how the story should flow without the visual artifacts in front
of them.
In contrast to the novice’s process, experts reported typically
using the initial meeting after their individual quick sketches
to help them better understand the overarching message the
storyboard(s) should deliver. The biggest difficulties
encountered by expert designers lie in determining the
overall story. Like the novices, they spent a large amount of
time determining how to tell the story in small succinct parts.
Unlike the novices, however, they reported using brief
sentences for this portion of the story; the novices reported
using previously created sketches. Hence, the experts did not
report creating nearly the mass of extra sketches reported by
the novices. After the critique sessions, individual artists
iterate on the work, and then return to the wall to share again.
Expert designers reported creating electronic artifacts after
some level of comfort was reached with both the story and
the initial paper-based sketches. They commented that
Adobe® Photoshop®, Adobe® Illustrator®, and Microsoft®
PowerPoint are the applications of choice. Also mentioned
were a variety of other products including Macromedia
Director and Flash. The focus both of this paper and of the
interviews was understanding still presentations as opposed
to dynamic, interactive storytelling. This focus explains the
emphasis of this paper on guidelines for these types of
storyboards, and may also explain the emphasis by the
participants on these types of technologies.
All of the expert participants mentioned extensively using the
layering features that Adobe® Photoshop®, Adobe®
Illustrator®, and Microsoft® PowerPoint provided, because
these features allowed them to save and add different
versions of their storyboards easily. One expert noted that he
used PowerPoint because it was easy to insert, delete, place,
and resize simple shapes and text. The one drawback to using
these tools, however, is that the designers still needed to rely
on other sources for generating images for inclusion in the
storyboard. Some experts used stock photos from websites
such as istockphoto.com, then added filters and otherwise
modified them to create a consistent feel throughout their
storyboards. If an adequate stock photo can not be found on
the Internet, experts reported creating images from scratch
and modifying them to fill in the gaps in the story while
maintaining consistent visual appeal.
Overview of the Elements of a Storyboard
Using storyboards developed both by professionals and by
amateurs, we determined five significant attributes of
storyboards:
1. Level of detail. The level of detail present in a
storyboard must take into account how many objects
and actors might be present in a particular frame, the
level of photo-realism incorporated by the designer,
and the designer’s choice to display the entire scene
or only details of the interface.
2. Inclusion of text. Designers can include text either
through tagline narrations for each pane or within
individual frames as speech, thought bubbles, or
labels and signs that would be present in the real life
environment depicted in the storyboard.
Alternately, designers can choose to depict the story
entirely using visual elements with no text.
3. Inclusion of people and emotions. Storyboards can
include renditions of human users demonstrating
interactions with an interface. Designers can also
use these characters to build empathy for potential
users, display motivation, or convey other intangible
elements, such as how the application affects the
user. Alternatively, designers can also build
empathy be removing people entirely and drawing
the interaction as though the reader is the actor.
4. Number of frames. The number of different panels
present in a single storyboard can vary anywhere
between 1 and more than 20 frames, although the
majority of storyboards we collected included
between 3 and 6 frames, noted by experts to be the
optimal size for conveying a single feature or
activity. Multiple features and activities were
usually depicted in multiple storyboards.
5. Portrayal of time. Designers can explicitly indicate
time passing within a storyboard or use transitions
that convey changes over time as suggested by
Eisner [5].
Effects of the Five Elements on Designer Process and
Storyboard Consumer Experience
Interviews with both student and professional storyboard
artists and designers uncovered patterns of use and common
15
practices surrounding storyboarding in general and with these
five elements in particular. Through a Web-based survey, we
probed responses to storyboards that spanned the range of
potential values for each element and uncovered patterns in
their effectiveness for both familiar and novel user
interactions. Familiar interactions included scenarios like
sending email or text messages and checking in for an airline
flight. Unfamiliar interactions included home automation
using a specialized piece of jewelry [13] and controlling a
public video game on a large display using a mobile phone
[4].
How Much Detail Should Be Included?
Most students created storyboards containing screen-by-
screen steps through an interface and functionality.
Interviews with a subset of these students indicated that
novice designers (or at least novice HCI practitioners) fear
they lack the artistic ability to draw the environment and the
context of use. This concern over artistic skill also led them
to avoid hand drawing their storyboards using pencil and
paper, relying instead on tools like Microsoft® PowerPoint®
and Microsoft® Paint or traces of other drawings. Novice
designers also created storyboards as a series of screenshots
of non-functional interfaces rapidly created using tools like
Visual Basic® (see Figure 1).
Expert designers, on the other hand, reported having the
artistic ability to create highly detailed drawings and used a
variety of tools and techniques for creating their storyboards.
After iterations on initial pencil drawings, they recreated
these drawings using ink pens or advanced graphics tools
such as Adobe® Photoshop® and Adobe® Illustrator®.
Depending on the audience for the storyboards and the time
available for creation, experts also mentioned developing any
variety of artifacts, from stick-figures with little background
or detail to the use of photos or animation to create a
potentially more realistic storyboard. When using
photographs or stock images, a common practice reported is
also to apply filters, thus removing unnecessary details and
anonymizing the characters in the panel.
Significantly, all of the experts noted that this removal of
detail about the human characters and about the background
is important to the artist’s ability to control where a
storyboard consumer’s attention is focused. Removal of
details in the storyboard, whether through filters or using
stick figures, is similar to the notion of greeking text in paper
prototyping, in which designers represent text as squiggles
when the actual content is not the central point of focus [12].
By simplifying some aspects of the storyboard, it focuses the
storyboard consumer’s attention on others.
Although most professionals encourage using minimal detail
in creation of storyboards, every novice we interviewed
either used a lot of detail in storyboards or noted that more
detail would have been included if the design team had
included more artistic talent. The empirical data backed up
the recommendation of the designers, for the most part. After
examining the same story (one of an unfamiliar interface)
with stick figures and with a detail rich drawing, survey
participants commented that the detail was unnecessary and
their understanding of the story the same: “the person who
drew as much detail as [the more detailed storyboard] just
wasted their time.” In the case of a familiar scenario, highly
detailed storyboards can even impede understanding: “[the
more detailed storyboard] seems to have too much
extraneous detail, to the point that you’re not sure what the
emphasis is on.” Highly detailed storyboards can indicate to
end users “that one might imagine that one should be getting
more out of it than there is to get.” Despite the general
recommendation of including as little detail as necessary,
inclusion of more details can have its advantages:
“Aesthetically, I like [the storyboard with more detail]
better.”
(a)
(b)
Figure 3. Two storyboards depicting an application that monitors
activities inside the kitchen. (a) shows less detail than (b). Users
found the extra details in (b) distracting and did not know where to
focus.
16
How Can Words Alter Perception and Understanding?
Novice designers often expressed the need to explain their
storyboards, implying that pictures are not enough. They
mentioned that a short textual description of the situation can
help explain a usage scenario, primarily because the
drawings do not include the environment and people, as
mentioned above. Expert designers also reported using text to
supplement the drawings. Their drawings often include the
environment and people, together with a short tagline to
explain points that would have otherwise required much
more detailed drawing to portray.
Not surprisingly, in the empirical study, use of text was one
of the strongest indicators of whether or not a storyboard
would be understood, particularly for novel applications.
When storyboards contained text, 84.4% of the responses
(151 out of 179) correctly identified the story. Without text,
survey participants had a harder time identifying the story
depicted; only 65.7% of the responses (69 out of 105) were
correct. When we controlled the presence of text for certain
storyboards, 39.7% of the responses improved when text was
included. Furthermore, the amount of text matters. Short
forms of included text (e.g., thought bubbles or short tagline
captions) were more effective than longer passages.
On the other hand, text may actually be detrimental to the
possibility of evaluating the specific details of an interface or
on its inherent usability, a possible concern to designers. As
Truong et al. point out, use of words can significantly bias a
user’s reaction to particular technologies [16]. The
qualitative responses of the survey participants indicated that
in fact some scenarios were interpreted differently based on
the inclusion of text. Graphic depictions should be used when
designers must intentionally avoid using potentially loaded
wording. In other cases, use of text, whether as captions or as
wording within the scene (such as with thought bubbles or
signs) may actually interfere with interpretation of the
storyboard and the ability of designers to get feedback on
specific elements. For example, one survey participant noted
that “all of this [the visual elements] is irrelevant in the
second strip, as the text clearly spells out what's going on,
regardless of the pictures. Therefore, given the explanatory
text, the details and number of frames become much less
important.”
When Should Storyboards Invoke Empathy?
As one expert noted, “the first thing users will want to know
is ‘why do I even care about this application?’ ” Experts
suggest adding people in drawings to help potential end-users
reading the storyboards better relate to the design.
Similar to the finding that text, while helpful, is limited in its
usefulness to those situations in which designers want a
certain type of feedback, showing people in the storyboards
had varied results. Inclusion of human actors provided focus
for the experience of application use and helped end users
build empathy for these characters, a quality noted as
important by multiple professional designers we interviewed.
At the same time, showing only the interface allowed users to
focus on smaller details, often technical in nature. When
describing two versions of a storyboard depicting an instant
messenger exchange, one survey participant commented that
“[the storyboard with people] is better for
brainstorming system features, since it indicates the
motivation of the users. [The storyboard without
people] gives me a better idea of the desired layout
of the system.”
Another respondent noted that it
“depends on what you are trying to convey. If just
doing the technical aspects, [storyboard without
people] works. If doing the whole user sequence,
[storyboard with people] is better.
Finally, storyboards without people explain the basic story
whereas storyboards with people can convey additional
meaning. One survey participant noted that a storyboard
about using a kiosk to check in to an airline flight that
included people “says that this kiosk check-in is easier,
faster, more convenient. [The one without people] just says
that it's possible.”
Figure 4. Example of storyboard that included text taglines. We also presented a similar version of this storyboard without the text.
17
How Many Panels is Enough?
One large point of variation observed during the artifact
analysis was that of the number of panels included in an
individual storyboard. Storyboards ranged anywhere from
one to more than twenty panels, with the majority of expert
storyboards including between two and six panels. This
differential can be explained by differences in the processes
reported by interview participants. Novice designers reported
adding extra frames to explain complicated ideas. Experts,
however, suggested breaking complicated ideas into smaller
concepts represented by a smaller number of panels that
would maintain the reader’s interest.
We systematically varied the number of panels used in the
survey from one to seven in an attempt to find an optimal
range for both user understanding and enjoyment. In the end,
we determined that three to five panels was optimal for both
familiar and unfamiliar interfaces, with understandability
decreasing substantially below three panels and perceptions
of aesthetic quality and entertainment as well as
understandability decreasing with more than five. These
variations occurred regardless of what outside knowledge or
familiarity a user had with an application before viewing the
storyboards.
I don’t need the extra information in [the longer
storyboard], it just makes it more confusing.
–regarding unfamiliar ubiquitous gaming storyboard
I would venture to guess that two frames is not
enough to describe a story.
–regarding a familiar email application storyboard
When is it Necessary to Portray Time?
Although some storyboards included explicit indicators of
time (e.g., a clock or calendar), most either showed no
indication of time passing or demonstrated it through implicit
cues (e.g., changes that could only occur over time such as
the growth of a plant). Expert designers commented that it
was not an element they considered unless a large amount of
time elapses between panels. In those situations they often
use explicit indicators to ensure that the reader has a full
understanding of the story.
Explicit references to time passing are only necessary when
time is a significant element in a story. This finding echoes
what experts reported knowing implicitly, that explicit
mention of time is at best unnecessary and at worst
distracting in most storyboards, exemplified by these survey
comments:
Adding the date [in the second comic strip] did not
improve my understanding. It was clear to me in the
first one that time was passing.
The inclusion of the clock in the second strip is
distracting and actually hinders understanding. I
don't think there's any reason to include it if it's not
important that the events drawn are occurring at
the same time.
Despite infrequently appearing in storyboards, time passing
was a significant element needed to understand particular
storyboards. For example, in a storyboard meant to depict
users taking an audio tour of a museum, although many
survey participants commented that “Time passing is
implied, so a clock isn't really required,” their understanding
of the story clearly was affected by it (35.9% of the survey
participants changed their answers as to what was going on
based on whether or not a clock showing 30 minutes had
elapsed was shown).
“The explicit showing of time passing (or the lack
thereof)…changed my view of the
situation…improving my understanding.”
–survey participant comment regarding
museum audio tour guide application
A final point about time passing that was not mentioned by
either novice or expert designers, but that was uncovered by
survey responses is the potentially quantifiable nature of
explicit indicators of time. When referring to a set of stories
(a)
(b)
Figure 5. Two storyboards with different lengths. Users found the
extra panels unnecessary.
Figure 6. Storyboard depicting an audio museum tour guide with
explicit time indicators.
18
in which the sun passing over the sky is used in one of them
as an explicit indicator that an entire day has passed, survey
participants commented that the indicator changed their
interpretation. For example, one respondent noted:
“Both [versions of the storyboard] have a very
strong indication of a lot of time passing, but the
second one shows it in a more quantifiable sense.”
If the designer needs to convey not only that time passed but
how much time has passed, explicit indicators help.
The Effects of Background Information on Storyboard
Interpretation
It is commonly accepted that designers should have some
understanding of the characteristics of their intended end
users. Likewise, the background information and external
knowledge of storyboard consumers can have profound
effects on interpretation. Humans are very good at filling in
the blanks [7]. Thus, designers must consider how external
knowledge will affect understanding.
The external knowledge of storyboard consumers can fill in
holes in the graphical depictions of a story in which the
designer either intentionally did not include details or was
unintentionally unclear. These positive uses of background
information were particularly common in the case of
interfaces that might be familiar to users. One survey
participant commented, “I was able to infer from outside
understanding that she was receiving a text message.”
In the case of novel applications, however, such as those that
would be common to ubiquitous computing design, more
often than not user external knowledge only hindered
understanding. In a storyboard depicting a novel music
application from Intel Research, the actor in the panels makes
asynchronous requests to download music for a mobile
device from her home PC. With outside understanding of an
iPod® [1] that lacks that functionality, users were often
confused, as one respondent noted:
“[The storyboard] is confusing, because it implies
that the iPod is updated, but no one is at the
computer back home to have updated it.”
One way to address concerns with interfering background
information is to include supplementary text in the form of
captions. One storyboard in the empirical study depicted a
telehealth application in which a home user could initiate a
blood pressure test and then proactively send that information
to a health care professional. Familiarity with email and in
some cases with other telehealth models interfered with every
individual’s interpretation of that storyboard when it did not
include explanatory text. For example, one survey participant
commented, “I thought the doctor had initiated everything
(mostly because of my prior knowledge of how it works).”
When explanatory text was included, however, almost all
users understood the story.
But as previously discussed, text can also bias readers or
possibly interfere with their understandings. Thus, another
solution for hedging against a user’s external information is
to prepare different storyboards for different users. For
example, survey participants with different email experiences
interpreted panels depicting a research email client
differently, as exemplified in these comments:
“… but I don’t use Windows, so maybe it’s an icon
problem.”
“...it took me a second, because a mailbox [the icon
for new mail in the prototype email clients] is not
the typical icon that I see in my personal experience
…I get Outlook’s envelope.”
If separate storyboards were created for users familiar with
different operating systems and email clients, interpretation
would likely have been less confusing.
GUIDELINES FOR STORYBOARD CREATION
The results discussed above can be generalized into the
following set of guidelines that can be applied coupled with
traditionally accepted HCI and design practices. Both novice
and expert designers can benefit from use of guidelines for
the process of creating storyboards and for the creation of the
storyboards themselves.
Understand the Storyboard Consumers
It is commonly accepted that designers should consider the
backgrounds and experiences of their intended users when
creating prototypes. In the case of storyboard prototypes,
however, this external information can be even more
significant, particularly to the understanding of novel systems
and applications. Thus, the first step in the storyboard
creation process must be a firm understanding of the users
and their backgrounds as well as of the system and its
features. Designers should consider with which computing
systems the consumers of the storyboards may be familiar,
including icon and wording choice.
Get Creative in the Story
The next step in the process, already common to both expert
and novice practice, is to brainstorm about the story together
as a group of designers. During this period, all experts
reported needing to be as open and creative as possible,
including often altering the physical environment in which
the design team is working to create a more creative space.
Once the story has been decided, understanding about it
coupled with understanding about the users and the system
can help the design team begin to formulate the storyboard
itself.
Create the Artifacts
The first step in creating the storyboard artifacts is to break
each story into smaller discrete sections. Three to five
sections is optimal in most cases. Experts commented that an
application requiring more than five sections to convey
functionality should be broken into several storyboards each
focusing on an individual feature. A single short sentence
should be able to describe each discrete section. The final
steps then begin with drawing sketches corresponding to each
of these short sentences. These sketches should use
19
appropriate levels of each of the attributes laid out in this
paper, with the following recommendations:
Use some text when demonstrating novel
applications, but be conscious of how the chosen
words may influence your end user audience.
Include people in the storyboards when needing
responses to the interaction experience. Avoid
including people if detailed feedback on usability,
technical, or aesthetic features is required.
Explicitly indicate the passage of time only when
time is relevant to demonstration of a particular
feature. Otherwise, use implicit indicators of time.
Use the minimal level of detail required to note the
salient features of a system. Any more detail will be
both a waste of designer time and a distraction from
the points of focus of the storyboard.
Test and Iterate on the Storyboard
Individual designers should return to the group for feedback
and iterate on the work. Every storyboard should be piloted
with similar participants to the target end user group, a
common practice for any prototype to be used in evaluation.
APPLYING THE GUIDELINES IN PRACTICE
We shared these guidelines with an introductory
undergraduate HCI class similar to those from which we
drew the original artifacts. The course consisted of 41 second
to fifth year students who majored in Computer Science,
Computer Engineering, Electrical Engineering, Management,
Psychology, Industrial Design, Bio-informatics or
Computational Media.
We asked students in this course to create storyboards using
the recommended guidelines described above and
recommended use of the common tools employed by experts
(e.g., Photoshop®). We then gathered and analyzed their
storyboards and interviewed five of these students. The
results of this artifact analysis and these interviews unveiled
significant departures from those artifacts created in previous
semesters and the way they were used:
1. Students identified a 4 to 5 line message describing
the story. They created their storyboards around this
story and often included short taglines for each panel
in their storyboards to guide the user.
2. Storyboards included more actors and physical
objects to help ground the context of use. Students
reported this feature helped users better relate to
their designs.
3. The level of detail found in many of the storyboards
created by the students resembled those in the
professional storyboards we analyzed. Students felt
more comfortable using stick-figures or block-
figures in their drawings and remarked about how
users found this made it easier for them to
understand the storyboards. Additionally, several
project teams applied Photoshop® filters to
photographs in their storyboards to blur out
unnecessary details while preserving the features on
which they wanted the users to focus.
4. The amount of time these students reported needing
to spend explaining their project ideas to users was
less than those from previous semesters. The
simplicity of their drawings coupled with the
presence of actors, objects and short text provided
users with sufficient understanding of the context of
use for the application design.
Students also used storyboards in a summative manner when
evaluating their designs at the end of the semester. In the
majority of the projects, students reported evaluators
suggesting changes to the application that would not have
been provided as part of other techniques, such as a heuristic
evaluation, because evaluators were better able to understand
the context of use.
CONCLUSIONS
Storyboarding is an important process in design and a
difficult skill to apply effectively in practice. The designers,
particularly novices, can lack the skills needed to create both
a compelling and understandable story and a visually
appealing and intelligible set of frames. By understanding
current expert practices of professional designers for creating
storyboards and the design requirements of a storyboard, we
have been able to develop a recommended process to guide
design teams in the creation of storyboards
Different classes of applications require different levels of
emphasis on the various elements of a storyboard. Thus,
Figure 7. Storyboard created by novice designers using the
guidelines described above.
20
there is no one template for all applications. As a first step,
by using the recommendations laid out for each of the
attributes and attending to the discussed design process for
storyboard creation, design teams should be able to create
storyboard prototypes to give them feedback on all levels of a
system from use cases and context to specific details.
This study allowed us to uncover both current practices of
professional designers and recommendations for a new
process, likely to be successful for both on- and off-the-
desktop applications. We identified important attributes of
individual storyboards and empirically measured the
understandability of storyboards created with varying values
for these attributes, leading to guidelines for developing
storyboards using these elements as building blocks. Using
these guidelines as a process, novice designers can create
better, more understandable and enjoyable storyboards.
Interviewing novices and professionals revealed that there is
no one application that offers all of the functionality needed
to successfully develop storyboards. A next generation
application for storyboard creation should include reusable
components including stock photos and clip art and layering
features. It should allow users to import their own images
and filter and manipulate them.
These guidelines can also be applied as part of a design tool
to support storyboards design and development. First, the
design tool should encourage designers to identify the story
they are trying to tell in 3-5 lines. These 3-5 lines then
become taglines for the panels. The drawing tool should
support many of the basic features in Photoshop®,
Illustrator® and PowerPoint offer that experts liked. In
particular, experts liked PowerPoint because it was easy to
insert, delete, place and resize simple objects, shapes and
text. All experts liked the layering ability that these three
applications provided. It allowed them to save and add
different version of their storyboards easily. Additionally, we
noticed the importance of being able to share and be inspired
by artifacts created by other members of the design team. For
experts, this meant a wall where early copies of individual’s
storyboards were pasted. For novices, this meant being able
to easily glance at what others were creating. A design tool
should take into consideration ways to allow a collection of
designers to be able to show what they are creating and allow
members of the same team to observe and easily borrow
artifacts from other members.
ACKNOWLEDGMENTS
We thank Lauren Griffin for her assistance in this research
and Shwetak Patel, Julie Kientz and Elaine Huang for their
thoughtful guidance and comments on drafts of this paper.
REFERENCES
1. Apple™ – iPod®, http://www.apple.com/ipod.
2. Apple – Comic Life, http://www.apple.com/
downloads/macosx/productivity_tools/comiclife.html.
3. Bailey, B.P, Konstan, J.A., and Carlis, J.V. DEMAIS:
Designing Multimedia Applications with Interactive
Storyboards. In the Proceedings of the Ninth ACM
International Conference on Multimedia, (September 30-
October 5, Ottawa, Canada), 2001, pp. 241-250.
4. Ballagas, R., Rohs, M, and Sheridan, J.G. Sweep and
Point & Shoot: Phonecam-Based Interactions for Large
Public Displays. In the Extended Abstracts of ACM
Conference on Human Factors in Computing Systems:
CHI 2005 (April 2-7, 2005, Portland, Oregon), 2005, pp.
1200-1203.
5. Eisner, W. Comics & Sequential Art. Poorhouse Press:
1985. 163 pages.
6. Hart, J. The Art of the Storyboard: Storyboarding for
Film, TV, and Animation. Focal Press: 1998, 240 pages.
7. Kohler, W. Gestalt Psychology: An Introduction to New
Concepts in Modern Psychology. Liveright Publishing
Corporation: 1992, 369 pages.
8. Landay, J.A. and Myers, B.A. Sketching Storyboards to
Illustrate Interface Behavior. In the Conference
Companion of ACM Conference on Human Factors in
Computing Systems: CHI '96, (April 13-18, Vancouver,
Canada), 1996. pp. 193-194.
9. Lin, J., Newman, M.W., Hong, J.I., and Landay, J.A.
DENIM: Finding a Tighter Fit Between Tools and
Practice for Web Site Design. In the Proceedings of
ACM Conference on Human Factors in Computing
Systems: CHI 2000, (April 1-6, The Hague, The
Netherlands), 2000. pp. 510-517.
10. McCloud, S. Understanding Comics. Perennial Currents:
1994. 224 pages.
11. Rosson, M.B. and Carroll, J.M. Usability Engineering:
Scenario-Based Development of Human Computer
Interaction. Morgan Kaufmann: 2001. 448 pages.
12. Snyder, C. Paper Prototyping. Morgan-Kaufman: 2003,
408 pages.
13. Starner, T., Auxier, J., Ashbrook, D. and Gandy, M. The
Gesture Pendant: A Self-illuminating, Wearable,
Infrared Computer Vision System for Home Automation
Control and Medical Monitoring. In the Proceedings of
IEEE International Symposium on Wearable
Computing: ISWC 2000, (October 18-21, Atlanta,
Georgia), 2000, pp. 87-94.
14. StoryBoard Artist v.4,
http://www.powerproduction.com/artist.html.
15. StoryBoard Quick v.4,
http://www.powerproduction.com/quick.html.
16. Truong, K.N., Huang, E.M, Stevens, M.M., and Abowd,
G.D. How Do Users Think about Ubiquitous
Computing? In the Extended Abstracts of ACM
Conference on Human Factors in Computing Systems:
CHI 2004 (April 24-29, 2004, Vienna, Austria), 2004,
pp. 1317-1320.
21
... Due to the online study mode, we needed to make the concept implementation phase mostly in storyboarding technique, instead of implementations on the robotic platforms. Storyboarding suits best for initial phase visualization of the idea [40]. The StoryboardThat online service (https://www. ...
Article
Full-text available
Social robot design projects typically involve multidisciplinary teamwork and collaboration, adopt a Human-Centred Design (HCD) approach, and deal with physical (tangible) objects, i.e., robots. HCD takes a human to the centre point of the design process. A typical activity in HCD are design workshops where a facilitator is needed to guide and moderate the task-related and interactional activities throughout the session. Facilitation is also usually needed in longer-term design projects or courses to guide participants through the different phases of design during several sessions. Recently, due to the COVID-19 pandemic, most design activities including social robot design were rapidly transferred to online mode. Designing for tangible objects is challenging in online settings because the interaction experience with a physical object is hard to demonstrate online. In this article, we report how we harnessed online canvases to support both short-term social robot design workshops and a long-term design course. Based on participants’ feedback and facilitators’ experiences, we report lessons learned from utilizing collaborative design canvases for creative social robot design projects that specifically focus on early stages and concept ideation. We propose practical guidelines for canvas-based online facilitation focusing on creative design workshops and projects. In addition, we discuss the lessons learned concerning social robot design activities taking place in online mode. To respond to the challenges of designing tangible robots in a fully online mode, we suggest a Hybrid Robotic Design Model (HRDM), where the participants work in contact with facilitators, other participants and robots at specific points, while the other phases are conducted online.
... Individual design sessions were conducted using storyboarding to detail patients' interactions with the interface and determine the necessary components. Storyboarding is a technique that involves displaying a set of illustrations shown in sequence to pre-visualize how navigation of an application will work (Truong et al. 2006). Each design session was audio-recorded, lasted 20-40 min, and covered topics on the application such as general usefulness, usefulness for patient-provider communication, helpful and unhelpful features, suggested changes, and the perceived impact of using a mHealth application to interact with their healthcare provider. ...
Chapter
The field of consumer health informatics (CHI) is constantly evolving. The literature that supports CHI includes a broad scope of expertise and disciplines, which makes discovering relevant literature a challenge. Through a library and information science lens, we provide foundational familiarity with the structures of information discovery systems and considerations that impact the discovery of CHI literature. We outline the steps included in the design and execution phases of a CHI-related literature search. We also provide an example search using wearable technologies and a case in point that illustrates how terminologies differ across databases. We describe the importance of operationalizing elements of a research question and strategically combining search terms in a query to enhance the findability of CHI literature. The reader will gain a database-agnostic understanding of the structures and factors relevant to the retrieval of CHI literature, which should be particularly useful as the field of CHI and the tools for retrieving literature continuously change.
... We further examined the use of metaphors in HRI by more deeply exploring how the metaphors could become feasible HRI scenarios. We used illustrated storyboards as a method [58] to visually represent how selected metaphors can inspire robot use in public spaces, the home, education, and assistive contexts. ...
Article
An engaging user experience is an increasingly important design characteristic in the automotive industry. Compared with physical design characteristics (form, material, mechanical design, appearance), automotive designers find UX (user experience) challenging to communicate during the early stages of the design process without investing in expensive prototypes and/or models. This paper presents the development of a method to explore strategies to communicate UX through the medium of storyboards early in the design process. The method enables links to be drawn between the design tool of storyboarding and the attributes of theoretical UX outlined in theoretical frameworks. By applying this method in a case study of a storyboard created by Ford Design Asia Pacific, we identify how the theoretical attributes of UX are manifested, and we also highlight certain attributes of UX that are difficult to convey during the early phases of automotive design. This research thus contributes a method relevant to practice that assists with effectively communicating UX in early-stage automotive design where higher fidelity prototyping is unviable. Additionally, it enables the study of storyboard outcomes in the design process to assess the degree to which the intended UX is communicated. In doing so, it contributes a first step toward formalizing the analysis of UX in concept design, which in turn opens up this highly subjective area to further research in the automated analysis of conceptual design and even generative design.
Chapter
User-centered design is a design philosophy in which the end user is the expert and their goals and needs drive the design process. The end user is deeply integrated into the design process, from the early conceptualizations of a visualization through iterative design cycles and ultimately the implementation of interactive interfaces that include visualization. This approach is crucial when designing visualizations oriented towards patients displaying their personal health data—patient-facing visualizations—to ensure that visualizations are comprehended by target patient populations, who may have unique sociocultural backgrounds and needs with respect to health literacy, numeracy, and graph literacy. As personal health information is returned to patients at an increasing rate through patient portals and other mobile health technology, well-designed visualizations can improve comprehension of health information and reduce anxiety, confusion, and potentially unsafe responses. In this chapter, we provide suggestions for best practices for user-centered design of patient-facing visualizations, including selecting a framework to guide the design process, gathering requirements to understand the end user, and conducting rigorous evaluation studies. To illustrate many of these best practices, we provide a detailed case study describing the development of mi.Symptoms, a mobile health application that uses patient-facing visualizations to support symptom self-monitoring of symptoms for older adults with heart failure. The visualizations used in mi.Symptoms were developed through a set of iterative design activities to determine desired content as well as features and functions to increase usability of a symptom monitoring application for older adults.KeywordsUser-centered designData visualizationPersonal health informationMobile healthConsumer health informationCulturally appropriate technology
Article
Spinal cord injury (SCI) affects the mobility of 250,000 people per year worldwide. Physical activity (PA) in individuals with SCI is positively associated with improved mental and physical health outcomes. Mobile technologies have been developed to motivate individuals with SCI to increase PA using activity tracking and real-time feedback. We conducted semi-structured interviews and participatory design sessions with 15 manual wheelchair users with SCI and eight of their family members/friends to investigate user impressions of future technologies that might use computer-mediated, sensor-triggered communication to motivate PA. We assessed barriers to PA and how context-aware communication could help overcome them. Participants with SCI expressed that PA tracking and communication technologies must be tailored to their specific needs. Further analysis revealed that context-aware messaging could help participants with SCI connect with others to initiate timely conversations about overcoming PA barriers, and to provide encouragement to meet their PA goals. We discuss opportunities to empower individuals with SCI with regards to PA using tailored, context-aware communication.
Article
Design is a key part of the healthcare intervention development process, yet it is often viewed as unclear, unstructured, and challenging. INDIGO (“INtervention DesIGn with stakehOlders”) is a new mixed method that brings structure and creativity to the healthcare intervention design process and facilitates a holistic perspective of complex interventions. INDIGO combines and adapts timelining and storyboarding and enables users to create a visual representation of a complex intervention. It comprises card storyboard tokens representing intervention elements that can be moved around on a timeline chart. We discuss the background and development of INDIGO, including existing mixed methods approaches to intervention design. We then provide examples of the use of INDIGO in two empirical studies that informed the development of a brief mindfulness-based intervention, illustrating how INDIGO supported the generation of new insights. We go on to discuss the practicalities, benefits and challenges of INDIGO, including feedback from study participants. This article contributes to the field of mixed methods research by extending the scope and utility of timelining and storyboarding, and by clearly describing INDIGO so the method can be used by other researchers or intervention developers.
Chapter
Making programmable things, such as prototypes and other interactive physical artefacts, has inherent value for Research through Design inquiries. However, the intersection between programming and Research through Design appears to have received little attention. To investigate this issue, we conducted a literature review examining 51 papers. In nearly every case, the artefact’s program and the act of programming appear to be severely under-documented. It does not seem to matter where the code came from, what kind of responsiveness the behaviour has, how responsive the interaction is, or how the code maps to the perceived behaviour. Analysis of our corpus revealed six themes and three leverage points for supporting designerly research’s engagement with programming. We use these to offer recommendations to deepen and broaden the range of insights that may be articulated by Research through Design that involves interactive artefacts.KeywordsResearch through designPrototypingProgramProgrammingCodingLiterature review
Chapter
The useful life of a prototype created in an education project typically ends when the project ends. The longitudinal use of these educational outcomes, prototypes, has seen little attention in design education. This pictorial examines the practical design activities on a student-built entrance that was handed over from the first-year students to the new first-year students in the following cohort. By turning this often bypassed area into an environment for exploration, we ask, how did the students’ design activities evolve when building such an environment versus using it for further learning?Between the years, the role of the prototype changed from a focus of interaction to Means of Inquiry. The materiality of the entrance was radically different between the years, suggesting a way to achieve long-term benefit with less budget. We conclude by discussing four perspectives that emerged from the cross-cohort prototyping.KeywordsCross-cohort educationPrototypingDesign researchCritical design
Article
Background Digital interventions, such as smartphone apps, can be effective in treating alcohol use disorders (AUD). However, efforts to integrate digital interventions into primary care have been challenging. To inform successful implementation, we sought to understand how patients and clinicians preferred to use apps in routine primary care. Methods This study combined user-centered design and qualitative research methods, interviewing 18 primary care patients with AUD and nine primary care clinicians on topics such as prior experiences with digital tools, and design preferences regarding approaches for offering apps for AUD in primary care. Interviews were recorded and transcribed for template analysis whereby a priori codes were based on interview topics and refined through iterative coding. New codes and cross-cutting themes emerged from the data. Results Patient participants with AUD indicated they would be more likely to engage in treatment if primary care team members were involved in their use of apps. They also preferred to see clinicians “invested” and recommended that clinicians ask about app use and progress during follow-up appointments or check-ins. Clinician participants valued the opportunity to offer apps to their patients but noted that workflows would need to be tailored to individual patient needs. Time pressures, implementation complexity, and lack of appropriate staffing were cited as barriers. Clinicians proposed concrete solutions (e.g., education, tools, and staffing models) that could improve their ability to use apps within the constraints of primary care and suggested that some patients could potentially use apps without clinician support. Conclusions A user-centered approach to engaging patients in digital alcohol interventions in primary care may require personalized support for both initiation and follow-up. Meeting patients’ needs likely require increased staffing and efficient workflows in primary care. Health systems should consider offering multiple pathways for enrolling patients in apps to accommodate individual preferences and contextual barriers. Plain Language Summary Healthcare systems have begun using app-based treatments to help patients manage their health conditions, including alcohol use disorders. Some apps have been tested in research studies and appear to be effective. However, it is difficult for healthcare teams to offer apps to patients. Clinicians must engage in new activities that they have not done before, such as “teaching” patients to use apps and checking in on their use of the apps. Identifying how to use apps in routine healthcare is critical to their successful implementation. This study interviewed 27 people, including healthcare providers and patients in primary care, to uncover the most optimal ways to offer apps to patients with alcohol use disorders. The interviews combined the use of qualitative research methods and user-centered design. Results suggest that to use to address alcohol use disorders, primary care teams should be prepared to offer personalized support to patients. Both patient and clinician interviewees said that the steps required to use apps must be intuitive and simple. Patients could gain more benefits if clinicians introduced the apps and guided patients to use them, as opposed to making apps available for patients to download and use on their own. However, the exact approach to offering apps would depend on a given patient’s preferences and the extent that staffing was available in the clinic to support patients. Health systems should be prepared to offer and support patients in their use of apps, which should accommodate patient preferences and the constraints of the clinic.
Conference Paper
Full-text available
Through a study of web site design practice, we observed that web site designers design sites at different levels of refinement—site map, storyboard, and individual page—and that designers sketch at all levels during the early stages of design. However, existing web design tools do not support these tasks very well. Informed by these observations, we created DENIM, a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming. We performed an informal evaluation with seven professional designers and found that they reacted positively to the concept and were interested in using such a system in their work.
Conference Paper
Full-text available
This paper focuses on enabling interactions with large public displays using the most ubiquitous personal computing device, the mobile phone. Two new interaction techniques are introduced that use the embedded camera on mobile phones as an enabling technology. The "Point & Shoot" technique allows users to select objects using visual codes to set up an absolute coordinate system on the display surface instead of tagging individual objects on the screen. The "Sweep" technique enables users to use the phone like an optical mouse with multiple degrees of freedom and allows interaction without having to point the camera at the display. Prototypes of these interactions have been implemented and evaluated using modern mobile phone technologies. This proof of concept provides a performance baseline and gives valuable insights to guide future research and development. These techniques are intended to inspire and enable new classes of large public display applications.
Conference Paper
Full-text available
Current user interface construction tools make it difficult for a user interface designer to illustrate the behavior of an interface. These tools focus on specifying widgets and manipulating details such as colors. They can show what the interface will look like, but make it hard to show what it will do. For these reasons, designers prefer to sketch early interface ideas on paper. We have developed a tool called SILK that allows designers to quickly sketch an interface electronically. Unlike paper sketches, this electronic sketch is interactive. The designer can illustrate behaviors by sketching storyboards, which specify how the screen should change in response to user actions.
Conference Paper
To create an innovative interactive multimedia application, a multimedia designer needs to rapidly explore numerous behavioral design ideas early in the design process, as creating innovative behavior is the cornerstone of creating innovative multimedia. Current tools and techniques do not support a designer's need for early behavior exploration, limiting her ability to rapidly explore and effectively communicate behavioral design ideas. To address this need, we have developed a sketch-based, interactive multimedia storyboard tool that uses a designer's ink strokes and textual annotations as an input design vocabulary. By operationalizing this vocabulary, the tool transforms an otherwise static sketch into a working example. The behavioral sketch can be quickly edited using gestures and an expressive visual language. By enabling a designer to explore and communicate behavioral design ideas using working examples early in the design process, our tool facilitates the creation of a more effective, compelling, and entertaining multimedia application.
Conference Paper
As ubiquitous computing technology migrates into the home environment, there has been a concurrent effort to allow users to build and customize such technologies to suit their own specific needs. Many tools have been built to enable users with little or no programming knowledge to build such applications. Despite the de-emphasis on programming, however, these tools are often device-centric, rather than user-centric. In this paper, we investigate how people describe and conceptualize ubiquitous computing applications and technology. We examine how people naturally express ideas for novel applications to build conceptual models upon which to base future interfaces for creating ubiquitous computing applications.