Draw Me a Storyboard: Incorporating Principles & Techniques of Comics...

Storyboards are used in user-centred design (UCD) to clarify a scenario that describes the future use of a system. Although there are many styles of storyboarding, the graphical notation and language are very accessible for all team members of a multidisciplinary team. This papers describes how principles and techniques from comics can facilitate storyboarding in our COMuICSer approach and tool. COMuICSer formalises the way that storyboards are created, while preserving creative aspects of storyboarding. In combination with tool support for COMuICSer, this simplifies the relation of storyboards with other artefacts created in UCD such as structured models and UI designs and supports communication in multidisciplinary teams.


INTRODUCTION
The development team of an interactive software system is seldomly limited to software developers only.Over time, the development of software has become a multidisciplinary affair, especially in the case of interactive software.This evolution is supported by many good reasons: amongst others it has the potential to increase the usability of a system, it helps to define what functionality exactly has to be supported by a system and it ensures a better fit with the target user groups.By including roles such as software engineers, developers, UI designers and human factors experts in the multidisciplinary team, the expertise in the project team varies from technical to non-technical.It is exactly this combination of multiple disciplines that are of value for succesful software.This evolution in software development to ensure that software is tailored toward the end-user, did not stop with the involvement of multidisciplinary teams.It has been extended by making sure that end-users could also be involved in the development process.This approach is known as a user-centred design process (UCD) that typically focuses on endusers from the beginning of a project and often does this in several iterations in which the software is gradually extended and improved [8].On the one hand the involvement of multidisciplinary teams in UCD is beneficial to provide a final user interface that corresponds to the end-user needs.On the other hand, one of the main difficulties in multidisciplinary teams is the communication between people with different backgrounds, in particular during the first stages of UCD [7].Team members with a non-technical background have to hand over the results of the first user studies to team members with a technical background.Different backgrounds and needs of team members can impede the communication of user requirements, which can cause a loss of important information at the beginning of a project.In this paper we explore graphical narratives as a common language and show the richness they provide for creating interactive software systems.Carroll [2] already showed that narrative scenarios are well suited for describing the behavior and requirements of envisioned software applications.But despite their comprehensibility, scenarios are difficult to translate into more technical specifications or models [3,9] and are often subject to different interpretations due to its natural language and the ambiguities.A visual language allows people, regardless of their backgrounds, to see, imagine, present and share ideas with others [23].Storyboards [25,24] are examples of scenarios expressed in a graphical language using rich and iconic pictures, which can increase the ability to recognise and understand their meaning.Moody [18] describes this as one of the principles that can reduce cognitive load.There is a wide diversity of styles and usage of graphical representations in storyboarding, but the framework of graphical languages, as used in comics, can identify universal graphical depictions that are very suitable for storyboards, which can be used in UCD processes.The principles of the invisible art of comics, described by Scott McCloud [15], were used by Truong et al. as an established framework for visual storytelling [24].These principles, in combination with the techniques to make comics [16], provide basics for story-boarding.The approach of comics has also been used to visually describe the features of the Google Chrome browser when it was launched [5], which according to McCloud's site [14] was called ". . .one of the friendliest technical descriptions the software industry has yet produced" (Forbes / Newsweek).
We present COllaborative MultIdisciplinary user-Centered Software engineering (COMuICSer), a storyboarding approach and accompanying tool for multidisciplinary teams in UCD projects.Storyboarding is gaining importance to get a greater involvement of all team members and end-users in engineering processes.COMuICSer storyboards contain a sequence of pictures of real life situations, depicting users carrying out several activities by using devices in a certain context.COMuICSer formalises the way that storyboards are created, while preserving creative aspects of storyboarding.This simplifies the relation of storyboards with other activities in a UCD process and typical software engineering activities [6].The COMuICSer tool supports the communication in multidisciplinary teams by providing features to digitise a storyboard and to make connections between the storyboard and other artefacts in a UCD process.By using the tool, contextual information of a storyboard can be extracted during all stages of UCD.In summary, the contributions presented in this paper are twofold: • We provide an elaborate overview of techniques that are common in comics and can facilitate storyboarding.Comic drawing techniques will provide us with a frame to discuss scene creation in storyboarding.
• We propose the COMuICSer approach, including tool support, based on comics techniques in storyboarding for UCD.Furthermore, we describe the results of a preliminary user study that was conducted to evaluate the COMuICSer tool.

