Interactive Graphic Novel Experience

Interactive Graphic Novel Experience
A Thesis
Submitted to the Faculty
of
Drexel University
by
Sonia F. Havens
in partial fulfillment of the
requirements for the degree
of
Master of Science in Digital Media
May 2013
c Copyright 2013
Sonia F. Havens. All Rights Reserved.
ii
Acknowledgements
I would like to thank my Committee Advisor Dr. Michael Wagner along with my
Committee Members Jervis Thompson and Matthew Kaufhold. Special thanks goes to
Bobby Speck, the coding framework could not have been completed without you. I would
also like to thank Bruce Pollock for aiding in visual direction. A big thank you to Yujie
Zhu and Mike Cossentino.
iii
Table of Contents
Abstract
v
1 Terms
1
2 Introduction
2
3 Project Description
6
3.1
Remediation of Traditional Media . . . . . . . . . . . . . . . . . . . . . .
4 Literature Review
7
11
4.1
”Hobo Lobo of Hamelin” . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.2
”The Iron Feather:Infinite Canvas Comic” . . . . . . . . . . . . . . . . . . 14
4.3
”NAWLS” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.4
Genre Categorization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
5 Methodology
20
5.1
Analysis Spreadsheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
5.2
Dual Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.3
Highlight Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.4
Mouse States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.5
Parallax Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6 Design Process
6.1
29
Story Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
iv
6.2
I.G.N. Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6.3
I.G.N. Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
7 Future Considerations
37
7.1
Story Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.2
Visual Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
7.3
Framework Flexibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
8 Conclusion
42
8.1
Story Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
8.2
Sub-Story Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
8.3
Navigation Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
8.4
Visual Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Bibliography
55
v
Abstract
Interactive Graphic Novel Experience
Sonia F. Havens
Michael Wagner, Ph. D.
Comics and Graphic Novels have been around for decades and within the last several
years have been created to be displayed through the web as daily strips or larger works.
Most of these works have held fast to the traditional format of Comics and Graphic Novels,
but several have explored navigation and formatting that could be considered experimental
in the world of Comics. The Interactive Graphic Novel will experiment with non-linear
storytelling and navigation through the use of user directed panel selection. This Interactive
Graphic Novel Experience will enable users to interact with the story by selecting an item
within a panel to learn more about the characters while continuing through the larger overarching plot-line. Users will interact with the graphic novel through a web based interface
using Unity, they can read through comic book-like panels, scenes contained within set
boundaries, and select a highlighted item to explore further character content and backstory. The interface will allow users to toggle between 3 main character perspectives in
order to see the story as each character experiences it. The use of parallax and movement
within and between each panel will help to emphasize the selectable items and direct the
users through the story and sub-story. The user will be able to interact with the graphic
novel through animated navigation in a three dimensional space which will further explore
the capabilities of digital graphic novels as compared to the print form of graphic novel.
1
1. Terms
Comics : A series of visually depicted actions, along with text, that take place over time
and are depicted through a number of sequential panels [2].
Digital graphic novel: A visual story telling device that has similar style characteristics
as the comic book, but depicts a longer story, as opposed to a work containing several
episodes/releases.
Interactive storytelling: The user has the ability to choose and customize their own
experience through selecting features throughout the novel.
Experimental navigation: Navigation Techniques that are intended for one type of
medium but used with a different type of medium. For example navigation originally intended for still photographs being used to navigate through panels which contain selectable
items.
Parallax: The effect whereby the position or direction of an object appears to differ
when viewed from different positions.
2
2. Introduction
Comics are a popular form of storytelling exemplified by visual picture frames and
text. Predecessors to the comic book, cartoon panels, have been around since 1732 [18].
These cartoons were used as political satire in order to get people involved in different
political movements [18].Later, during the end of the 19th century Frank A. Munsey developed the ”Pulp Magazines”, a literary magazine created from rough wood-pulp paper
[13]. Originally created to compete with the popular ”Dime Magazine”, the pulp magazines targeted juveniles and adults with intriguing fictional stories that included occasional
imagery [13].An example can been seen in Figure 1. Sabotage Sulfur Planet [11]. This imagery included the brightly colored and action packed cover pages that helped to promote
the magazines [13]. Pulp magazines were created and intended to sell cheaper and become
more widely available to the public because of the second-class postal rates [13]. What we
recognize as comic books today, were a branching-off from the pulp magazines initiated by
Dell Publishing in 1922 [13].”Ballyhoo” was a published four-color comic book that would
exhibit well drawn illustrations [13]. See Figure 2 and Figure 3 [8].
3
Figure 1. Sabotage Sulfure Planet by Jack Vance
Figure 2. Ballyhoo Cover October 1931
4
Figure 3. Ballyhoo Illustrated Page
There is little agreement among critics and literary professionals on standard definitions
for comic books and/or graphic novels. Comics can be defined as a series of visually depicted actions, along with text, that take place over time and are depicted through a number
of sequential panels [16]. Charles Hatfield explains, comic books were . . . obviously misnamed: not a book but a periodical, a cheap magazine printed on raunchy paper, descended
from the foundering pulp magazines of the day and a cousin of the ephemeral strips found
in newspapers [3]. Hatfield maintains the term graphic novel is not very helpful, Indeed
a graphic novel can be almost anything . . . Perhaps this very plasticity helps explain
the currency of the term. What might have seemed at first to denote a distinct genre has
instead become an all-purpose tag for a vague class of social object (one that, unlike the
comic book, need not be grounded in the exact specifications of a given physical format)
[3]. While Hatfield presents a valid point about the non-specificity of the term, Hatfield
does not mention freedom of format above. Hatfield offers us a nebulous term for graphic
5
novel and describes the evolution of the graphical novel stemming from the comic book.
The differences between the definitions become obscured by how the terms are used simultaneously. Hatfield defines comics as episodic and repetitive only to include those phrases
in his definition of graphic novel [3]. I will be defining the graphic novel as a visual storytelling device that has similar style characteristics as the comic book, but is intended to
depict a longer story, as opposed to a work containing several episodes/releases. Some of
the most important considerations in designing a graphic novel include; the design layout,
what story is being told, how that story is communicated, and what stylistic choices will be
used to reflect familiar comic book genres. In my project, The Interactive Graphic Novel
Experience I will create and question the boundaries and styles of what are thought to be
the classic graphical novel visual style, including the content of a graphic novel, paired
with an experimental web-comic user interaction. The biggest obstacles for the Interactive Graphic Novel Experience will be formatting and navigation, in order to keep the user
experience visually clean and uncluttered. The format of the panels and the elements can
enhance or decrease the enjoyment gained from the story if the interface becomes too much
of a distraction. If the navigation becomes too confusing the audience is taken out of the
story and the experience is no longer immersive.
6
3. Project Description
With the advancement of technologies we can take works that were once previously
limited to one type of media and explore and add onto these works in order to create a
completely new experience for users/readers, or what Henry Jenkins refers to as transmedia in his book Convergence Culture [10]. For my thesis project I will create a section of a
graphic novel through a web-based user interface that utilizes the Unity Game Engine and
JavaScript in order to create an Interactive Graphic Novel experience that includes text,
visuals, and the choice between different character perspectives. The Interactive Graphic
Novel will use traditional web-based navigational techniques to enable the user an experimental way to explore 2D panels as well as a linear narrative in virtual 3D space.
The features that support user interactivity will include the ability to toggle among the
visual perspectives of 3 different characters within the story. Panels will include items
that can be clicked in order to guide the user to additional back-story that pertains to the
character that is currently selected by the user. For example, if the Wolf character is selected
the user may find the Wolf’s back-story by finding and selecting his pups among the panels.
Whether using traditional or experimental methods for displaying digital content in long
form stories the flow and interaction of the content should feel natural and uninhibited.
The technology should enhance stories without becoming a distraction. Scott McCloud
explains, The key for encouraging immersion in such long-form stories is to ensure that
the readers eye never leaves the page by stripping away everything but the comic itself and
making navigation as simple and intuitive as possible [16]. In having the 2D panels in the
7
3D space the user will very simply see one set of character panels in front of the rest, in
order to avoid visual clutter and to prevent confusion. Once the user has chosen an alternate
perspective the camera will then move through space and relocate to the next character’s
panels, replacing the previous panels within the frame. The additional back-story will be
available to the user only when selected and navigated to, and will not be seen obstructing
any of the main panels. This framework setup will allow the user a simple way to navigate
through all the perspectives and back-story without ever having to leave the page.
The user will be able to easily access the graphic novel from any desktop or notebook
web-browser, and will be prompted automatically to install the Unity Player. The Unity
Web Player is a quick install of less than a minute, depending on the speed of the user’s
internet. The Unity Game Engine in combination with JavaScript allows for a wide variety
of techniques for navigation. In addition it will enable loading the type of high resolution
images that will be used in each panel.
3.1
Remediation of Traditional Media
The main objective of this thesis is to produce a delivery system for expanding the
methods and production techniques of comic books/graphic novels in order to move the
graphic novel form from a print medium to a web-browser or another digital media delivery
system. The dynamic translation will maintain the high quality and entertainment value
associated with the printed graphic novel [2]. In order to achieve what the print media
cannot, the Interactive Graphic Novel or I.G.N., will use the navigation in order to allow
the reader more freedom of choice throughout the experience or the reader can choose the
more traditional method of following the main character of Little Red Riding Hood. The
8
3D environment will enhance and ease the movement of the 2D panels in order to simplify
the task of swapping between the characters and their perspectives. By using techniques
that can only be done with digital content, storytelling can be customized and users can
navigate through the story in multiple ways and can then choose which method they would
prefer. In the Interactive Graphic novel the same type of dynamic point of view angles that
are traditionally used in the print comics or graphic novels will be simulated. The graphic
novel will pay homage to the traditional arrangement of panels found in print medium
but will add animation through navigation. By using the same camera angels and panel
arrangements as traditional comics and graphic novels the Interactive Graphic Novel takes
a subject or form of entertainment and moves it into another medium creating a hybrid that
keeps the visual formatting of the traditional medium, while adding functionality through
web-interaction.
Several limitations associated with the printed graphic novel include: linear storytelling
and stymied interaction. For example in the comic ”Batman: The Killing Joke” the reader
can read the story consecutively from left to right [1]. ”Batman: The Killing Joke” graphic
novel uses two main character perspectives in order to drive the story forward. The reader
can also choose to randomly select panels and break the systematic flow of information
and storyline, changing the story. By following the story consecutively the story will continually be the same, while if the panels are randomly selected the story then becomes
incoherent. The story is predetermined and each panel planned out through either the Joker
or Batmans perspective and while one character might be shown in a sequence the reader
is left in the dark about what the other character might be doing simultaneously. Once the
story is read the reader can only then reread the comic again or sell it. A goal for the In-
9
teractive Graphic Novel is to use experimental navigation, a form of navigation previously
used for image galleries, and expand it to create an experience for the user that is interactive and allows for story-telling customization through selection. This type of navigation
acts like a carousel of images or in this case set of character panels. The interaction of
the I.G.N. allows the user to choose a character perspective and panel, but also continually
moves the story forward in order to prevent incoherence within the story time-line.These
character sets can be brought in and out of focus based on what character profile the user
has selected, placing the remaining character sets hidden while not in use. Functioning
similar to the character sets the back-story will come into focus while the rest of the panels
will be hidden. The story-telling format is altered by the choices that the user is given.
The user may choose a more linear form of the narrative by simply advancing through each
panel sequentially for one character. The user may also choose a more non-linear path by
selecting the additional items found throughout the graphic novel or by alternating between
the characters as the story progresses. The success of the Interactive Graphic Novel will
be determined by the story flow, cohesion between each character, and how the navigation
aids the perspective changes. If the user can switch through character perspectives,while
maintaining a coherent story and all main story plot-points have been included visually into
the work, than the Interactive Graphic Novel has been successful.
This project will explore interactive storytelling in a digital space. It will enable a
user to select a visual point of view from 1 of the 3 characters at any point in the story.
During the project only a small portion of the entire story will be navigable by the user.
Elements/selectable buttons found within the panels will guide the user to additional background information about the story and about each character specifically. While the entire
10
scope of the story will not be created and contained within the Interactive Graphic Novel
these additional objects could help to form the basis for future work on a larger storyline.
A small interactive graphic novel segment consisting of a short fairytale or roughly 10
panels per each of the 3 character perspectives has been produced as the project deliverable.
Once again the main focus for the Interactive Graphic Novel is less about the story or story
content as it is about the form of navigation and how the user can traverse through the story
panel to panel, character to character and selectable item to selectable item.
11
4. Literature Review
Digital media technology changes and evolves rapidly as does the methods by which
individuals consume and interact with media. Physical tools used by artist have been moved
into the digital domain. Artists working with these new digital tools are creating works that
were impossible to conceive of or produce in a physical world. Yet, history teaches us that
old media never die and they don’t even necessarily fade away. What dies are simply the
tools we use to access media content, explains Henry Jenkins [10]. In creating a graphic
novel that is web-based I take a visual form of storytelling, long associated with print and
translate it for the digital realm. If the digital revolution paradigm presumed that new
media would displace old media, the emerging convergence paradigm assumes that old and
new media will interact in ever more complex ways [10]. Jenkins statement brings to light
the idea that works do not have to be isolated due to the medium they have been created
for, but can instead be used to enhance a related piece that has been created for a different
medium. For example, Avatar Mini Comic 2 Voice Over, is a fan-art piece that used selected
characters from a pre-existing animation series, ”Avatar: The Last Airbender”, and further
extended the storyline by adding original text and voice over into a short video [9]. Similar
to the Avatar comic spin off the reader of the Interactive Graphic Novel Experience will be
able to customize their own story-telling experience by selecting panels of their choosing,as
long as the character panels progress the story, and which character will be viewed most
often. This customization will be done with the pre-created assets/character perspectives
and the selectable objects found within the graphic novel. The users can choose how they
12
interact with the story, which characters they choose to follow, and what items they choose
to select, further exploring Jenkins theory of Convergence. Convergence involves both a
change in the way media is produced and a change in the way media is consumed [10].
One leading example of a graphic novel is ”Watchmen” by Alan Moore and Dave Gibbons [6]. Dynamic Camera angles, Character exaggeration, and a compelling storyline are
several of the characteristics that make Watchmen especially enjoyable. In taking examples
of the features that have been successfully done in the print version we then seek to bring
those characteristics over to the digital medium to further enhance. The successful features that will be incorporated into the graphic novel include the visual techniques, camera
placement, and panel arrangement, all of which help to guide the reader through a narrative.
These techniques will be used in a manner that will aid with the progression of the story.
For example, visuals that suggest right-ward angles and progressing the story as the camera progresses right. The user will be given freedom within a restricted set of boundaries,
for example a set amount of panels and restrained camera positioning. This method will
create a balance between user freedom and artistic creation for intended content. The goal
of remediation is to refashion or habilitate other media, explain David Bolter and Richard
Grusin [2].
4.1
”Hobo Lobo of Hamelin”
No matter what shape your comics take, as long as navigating through them is a simple,
intuitive process, that process will be transparent to the reader and the reading flow can
continue uninterrupted, McCloud asserts [16].”Hobo Lobo” creates ease and simplicity
within navigation by including an arrow button to progress forward and labeled buttons for
13
panel selection [19]. ”Hobo Lobo” utilizes arrows and symbols that have been prominently
and widely used among interfaces throughout the web.The I.G.N. will utilize the same
button graphics and layout techniques that have become more standardized among webbased interactions.
In the Interactive Graphic Novel Experience the format will remain very similar to that
of comics in regards to reading style, read left to the right; however, readers will be able to
toggle between character perspectives and by selecting the different characters the panels
will move through space in order to bring the selected perspective to the forefront. While
the reading style will remain left to right, the movement through the character sets will be
the feature that separates the Interactive Graphic Novel from the more traditional form of
comic/graphic novel. An example of a successful web-comic that utilizes the parallax effect
is ”Hobo Lobo of Hamelin” by Stevan ivadinovi [19]. Navigation will be kept extremely
pared-down and simplified in order to promote immediacy. It is the notion that a medium
could erase itself and leave the viewer in the presence of the objects represented, so that
he could know the objects directly, [2]. A Next arrows will be used to progress, while
a Refresh button with begin the story again at the viewers pacing, clicking on items will
select them where applicable. As explained by Christophe Ponsard and Vincent Fries in
their work on comics that are accessible to those with disabilities, in regards to single panel
displays, by having each panel be displayed larger and in focus and providing previous/next
buttons the interface becomes simpler to use and more accessible for users [4].
14
4.2
”The Iron Feather:Infinite Canvas Comic”
While much emphasis is placed on the panel location, the space between panels, and
panel sizes in order to emphasize main events; if done incorrectly, viewers become distracted. For example, Nate Shaws ”The Iron Feather: Infinite Canvas Comic” leads the
viewer through a compelling infinite story, but can get confusing to navigate. At times
panels are seen isolated and the viewer may become confused on how to move to the next
panel. I will solve this problem by sticking with a more traditional layout, using various
camera angles for emphasis, but for the sole reason of keeping navigation simplistic. Shaws
variation in panel scale would have been more successful if the navigation were restricted
and pared-down. Shaw explains, There are delays in the window movement and occasionally panels will not load... If there were a way for the reader to freely rotate the canvas,
reading the comic would feel more intuitive [12].
Figure 4. Nate Shaw’s Iron Feather Panel Layout
15
4.3
”NAWLS”
Another example of a web-comic using experimental navigation is ”NAWLS” created
by Stuart Campbell [14]. While the navigation attempts to alert users and aid them through
the progression of the story with the use of animated arrows, these animated directional are
sometimes hard to discern from the other graphics included in the layout as seen in Figure
5. With the arrows used as a button to progress through the story I was initially inclined to
use the arrow keys on the keyboard, only to find out that the navigation arrow buttons of
”NAWLS” does not correspond with the arrows of the keyboard. With some navigational
shortcomings ”NAWLS” is still a good example of an interactive web-comic. Some of the
features that make this web-comic a Favourite Website Awards or FWA award winning
selection is the movement between each panel and between each of the graphics included
within the panels. Interspersed throughout the web-comic are panels that are seamless, the
user moves seamlessly from one to another and then back again after they click through
with the directional arrows. Another notable feature is the seamless incorporations of the
selectable graphics. They become highlighted once the user can select them and the eye
knows where it needs to focus for this interaction, also seen in Figure 6. In order to balance the look and functionality of the selectable items found within the Interactive Graphic
Novel the right amount of subtlety to direct the viewers attention will be needed while still
keeping these items from being too distracting. One of the main differences between the
”NAWLS” comic and the Interactive Graphic novel is explained by Campbell, The experimental nature of its delivery format is what makes ”NAWLS” most unique, with traditional
comic panels replaced by animated frames that play out on a panoramic interactive digital
16
canvas [14]. While ”NAWLS” uses the panoramic format the Interactive Graphic Novel
will be using a more traditional comic/graphical-novel style panel layout with the use of
parallax to enhance the navigational capabilities.
Figure 5. NAWLS Progress Arrows Panoramic Style
Figure 6. NAWLS Blinking Selectable Feature
4.4
Genre Categorization
One important distinction to be made of the I.G.N. would be categorization. The fea-
tures and design decisions made for the I.G.N. were chosen carefully in order to separate
17
the work from those that are categorized as an ”Animation”, ”Video”, or ”Video Game”.
For this purpose the I.G.N. seeks to extend and explore the story telling methods of a comic
book or graphic novel traditionally told through the print medium, but without breaking the
”feel” of reading a traditional work. While extending the methods of story-telling, the stories being told develop and change as well. These stories must adapt to a new framework
and technique for preserving a story-telling time line. Features were pared down in order to
create a more conservative piece. Many of the works previously mentioned exhibit features
that blur the lines and push the works closer to being labeled an ”Animation”, ”Video”, or
”Video Game”.
The example which appears most experimental in contrast to the I.G.N. and closer to a
video game experience would be the ”Brandon Generator” with its ”point and click” type
of user interaction. This particular work encourages the user to freely explore each panel,
while also encouraging the user to connect the experience with social media outlets such as
Facebook and Twitter. The ”Brandon Generator” acts like a scavenger hunt type game by
giving the users small clues that pertain to the story, but must be found on an item that can
be clicked or examined further. Not all items help to further the story line. This experience
plays more like a video game because of the free-range movement the user is given. If the
user misses a piece of information, they can at any given point in the story go back and
look for more clues. The user is also given the freedom to completely ignore the story line
in exchange for interacting with features that allow for image uploads and social media
connections.
Bordering on the edge of video, ”Hobo Lobo” is a mix between traditional comics and
the video genre. While the user can interact with the comic and determine the pacing,
18
the work also uses in-panel animations. These animations help to enhance the storyline
and place focus within a panel, but are not full fledged animations or cut scenes. The
animations continually loop and are found sporadically throughout the pages and panels.
Animation is also used in the transitioning from panel to panel. Hobolobo does read like a
comic;however, with the animations it is also a piece that can be watched. For example on
page 2, panel 6 the character is seen flashing through different stages of building a boat.
During the designing stages of the I.G.N a suggestion of video playback was in question. A playback feature would allow a user to record a specific experience or story run
through and in choosing to do so would have the ability to enjoy the same experience at a
later time or date by watching a video recording. The user would have also been able to
share these recordings with other users. This functionality was quickly dismissed because
once again a recording feature changes the experience from reading through a comic to
watching a video through. Watching through a video would also lock in the pacing of the
story and negate how customizable each experience may be for each individual user.
Users are continually finding new ways of viewing the same interface. Clay Shirky
discusses interfaces and cell phones and continues to explain, Every surprising bit of new
behavior described here has two common elements: people had the opportunity to behave
in a way that rewarded some intrinsic motivation, and those opportunities were enabled by
technology but created by human beings [5]. Simplified, Shirky explains that users will find
unexpected ways to use an interface, techniques that even the designers had not necessarily
accounted for. His concept is important because it plays into the user customization and
form of story-telling that the Interactive Graphic Novel achieves. By giving the users the
ability to toggle between character perspectives at any given point of the story, the inter-
19
face is allowing the user to create a narrative that can be read through with several different
understandings. With the amount of story variations that the user can experience, the message has the potential to become something completely different than what was originally
intended. The user can create a customized story-telling experience, based on whether the
back-story content was read and through which characters perspective.
20
5. Methodology
In order to prevent confusion caused by extraneous functionality within layout and navigation, research and listings of previous works/examples were examined and cataloged for
features that enhance and decrease functionality. A spreadsheet was created with the URLs,
date of creation or last update, framework used, type of interactivity, and ease of user interface. See Section 5.1. Research consisted of features that make each of the pre-existing
works feel bulky and unnecessary to functionality. A list of the features were collected
that will help to enhance, simplify, and cater to the unique requirements of the Interactive
Graphic Novel. The listing includes web comics that currently exist on the web in conjunction with the type of interactivity that each of these web comics offers. This spreadsheet includes but is not limited to the works of ”Hobo Lobo”, ”The Iron Feather”, and
”NAWLS” as mentioned earlier in the Literature Review. Listing these comparisons allows
me to create a more concise user friendly interactivity, by following practiced user design
and emphasizing the features of the Interactive Graphic Novel that should be comparatively
different.
21
5.1
Analysis Spreadsheet
NAWL Interactive
URL
http://www.nawlz.com/
Date
2007
Framework Used
Adobe Flash
Type of Interactivity
Interactive Panoramic
Ease of Use 1-10(Easy) 8- Not always apparent how to move forward.
Best Features
Highlighting and Techniques used to place user focus.
Seamless Panels.Animated Features.
The Right Number
URL
http://www.scottmccloud.com/1-webcomics/trnintro/index.html
Date
2003-2004
Framework Used
HTML and Plugins
Type of Interactivity
Directed Interactive Comic
Ease of Use 1-10(Easy) 10 - Intuitive navigation using 2 different methods or
Dual Functionality.
Best Features
Two Types of Navigation. Simple, clean look. Animated Transitions.
22
Adrian Baxter’s Portfolio
URL
http://www.apbaxter.com/
Date
2013
Framework Used
HTML and JavaScript
Type of Interactivity
Mouse Movement
Ease of Use 1-10(Easy) 10 - No Navigation per se, but movement is automatic.
Best Features
Parallax shows movement.
Hobo Lobo of Hamelin
URL
http://hobolobo.net/
Date
2013
Framework Used
HTML and JavaScript
Type of Interactivity
Directed Interactive Comic
Ease of Use 1-10(Easy) 10 - Intuitive navigation using 2 different methods.
Best Features
Parallax used to cover and uncover items from the surrounding panels, gives the appearance of depth.
23
Brandon Generator
URL
http://www.brandongenerator.com/
Date
2013
Framework Used
HTML, JavaScript, and jQuery
Type of Interactivity
Interactive Film(Point and Click)
Ease of Use 1-10(Easy) 5 - Not always apparent how to move forward.
Best Features
5.2
User is given freedom of choice.
Dual Functionality
The features included into the I.G.N. will need to create ease of functionality for swap-
ping perspectives, moving between the panels and restarting the story. One of the common
features found throughout the previous works that helped to aid in navigation included dual
functionality or two ways to accomplish the same task. For example ”The Right Number”
by Scott McCloud uses a grid of numbers to represent each panel of the comic, the user
can choose to select a panel number or by clicking on an arrow to move forward through
the story[15]. ”Hobo Lobo of Hamelin” uses a similar technique with panel numbers, but
instead of using an arrow the interface includes a next button. ”Hobo Lobo” also includes
a button to move to the next page of panels, giving the user a clear idea of their current
place within the story. Dual functionality is created within the I.G.N. by giving the user the
option to select a character profile button or the Next button. If the user clicks one of the 3
character profile buttons the interface will move to the next panel for that selected character
or if the user wants to move to the next panel for the same character they can click the same
profile button or the Next button. The Next button will only move to the next panel of the
24
character that is currently selected. In adding dual functionality the user is given several
options for navigation and allows the user to select a method that feels natural. The idea
is to keep the navigation as pared down as possible while making it simple to use so that
there is a very shallow learning curve for even the most basic user.
Figure 7. The Right Number Dual Functionality
25
Figure 8. Dual Functionality for Hobo Lobo
5.3
Highlight Functionality
Another commonly used feature within these works include highlighting. Highlighting
is used to direct the user’s attention to a button that is selectable or part of the work that is
important to the story. Each work uses highlighting in varying degrees, some more subtle
than others in order to fit within the variety of design styles used. ”NAWLS” uses animated
directional arrows in order to move the story forward, but also uses small animated movements on buttons to signify to the user that an object is selectable. The ”Right Number”
uses a more subtle technique by changing the next arrow to a slightly brighter shade of
blue. The buttons used in ”Hobo Lobo” start out black but upon hovering and clicking turn
white with a shadowing effect or a surrounding glow. The Interactive Graphic Novel will
use the highlighting technique in several different ways. The first highlighting technique,
changing of color, will be used on all the navigational buttons, this will signify to the user
26
that these buttons are selectable and will perform a function. Highlighting will also be used
to keep track of what character perspective is currently selected. So for example if the user
has selected Little Red Riding Hood’s perspective then her profile button will have a glow
or highlight surrounding it until a different profile is selected. The final use of highlighting
pertains to the Wolf’s back-story. Within the second Wolf panel the user will find a button
that will guide them to the Wolf’s sub-story panels. This button will animate slightly in
one direction and reveal a glow upon the user hovering their mouse. Given these properties the button will fit the look and feel of the panel, but also alert the user of additional
functionality.
5.4
Mouse States
Creating button states such as a hovering or clicking state allows an interface designer
to create buttons that fit closely within a design, while still alerting users that an action is
available or required. The I.G.N. interface/navigation is intended to invite the user to interact with the story and draw them closer to the characters and each character panel. While
the navigation should feel in sync with the design and visuals of each panel, a balancing
act occurs because the navigation should also stand out and avoid getting overlooked by
the user. The navigational buttons used within the I.G.N. have the same appearance as the
artwork found within the panels, but includes a white outlining and a glow for the mouse
hover state. For example the same line width and stroke will be used on the buttons but a
white glow will appear when the user’s mouse hovers over one of the buttons. The buttons
should visually pair closely with the artwork of the panels and invite the user to interact
with the story and become part of creating their own unique experience.
27
5.5
Parallax Functionality
Parallax is another commonly used and notable feature from several of the example
works mentioned previously. The most obvious use of parallax can be seen within ”Hobo
Lobo”. ”Hobo Lobo” uses this feature in order to enhance and alert the user that they are
currently moving from one panel to another. Parallax also helps to define what panel the
user is currently looking at and to keep the user from scanning ahead before taking action to
move to the next panel. In ”Hobo Lobo” when a user chooses to move to the next panel images that were previously covered are revealed to display new story material. While ”Hobo
Lobo” uses parallax to enhance the movement from one panel to another, the ”Brandon
Generator”, created by Edward Write and Tommy Lee Edwards, uses parallax to put focus
on the user’s movement within the same panel[7]. For example if the user is in ”Brandon’s
Car”, when the user moves their mouse around the scene toward different objects, the images outside the car window correspond and move with the mouse movement. This use
of parallax plays a much smaller role in the overall storytelling process. Much like ”Hobo
Lobo” the Interactive Graphic Novel uses parallax to help with the transitioning and reveal
of the next panel, but will also help alert the user of the Wolf’s sub-story selection button.
The parallax feature was added in order to enhance the effects and weight of the dialog and
elements of each panel creating a three dimensional appearance as seen in Fig. 9. This
effect may be more prominently used with navigational development of future work.
28
Figure 9. As exemplified by the Wiki for Parallax
29
6. Design Process
6.1
Story Creation
During the creation of The Interactive Graphic Novel one of the main considerations
was the story that would be told. Originally, the goal was to develop a unique storyline consisting of three characters that relate by intervening actions or plot points. Each character
in the story would begin at the same place/scene, diverge out to overlapping stories and/or
individualized scenes and each story would continue on to a final conclusion involving all
three characters. So in essence the beginning and end panels would remain the same regardless of which character the user has selected. After developing several drafts of a story,
without reaching a complete finalized script, the decision was made to use a pre-existing
storyline, one that users may already be familiar with. By choosing to use a pre-existing
storyline users may find it easier to understand the concept of switching between perspectives and the methods behind the story telling itself.
The short story that was chosen to be used with The Interactive Graphic Novel is ”The
Brother’s Grimm Tale: Little Red Riding Hood”. This tale would allow for three characters
and customized perspectives for each. The tale of Little Red Riding Hood would allow
for exploration of character types and would give me three characters that can both have
similar motivations and perspectives and/or very different motivations. For example, the
Wolf’s perspective can be explored further because in the original tale of ”Little Red Riding
Hood” his motivations were very simply that he wanted to eat both the Grandmother and
Little Red Riding Hood. In Using his character for the Interactive Graphic Novel I was
30
able to further explore those motivations and give the reader more background information
about the Wolf, thus changing how the user may see the Wolf. On the opposite end the
Grandmother can now been seen in her hero moment promising the Wolf of her own escape.
Red Riding Hood’s personality was kept to that of a small naive child. Each character
needed to interact with one another, while at the same time enabling the story to account
for separate story lines. This story allowed for small character and story changes that would
best suit the perspective swapping and method of story-telling.
Small additions and alterations were made to the story in order to account for missing
perspective gaps as well as additional character back-story and development. For example
throughout the original Little Red Riding Hood story, the reader is following the actions of
Little Red Riding Hood and therefore has no indication of what the Grandmother is doing
simultaneously.Some character actions and visuals may be left out due in part because traditional fairy tales often use a third person perspective, while the story is driven by the main
character. The Interactive Graphic Novel addresses this issue by creating panels where the
user can see the Grandmother lying sick in bed and later talking with the Woodsman who
visits the Grandmother in order to deliver her chopped firewood.
One of the goals of the Interactive Graphic Novel is to give the user the ability to learn a
little bit more about the characters and provide content that was not previously included in
the reading of the original Brother’s Grimm Tale. The back-story about the wolf is included
in the Interactive Graphic Novel through the use of a selectable object within one panel of
the Wolf’s story. The user is given the option to explore this back-story or to pass over it.
If the user decides to explore the Wolf character’s back-story than the user may become
aware of the Wolf’s motivations and how tragic his story actually becomes. This selectable
31
feature advances storytelling in a way that would allow story creators/artists to expand
character profiles and story lines. The added functionality allows for authors to continue
developing characters without the fear or having to reprint or make significant changes to
the formatting or creation of an original comic or graphic novel. The features acts as an
addition more than a revision to the work as a whole.
Story timing played a major role in developing and customization of the Brother’s Grim
Tale to fit with the Interactive Graphic Novel. By swapping between the character perspectives, what the user is actually doing is choosing a moment in time that each character is
occupying. For example, while the Wolf and Little Red Riding Hood are having a discussion in the woods, the Grandmother gets a visit from the Woodsman. Story timing and
layout technique helped to direct the interface design by restricting the amount difference
between the number of panels for each character. Each character needed to have roughly
the same amount of character panels in order to smooth the transition between character
swapping and the progression of time throughout the story. If given a different amount
of panels per character the user may become lost in regards to their current place in time
within the story.For example, If one character were to have 20 panels and another character
were to have only 10 panels, by switching between the two characters a sense of time would
be lost due to the second character having half the amount of time or visual representation
as the first character. In creating the Interactive Graphic Novel with a set 10 panels per
character the story becomes limited and may not show all the actions necessary to fully
depict the story. For future progress/works more panels may need to be added in order to
create smoother transitioning from panel to panel and character to character.
32
6.2
I.G.N. Layout
In order to recreate the story of Little Red Riding Hood and each of the character per-
spectives the final I.G.N consists of 5 layers for each panel, 3 characters, and 10 panels.
The number of layers, characters, and panels combine for a total of roughly 150 different
layers to create each perspective, for each character, for each panel as depicted in Figure.
10 Panel Breakdown. Some character panels required only 3 layers, while other panels
required up to 6 layers in order to depict the scene accurately. The top-most layer for each
panel includes the dialog on panels where applicable. Each panel contains color in order
to help enhance the separations between the different layers. The navigation includes color
and different highlight states for user clicking and hovering.
Figure 10. I.G.N. Panel Breakdown
33
6.3
I.G.N. Interface
The original interface design called for a small grid of panels that functioned as a navi-
gational road map. The road map depicted where the reader was within the story and what
character the user had selected as seen in Figure 11. After several revisions and considerations the navigation was pared down in order to simplify and clean up the interface.
The character grid unnecessarily took up screen real estate, and did not benefit the navigation because the user is solely allowed to move forward with the story instead of enabling
backward movement.
By negating the navigational grid and allowing only forward movement throughout the
story, several interaction issues were avoided. The biggest potential issue would be the
break in story-timing. For example a user located on Red’s panel 2 would have had the
ability to move to panel 2 for both the Grandmother and the Wolf thus causing confusion
between story movement. Movement from panel to panel should signify the forward movement of time, and the movement encouraged by the grid would not guarantee that a user’s
movement was progressing the story.In creating an interface that can solely move forward,
it may become apparent to the user that a trend is occurring and what to expect from future
actions. Also, this type of grid movement through the story does not encourage replayability because the user can choose to see each characters perspective as they move from
panel to panel, thus negating the different story varieties and outcomes for each time the
user runs through the Interactive Graphic Novel. Another issue that may arise with the grid
navigation format included the user’s ability to completely skip panels. For example the
user would be able to skip panel 2 for each character, which would cut out important plot
34
points within the story and once again hinder the flow of the story as a whole.
Instead of using the grid system as previously designed, the user is given the option
to move through the panels with a next arrow selection. The user can also move through
the panels by clicking one of the character panel profile buttons to either stay with the
same character and move to the next panel or to move forward a panel but with a different
character. A reset button has been included to allow the user to restart the story and allow
for different story combinations. The new form of navigation can be seen in Figure 12. The
additional content will not be integral to the storyline, but will add to the richness of the
characters and the environment by creating sub-stories.
Figure 11. Panel Layout Navigational Roadmap
35
Figure 12. Revised Navigation
Once the navigational framework had been setup, the story was developed and placed
within the framework to develop a better sense of story direction and flow. This process
included character concept art, character backgrounds/personalities and a story web for the
interacting characters and story elements. In order for the parallax to function with each
layer of the story panels, the camera/framing for each panel and each character perspective
has been carefully planned out in order to make cohesive connections from one panel to
another. Once the panels were brought into the framework and animation was added, minor
dialog and visual adjustments were made in order to help with the flow of the story for each
character.
Continuing forward, all the layers were positioned within a game creator/engine and
in conjunction with the coded framework, development on the transitioning from panel to
panel began. Using coded scripts, game objects or in this case a camera can be directed
to utilize the scripts along with the navigational buttons in order to animate between the
panels. A tweening plug-in was used within the game engine in order to create smooth right
to left, and zooming animations between the characters and the panels. The animations
include what the user will see while moving from panel to panel, but also between each
character. For example, how the camera will move back in space when switching between
character panels. Functionality such as the ”reset” and next buttons were added during this
36
stage.
Once again the I.G.N. seeks to recreate comic book storytelling within a Digital Medium.
The story should be an integral part of the experience and by excluding extraneous features
or non-essential user interactions, that do not pertain to the story, focus will be placed on the
story itself. The user should not get hung-up by small details or animations, but should be
able to progress through the story uninhibited. A recording feature would completely take
the user out of the story customization process, especially if a user was capable of sharing
said story. The mechanics should be paired down and feel as though the user is flipping
through a comic book page by page, but with the added features of character perspective
swaps and character back-story.
37
7. Future Considerations
The I.G.N. seeks to experiment and explore the techniques used in story telling in order
to encourage the user to create a customized story telling experience. This form of story
telling uses visuals similar to comic books and graphic novels in order to enhance the story
as a whole. While the I.G.N. uses techniques such as parallax, a 3D environment with
camera movement, and selectable features within each panel, many features can still be
explored in order to push the boundaries of story telling and how a user can interact with
these stories. Future considerations for the I.G.N. may help to clarify story lines or create a
user experience that is far reaching from the story telling experience of a traditional comic
book or graphic novel that we know today.
7.1
Story Development
One of the biggest changes or improvements that may be made with future progress
would be changes to the story itself. Initially the goal for the I.G.N. was to tell an original
story with original characters, but due to the scope of the thesis the story was scaled down
in order for the user to be more familiar with the story and therefore more adaptable to how
the story is told and the changing perspectives. It would be interesting to compare how
a user might navigate through a familiar story versus a completely new tale. Questions
arise whether a new tale could be told without losing the user within the story time line
or whether a time line is important to the work overall. Story creators may also choose to
create a tale that has more character perspectives to choose from, or may even contain only
38
two different perspectives to switch between. In creating a completely new storyline, the
experience may move from a short story told within 10 panels to a much longer read, with
more in-depth character interaction.
An original story for the I.G.N would lend itself to a more in-depth form of character
development through the use of sub-story selections. By adding more selectable items
within the comic/graphic panels the creator of the story is given more freedom to develop
their characters aside from the main plot or story line. It gives creators the opportunity to
flesh out the personalities and backgrounds of their characters which may change how a
user perceives the story as a whole. Sub-story selections also lend themselves to creating a
more adaptable story, these features could be added in over time in order to add to a story
plot and encourage replay-ability from users.
Since one of the main components to the I.G.N. is the sub-story functionality one could
combine functionalities in order to expand this feature even further. For instance, the story
could include perspective selections within a sub-story line. By including perspective selections within sub-story lines, this included functionality would create a tree-like story
framework that would continue to branch out per sub-story per character. The creation of
these perspectives within sub-story would create endless flexibility within story creation
and story length.
7.2
Visual Development
Great care was given to the visuals created for the I.G.N. These visuals could change
the user’s perception of the story and the overall look and feel of the thesis. For future
development the story creators may choose to create visuals that push characters to the
39
extreme. For example in the tale of Little Red Riding Hood the Wolf sees the Woodsman
as the villain and a monster, therefore through the Wolf’s perspective the visual depiction
of the Woodsman is always portrayed as a monster or demon. While at the same time
the visual depiction of the Woodsman through the Grandmother’s perspective may be one
of heroism and the character may appear larger than life. Pushing visual extremes based
on perspective could enhance a story and help to make each perspective a very unique
experience.
7.3
Framework Flexibility
Flexibility within the story creation process was a main consideration during the devel-
opment of the I.G.N. The framework was created in a way that would allow writers and
story creators freedom during the creation process. For example the frame work allows for
any length of story whether the story is only two panels or 50 panels long. Updating and
editing visuals is as easy as replacing an image file within a folder, so if the story/visuals
need editing, drastic changes aren’t necessary. Once again adding sub-story features are
also simplified by creating tags and labels that direct the camera to panel groups placed
within the 3D environment. The flexibility within the frame work helps to encourage writers to create an original story that may develop over time.Writers would be given the freedom to create an ever evolving story line that may include the addition of characters or plot
points over a given amount of time.
By examining how flexibility can change the way a story is told the form of navigation
could certainly be experimented with. The grid form of navigation, mentioned previously,
could be reinstated with an original story. This form of navigation would allow a user
40
complete freedom of movement throughout the entire story. The user would be given the
ability to move forward, backward, skip panels, and swap character perspectives at will.
This type of navigation would be highly experimental because a user may or may not be
able to follow along with any particular story line. A method for keeping track of where
the user is within the story would be needed and easily viewable by the user in order to help
create a succinct viewing experience.
Placement of the character set, along with the placement of each panel within a 3 Dimensional space plays a big part in the transitions from perspective to perspective. Currently, the layout for the characters within the I.G.N. are set one behind another starting
with Little Red Riding Hood, followed by the Grandmother, and finishing with the Wolf’s
perspective. See Figure 13. This setup helps to alert the user that a definite change is occurring while switching from one perspective to another, the user should always be aware
of what character they currently have selected. The current method of transitioning works
well;however, at given points in the story the transition from character to character seems
to hiccup and jump. The transitioning could be improved for smoother functionality by
fine tuning a motion blur. In considering possible future work and improvement the transitioning animation and functionality could be experimented with. The character set could
be arranged in a vertical stack layout, one set located directly above another. The character
sets could also animate like a photo carousel so that the camera is not actually clipping
through anything, but moving along with the panels.
41
Figure 13. Character Set Layout
A final consideration and improvement to the I.G.N. thesis would be creating and allowing the framework to work on mobile devices such as tablets and smart phones. In creating
the I.G.N. for the web, the goal was to make the experience available to any user with a web
browser. If the framework were extended to work as a mobile application than more users
would have access and be able to customize their own story telling experience along with
sharing that experience with others. The application could also allow users and creators
to become more involved and actually create a story line and visuals for a work of their
own. The option of mobility allows users to enjoy a customized story telling experience
any where they go.
42
8. Conclusion
The I.G.N. can be analyzed in terms of what major functionality was added, why the
functionality was added and if the features included helped to optimize the story telling
experience. An overall view of the work will help to determined what was successful and
what was not as successful. The visuals and dialog also play a large role in determining if
the experience as a whole is consistent without any issues in story flow. To begin, a broad
overview of the story is analyzed.
8.1
Story Analysis
A unique set of issues arose while creating separate perspectives for each character. The
main issue as discussed previously was keeping track of time within the story, while the
user may be swapping between the different character perspectives. In order to account for
the swapping, helper dialog was added to panels in order to aid in keeping track not only
of time, but of setting and motivation. For example Red Riding Hood expresses, ”Hello,
Grandmother? Is that you? It’s Red. How did you get into the Wolf’s belly?”. This statement helps to explain where the characters are and what the viewer is seeing, as depicted
in Figure 14. The helper dialog can be a bit ”spelled” out at times, especially if the user
is continuing on the same character path for several consecutive panels.Overall, the helper
dialog aids in giving the user the freedom of character and panel choice throughout the
story. While the helper dialog works well on occasion to place the user in a specific setting
or time, there are moments in the story that hold gaps during the swapping process. For
43
example if the user chooses Red panel 1 moves to Grandmother panel 2 and Grandmother
panel 3, then moves back to Red Riding Hood for panel 4, the user may not understand why
Red is in the woods and why she is in such a hurry.See Figure 15. Overall the story can be
followed best if swapping only occurs after several successive panels for one character. If
the user decides to swap character perspectives for each successive panel than, on occasion,
the story has a tendency to jump from one situation to the next, and may not include important actions by unseen character perspectives.A future build may include functionality
that disables the swapping of character perspectives during these particular points within
the story.
In order to keep the user aware of time within the story the amount of panels per character needed to be roughly the same, as mentioned previously. The purpose of keeping the
number of panels the same is to make the viewer aware of what moment each character is
occupying. In creating the panels for the I.G.N. one extra panel was added to the end of
the Wolf’s storyline in order to show the occurrence of his death. So in total the Wolf has
11 panels and Little Red Riding Hood and Grandmother only have 10. Even though the
difference between the number of panels is only one this causes a discrepancy because the
user will reach the end panel for Red and Grandmother before they reach the end panel for
the Wolf. While on the end panel for either Grandmother or Little Red Riding Hood by
selecting the Wolf’s perspective the interface will then move to the end panel for the wolf.
Even though all three characters share the same visuals for end panels this behavior causes
the same end panel to be viewed twice causing a small redundancy within the story.
44
Figure 14. Helper Dialog within Panel
Figure 15. Red in Forest without Helper Dialog
45
8.2
Sub-Story Analysis
With the addition of the sub-story, time line issue arose and may not depict the correct
time and place for when the sub-story is actually meant to occur. During the sub-story
the wolf is having a flash-back like moment showing the history of the Woodsman and
the effect he has on the woods and the creatures that inhabit the woods. This depiction is
supposed to support the idea that the Wolf sees the Woodsman as a monster out to destroy
the Wolf’s way of life. The sub-story may not initially read as a flash-back in time because
of the panel locations within the 3D environment. The panels are located under the second
panel within the Wolf’s story line and the camera travels from left to right moving forward
between the sub-story panels, See Figure 16. Once the user completes the sub-story and
chooses to move forward with the Wolf story line, the camera moves to the left and upward
creating a backward diagonal movement. This movement appears to signify that the user
is moving back in the story time line when in fact they are moving forward. One solution
to this issue could include aligning any sub-story panels in a vertical fashion with a camera
that travels downward to progress through the sub-story but continues forward to the right
when the user completes the sub-story. The camera movement would continue to support
the parallax because parallax is inherent while the layering of panels in the 3D environment
is present. See Figure 17. for suggested sub-story layout.
46
Figure 16. Sub-story Layout within Game Engine Scene
Figure 17. Suggested Sub-story Layout
47
A complete read through of the sub-story is not guaranteed due to user interaction and
freedom of customization. Functionality was included in the framework to allow the user
to leave the sub-story at any time in order to switch to either the Grandmother’s perspective or the perspective of Little Red Riding Hood. Given this functionality it may not be
completely clear where the user is re-entering the main story-line. When the user moves
past the sub-story regardless of what character is chosen they move to the third panel of the
selected character. Also, in leaving the sub-story midway, the user would have to restart
the entire story experience along with starting the sub-story over in order to read through
panels that were skipped. One solution to this could be the added functionality of locking the user into the sub-story and requiring them to reach the final sub-story panel before
allowing the user to progress through the main story line.
The sub-story button is an important part of the functionality because it guides users
to additional information about the story line. Features have been added to the Wolf substory button in order to make it apparent that an action can be performed. For instance a
hover state has been implemented that will enable the button to glow and stand apart from
the rest of the panel. These features are the same as the features that are place upon the
character profile selection buttons as to reinforce the idea that the user can interact with
the sub-story button in the same manner as the other buttons. Although the same features
have been added to the sub-story button, the location and size of the button play a major
part in user recognition. The Wolf sub-story button takes up a considerable amount of the
panel and is located fairly close to the main navigational buttons, therefore its success is
straightforward. While the sub-story button is successful, the button does take up quite
a bit of screen real estate and may limit the amount of buttons that can be placed within
48
a panel. See Figure 18. If the button were to be smaller and/or located at a distance in
relation to the main navigational buttons the user may overlook the sub-story all together.
The I.G.N. has only one sub-story button, therefore the user is not required to move the
mouse spatially over the panels. Once again if a button were to be located further from the
main navigational buttons the user may not move the mouse around the panel and stumble
upon a sub-story button. A very subtle glow animation would help to draw the users focus.
Figure 18. Spacial Relation of Sub-story Button
The storyline is simple and paired down to a familiar tale and even with the simplicity
of the tale, question of losing a user in time remains a concern. The I.G.N. has its success
in keeping track of time within the story because the user knows that they are continually
moving forward. However, if the story were to become any more complex or contain more
49
main characters a road map would be needed. The user should be able to see where they
are in relation to other character panels and branching sub-story lines. A navigational map
would also help to alert the user that a sub-story/sub-stories exists and where they can be
accessed.
8.3
Navigation Analysis
The design for the navigation was highly dependent on how the story was written and
visually represented. In order to bring the users into the story and encourage interactivity
the interface was placed within the boundaries and over laying the panel visuals. Through
the visual development of the interface a balance was sought, one that would make the
buttons and functions apparent to the user but would not visually distract from the visuals of
the panels themselves. The final visual outcome was successful in that the style is consistent
with the visual style of the panels, while maintaining the users focus on functionality. The
white outlining on the buttons help to keep the visual line widths consistent but separate.
Mouse Hover states alert the user of interactive capabilities with splashes of color.
User Interaction Designers dedicate a considerable amount time to designing a layout
that visually and spatially meets the needs of a specific user experience. The layout of the
I.G.N.’s main navigation is designed in a way that keeps all functionality close together and
as visually minimalistic as possible. This minimalism can be compared to the interface of
”Hobo Lobo”, which does not impede the story-telling experience while the user travels
through the story. The navigation should not impair the main visuals of the panels. By
separating the elements of the navigation throughout the screen the interface would take on
the style of a video game interface, where the user must focus on all parts of the screen. An
50
example of such a video game interface can be seen in Figure 19 [17]. with the in-game
Halo interface. This reasoning and style depiction helped to narrow down that the interface
for the I.G.N. needed to be kept together. While the navigation is visually minimalistic,
the dual functionality of the buttons help to keep the interface successful as a whole. For
example if the user has selected a character profile, the corresponding character profile
button will remain colored and highlighted in order to signify what profile the user currently
has selected. Once again this gives the user two methods for moving forward in the story.
The first method by selecting a character profile button. The second method is the selection
of the next button. The next button then progressing the story for the current selected profile
which has remained colored and highlighted.
Figure 19. Bungie’s Halo Interface
The transitioning for the I.G.N. is basic but works to alert the user that a major action
is occurring. The goal for the transitioning was to alert the user that the character set is
swapping out for the next chosen character set. The camera transitions with motion blur in
51
order to help distort some of the camera clipping that occurs when the camera is traveling
through the panel objects in the 3D environment. The camera blur could be fine tuned
in order to start sooner and end later as to hide the panels in the immediate surrounding
area. At the current time the viewer can vaguely see the panels that surround the selected
character panel, while the camera is in motion. As mentioned in future considerations several additions to the camera movement or to the placement of the character sets themselves
could be made to improve the transitioning effect.
8.4
Visual Analysis
Visuals for comics are integral to depicting a story, settings, and the actions that take
place within that story. Visual styles are carefully selected by authors and artists in order to
correctly represent a high-action comic or the topic of an everyday comic strip/daily funny.
During the development of the I.G.N. several visual styles were used and experimented with
in order to reach a visual style that would compliment and pair closely with the actions in
the story. Technology and technique helped to determined which style would be best suited
to time constraints and used in the final I.G.N.
The original visual style was to be hand-drawn and scanned in digitally. This method
of creation would make it more difficult to change any visual assets that needed to coincide with any changes made to the story. Once the option of hand-drawn art was excluded,
the next solution was to use a vector-based program that would easily allow for asset duplication. Vector- based art would also allow for ease with cropping and scaling for any
proportion changes. The first vector-based program used gave very little flexibility in regard to customization and line width. The style was very angular and the edges were sharp
52
in appearance. See Figure 20. Seeking a more modest visual approach a second vectorbased software was used. The second program allowed for a wider variety of line widths
and customization options. The story of ”Little Red Riding Hood” called for a more subdued style and the final outcome is successful for this type of fairytale. The final style/line
art can been seen in Figure 21.
Figure 20. Original Vector-based style
53
Figure 21. Line Width and Finalized Style
The Interactive Graphic Novel seeks to explore the user experience of comic books/graphic
novels as presented in digital format and through the use of navigation and user selected
character perspective. The project demonstrates how a story, traditionally told through the
print medium, can be enhanced with digital techniques in order to create a more interactive and personalized user experience. The experience created should not be compared
to that of an animation, movie, or video game, but should fall in line with the traditional
sense of comic books and graphic novels with still panels. As exemplified previously,
the comics that include moving animations and point to click user interaction move the
story/experience away from the graphic novel and comic book genre towards a fully fledged
animation or game experience. The Interactive Graphical Novel incorporates user interactivity without changing the true nature of reading a comic. The key features that help keep
the Interactive Graphic Novel more traditional are the still panels, while interactivity has
been added through navigation. The interactivity added through the use of navigation is
54
meant to further support the story and how that story is told. By keeping the navigation
simple and easy to use, additional functionality has successfully been created.
55
Bibliography
[1] B.Bolland and A.Moore. Batman:The Killing Joke:Delux Edition. NY:DC Comics
Inc., 2008.
[2] J.D. Bolter and R.Grusin. Remediation. MA:MIT Press, 1998.
[3] C.Hatfield. Alternative Comics:An Emerging Literature. MS:University Press of Mississippi, 2005.
[4] C.Ponsard and V.Fries. An accessible viewer for digital comic books. Heidelber,
pages 569–577, 2008.
[5] C.Shirky. Cognitive Surplus:Creativity and Generosity in a Connected Age. London:Penguin Press, 2011.
[6] D.Gibbons and A.Moore. Watchmen. NY:DC Comics Inc., 1987.
[7] E.Wright and T.L.Edwards. The random adventures of brandon generator. http:
//www.brandongenerator.com/, 2012.
[8] G.T.Delacorte. October. Ballyhoo, October 1931.
[9] HiddenAngle29. Avatar mini comic 2 voice over. http://www.youtube.com/
watch?v=PyqY1vBRt3o, May 2009.
[10] H.Jenkins. Convergence Culture:Where Old and New Collide. NY:New York University Press, 2006.
[11] J.Vance. Sabotage on Sulfur Planet. IN:Better Pulications Inc., 1952.
[12] N.Shaw.
Digital Comics:Panel Structure in
PA:M.S.thesis.Dept.DIGM.Drexel University, 2011.
a
Digital
Environment.
[13] R.Goulart. Cheap Thrills:An Informal History of the Pulp Magazines. NY:Arlington
House, 1972.
[14] S.Campbell. Nawls. http://www.nawlz.com/, 2012.
[15] S.McCloud.
The right number.
http://www.scottmccloud.com/
1-webcomics/trn/index.html, 2003.
[16] S.McCloud. Making Comics. NY:HarperCollins, 2006.
56
[17] Microsoft Studios. Halo, November 2007.
[18] S.Tychinski.
A
brief
history
of
the
graphic
novel.
Diamond
Bookshelf,
March
2012.
Available:
http://www.diamondbookshelf.com/public/default.asp?t=1m=1c=20s=164ai=64513ssd.
[19] S.Zivadinovic. Hobo lobo of hamelin. http://hobolobo.net/, 2012.