What does this button do? How design prevents disaster

Loading the Elevenlabs Text to Speech AudioNative Player...

Famous last words! We’ve all seen the big-eyed, cartoon character eager to discover the purpose of some big, red, lonely button on a pedestal. They utter the fateful words: “What does this button do?” Against their better judgement, they press the button… And then there is an ominous pause, followed by disaster!

It’s a movie trope that can be used as a perfect example of why user interface (UI) and user experience (UX) design is so essential in digital learning design – especially when it comes to buttons. As a UI/UX Designer, one of your main objectives is to prevent your learner from ever asking that same infamous question. We’ve put together three great tips to help you prevent that from ever happening.

Never get in the way

Design should enhance learning, it should make it easier, and it should never get in the way of the overall purpose of the learning. Bad UX/UI design in e-learning follows a similar path as the one we know from those famous scenes mentioned above. It’s obviously not followed by actual catastrophe, but it can get in the way of the learner actually learning anything.


It’s so important in UI/UX design to follow a hierarchy of importance. This is where the intentions of the content writers, or the project, should be understood. You want your user interactions and navigation to be effortless and intuitive, leading them through a learning journey.

If your learner is spending any amount of time trying to figure out what to do, then you’ve failed. Following a hierarchy of importance means communicating to the learner – through design – what the most important element or interaction on the screen in front of them is.

Foreground and background

In art, there’s always a foreground (where your focus is demanded) and a background (the environment surrounding your focus). In UI/UX design it’s similar, for instance there are times when elements should step forward and demand your attention (through the use of strong contrast or animation etc.) and there are times when they should fade into the background.

Hover states are a good example of this: they change colour or animate when interacted with, and draw your attention to the button. Make sure you know when buttons need to grab the learners’ attention; whether it’s because they’ve reached a milestone in their course or because they’re right at the beginning and need to open the course.

There should be no doubt of a button’s purpose. UI/UX design, if done right, should be invisible. It should push the right content forward, and suggest the correct interaction. It should not overwhelm your learner with too many of options, but rather lead them through the learning experience the same way an audience is lead through the plot of a movie.

Author: Simon Pienaar

Skip to content