RELATED WORK
Storyboards in UCD can have different shapes.On the one hand, storyboards visually express scenarios of use.On the other hand, storyboards represent a flow of UI designs, providing interactivity in the early stages of UCD.There are multiple ways to visually present a usage scenario.Van der Lelie [25] explains that a sketchy storyboard describing the use of a product provokes discussion, while a detailed storyboard is rather suited for an evaluation phase in design.
Buxton [1] also mentions different styles in visual storytelling.He describes sketches as well as hybrid photographic compositions.Combining photos and sketches, might help people with limited drawing skills to explain their ideas [1] and might allow people to quickly create storyboards [11].
A study of Truong et al. [24] showed the differences in storyboarding by novice designers and experienced designers.While novices fear the lack of drawing skills and avoid creating hand drawn storyboards by using tools, expert designers draw very detailed storyboards by hand or using advanced tools.Furthermore, novices added a lot of detail to a storyboard, while experts showed only the necessary contextual information.
Truong et al. [24] address the need for a tool that offers all the functionality needed to create storyboards.Existing storyboarding tools such as Comic Life1 , Celtx 2 and Kar2ouche 3 support the creation of storyboards, but do not take into account the characteristics of UCD processes.CogTool [10], Damask [13] and Denim [19] are tools that support the early creation of UI designs that can be supplemented by storyboards.These storyboards contain interaction sequences and support UCD. Nevertheless storyboarding in these tools is limited to UI designs that exclude visual scenarios of use.Dow et al [3] present a storyboarding tool for ubiquitous computing.This tool presents multiple storyboards, including different views containing event overviews and physical simulations of a space.ActivityDesigner [12] supports an activity-based prototyping process.One of the first steps supported by the tool, is the creation of a scene panel, based on everyday observations, accompanied by roles of users and activity models.These first models can contribute to the first prototypes, that similarly to Denim and Cogtool can include interaction sequences.Furthermore, the tool supports the evaluation of the prototypes created.
In the first place, COMuICSer concentrates on storyboards that visually depict scenarios of use and make it possible for all team members of a multidisciplinary team to understand and express themselves.Since existing tool support for this type of storyboards, does not support later stages in UCD, we propose a tool that supports the creation and use of COMuICSer storyboards and passes contextual information to other artefacts in UCD processes (e.g.UI designs and their interaction sequences).The tool does not limit the creativity of team members.
The scenes of the storyboard can be created using pencil and paper, or can be composed from graphical representations in the COMuICSer tool itself.Often, teams will prefer to stick with pencil and paper, but at the same time find it very valuable to transform this in a digital artefact that fits well in a UCD process.

THE LANGUAGE OF COMICS IN STORYBOARDING
Based on a survey that involved practitioners of companies active in UCD, it became clear that there is no sufficient support to translate artefacts created by non-technical team members into a notation appropriate for software engineers or developers [7].COMuICSer aims to bridge the gap that was uncovered by this survey.To support communication between multiple disciplines, represented in the team, a language that supports common understanding was a necessity.We already discussed the use of storyboards for this purpose, and used the work on the principles and techniques in comics of Scott McCloud as a source of inspiration [15,16].In this section we describe a set of principles and techniques from comics that facilitate the graphical language of storyboarding.

