Scenario-driven Interactive Graphic Novel style elearning

Jan 17, 2013

Hey all,

I'm embarking on the project of a lifetime...well, my lifetime anyway. As the title suggests I'm building an interactive graphic novel. While there are many tools available to build such a thing, my goal is to completely build it in Storyline.

The entire course will be hand-drawn to include the overall player and navigational elements. I have several ideas sketched out on how I may approach the player, but I'm looking for ideas for player navigation. This will be running directly off a website so no concern about SCORM or an LMS as it's an informative/awareness course than tracking compliance. We're going to build a companion for the iPad but I'll be building that in a different tool.

So, let the ideas flow! Forget about the NEXT button. Forget about anything you know about traditional elearning navigation. How would you approach a design if you were navigating through a graphic novel style scenario?

46 Replies
Brendan Strong

Depending on your content, something like the old FIghting Fantasy/Choose your own adventure could be an interesting approach, to let people jump from one point to another, based on their choices. 

Perhaps I've not gone lateral enough. In effect, you are talking a branching/scenario-based content. However, you could dress it up as a specific choice the person or character *has* to make, as occurred in those old books.  For extra randomness, add in an automatic dice roller :-P

Hope this might spark something for you. Best of luck, it sounds like  a dream project,  but with lots of pressure!

Kevin Thorn

Thanks guys!

I should have been more clear. It will be scenario-driven but not branching. Think of reading a traditional graphic novel story. One page after the other. Within the pages are different scenes/scenarios and even stories within the story. In it's simplest format, it will read linear.

However, some of the scenes will have additional interactive elements that may branch out, while others will have options for discovery. Yet, it's still a forward straight-line progression. 

Sorry Daniel, I've not played Dragon's Lair before so not familiar but it sounds similar to Steve's pie menu example where the buttons are images of the characters. 

Just trying to think of something different than the traditional Next or Continue navigation. I like the idea of an Arrow to cue forward progression, though. I did test two vertical bars the height of the player on each side of the stage with a small chevron. Similar to how a Kindle reads or photo gallery advances. Might explore that a bit more.

Thanks for stirring some dead brain cells!

Paul Brennan

Michael Hernandez said:

Have you ever seen or played Dragon's Lair?  Maybe like that you can have the users click a character (or an arrow button) and then it will branch them through the scenario...

Much respect for citing 'Dragon's Lair'. I gave most of my youth to completing that game.  If anyone's tried the tablet version, it suggests that a similar control scheme would work well if you wanted to do this for mobile.  I'd also suggest you look at Telltale's Walking Dead as a brilliant way to use the graphic novel approach. 

Kevin Thorn

Just downloaded Dragon's Lair and Walking Dead to get some ideas. Thanks! 

If you've not seen NARR8 yet, it's a very interactive book/comic book reader. I'm getting a lot of terrific navigational and interactive ideas from it. 

@Judith, I like that effect too, but client specifically said not the page curl thing.

Alexandros Anoyatis

Kevin, having just finished the Walking Dead on the iPad, I am just itching to find an excuse to do something similar in Storyline...

Even though it's not linear per se, I think you will love it, and I can see many ways in which you could achieve a similar enough style with Storyline if you want to.

Good luck with your project!

Nancy Woinoski

I'm wondering if you could hide the navigation in each page so that the user has to explore just a bit to find it - for example, they have to click on a door, cabinet, window, key or whatever in the background to move forward. If you take a look at Machinarium or Tiny Bang Story (iPad games) you will see what I mean.

I am so jealous by the way.

Jill McNair

Hi Kevin,

What an awesome project!  Here are 2 TED Talks about interactive books for the iPad that might provide some inspiration!

Using technology to enable dreaming:

This TED talk inspired me to buy this one for my daughter - it's very cool.  I especially like the menu.  Even though your book is linear, you may be able to use an idea like this to link to the chapters or to other/related activities and content.

The Next Generation of Digital Book:

And like Nancy, I'm jealous Let me know if you need any help

Colin Eagles

