Interacting with comics in digital spaces

Exploration into the intersection between interaction design and digital comics

Lucas Stenberg

Interaktionsdesign Bachelor

22.5HP 2020 Supervisor: Jens Pedersen

2 of 37

Abstract

Comics have been around for centuries and have had different cultural meanings depending on era, genre and country. Toward the end of the 20th century and the start of the 21st century, we experienced the rise of the internet as well as the normalization of home computers and with that, comics also started inhabiting the digital space. The digital space opens up for opportunities of multimedia and new ways of interacting with comics, but most comics maintain the formats of their printed counterparts. The goal of this thesis is to contribute knowledge to both interaction design practice as well as digital comics. This is done by conducting research through design and interaction-driven design and through them, launch an exploration into how different interactions affect the experience of reading. User tests as well as a workshop was conducted in order to help articulate the experience. The conclusions reached were that a more active way of interacting (i.e. scrolling for instance) appeared to be preferable to other more static ways of interacting. The usage of the digital space appeared to in some cases enhance the experience of reading but it was closely connected to the nature of the interactions. Keywords: Digital comics, interaction-driven design, Sketching, Interaction design, Infinite canvas.

3 of 37

Acknowledgements

I would like to thank the people who participated in testing my sketches as well as attend my workshop and help me articulate the experience. I would also like to direct a big thank you to my supervisor, Jens, who always took the time to talk to me and try and point me in the correct direction, especially during stretches of time when things were difficult, incredible support. I would like to thank Amelie for providing me with emotional support. I would like to direct a thank you to Jakob whom I discussed the intersection between comics and interaction design with previous to the start of the thesis course and who also encouraged me to look into the matter more.

4 of 37

Table of Contents

Abstract ...... 2 Acknowledgements ...... 3 Table of Contents ...... 4 1 Introduction ...... 5 1.1 Context ...... 5 1.2 Aim ...... 6 1.3 Delimitations ...... 6 1.4 Research questions ...... 6 2 Theory ...... 7 2.1 History of comics...... 7 2.1.1 History of web comics ...... 8 2.2 Between images: time & space ...... 8 2.3 The infinite canvas ...... 10 2.3.1 Constraints of the analogue comic ...... 10 3 Related work ...... 12 3.1 Scott McCloud ...... 12 3.1.1 Scott McCloud’s My Obsessions with Chess (N.D) ...... 12 4 Methods ...... 13 4.1 Research through design ...... 14 4.2 Interaction-driven design ...... 15 4.3 Sketching or prototyping ...... 15 4.4 Sketching ...... 17 5 Focus group ...... 17 5.1 Ethical consideration ...... 18 6 User tests & workshop ...... 18 7 Design work ...... 18 7.1 Entering into the digital space ...... 19 7.1.1 Purpose ...... 19 7.1.2 Tests, insights and improvements ...... 20 7.2 Reading in different directions ...... 22 7.2.1 Purpose ...... 22 7.2.2 Tests, insights and improvements ...... 23

5 of 37

7.3 Instant collaboration...... 28 7.3.1 Purpose ...... 28 7.3.2 Tests, insights & improvements ...... 28 8 Discussion ...... 30 8.1 Reflection ...... 31 8.1.1 Workshop provided further insights ...... 32 8.2 Future work ...... 33 9 Conclusions...... 33 10 References ...... 35 11 Appendices ...... 36 11.1 Raw interview notes ...... 36 11.2 Consent form ...... 37

1 Introduction

1.1 Context Comics in all its different forms have a large following all across the world and it is a medium that is adaptable to all genres and cultures and it has a rich history. The market for comics had its rise during the late 20th century and has been spiralling downward during the start 21st century, especially for independent artists who are struggling to make a living off of it. The reason for the dwindling market is the rise of other media forms and their accessibility. TV-shows and movies are easily streamed for entertainment and have therefore invaded the market of the comic book. The larget corporations in the comic book world have adapted by televising or making cinematic adaptions of their comics and are therefore staying afloat.

The fact of the matter is that with the coming of the internet and the computer, comics have started inhabiting these digital spaces as well, but they have done little in terms of evolutions. VHS and DVDs evolved into streaming sites and shed its old skin whilst comic books are still being printed and their digital counterparts are basically scanned versions. This thesis aims to try and explore the opportunities of the digital space by making use of interaction design methods and try to reach conclusions on whether or not it can enhance the experience of reading comics in the digital space.

6 of 37

1.2 Aim The aim of this thesis is to contribute to the field of interaction design by specifically exploring the intersection between interaction design and digital comics. This is an area which could be explored more in terms of how we interact with the digital space and move through both it and the story. My hope is that this thesis could provide a better understanding of how or why different interactions work and if there is any point in exploring these opportunities more.

1.3 Delimitations This thesis aims to explore the intersection between interaction design and digital comics, therefore, the focus has not been to make an actually worked through or coherent story and emphasize has not been put on how well the art looks. The comic was developed strictly to be able to be used in the different explorative experiments. I have refrained from animating art, working with sound in comics due to the high number of examples that already exist. Certain interactions and experiments have not been documented here due to their likeness to existing comics which was found out during the process, they therefore do not contribute anything new to either community.

1.4 Research questions

This project started out in uncertainty, first it was leaning towards beinh an IxD design project aimed at researching and developing a single prototype that would be used for reading digital comics. When I started formulating my research questions I noticed that I was more inclined to tilt it more towards being an IxD material experimentation project. Rather than developing a single thing I wanted to conduct different experiments parallel to each other in order to attempt to shed light on how it worked and was received.

- How can interaction design methods be utilised to broaden our understanding of how interactions are connected to our experience of reading digital comics?

- What are the different qualities of the different interactions and what do they contribute/take away from the experience?

- How can my exploration and findings contribute to the interaction design and digital comics community?

7 of 37

2 Theory