Visualizing and communicating scenarios
McCloud describes principles and techniques of comics and defines comics as: "Juxtaposed pictorial and other images in deliberate sequence, intended to convey information and/or to produce an aesthetic response in the viewer."He describes the vocabulary of comics as a combination of words, pictures and other icons.When comparing pictures with writing, pictures are received, while writing is perceived.People can almost immediately understand a message depicted by a picture, while a written message needs to be decoded before it is understood.In comics, usually abstracted pictures are combined with more direct words to obtain the specific language of comics.This confirms that a similar vocabulary in storyboards can be a suitable complement to a narrative scenario.Team members can understand at a glance what is depicted by a storyboard.Especially in brainstorm meetings or discussions with the team, the visual representation of storyboards can increase efficiency.Similar to comics, storyboards are intended to convey information to team members.COMuICSer considers scenes that contain a comparable vocabulary, which is easy to understand for all team members.Each scene can be complemented with a title and a description, or giving more information of what is depicted in the scene.Usually, this description can be considered as word-specific, picture-specific or duo-specific combinations of words and pictures, that are known in comics.
One of the difficulties in all communication media, and thus also comics, is the inability to communicate directly from one mind to another.It is almost impossible to pass a message on paper without affecting it.This is also a problem which occurs in HCI and is known as the gap between the designer's model and the user's model [21].In UCD, storyboards are used to obtain a uniform idea among all stakeholders, so discussing storyboards in UCD can be a remedy to the problem mentioned above.COMuICSer treats storyboards as a central document in UCD and aims to enhance requirements elicitation within a multidisciplinary team.

Applying techniques of comics
Comics are built upon some techniques that facilitate storyboarding.For each technique of comics mentioned below [15,16], we discuss how it can contribute to COMuICSer storyboards.Some techniques can only be used to draw the scenes of a storyboard, while for other techniques, the COMuICSer tool can be employed to ease its use.

Facial expressions
In comics, facial expressions are important to show the emotions of characters in a story, and consequently provoke emotion in the reader.There is a plethora of possible facial expressions.But for novices, six basic types of expressions should be sufficient.These basic expressions depict whether a character is happy, in pain, shocked, angry, stern or distressed.Word balloons can be used to add gradations to these expressions.In storyboarding, facial expressions have a lower priority than in comics.In COMuICSer, emotions of users are expressed in a textual description that accompanies the scenes of a storyboard.Nevertheless, the aim of facial expressions -provoking emotion in the reader -can also be beneficial for multidisciplinary teams.If a team member can empathise with the characters, she will better understand the situation of end-users and will take this into account for the resulting UI design.Figure 1 shows how a facial expression can show the emotions of the end-user in a storyboard.

Body language
Similar to facial expressions, body language can be used to express the temperament and mood of a character.Simple brush strokes can even express differences in body language.Besides the body language of a single character, distance and relationships between several characters can be shown through body language.
Body language has, just like facial expressions, not a high priority in COMuICSer storyboarding.But when including body language in scenes of a storyboard, the personality of a persona is amplified.Furthermore, body language will also help team members to empathise with characters.Figure 2 depicts the same frustrated user of Figure 1.By expressing his body language, emotions are amplified and a team member will more quickly understand that this user is frustrated.
Figure 2: Scene -the same frustrated user as in Figure 1, where the body language amplifies his emotions.

Iconic characters on a realistic background
Comics artists often draw iconic characters because authors want their readers to identify with the actors of a story.Several comics styles combine iconic characters with very detailed and realistic backgrounds.This stimulates the readers to identify with the character and to imagine that they enter the world that is presented on the background.These ideas fit storyboarding: UCD practitioners also want their team members to identify with the end-users and to imagine the situation depicted by the storyboard.Very often, characters in storyboards for UCD are sketchy and iconic.Our COMuICSer tool supports the use of digitised sketches as well as the combination of iconic characters and photographs, containing a lot of contextual information.Using photographs can also be helpful for team members with little drawing skills, who can for instance use photographs of user observations, complemented with iconic pictures of actors [1,3].This approach allows the representation of a realistic environment for the end-users that are considered during the entire UCD process.Figure 3 shows an example of this.
Figure 3: Scene -a photograph in combination with an iconic, sketched user preserves the possibility to identify with the user, but shows a lot of contextual information.

