Step Graphics

E-Learning Challenge #36: Challenge | Recap

Step graphics are interactive explanations that make it easy for learners to sequentially walk through a process, workflow, procedure, or related items. They can be used for all types of learning interactions, from procedural training to interactive storytelling.

Navigating Step Graphics

Using numeric pagination, step graphics are great for chunking complex information into step-by-step explanations that visually organize each step of a process.

One of my favorite step graphic examples comes from the Washington Post.

Step Graphic: Why short guys can dunk

Simple Pagination

Step graphics can use simple previous and next buttons to move learners through each step like this stepper from Jornal de Notícias:

Step Graphic: Reconstructing the Death of Berto Maluco

Timeline Pagination

Timelines can also be used to step learners through a series of sequential events like this stepper from El País:

Step Graphic: Plane crash in the Atlantic

Challenge of the Week

This week your challenge is to build a step graphic to tell a story or communicate a process. Choose any topic you like and see if you can find creative ways to present the step graphic navigation.

Step Graphics Examples

Here are some more examples of step graphics.

Last Week’s Challenge

Before you step up to week’s challenge, take a look at what your fellow community members keep in their e-learning toolkits:

New to E-Learning Challenges:

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. We’ll feature your work and provide feedback if you request it.

Wishing you a step-tastic week, E-Learning Heroes!

Dianne Hope
Ashley Chiasson

The related blog post: Dan - Beware. You will definitely need Step 3. Or...Bruce has a wonderful interaction for how to administer pills, so you can just sedate Dewie :P We have 1 of 3 that maaaay consider going easy on us if we tried to bathe him. Our dog will endure the humiliation of a bath ( because he knows there's a fancy bow in it for him ( Cary - your second attempt made me wish I had a similar step-by-step guide for getting our lawn mower started after a long (cold) winter, but alas, our neighbour was kind enough to tackle the forest in front of our home. Crisis averted :P Dana - This is especially relevant to me as I will be d... Expand

Dianne Hope

Thanks Ashley - in contrast to the heavy topic content in my entry (sorry about the disappointment!) I loved the humorous approach in your How to Bathe a Cat entry. Coming up with ideas is the hardest part sometimes - especially when the brief says "choose any topic you like"... I've finished my blog post on The SCARF Model - and added some extra design elements to my original entry. I added URL hyperlinks to the last slide, but they don't seem to have worked - I've checked them a few times and they seem to be set up correctly. Does anyone have any suggestions as to why this would be? They're added to a shape that had a "hidden" state until you click on "Resources". Also, I tried to work out the trigger to make change the state back to hidden when you click on "Resources" again... Expand

Charles Hamper
David Anderson
Charles Hamper
Jackie Van Nice

Oh my goodness! So much has been going on here this week. Love the boating lesson, Charles. Mary needs to win something for topic originality. Dianne - your video played just fine for me in Chrome. Beautiful piece! Funny slide, Dana. :) David - I think it's great that everyone gets to choose their own content. It allows for so much more creativity. Most of us don't get to choose the content in our jobs, so it's freeing to do it here. My entry this week was inspired by quite a few instances of people asking how to get non-confidential portfolio pieces or more work or more experience or get farther in their careers as e-learning designers last week. I kept going back to a familiar topic every time and finally just turned it into a step graphic. Here it is!: http://www.jackieva... Expand

Daniel Sweigert
Daniel Sweigert
Gemma Henderson
Jackie Van Nice
Ashley Chiasson