Wednesday, October 19, 2011

Designing mLearning for Touch Screens

by Joseph Suarez

These days, more and more organizations are pushing eLearning content onto devices with touch screen interfaces such as smart phones and tablets. It’s an exciting, and sometimes daunting, time to be involved in eLearning development.

However, in the rush to create mLearning that “runs on the iPad,” it’s important not to forget we’re no longer creating training for a mouse and cursor environment. Here are some differences between using a mouse and a touch screen to take into consideration:

No More Mouse Overs or Hovers
Since there is no cursor on a modern touch screen device, there’s no hovering effect achieved when a cursor enters and exits an element like a button. All those nice button color changing effects and specialized actions trigged on mouse enter and exit won’t function correctly on a touch screen.

New Interaction Metaphors and Terminology
Avoid using mouse metaphors such as click, right-click, or hover. New metaphors for touch include tapping, sliding, swiping and flicking. These are collectively known as gestures.  At the time of this writing, most eLearning development tools don’t currently take advantage of gestures, but that’s something to look forward to in the not-too-distant future.

It would be strange to see someone with a mouse in each hand controlling two cursors on screen, yet that’s exactly what multi-touch allows for. Each finger acts like its own mouse cursor, and they can work together to form more gestures like pinching to zoom. Again, this isn’t something that is easy to utilize for eLearning at the moment, but it has huge potential down the road.

More Space around Buttons and Links
A hand moving a mouse cursor only needs a few pixels of space to comfortably click a link or button. However fingers need more space or “hit area” to allow the user to tap on what they need without accidentally triggering something else. Keep this in mind when placing buttons next to each other or creating a list of links.

Whether you or your organization is creating new eLearning for mobile or repurposing existing content, be sure to keep the touch interface in mind. And remember, the “M” in mLearning doesn’t stand for mouse.

1 comment:

  1. (warning: English a scond language) Very useful and clear post! I would add there are some thought to have on interactions we usually use in elearning, ie drag and drop, match elements, pairing things etc. It would be interesting to seewhich ones are going to be obviously take the lead and which others will have to be invented. I will try to figure that up and come back when ready. Many thanks again.


Thank you for your comments.