Ultimate Resource List For Mobile Performance App Design

mobile-support-apps Prior to designing my mobile support app, Instructional Design Guru, I did a lot of reading and research to learn what was involved. Experienced instructional designers already have many of the skills needed for designing a mobile app. It’s just a matter of knowing what the puzzle pieces are and how to fit them together.

If you break it down into the five steps listed here, the design process seems manageable. I’ve listed guidelines and resources for each of the five steps. If you have some favorites that aren’t listed here, let us know in the Comments section.

Step 1: Strategize

Consider how a mobile strategy fits into your organization’s goals and the type of support that may be required. Here are some of the many functions that performance support apps can provide:

  • How to follow processes and procedures
  • Calculate and convert measurements
  • Language assistance
  • Visual examples in video or photos
  • Visual demonstrations
  • Collaboration with team members
  • Quick access to tech support
  • Access to forms
  • Ways for field workers to send data to home office
  • Text message reminders

The books and articles in this first step cover performance support, mobile strategies and mobile learning in one way or another. By the way, did you know there’s a Kindle app for reading the Kindle version of books on your desktop or iPad?


And some articles:

Step 2: Research

Understand the People and the Problem

Converse and engage with the people who will potentially use the app. Get a sense of what will solve their problems. For more on interviewing users:

Find Similar Solutions (if possible)

As you think about the needs and possible solutions, it helps to research apps that are in any way similar to your idea. You’ll find many reference apps on iTunes and Google Play that are resemble performance support in some way. Explore how the designers solved common issues, such as designing the user interface, organizing information and information presentation. Discover what works and doesn’t work.

Step 3: Know What to Consider

Here are the aspects of mobile performance design I think you need to consider.

1. How App Will Be Used

Consider the primary ways that people will use your app for assistance or in performing a task. Document these use case scenarios and reference them during the design process. This will keep your design aligned with the requirements. For example, if a person must use one hand to perform a task, he or she will need to use your app using only one hand. Mobile is all about context.

2. Information Structure

Sketch first. Then use a diagramming tool to determining how the information will be structured. This will affect the user interface. For example, will you use a hierarchy of information or a more flat structure? See more about structure for mobile here:

3. Available Gestures

  • Touch Gesture Cards: use to create printable cards of the core gestures and common actions of the multi-touch interface as well as unique actions associated with various mobile operating systems.
  • Touch Gesture Reference Guide: reference and icon system representing: core gestures, major user actions, object-related actions, navigating actions and drawing actions. These can be used in app design documentation.
  • Cue: public domain icon system that represents touch screen gestures. These can be used in app design documentation.

4. Mobile User Interface Design

Getting the UI right may be one of the most difficult parts of the design. Everything must be thought through carefully. These books may help.

Also see this documentation:

5. Visual Design for Small Screens

Designing for the small screen is quite different than designing screens for eLearning. Every design choice must consider the amount of screen real estate and the context of where and how the app will be used. Some things to think through are:

  • Colors
  • Typeface choices
  • Layout (more on this in the next section)

6. Icon Selection

You’ll need to consider which icons best represent each function. You may need to supply icons to your programmer if you require ones that are beyond the scope of the system. Here are some resources:

  • Iconic: free and open source icon set consisting of 171 marks in raster, vector and font formats.
  • Glyphish: 200 free mobile icons; inexpensive pro version with 400 icons
  • Mobile App Icons: 350 Icons for iOS, Android, & Windows Phone 7; free sample packs; color icons
  • Symbly: free large collection of icons and symbols for mobile apps and wireframes.

7. Where the App Will Reside

Consider whether the app will be native (reside on the phone), web-based, or hybrid. For more on this, see Mobile: Native Apps, Web Apps, and Hybrid Apps.

8. Which Phones

You know the choices. If you go with a native app, you may need to design for three different operating systems (iPhone, Android, Windows) and user interfaces.

9. Hardware and Sensors

You can take advantage of motion sensors, device-to-device communication, multimedia capabilities and more.

Step 4: Design


Sketching is thinking. That’s why you should do it first. See these articles for inspiration and know-how:

And here are some mobile sketch templates and sketchpads:

Wireframe Tools

Wireframes are a visual framework that show the screen layout in black and white. Use your storyboarding skills to layout every screen of the app. These wireframe tools are good for designing and communicating screen layout without getting too distracted by colors and other elements.

Free User Interface Kits

There are quite a few designers on the Behance Network that offer free UI kits. You can use these for mock ups and design work even if you’re not doing the programming.

