E-Learning Heroes - Advice and ideas from the Articulate Community

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?

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!

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

I'm thinking Pie Menu. Sims style pie menu.

http://simswiki.info/images/9/96/Example_Pie_Menu.JPG

http://guidesmedia.ign.com/guides/23322/images/590/sims3ep1-44.jpg

To be clear, what I meant by arrow buttons was the arrow buttons on the user's computer keyboard.

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!

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 - 

Do check out Dragon's Lair. It's classic Don Bluth art in a well executed narrative. Space Ace also ate a few of my paper route quarters. Don Bluth, same pattern.

Hi Kevin,

I really like the illusion of pages turning, and especially (not sure where I saw this) the edge of the page turning up when you hover on it.

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.

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!

Thanks Alexandros, 

Yep, looking forward to a night of diving in. Just got the first script from the client today.

I see LOTS of time at the drawing table over the weekend.

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.

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:

http://www.youtube.com/watch?v=lJGtXuCmZBM

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:

http://www.youtube.com/watch?annotation_id=annotation_5626&feature=iv&src_vid=lJGtXuCmZBM&v=LV-RvzXGH2Y

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

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)

Sounds like a great project ! 

Could you introduce "risk" - they select "low risk" or "high risk - high reward" options to move around?

Bruce

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.

Hey Kevin,

Have you ever heard of 'Motion Comics' - http://marvel.com/motion_comics

It is like a regular comic except the panels are all slightly animated.

-Eric

Yes Eric, love that style design. Phase II of this project is to go mobile and I'll probably use Motion Artist by SmithMIcro to present the story in its entirety.

What is it that you want interactive? Do you want them to interact with the content? Or do you want them to have an interactive way to move around the comic?

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. 

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!

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.

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.

That's a neat idea, Ryan. Hadn't thought of actually watching others play in that context before. I can't count the hours I've played games myself but being "in" the game is different than observing the behaviors and actions of others by watching them. Interesting.

Hi Kevin,

Have you seen this:

http://www.youtube.com/watch?v=kvNfmr6oUJ0

Making of from SXSW:

http://www.youtube.com/watch?v=wP9p08LrZCo

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

madefire.com

Brave Interactive Comic

Heroes Duty Interactive Comic

Upgrade Soul

Re:Active

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:

NeoMad

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.

habitheroes.com

Hope this helps,

db

Hey Daniel! Great list!

Thanks for all these. I'm familiar with a few of them. "Bottom of the Ninth" is probably my favorite (until I look at the others you shared), and following that style a bit. We're not doing any animations but we are incorporating animatic movement such as fading in and fading out poses and expressions from one static image to another.

Some of the early testing is proving very successful!

On a side note: Just received confirmation from the client that I can share this as a case study and development process along the way as the final piece will be open to the public. Look for a new article on my blog next week!

Kevin,

I don't have any suggestions as of yet as most of what I could think of has already been covered by others. However, I just wanted to say that I'm SO excited for you! This is going to be the COOLEST project! Excited to see how it shapes up. 

Keepin' the joy,

Patti

Hey all, 

Here's one of the concept slide-out panels I'm considering for the serious comic > demo

And here's a write up about our recent character development process > http://www.learnnuggets.com/2013/02/serious-comic-character-development/