When we think about comics today we tend to think about the Marvel or DC universes and different comic book superheroes, however, the scope of comics is much broader and envelops many different genres and styles. Comics have also been around for a lot longer than one might think, but how long depends on the definition of comic and what qualifies as a comic.

2.1 History of comics

In his book Understanding Comics (McCloud, 1994), Scott McCloud defines comics as “Juxtaposed pictorial and other images in deliberate sequence” and by applying this definition one could argue that comics have been around since we started painting on the walls of caves. What the majority of the populace would perceive as comics today, and what was made with the intent of it being a comic, started during the 18th century when the printing press made reading materials of all sorts more available for the general populace of the worlds civilized places. That being said, since the term comics and the definition came afterwards, some of the works from that era have been labelled as comics, by scholars in the field, afterwards. In Europe many have regarded Rodolphe Töpffer as the original maker of the comic book strip and in his book, Father of the comic strip: Rodolphe Töpffer (Kunzel, 2007) Kunzel explains how he Töpffer unconsciously progressed the medium. His ambition was to become a painter like his father but due to poor eyesight he instead invented purposeful story telling with sequential art, i.e picture and words together, telling a story. Most of these early works from him, would retell adventures that he and his friends had whilst hiking the alps in Switzerland. Due to the fact that sequential art has been around before this, McCloud (2000) implies that Töpffer, rather than being the father of the comic strip, is the father of the modern comic. With this brief history of the comic and its definition set, I would like to skip ahead to 1930s. Due to the rise in popularity of the comic strips, whether they portrayed stories with characters, were satirical in nature or autobiographical, were collected by publishers and put into books, and in doing so, inventing the term ‘comic book’ (Saraceni, 2003). These collection of comic strips gained considerable attention and opened up a new market for making comics, in 1938 the first masked hero appeared in Ace Comics, The Phantom. Many of the super heroes we know today came about between 1938-2000 and it was

8 of 37

also during this time that the world of comic books became its very own industry. With the development of other forms of media has had a lot of success the comic industry has suffered a downward spiral in from a capitalistic point of view (McCloud, 2007) and in order for larger corporation within it to survive they have had to branch out into many other mediums such as movies, books, games, clothes, etc (Gardner, 2012)

2.1.1 History of web comics The first comics to be solely shared through the internet came in the 1980s and the scene of web comics has been growing ever since. When the internet and computers became more of a common household thing towards the end of the 20th century and start of the 21st century (Comer, 2018), it gave people the resources and ability to self-publish their works and reach an audience without having to go through printing, publishers and distributions, the internet was a shortcut directly to the audience and underground web comics started taking off as a cultural phenomenon (Batinić, 2016). In his book Reinventing Comics, McCloud (2000) talks about the rise of the Digital Comics and its potential for reinventing the medium. Comics have existed in its own medium for centuries before the coming of the computer and the web and with its arrival it opens up the possibility to blend comics with technology and open up a whole new platter of research opportunities as well as mixing comics as a field with other fields. With the computer providing a multimedia approach to comics the 90’s and early 2000’s made a lot of use of this in order to reinvent the comic as a medium. A famous example is 1995’s CD-ROM Graphic Novel Sinkha, which used 3D- images, static and moving images, as well as sound and text, all in order to provide a type of immersion through multimedia that many considered were superior in other forms of media such as games, television and cinema (McCloud, 2000). Viewing comics through the lenses of multimedia can be problematic, but before going into detail about that, we have to talk about time, space and what makes a comic, a comic.

2.2 Between images: time & space In comics, there is usually a space between images so that you, as a reader, knows when one picture ends and the next one takes place, this place in between is called “the gutter”, although the term in not very flattering, it is where some of the most important aspects of a comic is and that is due to something we as humans unconsciously do every day, something called closure (McCloud, 1994). Closure is what our brain does all time when it fills in the blanks in everyday lives, an example of this is when we hear a noise and we picture what it is that is making that noise or when you see half of

9 of 37 something and your brain pictures the other half although it is hidden from you. McCloud describes closure like this in Reinventing comics:

“In our daily lives, we often commit closure, mentally completing that which is incomplete based on past experiences” and that is exactly what our brain is doing in the gutter between juxtaposed pictures, our brain fills in that blank. The sequential art in a comic is an exhibition of time, figure 1 shows how time has moved from the first frame to the second.

Figure 1. Advancement of time between frames

In the gutter, between pictures, is where comics thrive according to McCloud, this is where human imagination comes into play and what makes the experience of reading comics something unique for each person. When Multimedia blurs the line between comics and motion picture for instance, McCloud argues that if it is overdone, it could take away from the experience by forcing the reader to feel or picture something a certain way and we also tread into a realm where it stops being a comic and a hybrid between motion picture and comic. Before venturing into that grey-zone, one should ask themselves why they are doing so, the motion picture already does a greater job of showing a story all in motion, so one could argue that having motion in a comic is worse version of motion picture and trespasses on another field without a good cause. That does not mean that multimedia is all bad, the fact that comics exist in computers in ones and zeros is in itself multimedia and it opens up a plethora of opportunities. When something exists in a digital manner it allows for interesting experiments to be conducted and this is where the crossroads

10 of 37

between interaction design and comics can be made and something that is being discussed in both practices is the usage of space. When designing for the web, whether it is applications or websites it is important to keep the concept of digital space in mind. Two-dimensional information spaces can sometimes be a lot bigger than our window to that space (computer screen, tablet, phone, smart watch) which begs the question of how do we best navigate it? (Beard & Walker II, 1989) When comics made the transition from analogue to digital they started inhabiting these same spaces and are therefore prone to the same question. Before the transition to digital the comic only had the space of the page to work with and people have done interesting things with just that small space for centuries. An example of this is to work with bigger pictures at the top to set the scene for the smaller ones below, have a big picture behind smaller pictures to showcase a scene or to end pages with a cliff-hanger picture which teases what will happen once you turn the page. Different formats have played a role as well, wide pictures or tall pictures, you name it and comic book artists have most likely tried it (McCloud, 2000). More on this in section 2.3.1.

