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 2013Sonia 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 . . . . . . . . . . . . . . . . . . . . . . 7

4 Literature Review 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 29

6.1 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

AbstractInteractive Graphic Novel Experience

Sonia F. HavensMichael 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 over-

arching 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 back-

story. 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 in-

tended 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 de-

veloped the ”Pulp Magazines”, a literary magazine created from rough wood-pulp paper

[13]. Originally created to compete with the popular ”Dime Magazine”, the pulp maga-

zines 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 im-

agery 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 de-

picted 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 mis-

named: 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 simul-

taneously. 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 story-

telling 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 Interac-

tive 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 transme-

dia 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 experi-

mental 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 con-

tinually 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 interac-

tive 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 back-

ground 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 Gib-

bons [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 fea-

tures 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 cam-

era 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 web-

based 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 dis-

tracted. 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 occasion-

ally 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 bal-

ance 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 experi-

mental 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 sto-

ries 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 ques-

tion. 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 mes-

sage 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 nav-

igation, 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 in-

terface. 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 con-

junction with the type of interactivity that each of these web comics offers. This spread-

sheet 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/trn-

intro/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. Ani-

mated 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 auto-

matic.

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 sur-

rounding 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 User is given freedom of choice.

5.2 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 move-

ments 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 proper-

ties 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 inter-

act 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 im-

ages 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 im-

ages 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 con-

sisting 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 re-

gardless 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 perspec-

tives 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 tra-

ditional 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 perspec-

tives, 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 discus-

sion 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 consid-

erations 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 naviga-

tion 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 move-

ment 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 replay-

ability 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 se-

lections 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 writ-

ers to create an original story that may develop over time.Writers would be given the free-

dom 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 Di-

mensional space plays a big part in the transitions from perspective to perspective. Cur-

rently, 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 oc-

curring 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 tran-

sitioning 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 allow-

ing 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 state-

ment 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 im-

portant 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 char-

acter 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 perspec-

tive 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 lock-

ing 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 sub-

story 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 sev-

eral 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 coin-

cide 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 du-

plication. 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 re-

gard 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 vector-

based 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 sub-

dued 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 interac-

tive 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 interac-

tivity 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 ComicsInc., 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 Mis-sissippi, 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. Lon-don: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 Univer-sity Press, 2006.

[11] J.Vance. Sabotage on Sulfur Planet. IN:Better Pulications Inc., 1952.

[12] N.Shaw. Digital Comics:Panel Structure in a Digital Environment.PA:M.S.thesis.Dept.DIGM.Drexel University, 2011.

[13] R.Goulart. Cheap Thrills:An Informal History of the Pulp Magazines. NY:ArlingtonHouse, 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 graphicnovel. 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.