Effective User Interface Design for Mobile Learning
by Noleen Turner
With the explosion of mobile learning many of us are now in the position of creating brand new mobile e-learning programmes or transforming existing e-learning content to mobile.
*A friendly word of warning to those involved in ‘conversion’ projects – mobile is different to traditional web – and your mobile learning programme won’t work if it’s just a regurgitated experience. Mobile learning is micro-learning, designed for short bursts of activity – your learners are likely to access it while on the job, performing a task, or in between other activities. And learners need to be able to access it via a range of mobile learning technologies which are likely to include smartphones and tablets.
But I digress…and to get back to the original point how do you design an effective user interface for mobile learning? And how do you manage navigation, usability, and aesthetics ensuring that the transition between screens feels natural and that users know where they are at all times during the programme?
Keep the screen uncluttered and use clear screen titles so learners won’t misinterpret visual cues.
Emphasise menu items already clicked (change colour or attach bookmarks).
Design for a low error rate – remember that selection errors on mobile phones are higher than desktops so surround selection areas with white space so that a learner can easily tap them and invoke the correct action.
How did I get here?
Create a visual trail as learners move through the content. For example, highlight a section already clicked on or use a “breadcrumb trail” so learners can track their progress through the programme.
How can I return to where I once was?
Use navigation buttons to allow movement between learning units.
Ensure some navigation menus are visible throughout the entire course.
Provide Back buttons or Menu buttons to return to a map of choices.
How far have I gone?
Include a screen ID such as “Screen 2 of 24” to inform users of how far they have progressed through a lesson and how much there is left to do.
Use the word “screen” rather than “page”.
Group similar content and create intense learning nuggets rather that one long course – nobody wants to see “Screen 3 of 60”.
Where else can I go?
Use clearly labelled navigation buttons to help learners orient themselves.
Make sure navigation buttons are easy to find.
Stick to simple touch tap or swipe commands to manage navigation between screens (for now). Don’t assume that everyone knows how to use all the interface features of their smartphone / tablet – e.g. pinch open gesture to magnify text. According to Josh Clark, author of Tapworthy: Designing Great iPhone Apps, most people don’t know about the more obscure gestures that work on some mobile phones.
And finally…don’t forget to test your user interface
Once you design an interface, make sure you test it with a sample group of learners, checking how long it takes to complete the learning, how easily they can navigate the learning, how many navigational errors they make etc.