This is super "inside the box" - but if it's linear (and they aren't clicking on the page for other reasons) what about just doing "click anywhere on the right page to continue (and left page to go back)?"  You could still have a flipped page transition if you're going for the illusion of a physical book.

Sometimes simple is elegant. (maybe)

Kevin Thorn

These are great ideas! From Nancy's idea of clicking objects to discover new content or Jill's link of advancing to the 'magic-inspired' Khoya book. Collin, your idea reminds me not to overt think this for the sake of navigation as the simplest may be the best in the end. And Bruce, while I like that approach, this project doesn't allow much room for branching to the respect of risk, but there is an opportunity to choose either scenario to begin (3 in all).

I played/read/interacted with several books/games in the last two days. The one that jumps out to me is how the Walking Dead allows the reader to create the story by asking questions. Even though there are multiple paths to choose by which question is chosen (chapters/sections), the reader is still going in a linear direction through the story.

These types of interactive learning are seen quite often today on iPads and tablets, but not seen very much in elearning. I believe there's a very close parallel relationship not only to learning, but also in user experience design. This first stab of this project is for desktop so trying to carry over some of those experiences from iPad-esque storytelling to desktop elearning.

For your enjoyment, here's a concept sketch from my artist of one of the possible background scenes.

Kevin Thorn

Hey Tom,

Both. Interacting with the content is the easy part. Along the way during the story there will be opportunities to discover and learn more about the content.

The overall navigation reading between scenes, panels within scenes, and overall interface is what I'm working toward that's unconventional yet intuitive. 

Ryan Martin

Interesting. This is an area I'm going to be exploring in 2013 (and beyond).

Don't know if I'll call them graphic novels, but this concept needs to be explored and experimented with more often.

We recently converted Broken Co-worker into an illustrated version, and the development process was insanely smooth. I was exploring the concept further (away from video)- and experimenting with delegating to an illustrator. I was happy with the results but wouldn't mind more feedback.

I think Storyline is an excellent tool for storytellers and is under marketed in that area (hint hint). The iPad version of Broken Co-worker was just me mimicking comixology. It was quite easy (I knew Storyline could do it).

I see big time comic producers (Marvel artists and writers etc.) using PDF to publish their independent web comics ... I shake my head and think about reaching out to them-let them know of Storyline. But I'm busy, so I don't :(

Anyways. I'm pretty passionate about this direction and am excited for your project Kevin!

Do document and share your journey!

Ryan Martin

Also. My tip:

To save time. Instead of going through video games yourself. Just watch a gamer go through a game on YouTube. A lot of gamers record their screen and walk through levels or whole games.

I'm a nerd. So I watch this. And when I see something I like, I take a screen shots and paste it into storyline. I've mocked up whole "courses" this way. Built with video game screen shots.

Great idea juice.

Note: this is more fun when popcorn and beer is involved.

Kevin Thorn

Hey Ryan!

Yeah, I don't know if I'd call them 'graphic novels' either because in truth this project really isn't. It can be summarized as an "interactive story about a serious topic present in a graphic novel style of artwork." Maybe we call them a SIC - Serious Interactive Comic

Honestly, Broken Co-Worker was/is an inspiration for this project. So thank you! We'll probably build out an iPad/tablet version but thinking on using ComicComposer by Aquafadas or MotionArtist by SmithMicro. Not sure yet though as it depends on how much fluidity we can make the navigation using Storyline.

The added challenge with this is that is also has to be Section 508 compliant so I've got to build in a way to include all the transcript for a screen reader without distracting from the pace and flow of the story. Tinkering with a couple ideas, but haven't quite figured out the best way yet.

Daniel Burwen

Hi Kevin,

Have you seen this:

Making of from SXSW:

And many others you may be interested in, many of which were influenced by the above:

Brave Interactive Comic

Heroes Duty Interactive Comic

Upgrade Soul


Bottom of the Ninth

And the latest from Stu Campbell, who kinda started this whole genre exploration in Flash with Nawlz, back before the iPad:


Also, this just shipped from Disney, created using Flash and Air, so thats now an option as well as the other custom tools that are out there.

Hope this helps,


This discussion is closed. You can start a new discussion or contact Articulate Support.