By Christopher Allen, Product Manager

Last week I had the pleasure of presenting a few thoughts about custom touch interface design at the eLearning Guild’s mLearnCon in Austin, TX. This post is a short summary highlighting when and where custom interfaces may be acceptable and what design elements should be included in touch-based interactions for mlearning.

Whether I am creating new mobile interactions from scratch or purchasing a stylized template, for me, the following guidelines apply.

2x3 Questions to ask before creating or using a custom touch interface: 

Generic Interactions 

1. Do you need to maximize screen real-estate?

 If you answered yes, double check by answering these questions:

• Does the content you’re about to display fit, only if you hide nearly everything else onscreen?
• Is scrolling or paging content impossible or contextually jarring?

If you answered no to question #1, there is no real need to build something custom. If you answered yes, move on to question #2. 

Just because you are targeting mobile devices doesn’t mean every screen needs to have a hidden or minimal User Interface (UI). In many cases, the content displayed onscreen only takes up 70 percent of the total usable space. In these situations, resist the urge to build something custom. A button or familiar interface is one less thing a new user has to learn.

2. Does the interface problem you are trying to solve occur more than once in your mobile app?

3. Will the custom interface add real value for a user in at least two of these categories:

1. Speed in accessing content
2. Assurance for users that are selecting what they want
3. Adding context to the app’s narrative?

This question is a little less black and white compared to the first two questions, so I use a simple button as my measuring stick:

• Will my custom interface be faster than a button or series of buttons?
• Will my custom interface be more reliable or descriptive to a user than a button? (if using a button requires creating icons because a labeled button is too big, a yes answer is more likely)
• Will my custom interface add to or support the story of my mlearning application?

Instructional Interactions 

1. Does the interaction add instructional value or simply turn a page?

If your users are simply flipping through static content, in most cases, an off-the-self UI is good enough. However, if the actions a user is taking onscreen aids in their new skills formation you may have a justification for building a custom UI.

2. Do the gestures of a custom UI add structure to decision-making or authenticity to student actions?

Hopefully you're providing practice of an actual skill and not simply testing your student’s memory. If ‘practice’ is the goal, then a custom UI maybe warranted IF it adds to the realism of the practice environment. If you answered yes to questions #1 and #2 then make sure by passing the final test:

3. Could a button be just as effective?

Buttons are not always better, but buttons are cheap and users know how to use them. Personally, I create custom UIs far too often on the first design iteration because I enjoy the process of making them. I also highly prefer realistic simulations to almost anything else. So, to keep myself in check, I ask this final followup:

If it’s possible to use a button in place of a custom UI AND retain the spirit of practice don’t go through the effort of creating something custom (especially in design iteration #1). Iteration 2 and beyond can employ more realism in action and environment.

Design Checklist

• Do users obstruct their own view of the action?
  • Compensate for hands and fingers getting in the way and covering up the gesture or onscreen content.
    
• Do users know they are still doing it?
  • Provide an onscreen mechanism to show when an action has started, is ongoing, and finishes.
•  Do users feel satisfied they have done enough?
  • Highlight points at which the gesture changes any value or item selection.
• Do users have an out?
  • Provide a function (or two) for users to back up a step, cancel, or undo any action.
    
• Do users get rewarded?
  • Use simple animations with short unique tweens of color or size to add final confirmation that the gesture has been completed.
    
• Do users know where to get help?
  • Overlay help notations before and during any new custom gesture or UI to support and comfort first-time users.

Want more information?

Click here to Access All of the Presentation Materials! 

SHARE THIS BLOG BY CLICKING THE READY-MADE TWEET BELOW! 

CLICK TO TWEET: NEW #aiblog! #mLearning Guidelines to #Custom #Interfacing and #Touch-Based Interactions @c_more_zebras http://hubs.ly/y0W2z_0