2.3 The infinite canvas The jump to digital provides new ways to think about space and McCloud coined the term the infinite canvas (McCloud, 2000) which in reality is the digital space. McCloud talks about how comics can virtually take any form or size in a digital environment and whilst that may be true, it also opens up for interaction design to experiment on how we interact with these different types of comics in the digital environment.

2.3.1 Constraints of the analogue comic Both before the coming of the digital and as well as after, comic book makers have experimented with ways to portray sequential art within the boundaries of the analogue comic book page (figure 2).

11 of 37

Figure 2. Batman, Detective Comics #876 (Snyder, 2011)

Some have even tried challenging the analogue pages constraints by having foldable elements on the page in order to unpack that particular space in an interesting way, a few such examples are the classic pop up artbooks that adds a 3d element to the pictures. One such artist that has made a name for himself in this business is Matthew Reinhart (figure 3).

12 of 37

Figure 3. Harry Potter pop-up art book (Reinhart, 2018)

3 Related work

3.1 Scott McCloud Scott McCloud was an outspoken and also early supporter of the digital comic and its possibilities. Whilst he has been making comics professionally since 1984 he is most famous now for his non-fiction books such as Understanding Comics (1994) and Reinventing Comics (2000), In the latter, he coined the controversial term Infinite Canvas (2.3). As somewhat of a pioneer in raising questions and starting debates regarding the fusion of comics and technology he is, for obvious reasons, heavily referenced in this thesis. However, other than starting discussions he has also contributed to the field by making comics and testing different interesting things out.

3.1.1 Scott McCloud’s My Obsessions with Chess (N.D) This is an autobiographical comic that McCloud made in 1998-1999. It was special from an interaction design standpoint seeing as it was an early implementation of both horizontal and vertical scrolling. The comic has an overview (figure 4) in which you can see how the comics zick zack’s

13 of 37

downwards, this shows how the user has the use both vertical and horizontal scrolling whilst interacting with the comic.

Figure 4. The white and black squares are the frames of the comic and the reader has to follow that path in order to read the story.

4 Methods

This thesis is of an exploratory nature rather than a product-centric interaction design project. Therefore, the methods I will be using and referring to will be in line with what this thesis aims to do. Explore the intersection between interaction design and digital comics.

14 of 37

4.1 Research through design Is a method first proposed by Zimmerman, Forlizzi, & Evenson (2007) and it is fitting for the type of work and exploration being conducted in this thesis because of its explorative nature. The method suggests that through designing artefacts of an exploratory nature, one could potentially identify new research/design opportunities or ways of improving on existing technologies (Zimmerman et al, 2007, pp. 5-6). A model presented by them showed how Interaction designers could feed back knowledge with the help of research through design (figure 4).

Figure 5. (Zimmerman et al, 2007, p. 6)

In order for this method to be useful Zimmerman et al (2007) provides us with 4 different lenses or criteria which should be applied to contributions to research through design projects.

Process: Since there is no guarantee that reproducing a process will produce the same results (Zimmerman et al, 2007, p. 7), emphasis is put on which and why methods were chosen, documentation of the process and description of details in order for the process to be reproduced by others. Invention: The invention put forth by the design research project must be a novelty to the area. Thorough research into existing literature should be made in order to clearly show how the invention differs from existing projects and how it advances/contributes the research community. Relevance: An interaction design research project following these guidelines should clearly show its relevance to the world. Therefore, it’s in the interest of the researcher to have a good understanding of the state of the real

15 of 37

world as well be able to clearly articulate their preferred state of the world (Zimmerman et al, 2007, pp. 7-8). Extensibility: If the knowledge gained through an interaction research project is going to be used by other in the field, the process and findings need to be well documented. These criteria fit my thesis because I was conducting research through design, however, since the focus was not put on developing a product, the method served as more of a general framework rather than something that was followed to the point.

4.2 Interaction-driven design Another method which is useful for this thesis, and perhaps more apparent than research through design, is interaction-driven design, which was proposed by Maeng, Lim & Lee in their paper Interaction-Driven Design: A New Approach for Interactive Product Development (Maeng et al, 2012). As an alternative to more traditional technological or user-centric research methods, interaction-driven design proposes that one could instead test specific interactive elements and have the results inform you of what next steps to take. In the different exploratory prototypes that will be presented in this thesis, they each have different interactive elements and this method helps me articulate the different qualities they provide in order to help me describe and improve on them. In the scope of my thesis, the interaction taking place is the navigation of the digital space when reading digital comics.

4.3 Sketching or prototyping

In their paper, The anatomy of Prototypes: Prototypes as Filter, Prototypes as Manifestations of Design Ideas (2008), Lim, Stolterman & Tenenberg talks about two fundamental aspects of the framework they are proposing: “1) prototypes are for traversing a design space, leading to the creation of meaningful knowledge about the final design as envisioned in the process of design and 2) Prototypes are purposefully formed manifestation of design ideas.” Whilst I, in this thesis will try to traverse a design space, create meaningful knowledge and design purposefully formed manifestation of design ideas, I do not intend to deliver a final design proposal. This is due to the fact that my thesis will attempt to provide knowledge within the cross-over area of interaction design and digital comics and in order to do so I will explore different ways to interact and generate a wider spectrum of knowledge, rather than try to further develop a single design idea. For this type of thesis, a more

16 of 37 appropriate term for the design work that I will be conducting is sketching. In his book Sketching user experiences: getting the design right and the right design. Bill Buxton (2010) talks about how the importance of sketching lies not in the result of the artefact you produce but rather in the activity. Sketching has historically, primarily been an activity using pen and paper, but Buxton tells us about how sketching can break through those boundaries and take on new forms, such as sculpting, building or digital forms involving software’s as tools (B, Buxton. 2010.). Not unlike Figure 5, where the research through design is supposed to feed the information back in order to help to open up the design space. Buxton’s idea with sketching follows the same principle (figure 6).

