you design an effective user interface for mobile learning? And how do you manage ... mobile app â one in which the us
E-learning Insights
insights
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.
0:00 AM
*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
According to LearningSolutions, the layout you build for
tablets.
your mobile learning app must enable users to answer
But I digress…and to get back to the original point how do
these five questions:
you design an effective user interface for mobile learning?
1. Where am I?
And how do you manage navigation, usability, and
2. How did I get here?
aesthetics ensuring that the transition between screens
3. How can I return to where I once was?
feels natural and that users know where they are at all
4. How far have I gone?
times during the programme?
5. Where else can I go?
LearningSolutions Magazine recently published an article
In response to these questions I’ve tried to come up with
entitled “From e-Learning to iPad – How to Adjust the User
my own tips for optimising the mobile learning interface:
Interface”. In the article they consider how the user interface design contributes to the success of a learning mobile app – one in which the user interface enhances
How to improve the experience Where am I?
and eases the learning process.
● Don’t overload functionality, features or content – just focus on what is necessary to get the job done. ● Simple functionality will enable you to create a straightforward and easy to follow user interface.
get
IN TOUCH
Belfast - Tel +44 (0)28 9064 3211
|
Dublin - Tel +353 (0)1 431 1389
|
Scotland - Tel +44 (0)141 301 1077
email:
[email protected] www.aurionlearning.com
E-learning Insights Where else can I go?
● Structure information so it can be easily accessed – learners expect to get the information they need
● Use clearly labelled navigation buttons to help
with just a few taps.
learners orient themselves.
● Group similar topics together. The Learning Coach
● Make sure navigation buttons are easy to find.
has a useful blog post on visual grouping.
● Stick to simple touch tap or swipe commands to
● Keep the screen uncluttered and use clear screen
manage navigation between screens (for now).
titles so learners won’t misinterpret visual cues.
Don’t assume that everyone knows how to use all the interface features of their smartphone / tablet –
● Emphasise menu items already clicked (change
e.g. pinch open gesture to magnify text. According
colour or attach bookmarks).
to Josh Clark, author of Tapworthy: Designing Great
● Design for a low error rate – remember that selection
iPhone Apps, most people don’t know about the
errors on mobile phones are higher than desktops so
more obscure gestures that work on some mobile
surround selection areas with white space so that a
phones.
learner can easily tap them and invoke the correct action.
How did I get here?
And finally…don’t forget to test your user interface
● Create a visual trail as learners move through the
with a sample group of learners, checking how long it
Once you design an interface, make sure you test it
content. For example, highlight a section already clicked on or use a ‘breadcrumb trail’ so learners can track their progress through the programme.
takes to complete the learning, how easily they can navigate the learning, how many navigational errors they make etc.
How can I return to where I once was?
Useful resources for designing mobile learning
● Use navigation buttons to allow movement between learning units.
iOS Human Interface Guidelines
● Ensure some navigation menus are visible throughout the entire course.
http://thatcoolguy.github.com/gridless-boilerplate/ guidelines on HTML5 & CSS3 topics
● Provide Back buttons or Menu buttons to return to a map of choices.
W3C 10 Tips For Designing mLearning And Support Apps From e-Learning to iPad – How to Adjust the User
How far have I gone?
Interface
● 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.
Ten Things to Think About When Designing Your iPad App
● 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’.
get
IN TOUCH
Belfast - Tel +44 (0)28 9064 3211
|
Dublin - Tel +353 (0)1 431 1389
|
Scotland - Tel +44 (0)141 301 1077
email:
[email protected] www.aurionlearning.com
