Usage and Tips - adaptlearning/adapt-contrib-narrative GitHub Wiki

##Usage
Narrative is ideal for providing information relating to:

• a process, procedure or diagram
• a range of products
• the views of a group of individuals
• a timeline

As the mobile fall-back for Hot Graphic, it can be used in the same situations.

###Layouts Spanned (full width).

###Mobile fall-back On mobile it resizes to a single width span. Remember to fill out the title field for each stage—this won’t make much difference to the desktop display but it’s crucial for mobile.

###Accessibility
Remember to include alt text for all your images.

##Tips

Here are some techniques for getting the most from Narrative:

• Take advantage of the linear navigation – use the Narrative component when you want learners to find out information in a particular order.

• Try using this component to break down a complex process. Learners can work through the stages at their own pace, and in manageable chunks that give the content space to sink in. We can show sections of a diagram to add context to this too.

• Want to immerse your learners in a case study? Narratives are perfect for this. Let them walk through a character’s story step by step, using both images and text to flesh out the scenario.

• Adding question components before or after can turn a quick case study into an interactive scenario.

• You can have multiple stages—we recommend a maximum of six, as more can lose the interest of learners.

• Try not to use this component right next to a Hot Graphic component, as Narrative is its standard mobile fall-back.

• Keep in the mind the level of detail you plan to show in the Narrative images. When viewed on a smartphone the image size is quite small, making overly complex images difficult to make out. Keep the images clean and simple if you can.

[To Do: Add information about repositioning the strapline.]