Figure 6. – Sketching cycle.

According to Buxton (2010), sketches are identifiable by different attributes, they should be quick, timely, Inexpensive, disposable, plentiful, have clear vocabulary as well as distinct gestures and minimal detail. Further, sketches are purposefully ambiguous, they should have an Appropriate degree of refinement and suggest and explore rather than confirm. The design work and sketches produced for this thesis has been done with these attributes in mind. Especially suggest and explore rather than confirm.

17 of 37

4.4 Sketching After I did my theory research and settled on sketching as way of working, I started ideation and looking into existing products. Since my exploration into this subject is centred around digital space and how to interact with it, I started out by trying to articulate what could be done. Unlike the analogue comic the digital space allows for opportunities in terms of: - Navigation. - Interactions. - Collaboration.

Because the experiments were focused on different areas I had to set up different ground rules for me to follow in order to make sure that the process would be efficient and effective.

Whilst ideation and sketching took place on paper first, the sketches made for testing were done digitally with software’s that I already had or that could easily be obtained by free trials. Sketches should not take more than 3-4 days to complete and have ready for testing. All sketches should be testable digitally in order to minimize physical contact due to the current pandemic.

5 Focus group

For this thesis and the experiments in it, I have used myself as user tester in many ways. However, since my methods are dependent on feedback in order to inform the next generation of sketches I also conducted user tests with the focus group in order to get other opinions and not only rely on my own closed loop of thoughts. Seeing as comics don’t necessarily discriminate against age or gender, my one criterion for the testers were that they would have an interest in comics and have previously been in contact with the world of digital comics. I managed to recruit 6 reoccurring user testers of various ages (between 25-35) and sexes for trying out my different sketches. All have an interest in comics and had previously been into contact with digital comics in one way or another.

Each user test was conducted by letting them test out the design and then listening to their thoughts on it as well as asking deliberately open questions in order to get them to start describing what they thought of the experience.

18 of 37

5.1 Ethical consideration The ethical considerations in this thesis follows the guidelines for ethical research conduct from Vetenskapsrådet (2017) and how to safely collect data from participants of the study. The interviews, observations, and tests were conducted under full anonymity and all participants were informed on what data would be used as well as its purpose.

6 User tests & workshop

All following experiments have been tested both by me as well as external testers in order to get a more nuanced feedback loop and help inform next steps to be taken in the experiment. A total of 20 sketches were made (including different iterations of the same designs) and in the design work section, my main findings are presented. When letting the testers try the sketches I made sure to discuss it with them and let them try to articulate their experience. After having conducted the final tests, I held a workshop with the testers in order to discuss main insights and the research questions in an order to help me define a proper conclusion.

7 Design work

In this section, the main part of this thesis and my design work is presented. After researching into existing digital comics, reading various different materials and ideating I found three main areas on which exploration and experimentation could be conducted. - Reading into the comic presents an idea of going into the digital space and which interactions (and their pros and cons) can be used for doing so. This experimentation and its sketches are present in 7.1 named entering into the digital space. - Reading in different directions presents another way of utilizing the vastness of the digital space and break free from the classic format of a comic. The experimentation and its sketches are presented in 7.2 named reading in different directions. - Instant collaboration presents how the digital space allows for instant feedback between creator and consumer and opens up for different types of collaborations. The experiment and its sketches and presented in 7.3 named instant collaboration.

19 of 37

Sketching and testing has been done by utilizing research through design (Zimmermann et al, 2007) as a general framework and Interactive driven design (Maeng et al, 2012) as a main method. Tests and insights propelled further iterations of the sketches and therefore guided my design work heavily.

7.1 Entering into the digital space

7.1.1 Purpose The main thought of this experiment is to read into a story and in this experiment, I was interested in: - Whether the reader got that sensation and if that is not the case, then what is the experience? - Does this change the way the testers think about a story? - Does it do anything to the immersive experience of reading a comic?

I got the idea for this experiment when I thought about what opportunities the digital space provides when compared to the analogue page. And an interesting idea that came from that ideation was the thought of reading into the comic as you progress through the story, as opposed to flipping the page and reading it from left to right, like one would an analogue comic book. The first iteration of this experiment was made using Adobe XD and containing pictures from a comic I have drawn myself using the iPad Pro and the Apple Pencil. In order to get the feeling of reading into the comic as shown in figure 7, I put a smaller version of the next picture in the middle of the page the person was currently at and made it clickable. When clicked it would become the bigger picture and a smaller version of the next page would appear in the middle of that one and so on.

Figure 7. Sketch of the digital space.

20 of 37

7.1.2 Tests, insights and improvements However, when testing this iteration of the sketch I did not get the feeling that I was reading into the comic, but rather I got the feeling that I just clicked and got the next page, like clicking through pictures in a photo album on Facebook. Whilst I do put value into my own thoughts regarding interactions in the field of digital comics I have made a point of not assuming anything before having the testers try it out and see what their thoughts were. The questions above were posed to the tester after I had them try out the sketch and they were not influenced by my own experience of trying out the sketch.

One person described it as “rather pointless” and explained it further by saying that “I don’t get the sensation of going into the comic, there is just a small picture in the middle, I feel as if it is in the way” and another one said that the interactions felt “snappy” and not very “fluid”. All six tester validated my own concerns regarding the sketch and when asked why they did not feel as if they were reading into the comic their answers varied. To sum up their answers, it seemed to be a combination between interactions and transitions. When they never say the smaller picture in the middle actually move to the front or that they moved into the screen towards that smaller picture, they did not get that experience. Another issue was with the interaction itself, one tester said that a simple click felt like “low hanging fruit” and that perhaps other means of interacting with the digital comic could provide different results.

These insights gather from the feedback from the testers helped me iterate on the sketch further. I identified two main pain points which were the interaction itself and the transition between pages, if these two could be improved upon the feeling of reading into a comic could perhaps be achieved and therefore produce findings to contribute to the field.

