This week’s E-Learning Heroes Challenge is Using Drop-Down Menus.
As David Anderson wrote in his introduction, ‘Drop-down menus are a great way to consolidate navigational elements when slide space is limited.’
Yet, as he also points out, ‘they aren’t just for slide navigation.‘
I tend to avoid dropdown menus in e-learning as I feel – perhaps unfairly – they are often used as a quick fix for a badly designed or busy layout. They can also increase cognitive load and decision making time (see also Hick’s Law).
But the examples shared in this week’s challenge have softened my view. Dropdown menus can help you to chunk and hide ‘nice to know’ information while still making it accessible to the learner. They can also free up valuable space when you are working on smaller screens and mobile devices.
With these factors in mind, I decided to build another ‘mobile app’ style demo and to use dropdown menus in a more playful way than usual.
I wanted to show how a dropdown menu can become part of your theme without being too gimmicky or clunky. Play Drop Down Monkey here and let me know what you think in the visit this page comments!
For this week's @ELHChallenge I have used artwork by the brilliant @gameartguppy to showcase the use of dropdown boxes in a more playful setting than usual. pic.twitter.com/TaeAKf4siW
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) May 28, 2021
Monkey business
The moment this challenge was announced, I knew that I wanted to incorporate the action of ‘dropping down’ into my demo somehow. I sketched out some ideas involving parachutes, tall buildings and beanstalks and began to search for stock artwork to bring my concept to life.
Then I stumbled on the work of the brilliant Vicki Wenderlich, an artist and graphic designer. Vicki runs gameartguppy.com, a site for aspiring game developers working on a budget. In July 2018, she took the bold decision to share her artwork and assets for free under a Creative Commons Attribution License.
Her monkey character and jungle backgounds were perfect for what I had in mind and I completed my demo in under three hours!
However, under this particular Creative Commons license I cannot resell or redistribute these assets. For this reason I am unable to share my master file in full this week.
Nothing to CSS here
This is definitely one of those occasions when it’s easier to show rather than tell.
In this download, you will see how I built a CSS-style animated interface using only Storyline’s native features.
To create this effect I used:
- Layers and object visibility settings
- State changes with embedded animations
- A scrolling panel – but not in the way you expect!
Jungle is massive
User interface design is a big area and dropdown menus are just one aspect of it.
Learning designers should pay attention to the methods used by website and app designers to organise information and maximise space. The widespread recognition of dropdown menus means that most learners will already know how to use them. But you should still test your designs for ease of use. You could make a monkey of yourself if you assume that every learner will instantly recognise a dropdown menu!
Clever Jon! And thanks for sharing this – it’s going to help with the construction of a multi-drop down activity in one of my courses!
No probs Jac, let me know how you get on.