Last week I was talking with a team in Uganda to scope out an elearning project.
“Tell me about the audience. Do they have computers and reliable Internet at home? Would they take the courses in an office with an Internet connection?”
“Actually,” the response came, “some would gather around a computer in an office, but many others would probably need to use their smartphones.”
I paused. For whatever reason, I hadn’t anticipated this response.
Our client asked: “So what implications does that have for the design of this project?”
A mobile-first approach meant a significant shift in my design thinking needed to occur. Making sure that our elearning authoring tool was “responsive”, automatically adjusting images to fit the size of the screen learners were using was important, but it wasn’t nearly the only thing we’d need to keep in mind.
Size Matters
If learners may be using desktop, laptop, tablets or smartphones, we’d need to design for the smallest screen first. This will impact how content is presented.
This is the real estate you have to play with on a desktop or laptop screen:
But this is all the real estate you have to play with on a smartphone:
Design considerations include:
- Economizing on the number of words used on each screen, while maximizing font size.
- Using powerful imagery to replace the need for extensive on-screen text.
- Voiceover/narration that can be used to explain key and/or complex concepts.
The Mouse Trap
One typical interactive element of traditional elearning is to have a learner use their mouse to roll over text with a hidden “hot spot” which can unlock additional content. Once the learner’s mouse leaves the hotspot on the screen, the additional information disappears. While this works nicely when someone is using a mouse on their computer, it won’t work in the world of smartphone touchscreens and swiping.
This will impact how learners interact with the content.
Design considerations include:
- Eliminating mouseover interactions.
- Ensuring on-screen buttons are large enough (and have enough spacing) to allow for fingers of all sizes to tap on their screen without accidentally tapping the wrong button because it was too close.
Before You Go Too Far
My colleague, Tim, has much more experience than I do when it comes to designing for mobile and his biggest warning is only three words long: “Test, test, test.”
He suggests that before you spend a lot of time laying out your content and designing interactions, that you take the time to test on different devices. “Don’t trust the previews in your chosen tool (Articulate Storyline, Adobe Captivate, etc). If you are delivering across multiple devices, find out which phones or other devices are most common among your learners before you make any assumptions about dimensions.”
Learners are much less likely to be tethered to their office than they were 5 years ago. Salespeople, technicians, community health providers, even customer service agents can be increasingly found in the field. Learning needs to meet the learners wherever and whenever is most convenient to them, and mobile-first design does require some intention as you design your learning programs.
Have you been designing for mobile? What other tips might you offer to anyone reading this post?
Looking for some help putting together your next training program – whether in-person, online or even mobile? Drop me a line and let’s chat!