Feedback on the first sketch showed clearly that there was a lack of sensation of reading into the comic and with that, the whole thing seemed rather pointless. The fact may still be that the thing is pointless even after achieving this sensation, but there is no way to know unless we do it. For the second iteration I decided to change software for prototyping since the effect I desired was unattainable in the programs previously used (Adobe XD and Sketch) and decided to make it in Adobe Illustrator and make use of its vector graphics. With the change up of software, another way of interacting was introduced as well. In the previous iteration the smaller picture within the larger one was a clickable element and once clicked it brought that smaller picture to the front, but for the second one I decided to try it out on the iPad

21 of 37 instead and therefore introducing zooming with two fingers, rather than clicking. This made the interaction more fluid since you as a reader are in total control of how large the pictures are, going back and forth between them and it forces you to be engaged with the story since more work is required from the reader. The testers validated this as well and four of the testers in different ways expressed how they felt as if they got the sensation of going further into the digital space. Two testers proclaimed the no longer had the feeling of digital space moving towards them. (Figure 8).

Figure 8. Showing the zoom action.

Opinions were split on the navigation of the digital space between the testers. Three testers expressed that the interaction and sensation of going into the digital space helped make the experience more immersive. When asked as to why they thought so answers varied again. One tester simply thought it felt new and exciting, and apparently the action of zooming and having something smaller becoming bigger, sparked a curiosity for what would happen next, regardless of the narrative. The others said that the fact that you had full control of the digital space at all times, it helped keep them engaged like when they drove a car or played video games. The other three testers agreed they got the sensation of going into the comic but did not feel as if it provided anything in terms of improving the experience of reading. Instead, they felt as if it was a more bothersome way of reading a comic and therefore took away from the experience and how immersive it was. They missed having the overview and letting their “eyes dance across the page” as one described it. Whilst half the testers felt the sketch had potentially improved immersion via engagement, the other half said quite the opposite, engagement took away from immersion.

22 of 37

User testers were, however, unanimous when asked whether or not they thought this way of reading a comic improved upon the existing method. Whilst they expressed that it was an interesting experience they would not have wanted a whole comic book to be made this way. It did not feel as an improvement of the norm.

7.2 Reading in different directions

7.2.1 Purpose In this experiment I was interested in seeing what this type of interaction would do to the experience of reading a comic. Does it add or take away from the experience and what interactions helps improve on it?

This idea came to me whilst ideating about the chronological order in which we read a regular comic book. The traditional analogue comic can allow a story to go in different direction, but it is still being read in the same direction, left to right and flip the page to the left. What if a story branches out in different directions and the reader reads the comic in the way the story goes. The digital space allows for this type experimentation. Four different stories branch out from a starting point and the window (phone, computer or tablet screen) moves in the direction the story goes, depending on what branch one wants to read (figure 9).

23 of 37

Figure 9. Starting point and four branches with 4 different stories.

The sketches for the exploration was made using Sketch, Flinto, Framer and Adobe XD. Pictures were drawn in Procreate on the iPad Pro using the Apple Pencil. 7.2.2 Tests, insights and improvements

This sketch came in a few different iterations and were improved upon after receiving critique and feedback from the six user testers. The first one was made using the previously mentioned prototyping software’s and the first iteration was made by adding clickable transparent boxes on each of the four sides. When clicked the story would progress to side that the reader clicked.

24 of 37

Figure 10. First page.

When testing the first iteration it felt static and stale. Once again, I did not get the desired feeling of going in different directions and I didn’t feel as if I moved through a digital space, rather I got the feeling that different content appeared on my screen, depending on where I clicked. As with the previous experiment I felt it was important to have my thoughts and feelings validated or proved wrong by having the tester try it out and listen to their feedback.

The testers were unanimous in saying that the interactions were not obvious enough. After having explained how and where to press in order to move through the story, all tester quickly tried pressing other parts of the picture in order to see whether or not there were other clickable elements within the story. When learning that there were none, they expressed disappointment. All user testers confirmed my own thoughts regarding the static nature of the changing content and said that they did not get the feeling of moving through the digital space. The main insights from the first iteration was that transition are important to simulate moving through digital space, this would need to be tested further in the second iteration. Testers said that “clicking is a mundane form of interaction” and “perhaps another interactive way of navigating would add more to the experience”. Users enjoyed clickable elements and the digital space allows for such experiments.

The second sketch would try to take insights from the user tests of the first iteration into account. I put transition animations into the sketch so if the reader would click on the left side, the current picture would disappear to the right and the next one would enter from the left. The same applies to each of the directions the story could be read. It was my experience that the transitions in this case helped a lot with the feel of navigating the digital space in different directions. I also added more clickable elements in different pictures. Instead of making it clear there were none since they had expressed that they would have liked that I decided to incorporate it into this sketch, they could for instance click on a character standing far away in order to see the facial expression of the person, rather than having that be a whole image by itself in the story. I was a bit sceptical of this aspect since I thought that one should be careful which information/image should appear whenever a clickable element is clicked. If they are of great importance to the mood of the story they are at risk of being missed if the reader does not click on them and that could potentially take away from the experience of reading.

25 of 37

The user tests agreed that the transitions helped with the feeling of moving in different directions, one tester expressed that they were “done reading the left branch” and said that they were “heading back to the middle”. The testers all thought this did intrigue them seeing as they were curious of how the story would unfold in the different branches. Words such as “exciting” and “interesting” were being said regarding the reading experience. However, after reading the second branch, all tester expressed how troublesome it was to click their way back to the front, one person proposed a skip-to-start button and another asked if there were any way to get an overview of the comic and choose which frame to go to by themselves. Regarding the clickable elements the testers found them interesting and one described them as “hidden Easter eggs” of extra information which improved the experience. Whereas I had thought it could be a negative addition in case they missed any, it rather became apparent that the tester was intrigued by finding them and would click where they were hoping that there would be one. Insights from this iteration was that if clicking would be the means of interacting with this type of digital comic, then a convenient way of quickly navigating around the comic as a whole would be needed. Clickable elements within the story appeared to have, in this case, added an extra layer of enjoyment for the readers.

