I use tabs a lot in my e-Learning design. They’re a great way to chunk related content and keep learners focused without them needing to constantly click on ‘continue’ or ‘next’ buttons. Mostly my tabbed interaction designs follow a standard format where you just click on each tab to reveal information. I have experimented with adding pretty funky animations, but nothing as complex as this design before.
This design started off with me experimenting with using a slider to highlight and select the correct answer to a question. I generally try to let you know where I drew my inspiration for my design from, but for the life of me I can’t remember for this one!
Once I had settled on the folder image, I then realised that including multiple folder tabs might be a good idea – so this design didn’t originally start off as a tabbed interaction.
Once I added the tabs, I initially stuck with the usual format of a question slide where, after submitting your answer selection and being taken to the ‘correct’ or ‘incorrect’ slide layer, you then click on a ‘continue’ button to move to the next question – so my design moved you to the next question, which was the next tab. I could have stuck with this navigation, but challenged myself to bring the navigation more strictly in line with a tabbed interaction – not that I didn’t feel the navigation was intuitive, but I’m a bit of a stickler for giving learners what they are familiar with. I felt that visually the tabs were a temptation, as in learners would try to click on them, then get confused.
I’m also a bit of a stickler for getting the visuals perfect, and this was somewhat challenging for the folder and tabs, as in I wanted the tab of the quiz question being viewed to be appearing as if it was at the front of the folder…
I specifically designed the quiz questions to have all elements on the screen at the one time – ie the question, the answer choices, and then the feedback, plus I decided to include instructions on using the slider and clicking on the next question tab. I’ve found that in the majority of projects I’ve worked on, clients are quite particular about including instructions on the screen. In a way I agree, and concede that as a designer I’m usually so familiar with how an interaction works and what to do next, that I forget some people are not at all familiar with interactive e-Learning, so giving small prompts it probably advisable!
The lock icons were a last-minute addition – inspired by the many hours I’ve been spending on Ancestry.com, as were the correct/incorrect tick and cross icon indicators.
There’s a lot going on behind the scenes in a design like this one. Whilst it appears that the quiz questions are all on the one slide, they are in fact on separate slides.
Starting with the first question, once I’d worked out the technicalities of how to get this interaction working, I then duplicated that first question slide and worked on the visuals, triggers and variables for each individual question. This might sound relatively simple – but with so much going on, this took quite a bit of time to perfect, particularly because I chose to incorporate sliders into this design.
I set up variables for the 5 sliders I needed – once I’d done this, the process was pretty simple.
By the way, the variables at the top of the screenshot below (q1_correct to q5_correct) are used to trigger the correct/incorrect tick/cross progressive visual display for each quiz question.
Here are my top tips for this design:
- Label everything on your timeline – when you’re working with layers and triggers that show and hide, or change the state of objects on the base layer from another layer (yes, you can do this and I love this feature), if you haven’t labelled your objects than you will run into difficulties with easily identifying what you’re looking for – just saying! I also group objects where I can (when they’re not being used as a selectable object) and have become very familiar with locking objects on the timeline if I don’t want them to be moved/altered/messed with…
- Pay close attention to your Slider Tools options – if you duplicate a slide with a slider on it like I did for this design, you’ll need to change your variable in the Slider Tools option to coincide with each slider relevant to the quiz question slide. You’ll also need to do this with the Triggers for each quiz question slide. It’s way easier to do this than to try to replicate the slider for each quiz question slide.
- Use the built-in Hotspots (1) as ‘covers’ to stop areas of the screen being clickable – such as the answers (which have selected states), and the slider on the correct/incorrect layers and (2) as ‘objects’ for your Object Triggers – ie you don’t always need to have an image available on the layer you’re adding a trigger to
- Leverage off the animations of objects when creating triggers to reveal objects/instructions, or to change the state of an object in a timely manner – ie your triggers don’t always need to be ‘when the timeline starts’
What do I like about this design, or what do I think works well in the context of engaging and effective e-Learning?
- Avoiding click ‘Next’ buttons – using the interactive element of viewing another ‘tab’ on the one screen (even though these quiz questions are developed on separate slides) I think really adds to the engagement of this interaction – OK, so you’re still clicking to move on, but less ‘next’ or ‘continue’ buttons has to be a good thing, right!
- The slider is a bit of a novelty, but I think it works well – it’s very clear which answer you’ve selected when you slide the slider because of the ‘Selected’ state I’ve incorporated, and there’s no confusion about when you can submit your answer as this is controlled by hiding the custom submit button until at least one of the answers has a ‘Selected’ state. This avoids that dreaded default Articulate Storyline screen when you go to submit your answer when you haven’t chosen one…
- The ‘locked’ icons – these clearly indicate that you need to work through the questions progressively to unlock them – simple, but effective and easily achieved with triggers to hide the locks on completion of the previous question
- Instant feedback – having the quiz question, answer choices, then the relevant feedback on the one screen I think is super-effective, as is the visual cue of the green tick or red cross that indicates instantly if you’ve correctly or incorrectly answered the question
- The progressive correct/incorrect visual indicators for each question – who doesn’t like to see a green tick rather than a red cross?! Plus, the ability to ‘retry quiz’ at the end
What could be improved upon or added?
So, taking into consideration that this is a quiz, built without using any of the built-in question slides that come with Storyline 360 (due to the use of sliders to select the answers), there were some limitations:
- Try again layers – I know this could be done using numbered variables. Although this would take some time to develop, I think this would really add to the engagement and effectiveness of this design – maybe I’ll work on this when I have a spare minute…
- Hover states – I’m usually a stickler for hover states, but because of the setup for this design, this wasn’t too easy to achieve at a visual level I was happy with – of course more time put into this might yield a satisfactory result, but sometimes, particularly when working on tight deadlines, you need to sacrifice some small things
- A ‘Results’ slide – again, due to the constraints of not using the built-in question slides for this design, the lack of a graded Results slide may impact on the effectiveness of this design – but this depends on the circumstances of the learning – ie you don’t always need to offer a pass/fail result.
What do you think?