Blog Post
Jonathan_Hill
5 years agoSuper Hero
Hello! This is an interesting -- and potentially controversial -- topic!
I think 'next buttons' get a bad press but there's definitely an art to getting them right. With that in mind, here are three experiments in meta messaging, symbols and movement to help the user 'click next' without er, clicking next.
CE N'EST PAS UN BOUTON SUIVANT
Demo: https://bit.ly/elhc293
Download: https://bit.ly/elhc293dl
I think 'next buttons' get a bad press but there's definitely an art to getting them right. With that in mind, here are three experiments in meta messaging, symbols and movement to help the user 'click next' without er, clicking next.
CE N'EST PAS UN BOUTON SUIVANT
Demo: https://bit.ly/elhc293
Download: https://bit.ly/elhc293dl
- AndrzejJaboski-5 years agoCommunity MemberI'm a big fan of using the elements of course design to move further e.g. bend page corner or bookmarks. Nice job!
- DavidAnderson5 years agoStaffJonathan, please feel free to cross-post in this older challenge: https://community.articulate.com/series/e-learning-challenges-complete-list/articles/move-beyond-the-elearning-next-button Your example is spot on for that challenge.
- Jonathan_Hill5 years agoSuper HeroThanks for taking part in my experiment folks!
I was going to let this run a while longer, but the comments and feedback I have received so far have been really interesting.
What I didn't highlight in my original post, is that each interaction has a 10 second timer. If you don't 'click next' in that time, the next button is then highlighted to help you.
What's fascinating is that no-one appears to have stayed on each slide for more than 10 seconds, even those of you who found the design choices less obvious or unclear. You nonetheless identified the next button within 10 seconds without help.
This provokes a follow-up question:
How long is 'too long' to make the user wait to move on or until you highlight the next button?
What are your thoughts?- KOsunero5 years agoCommunity MemberI think that we might be a little biased because we know the challenge is to create a next button and thus, we're going to be on the lookout for it. I also think that our ability to quickly identify the next button is due to our experience with e-learning and having seen many examples of course navigation. This is definitely not the case for all audiences and I find that I usually err on the side of making things explicit, just in case. However, I thought that the images you used in the first and second examples (door handle, arrow) and way you used animation and bright text to catch the viewer's attention in the third example worked well here to prompt the viewer to interact with those pieces.
Like everyone else, I didn't even know the timer was there and stayed on each slide for under ten seconds. I love the idea behind it and how the animations were subtle enough to catch your eye.
I would say that the amount of time on the timer should be dependent on the amount of content on the slide. I usually time how long it takes for me to process the slide content to approximate the timing of animations like these. I thought that 10 seconds for each slide was appropriate for your demo, Jonathan.
This was a great question and thanks for prompting an interesting discussion! For my demo this week, I tried to use subtle animations for my buttons but ended up labeling them for clarity because I didn't think they were intuitive enough. I'm considering going back and seeing if I can improve my demo. (Maybe adding a brief timer before the labels pop up!)- Jonathan_Hill5 years agoSuper HeroThanks for your thoughtful comments Kimberly. It's a fascinating area of UI, for sure.
I do a lot of user observations in my day job and my A/B tests showed that a significant minority of users responded very differently to same type of interaction when it was presented in different contexts. This suggests the context is as important as the type of interaction.
And if had to pay a pound for every complaint about the 'next button', but received a pound for every compliment about more intuitive UI, I think I'd break even. It seems to be a very divisive area of ID/elearning design!
- VeronicaBudnika5 years agoSuper HeroThat's cool Jonathan, and I was actually engaged by having to figure out which\/where the next buttons were. Maybe that's the closet gamer in me :)
One of my very first Storyline demos was on Magritte. - Montsea5 years agoSuper HeroWhen I first read your post, I thought you meant your demo was controversial. It wasn't after the second time viewing that I went back and re-read your post.
Amazing work as always, Jonathan! - KatelinJordan-25 years agoCommunity MemberThis is great, but I do think the learner would need to know the premise of the challenge to find the next button. You do have to 'think.'
- Jonathan_Hill5 years agoSuper HeroThanks Katelin, yes, maybe so -- it's definitely an experimental piece.
- KatelinJordan-25 years agoCommunity MemberI really do love it though! I do technical training--it is cool to see some of the more creative work that those outside of the TT world do!
- FarahAzadeh-1d85 years agoCommunity MemberDo you though? I knew once I saw the images what I need to click on to move on to the next slide. I also noticed my mouse cursor changing which let me know that I could click, and we all love clicking and seeing where it takes us. :)
- KatelinJordan-25 years agoCommunity MemberThe expectations of a technical audience are not the same as other audiences. And yes, I did have to think! If it is not blatantly obvious to a learner it will be a 'no go' in the world of technical training.
- CarrieGauthier-5 years agoCommunity MemberHow fun! You always have such creative ideas, it's truly a joy to see your work. I especially love the page-turner!
- KristiOliva5 years agoCommunity MemberThis definitely gives some great ideas but I agree with Katelin, that a couple of them had me pause.
- Jonathan_Hill5 years agoSuper HeroAppreciate your feedback Kristi. You may be surprised to learn this demo contains a 10 second timer on each interaction, which highlights the next button if you do not identify it in that time. When you say a 'couple of them had me pause', which ones in particular, could I ask? Would you say you spent more than 10 seconds finding each one?
- Ron_Katz5 years agoCommunity MemberC'est tres genial! Pardon my french. This was wonderful!
- NancyWoinoski5 years agoSuper HeroThanks so much for posting this example Jonathan. I am really enjoying the discussion on this topic. Here is my 2-cents for what it’s worth. I am not a big fan of prompting people to click the next button unless they are using screen readers and then I would include an audio signal to indicate a transition to a new slide. Unless you are designing something in which you want the learner to explore (an escape the room scenario or some type of game) the navigation should be obvious to the user.
- Jonathan_Hill5 years agoSuper HeroAppreciate your take Nancy. There's definitely a tension between making next buttons obvious but unobtrusive and in keeping with tone/theme of your course.
For what it's worth, I use a standardised button set across my courses usually, but it's telling when watching users how they 'hover' over where they anticipate the next button will appear, especially in NEXTCHA style interactions, so there's definitely also merit in changing it up once in a while. In those circumstances, techniques to draw attention to the next button become all the more important.- NancyWoinoski5 years agoSuper HeroYes, I agree you can change it up as long as you have a reason for it but it should be intentional. I try not to use the standard button set whenever possible but I still strive for cohesive user experience.
I also agree that the nav should reflect the theme and tone of the course
but feel there are other ways to move the user along without having to prompt the next button.
- PhilMayor5 years agoSuper HeroI would agree with Nancy here I don't like calling out the big red Next button ever.
You have already lost the battle if your design is not intuitive and fails to follow web standards.
I once told a client who asked me to do it:
"Your staff have navigated the awful UI of your LMS to load the course I developed for you. If they cannot use a simple forward and back button they shouldn't be set loose on the internet".
I have started and stopped three entries for this challenge because of these reasons.
I would call out no standard navigation in a nudging fashion, my normal approach is if something comes out during review as they don't know what to do next then I need to look better at the UI/UX rather than call it out. A next button is really just a big call to action and should be obvious.
That said I may have to do an entry now.