Another version of the second sketch was also made which would use scrolling instead of clicking, the Idea was for the reader to scroll in the direction of the branch of the story that they wanted to follow would go, I was interested in seeing how this type of interactive experience would differ from the clicking. I though it made for more fluid reading and more control in terms of going back and forth. The tests validated this as well, no one had any requests for a more convenient way of navigating the comic as a whole, as with the other iteration, instead the testers were content with scrolling in their own tempo. Since this sketch utilized scrolling instead of clicking no transitions of any sort were needed, one tester said that it was “easy going in the direction you wanted” and the others made similar comments. What was interesting in the scrolling sketch compared to the clicking sketch was that after trying out the scrolling one they said that it felt more as if they went in the direction of the branch rather than the content moving towards them. “I am going out to the right rather than pulling it towards me” (figure 11).

26 of 37

Figure 11. The space behind the screen.

Feedback from the second clicking iteration suggested a lack of “freely navigating the story” and how that took away from the experience in a negative way. I attempted to provide such a way by adding an overview page, separate form all the branches and in all pictures except for the first one I added a button with a minus in it (see figure 12) and once clicked it would take the reader to the overview page (see fig 13) where they could choose whatever picture in whatever branch they would like to jump to without having to go through all of them.

Figure 12. Button the left that takes you to the overview page

27 of 37

Figgure 13. Overview page

Testers reacted positively to the improvements of the sketch in terms of navigating it. However, they were verbal in how it does not present the same fluid interaction as the scrolling iteration and therefore falls short to that one when compared. The clicking sketch however, has the extra clicking elements which added an extra layer to the experience and the tester expressed that a sketch that made use of scrolling as a means of navigation and clickable elements for extra information would be an interesting experience. As for the main question, how does this type of comic and usage of digital space contribute to the experience of reading it. After having designed the interactions to make sense, the question could be posed, and the testers admitted it was an interesting take on digital comics, however when discussing it, they expressed that for this type of comic to make sense the story needs to fit the format. Not all stories can be applicable to this type of format but instead of having them be 4 different stories, we discussed how it could potentially be four different storylines which end up joining together again in a main story line. There are ways of applying this format to stories but in order for it to work, interactions need to make sense and not take away from the reading experience. Testing suggests that scrolling is the superior means for interaction so far.

28 of 37

7.3 Instant collaboration

7.3.1 Purpose As previously mentioned, digital comics was a good way for comic book makers to bypass the need for publishers and printing and reach their audience faster. What if the digital can help us reach our audience instantly and immediately get feedback on a comic or even allow for the reader to actively be a part of the creation of the comic by helping shape the way it is unfolding.

This means that because comics can inhabit the digital space, it can potentially reach its audience immediately and therefore open up for making comics of a collaborative nature. The audience can in a sense also become the maker by helping the writer/artist form the story.

7.3.2 Tests, insights & improvements For this sketch I have not actually built or designed anything, but I have used an existing collaborative online whiteboard called Miro to conduct this experiment. The set up for the first idea was that I made 2 accounts so that the person I would be collaborating with would not have to go through the hassle of creating their own user. After that I set up the whiteboard, invited the other person and explained the set up. For this first experiment I would draw a stick figure with an empty speech balloon and in the whiteboards chat function the collaborator would write what the stick figure was doing, depending on what the collaborator wrote I would draw what came to mind based on that and in that way ensure the continuation of the story. The continuation of the story does however depend on both people being present and active.

The collaborators used their computers and I drew the story on my iPad. The only person writing in the chat is the person using the computer and the words and I drew based on that. Short example in figure 14-15. The argument that this could be made in the world with two people drawing on a paper and talking could be made. However, I wanted the essence of what is a comic to stay, and that is the sense of closure, that we have to use our imagination to connect the dots and, in this case, surprise is an element as well. With real people talking, the story can be affected by the tone of the person talking or the look on their face. In this digital setting we still contain the elements of what makes a comic, interpreting the content by yourself.

29 of 37

Figure 14. iPad view Figure 15. Computer view

In discussing the experience with the testers, they proclaimed it was a fun activity and one of the said it was “very interesting to see what kind of picture would come out of what I wrote”. The function worked fine as a means of communication. However, all testers said that the experience quickly became dull due to the time it took to produce the drawing, simple as it was. Another tester said that they were hoping certain pictures would be drawn and tried to manipulate me into drawing what they wanted but ended up disappointed when it did not turn out the way they had expected. In the workshop we discussed this and the conclusion we reached was that when you take part of an already finished comic you go through it in your own pace and the reader does not put any stake in the how the story unfolds since they are not a part of making it. You just accept how the story unfold and then you decide on whether you like it or not, the reader does not proclaim any ownership in how it turns out. This is not the case when it comes to comics of a collaborative nature, since they are a part of the creating it opens up to feeling of “failure” and “responsibility” for how the story unfolds. Based on these two insights, lack of engagement through only writing what is being said and feeling like they were partly responsible for the comic I decided to experiment further by trying to make them feel more engaged and take on a more equal part of the responsibility for the story. This was done by instead of dividing the work in way that makes them write and me draw I split the workload 50/50 and made it so we both write and draw half the comic in response to what the other person did. For this further test I managed to borrow a second iPad with an apple pencil and made it so the testers would sit in different places in order to make sure they did not influence each other in other ways than through the collaborative digital comic.

30 of 37

