August 14, 2016

ELH Challenge 140: Slide Transitions and Back Navigation

For this week's ELH Challenge (ADDIE model) I wanted to make something short. Therefore, highly interactive branching scenarios were out of scope, as well as anything that would require custom writing (as you can see by the frequency of my blogging, I'm not exactly a fan of writing in my spare time). Therefore, I settled on this demo which describes ADDIE phases and touches upon their possible combinations/order.

Since my submission was relatively straightforward (no variables here!), in this post I would like to talk about one of the aspects that is probably very easily missed - back navigation (what happens when the learner wants to go back). In the context of this challenge, I will focus specifically on slide transitions and the impact of back navigation on my design choices for this ELH Challenge.

While most of the time back navigation is straightforward, in certain cases, particularly if you're tailoring animations and slide transitions to make your course look good while the learner progresses towards the end, overlooking back navigation may be detrimental to the experience you designed. For instance, let's review the slide transitions in my submission:


As you will notice, when we move from the title slide ("ADDIE") to the "Analyze" slide, we zoom into it. The slides for the other phases (Design, Develop, etc.) use "Cover: From Left" transition instead. My logic behind this choice was to create a feeling that we are "zooming" (= looking closer) into the ADDIE abbreviation and then move from letter to letter to explore their meaning. This is why the first slide use "zooming", while the other slides use "Cover" (more on "why Cover and not something else?" later).

In the example above you will also notice, that if we go to slide "Design" and then navigate back, the slide "Analyze" will use a different transition. Since I was trying to create a feeling of moving between letters, I wanted to avoid this: 


This is not disastrous, of course, but it does contradict the idea I am trying to communicate and is quite jarring.

To ensure smooth back navigation, I added a duplicated "Analyze" slide and adjusted the navigation tied to the player buttons:

Better user experience but more maintenance


As you can see, the only way to get to slide 1.2 is from the title screen. All other navigation paths include slide 1.3. (which is an exact duplicate of slide 1.2 but with a different transition animation).

This might not be the best solution for the courses where you would need to update the course content very often (as you will need to make corrections in both copies of the slide), but for a stable content this might be a good workaround which would not require too many triggers/conditions or animation paths.

As mentioned before, I should note the reasoning behind the "Cover" transition for other slides. Usually, to create an illusion of movement or uninterrupted flow between slides, I would recommend using "Push" transition, particularly if you're not allowing back navigation. However, look at what happens if I use "Push" transition in this case (remember, we want to feel that we're moving from left to right of the "ADDIE" abbreviation):



As you can see, this presents two issues. Firstly, the off-slide parts of the letters are cut-off, creating a rather ugly transition effect. Of course, this could be fixed by creating a different design, for example, by placing the letters so that they do not bleed off the left or the right edge of the screen. However, there is a second issue. When you click "Next", the slides are moving to the right, which is also the the direction that the "Next" button is indicating. When you click "Previous", you subconsciously expect that the previous slide will slide into the frame from the left slide, pushing the currently displayed side to the right. However, this doesn't happen. Instead, when you click "Previous", you see the same animation as if you were be navigating forward. I found this highly confusing and I'm confused by my own module, that's usually a sign that I need a different design solution! 

With this in mind, after trying different combinations of transitions, I settled with "Cover", as it seemed to be the least confusing of all. Of course, there is a chance to create an amazing transition with the help of animation paths and other effects, but this will be my exploration opportunity for the next challenge.

Do you know a better way or have seen examples with great experience for back navigation? Drop me a line in the comments (or Twitter - @GamayunTraining).

No comments:

Post a Comment