Step 5: Implement

Native apps–those that reside on the phone–must be programmed. You can probably accomplish much of the design work up to that point if you understand what the issues are.

There are some newer technologies that allow web-apps to be turned into native apps. This hybrid approach has its devotees as well as critics. Research it or try a prototype before you leap.

Whatever approach you take, be sure there’s a prototyping phase to check that the design is workable.

Mobile Platforms (if you’re not using the native Software Development Kits)

  • Kendo UI: provides native interface elements to apps created with web technologies
  • Phone Gap: wrapper for apps created with web technologies, which allows an app to function as though it’s native
  • Titanium: wrapper for apps created with web technologies, which allows an app to function as though it’s native

Authoring Tools for Mobile

It’s possible you can get what you need by using an authoring tool. Some are made for mobile and others are eLearning tools that publish to HTML5.

  1. Adobe Captivate
  2. Adobe Edge
  3. Articulate Storyline
  4. Claro
  5. Hot Lava Mobile
  6. Lectora Mobile
  7. Live Code
  8. mLearning Studio
  9. Pastiche (iPad)
  10. Mobl21
  11. Upside 2 Go

Get The eLearning Coach delivered to your Inbox every month, with ideas, articles, freebies and resources.

Related Posts Plugin for WordPress, Blogger...


  1. Jody Baty says

    Thanks for the excellent summary. A couple more steps I’d consider adding:

    Step 5a: Analytics – an important part of performance support based apps is to let the designer know when, where, and how an app is being used. My personal favourite is Flurry Analytics. Other popular analytics suites are Google Analytics for Mobile, Countly, and TestFlight Live.

    Step 6: Testing – there’s no such thing as the beta app store. Once an app is live, it’s live. Consider using a service like Testin or UTest pre-launch to verify all bugs have been worked out, especially for cross-platform, multi-device app.

    One other small point… Appcelerator Titanium apps are true native apps (http://www.appcelerator.com/titanium/) that expose over 5000 native os apis, unlike Kendo and PhoneGap that use web views and expose limited native functionality.

    Thanks again for the great article.

  2. Connie Malamed says

    Hi Jody,
    Yes! So glad you added Analytics and Testing. Thank you.
    As far as Titanium appcelerator goes, perhaps it depends on how you use the term “native” and perhaps Titanium should be in its own category or I should change the category name. I looked seriously into Titanium before deciding to go with a native app. One issue in general, is that it might run slower and may not have access to or may be more difficult to access all the hardware components. To me, this means it is not the same as developing with an Android or iPhone SDK. But I’m sure the results continue to get better over the years and mine was developed a few years ago. They say it’s not hard to spend some time prototyping in Titanium, so that’s probably the best way to go for anyone interested in using it.

    I liked these sensible guidelines from developer Sapan Diwakr (http://www.sapandiwakar.in/technical/api-research-study-iphone-and-android-applications/):

    “Personally, I have worked with both Titanium and Native application development for iPhone and Android. Although, Titanium is good for developing applications quickly, I wouldn’t recommend it for a sufficiently complicated application specially if it focuses a lot on hardware features. Before beginning the development on an application, I would analyze all requirements for the application and choose among one of the three because they all have their own advantages. For someone looking to quickly decide on one of these, here are some quick points:

    – You are a web developer and want to make a simple app that serves as a mobile front-end of a web service with not a lot of processing/complex UI on the Front-end. USE TITANIUM
    – You want to make something that will handle a lot of images and use the device camera. NATIVE DEVELOPMENT
    – You are developing only a user interface and don’t have to use heavy processing/device features. USE TITANIUM
    – You want to customize your application heavily. NATIVE DEVELOPMENT”

    Thanks for your comments, Jody.

  3. Paul Schneider says

    Great article Connie! Definitely espouse many of the things we recommend. Speaking of – ugh – how could you leave us off your list of tools? Claro was one of the first tools to support mobile across iOS, Android, Blackberry, WebOS, and Windows. (Might still be one of the few.) Please drop me a line, I would love to show you what we are doing with mobile :-)

    Cheers and keep up the good work – am a fan!

  4. Jody Baty says

    Choosing a development toolset is more of business decision than a technical decision for most learning applications. For us, Appcelerator has been an easy choice because of its cross-platform capability. We write in one language for both front-end and backend (JS, Node.js), get up to 75% code reuse between platforms, and haven’t really seen any issues related to performance access or lack of hardware apis.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>