Testers said that they felt more in control of the mood of the story since they drew the art themselves and it was therefore possible to show emotions in more apparent way. If the character they drew got angry they could draw an angry face fort instant. And even though they still had to wait for the other person drawing they felt that this collaborative comic was less dull since they themselves also got to partake. However, one of the user testers did not agree but proclaimed this was due to the fact the they did not enjoy drawing very much. Overall, the experience was described as more engaging and also, they felt more in control and more of a collaborator. When discussing this experiment, they said it would be interesting to have it on a larger stage, what if you could collaborate like this in way and engage like this with your favourite comic makers and comic book characters for instance. The time is the issue though and the conclusion we reached was that in order for this to be used, we would have to step away from instant collaboration and just do it as a form of collaboration.

8 Discussion

The main goal of this thesis has been to explore how interaction design methods can be applied to digital comics and the opportunities they present. Throughout the continuous testing of my sketches I made sure to pay attention to the four different lenses put forth in Research through design (Zimmermann et al, 2007). Process, invention, relevance and extensibility. There is no saying that reproducing these experiments in similar forms would provide the same conclusion reached in this thesis (see conclusion section), I made sure to document the process and ground my methods, Interaction-driven design (Maeng et al, 2012) and sketching (Buxton, 2010), in the relevance and correlation they have to an exploratory type of thesis. I felt invention became more apparent both when I conducted research and started sketching. I noticed many examples of the things I wanted to explore and experiment with had be done, it became important to find areas of exploration that were my own so as to not piggy back on other ideas. The relevance the thesis and the fields they explore is to contribute with knowledge of how we interact with digital comics, what are the up and downsides of certain interactions and what does it do to the experience of reading a digital comic. Since the coming of the internet and since comics started inhabiting digital space, most comics have not evolved beyond the analogue comic (Batinić, 2016). Many keep the same format as their physical counterpart, the relevance of this thesis is to provide insight into what different types of interactions do to the experience of reading digital comics. This thesis is supposed to provide the extensibility aspect of Zimmermann et al (2007)’s framework.

31 of 37

The work conducted for this thesis started with desk research to gather articles, paper, books and existing forms of comics in order to get an overview of the field of digital comics. The primary research consisted of reading said books, papers and articles help find my design opportunities as an interaction designer within this vast and broad field. After having identified areas which could be explored and experimented on, I started sketching out ideas on paper and considering important factors, i.e. time frame, how the state of the world would impact my process (social distancing), feasibility, potential software’s etc. In this phase, sketching in software started and the first step was making a comic which could be used for the various sketches that would be produced and at this stage I started finding relevant user testers, by relevant I mean that the criterion was for them to have an existing interest in digital comics. Sketching as a method, rather than prototyping, was decided after the completion of the simple comic, this is due to the fact that sketching fits in well with interactive-driven design (Maeng et al, 2012) whereas I would conduct several solitary experiments that tested out specific interactions with the digital space that the comics inhabit.

The sketches were made and first tested by me, I documented my experience and insights and conducted user tests in order to get a broader sense of the experience and gather other experiences of it. I find it is easy to get caught up in one’s own thoughts and ideas and therefore it can be difficult to steer away from that closed loop of thoughts unless the matter is discussed with other people. After each test I would discuss the sketch and interactions with the person testing them and I made a point of asking open question and get the conversation going rather than having a set questionnaire. This was important because I wanted to hear how the tester expressed their experience and have them paint me a verbal picture of how they thought it was. This would in turn help me describe the different feelings/experience that the isolated interactions produced. The discussions also helped me pinpoint constructive insights which in turn led to new sketches which took the testers feedback into account. At the end of this project I gathered the user testers and discussed the sketches and the digital space and documented it so as to have material to look back at when writing out the thesis.

8.1 Reflection

I have thoroughly enjoyed working with interaction driven design (Maeng et al, 2012) and to work with isolated experiments that try out specific things.

32 of 37

However, the most major issue, for me, when working in such a way in combination with an explorative project is to know when to stop. Since there are no end products in sight, only a deadline for the thesis work, it is important to put up an end point to when the design work is done. I deliberately left my work plan quite open in order to have the design evolve as the project progressed, but looking back, a clearer project plan for when the designs are done could have proved useful for the project.

There are necessarily no clear ends to what can be tested although there are limitations to what can be done (i.e. technological, timewise etc.). Having user testers has an upside in terms of discussing the work and getting feedback to help open up the design space but it is also time consuming to organize user tests. Especially with this type of projects where there are many things that needs testing (different sketches as well as iterations of them). For anyone attempting this type of project, keeping the process open is suggested but lay down a clear plan for when to stop designing and chose user testers that are not only relevant but also available.

Another issue that arose is that when conducting exploration in digital comics when also having an interest in producing art can prove problematic. It is important to not put the focus too much on drawing the pictures for the comic. In this project they started out intricate and later dropped a lot in quality due to the realization that it would be far too time consuming to have that type of ambition regarding the art.

8.1.1 Workshop provided further insights As a finish to the design work phase of the thesis I gather the user testers for a finishing discussion regarding the main research questions (see conclusion in part 9). One of the main topics that we discussed during this session was also why we thought the format of the comic had not undergone much change after its entry into digital spaces and in that discussion, we took it back to the essence of what makes a comic book a comic. As previously mentioned in part 2.2, comics is not only about space it is also about time. Time passes between juxtaposed sequential art and our brains perform closure (McCloud, 1994) as to what happens in the gutters between images. The experiences put forth in this thesis has explored interacting with the digital space but has been lacking in expressing the temporality that exists within comics. These two ingredients are arguably the building blocks of comics and whilst this thesis did not focus on that aspect, it focused on the experience of reading digital comics and should therefore have been taking into consideration more. None of the sketches had any sorts of gutters, instead they all utilized full page views. The only temporality that were apparent was the Instant collaboration exploration.

33 of 37

8.2 Future work

Going forward I would have liked to consider the temporality in comics more and the phenomenon of closure that was explained in section 2.2. combining the findings in this thesis regarding interactions with a more classical format of comics which makes use of gutters would have been an interesting next step in order to see whether or not it is applicable.

9 Conclusions

The research questions posed in the beginning of this thesis were - How can my exploration and findings contribute to the interaction design and digital comics community?

