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!

David Anderson
Daniel Sweigert