Differentiating characters
Inner life, visual distinction and expressive traits are defined as the three components of successful character design for comics.These components allow characters to be different from other characters in a story.By consistently applying these components, the reader will easily recognise actors in a comic.Before creating a character, an inner life or personality for this character needs to be determined.This also helps readers to identify with a character.Providing visual distinctive characters allows readers to recognise actors of a story.This effect can be amplified by creating characters with contrasting looks.Finally, a character can be distinguished, based on expressive traits, which can be shown through facial expressions and body language.COMuICSer storyboards allow personas [22] to be part of the scenes in the storyboard.First of all, personas describe the personality of a hypothetical archetype, so the inner life of personas can also be part of storyboards.Furthermore, these personas can have a distinctive appearance in scenes of a storyboard.Figure 4 shows an example scene, containing visual distinctive characters.However, in sketchy storyboards this is hard to express.Therefore, annotations in COMuICSer storyboards can highlight objects and personas (Figure 6 in the COMuICSer tool, it is easy for team members to identify particular personas.Annotations for objects, can for instance be used to connect device specifications to the device depicted in a scene.

Transitions
Observing parts of a picture, but perceiving the whole, is described as "closure".This means that particular parts of a whole do not need to be visible.The parts that are shown, allow the reader to imagine that the whole is present.One form of closure concerns the space between the panels of a comic, which is called "the gutter".Although this space is empty, we unconsciously add a transition between each two panels.The empty spaces can be considered as the heart of comics and define several possibilities for panel-topanel transitions.Buxton [1] drew an analogy to this and declared that transitions are also the most fundamental component in an interface.
Since closure creates an illusion of time, time can be perceived spatially in comics.By changing the panel shape, it is possible to give the impression that much or little time passes during a panel.Although the spaces between panels also provide some time information, there is no rule that defines how much time passes between two scenes.The principle of closure can be used in storyboarding to limit the number of scenes that need to be created.When transitions between scenes are located on the right place in a storyboard, they can be used for the creation of models and UI designs.
Figure 5 shows the user in only two situations, but the human brain automatically converts this to a continuous sequence of several situations.However, labelling the transitions or labelling scenes with timing information in COMuICSer storyboards, can enhance the meaning of subsequent scenes and the information they contain.Similar to comics, storyboards show sequential scenes, but the COMuICSer tool also supports parallel scenes.This information about transtions is useful for the translation from a storyboard to structured interaction models or UI designs.

DIGITISING STORYBOARDS
Tool support for COMuICSer storyboards facilitates the connection between the storyboard and artefacts created at later stages of UCD.This section discusses the most important GUI elements and interactions that were implemented in the COMuICSer tool.A screen-shot of the COMuICSer tool, is shown in Figure 6.We will discuss the features of the tool in this section, based on the order in which they are used when creating a COMuICSer storyboard.

Composing the storyboard
First, a narrative scenario can be loaded or written in the tool (Figure 6, A).Then a sentence or a paragraph of the scenario can be selected, and a new storyboard scene can be created for this text fragment.The new scene will be added to the storyboard in the center of the window (Figure 6, B).For each scene, a title can be entered.Furthermore, a scanned image of the sketched scene, or a photograph can be picked for the scene.When the user of COMuICSer decides to use photographs, she can choose to load photographs of the user observations, otherwise photographs of Flickr4 can be loaded (Figure 6, C -step 1).For the latter option, the Flickr search button automatically suggests the nouns that are part of the narrative scenario, these nouns are extracted from the scenario by using the WordNet.Net library [26].The first thirty search results of Flickr are extracted to the scene gallery by the Flickr.Net API library [4].When using photographs, pictures of faces or people from a personal folder can be dragged and dropped from the object gallery on top of the photograph (Figure 6, C -step 2).In this way, people on the original photograph are anonymised, and the person on the scene can have an iconic style, which is recommended to increase the empathy of team members with the end-users.The aforementioned actions can be repeated until the entire storyboard is assembled by using the tool.Dragging and dropping scenes on a grid, allows parallel sequences within a storyboard.

Storyboards for later use
Once the storyboard is complete, information for later UCD stages such as the creation of models and UI designs can be added.By labelling transitions between scenes and adding timing information, the storyboard can be linked to a preliminary task model.Tasks are contained by the scene and the description, while transitions or timing information can be used to structure the task model.In COMuICSer, scenes can be annotated with device information and persona descriptions.These annotations are made in a similar way as the photo tagging feature on Facebook5 or Flickr.
In each scene, personas or devices are annotated by drawing a rectangle around it (Figure 6, D).
Next, each rectangle has to be linked to a persona description, device specifications or some free annotation text (Figure 6, E).
We use COMuICSer storyboards as input to create other designs and software engineering artefacts.
Persona information and scene transitions (Figure 6 E) can lead to cooperative task models.The final UI design can be optimised better for the target device or target user group by taking the storyboard´s device and persona information into account.When creating new artefacts, COMuICSer maintains the connections between every artefact and the part of the storyboards it refers to.These connections turn storyboards into hierarchical artefacts, that represent applications at several levels of detail: overview of the application (storyboard), task level (task model), concrete design, etc.This supports top down understanding, which has been shown to improve understanding of software engineering diagrams [20].
Since storyboards are in the first place a communication tool, the COMuICSer tool allows team members to export a storyboard to a Microsoft PowerPoint slideshow.The PowerPoint slideset, that is automatically generated, contains an overview of the personas involved in the storyboard, followed by the storyboard scenes.Hyperlinks between the scenes allow team members to navigate quickly between slides about the scenes and slides about the personas.This provokes and enhances the discussion of a storyboard during meetings with the project team.

USER STUDY
7 students of our Master Computer Science-HCI, whose ages ranged from 22 to 25, were involved in our user study to evaluate the COMuICSer tool.
Additionally we analysed which comics techniques were part of storyboards created by the subjects.
In the context of a course, the subjects had to use a range of UCD techniques in order to complete an assignment.The final result of the assignment

In the tool, it is possible to load a scenario (A), create scenes in the storyboard panel (B). These scenes can contain sketches or a combination of photographs and iconic characters (C). The tool also supports labels for transitions and timing information (D), and annotations of scenes (E).
Draw Me a Storyboard: Incorporating Principles & Techniques of Comics... Mieke Haesen, Jan Meskens, Kris Luyten, Karin Coninx was an evaluated, interactive high-fidelity prototype for a multi-device setting.The target devices of the assignment included a large multitouch display and a smartphone.During the process, several artefacts needed to be delivered.For this experiment, we will focus on the early stages of the UCD process, that were part of the assignment.We taught the students what personas, scenarios and storyboards contain and what they are used for.Furthermore, we briefly referred to comics as a foundation for story-boarding.

Part 1: Free storyboard creation
The subjects were split up in three teams for the assignment.Each team got a different assignment.
In the first stage, the teams had to fine-tune the characteristics of the assignment in cooperation with one or two stakeholders.3 out of the 4 stakeholders involved, had a non-technical background.We observed the teams during these meetings with the stakeholders and analysed their artefacts.During this assignment, the subjects were free to use any medium or tool for the creation of the personas, scenario and storyboard.Because we did not want to influence the choice of a medium for storyboarding, we did not introduce COMuICSer before this first part of the assignment.First, each team organised a meeting to fine-tune the concept together with the stakeholders.In the second meeting, the teams presented their concept of the future system to the stakeholders, using personas, scenario and storyboard.
During the meetings, we observed that the feedback of the stakeholders about personas was rather limited.Only one or two characteristics concerning the personas' job or personal situation, were discussed.Once the scenario was presented, an example of the future application was presented, and the stakeholders gave feedback about how realistic the situation was, compared to the current situation.It is notable that solely the storyboards stimulated the stakeholders to discuss technical feasibility, user interaction, the number of users involved and the need for devices in the future application.During the meetings, stakeholders asked questions such as: "How can a user enter his name on a multitouch table ?And what about privacy?", "Is it technically feasible to transfer data from a multitouch table to your smartphone?".
This shows that a storyboard stimulates discussion and is very useful to obtain a mutual understanding between all stakeholders as we already mentioned in section 3.1.The storyboards created by the subjects were based on their narrative scenarios and were drawn using pencil and paper.Next, all the artefacts were presented to the stakeholders on paper.The teams explained that they preferred pencil and paper for the storyboard because it provides freedom to draw quickly what they want to express.Although all storyboards contained characteristics of comics, we could differentiate three styles of storyboards.One storyboard (storyboard A) contained stick figures and sketchy objects, while another storyboard (storyboard C) included elaborate characters and objects.The style of the third storyboard (storyboard B) could be situated between the aforementioned styles.Figure 7 shows the structure of storyboards A, B and C and one scene of each storyboard.The number of scenes in the three storyboards ranged from 6 to 12.Each storyboard included some kind of preliminary UI design, related to a scene.For a further comparison of the storyboards, we analysed the use of the techniques mentioned in section 3.2.Facial expressions and body language are not shown in storyboard A, but both storyboards B and C contain basic facial expressions in combination with word balloons and limited expressions of body language.Storyboard A shows only the setting that is important for the future system, while storyboards B and C also consider the experience of users in that setting.
Since the three storyboards are sketched on paper, iconic characters are part of storyboards A, B and C. The realistic backgrounds are not fully applied to the storyboards, but storyboards B and C depict the context that is important to empathise with the endusers.All storyboards include a visual distinction of characters.Storyboard A differentiates between characters by adding labels to the scene with the persona name, while storyboards B and C also differentiate in the appearance of characters.The small differences between storyboard A and the other two storyboards result in a different empathy while reading the storyboard.In the meeting where storyboard A was discussed, the future system was discussed from the viewpoint of "a user", while the other storyboards were discussed from the personas' points of view.The transitions in the three storyboards are presented by arrows between scenes or panels for each scene.
It is notable that all storyboards contain at least two transtitions to present a concurrent and more detailed sketch of the user interface.Storyboard C distinguishes the transitions as follows: adjacent panels present concurrent scenes or a zoom on the UI, while a large "gutter" between panels presents a certain time interval between scenes.Furthermore we observed in two storyboards that panels are labeled with timing information concerning the start or duration of a scene.

Part 2: COMuICSer storyboarding
The scenarios, personas and storyboards that were created by the three teams, were used for the Each subject had half an hour to create a storyboard in the tool, based on the results they initially obtained during the assignment.Afterwards, the subjects were asked to assess the tool, based on their experiences with storyboarding in the assignment described above.
During the test, some usability issues were discovered, concerning interaction techniques to add scenes and annotations.Overall, the subjects managed to create the storyboards and all subjects agreed that the tool can be used for a UCD project such as their assignment.Furthermore, they all confirmed that connecting the scenario, personas and storyboard in the tool is useful.Four subjects declared that the tool provides a clear overview of the scenario and the personas with relation to the scenes in the storyboard, while two other subjects commented that by connecting the personas and scenario to the storyboard in the tool, the storyboard can be easily verified.
Several subjects liked the feature in the tool to add a combination of photographs and iconic characters, but they did not prefer this approach over the combination of sketched scenes that were loaded in the tool.The subjects commented:"Quickly sketching a scene has more freedom, furthermore it can be hard to find a suitable photograph.","The tool is very useful to create a digital version of the storyboard, but finding a suitable photograph of Flickr can be time consuming.".Probably this is due to the fact that their storyboard scenes were already available from part one of this user study.
Most subjects confirmed that the tool is useful to simplify the use of storyboards in UCD.Based on their experience with storyboarding in the first part of this user study and testing the tool in this part of the user study, they commented that the tool can be helpful to annotate storyboards and to visualise the connection between the storyboard and the scenario and personas.Furthermore, they explained that the connections shown by the storyboard created in COMuICSer can clarify a storyboard, and that the COMuICSer storyboard can be an interesting tool during meetings with stakeholders, especially when the feature to generate a slideshow is used.One subject commented: "It is easy to connect personas and scenario to the storyboard in the tool.Thanks to the graphical representations, all team members will understand these connections.".

Discussion
The first part of the user study shows us that the techniques from comics presented in section 3.2 can facilitate the creation of storyboards.Since the subjects intuitively and unconsciously applied several techniques, it is obvious that it is not difficult to apply them.Nevertheless, the sketchy scenes of a storyboard are not always containing as much detail as comics.Because quickly sketched storyboards are common in UCD, tool support for storyboarding can be useful to complete storyboards in UCD.
Certainly the differentiation of characters, the creation of scenes that combine iconic characters with realistic backgrounds and labelling transitions and timing information, are techniques that can be added to the storyboard by using a COMuICSer tool.As shown by the differences between storyboard A and the other storyboards we analysed above, the sketchier a storyboard, the more our COMuICSer tool could contribute to the storyboard.This user study was an interesting experiment to analyse storyboards created by people having a The second part of the user test, which concerned a first-use evaluation of the tool gave us some insights about the usability of the tool and the usefulness of its features.This evaluation was conducted to see how the subjects would digitise their initial storyboard in the tool, and enrich their storyboard by using COMuICSer.Nevertheless, this first-use evaluation only limits the use of the tool to one stage in UCD.Furthermore, the background of the end-users was not as diverse as in typical multidisciplinary teams.
COMuICSer needs to be used in larger projects that involve multidisciplinary teams in several stages of UCD for further evaluation and validation of our approach and tool.Additionally, it would be interesting to examine how the drawing skills of team members may influence their use and acceptance of the tool.

CONCLUSION
We presented COMuICSer as an approach that provides guidelines as some kind of formalisation of storyboards.In combination with the COMuICSer tool, this approach can contribute to a better integration of storyboards with other artefacts common with the various stages in a typical UCD process (e.g.structured modelling and UI design).Since storyboarding has the potential to play an important role in UCD processes, we sought for a better understanding of the universal graphical language that is used to construct scenes in a storyboard.
In comics we found an established framework of principles and techniques that are generally accepted by most people and thus are perfect for usage in storyboard construction.Part of the techniques can only be used to express a message in drawings, but some techniques can be supported by our tool to speed up the creation of storyboards.In contrast to comics, storyboards are created quickly to explain a particular scenario.Nevertheless, the accessible graphical notation can be easily understood by all members of a multidisciplinary team, including endusers, and has proven to be suitable to obtain a common understanding.

ONGOING AND FUTURE WORK
Annotating storyboards and labelling transitions between scenes, supports the translation from narrative specifications to more technical models and UI designs.In ongoing research, we are investigating tool support that allows team members to load a complete COMuICSer storyboard in a multi-device GUI design tool such as Jelly [17].This makes it possible to take into account the device specifications and some user profiles during the UI design.Furthermore, this device information can contribute to interaction sequences of UI designs.
The first part of our user study confirmed the relevance of using comics techniques in storyboarding, while the second part of the study revealed interesting results including recommendations to improve our tool.Our COMuICSer approach and tool are currently used in several UCD projects that involve researchers with different backgrounds as well as industrial practicioners.We are observing these ongoing projects to determine how COMuICSer will be used in these more concrete cases.We will assess whether storyboards will be used as a central document for multidisciplinary teams during the different stages in these UCD projects.

DrawFigure 1 :
Figure 1: Scene -a user that is frustrated by the application on his PDA.The facial expression on his face shows his emotions.

Figure 4 :
Figure 4: Scene -differentiating characters by giving them contrasting looks.

Figure 5 :
Figure 5: Two scenes: Although there are only two panels, human brains automatically fill the transition between the panels.

Figure 6 :
Figure 6: Screenshot of the tool for COMuICSer.In the tool, it is possible to load a scenario (A), create scenes in the storyboard panel (B).These scenes can contain sketches or a combination of photographs and iconic characters (C).The tool also supports labels for transitions and timing information (D), and annotations of scenes (E).

Draw
Me a Storyboard: Incorporating Principles & Techniques of Comics... Mieke Haesen, Jan Meskens, Kris Luyten, Karin Coninx second part of our user study.This part consisted of an informal first-use evaluation of the COMuICSer tool by all 7 students and allowed us to see how the subjects would use the tool to digitise a storyboard.

Figure 7 :
Figure 7: The three storyboards that were analysed in our user study.To increase readability, we translated some words on the scenes.