- And through the design process and workshop with the user testers, certain conclusions were reached.

- How can interaction design methods be utilised to broaden our understanding of how interactions are connected to our experience of reading digital comics?

Having a methodological approach to designing interactions for digital comics proved useful in gathering qualitative data on how different interactions affected the experience of reading digital comics. In the three different areas that were explored in this thesis, entering the digital space (7.1), reading in different directions (7.2) and instant collaboration (7.3) user tester were asked to individually articulate their experiences after testing it and also, we discussed it in the workshop when all tests were concluded. By utilising research through design (Zimmermann et al, 2007) and interaction driven design (Maeng et al, 2012) I was provided with a framework that, when followed, helped me gain valuable insights into how different interactions produced different experiences. Since comics

34 of 37 inhabit digital spaces, this thesis propose that much like any other interactive digital media has UX approaches, digital comics should take this into consideration as well. The format of comics has not changed much when it made its way into digital spaces, many comics still conform to the same formats as its analogue counterparts and are more or less scans of a physical version. This could be a testament to an already good format not needing change or a lack of exploration into the field, this thesis takes no stance regarding that, however, this thesis concludes that interaction design methods are applicable for designing interactive digital comics and depending on which means of interactions are chosen for the comic, it can also improve the experience (see 9.2) of reading it.

What are the different qualities of the different interactions and what do they contribute/take away from the experience?

The conclusion reached in this thesis suggests that in the different experiments where the testers was reading a comic and not making (as in the collaboration exploration) scrolling or zooming, i.e. hand gestures proved to be the interactions that made for the best reading experience. The testers in the focus group thought that when using your hands and gestures (whether on the mousepad, tablet or phone) provided them with more control over the size and pace of reading which opened up for a more personalized way of reading. In the workshop one of the user testers made the comparison to when scrolling the feed of social media, the fact that you can scroll easily and go back forth and read or skip things at your own pace is partly why we easily get stuck doing it. It was described as the more intuitive way of interacting and furthermore, it was the interaction that provided the best experience of navigating the digital space that the comic inhabited.

How can my exploration and findings contribute to the interaction design and digital comics community?

This thesis can prove useful to the digital comics community by shedding light on how different interactions affect the experience of reading digital comics and therefore help when choosing methods of interacting for comic book makers. It also contributes by testing out different uses of the digital space and tries to break the constraints of the physical comic book format which is also the norm for digital comics as well. By doing so, I hope to inspire future works to go further and play more with the multimedia possibilities of the digital and that my process in this thesis can help steer people away from unnecessary extra work and potential pitfalls. The comic industry is big, both

35 of 37

in term of companies in it, private publishers and an enormous underground scene. Comics, storytelling, drawing and sketching are areas that are closely connected to design. Therefore, this thesis hopes to contribute to interaction design practice by incorporating the world of digital comics to it and show that interactions design as a practice is applicable within it as well.

10 References

Batinić, J. (2016). “Enhanced Webcomics”: An Exploration of the Hybrid Form of Comics on the Digital Medium. doi.org/10.1017/9781316759981.035

Beard, V. D., & Walker II, Q. J. (1989). Navigational Techniques to Improve the Display of Large Two-Dimensional Spaces. Pp. 1-12 Buxton, B. (2010). Sketching user experiences: getting the design right and the right design. Morgan Kaufmann. Pp. 105-141 Comer, E, D. (2018) The internet Book: Everything You Need to Know about Computer Networking and How the Internet Works. CRC Press LLC.

Gardner, J (2012) Projections: Comics and the History of Twenty-First- Century Storytelling. doi:10.1353/lit.2013.0044.

Kunzle, D. (2007). Father of the comic strip: Rodolphe Töpffer. Jackson: University Press of Mississippi. doi.org/10.1080/17460654.2011.571052

Lim, Y., Stolterman, E., & Tenenberg, J. (2008). The anatomy of prototypes. ACM Transactions on Computer-Human Interaction. pp. 1–27. doi.org/10.1145/1375761.1375762

Maeng, S., Lim, Y., & Lee, K. (2012). Interaction-driven design. Proceedings of the Designing Interactive Systems Conference on. doi.org/10.1145/2317956.2318022

McCloud, S. (1994). Understanding comics: [the invisible art]. New York: HarperPerennial.

McCloud, S. (2000). Reinventing Comics. New York, N.Y: Paradox Press.

36 of 37

McCloud, S (N.D). Scott McCloud. Retrieved 2020 May 26 from http://scottmccloud.com/

Reinhart, Matthew. (n.d) Matthew Reinhart. Harry Potter: A Pop-Up Guide to Hogwarts. Retrieved 2020 May 15 from http://www.matthewreinhart.com/harry-potter-a-pop-up-guide-to- hogwarts/

Reinhart, Matthew. (2018) Harry Potter: A Pop-Up Guide to Hogwarts. (1st edition) Insight edition.

Saraceni, D. (2003) Language of Comics. Routledge. https://doi.org/10.1177/0957926505056677

Patrito, Marco. (n.d) Sinkha. Retrieved 2020, May 15 from https://www.sinkha.com/home_e.htm

Snyder, S. (2011). Detective Comics [Batman]. DC Comics

Swedish Research Council. (2017). Good research practice. Stockholm: Vetenskapsrådet. Retrieved May 15, 2020 from https://www.vr.se/download/18.5639980c162791bbfe697882/1555334908 942/Good-Research-Practice_VR_2017.pdf

Zimmerman, J., Forlizzi, J., & Evenson, S. (2007). Research through design as a method for interaction design research in HCI. (January), 493. doi.org/10.1145/1240624.1240704

11 Appendices

11.1 Raw interview notes

https://rawnotesandpictures.wordpress.com/2020/08/23/pictures-from- digital-comic/

https://rawnotesandpictures.wordpress.com/2020/08/23/raw-notes/

37 of 37

11.2 Consent form