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?
- Designing mLearning by Clark Quinn
- Mobile Learning Edge by Gary Woodill
- Learning Everywhere by Chad Udell
- Innovative Performance Support by Conrad Gottfredson and Bob Mosher
And some articles:
- Mobile Performance Support Articles by Allison Rossett and guest authors
- Five Reasons to Use Performance Support by Marc Rosenberg
- Mobile Learning for Training and Performance Support by Jason Haag
- Can Performance Support be a Form of Mobile Learning? (Yes!) by Gary Woodill
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:
- Best Practices for Interviewing Your Audience (podcast and transcript)
- Interviewing Users: How to Uncover Compelling Insights by Steve Portigal
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.
- Check out the book: Mobile Design Pattern Gallery by Theresa Neil.
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.
- Your use cases may not be as complex as the examples here, but you’ll get the idea from this article: Use Case Examples-Effective Samples and Tips
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:
- 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:
- Sketching for Better Mobile Experiences
- The Messy Art of UX Sketching
- Inspiring UI Wireframe Sketches
And here are some mobile sketch templates and sketchpads:
- iPhone Wireframe Templates you can print for sketching (free)
- Android Wireframe Templates you can print for sketching (free)
- Mobile sketchbooks for iPhone and iPad
- Post-it Mobile Sketch Pads
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.
- Adobe Captivate
- Adobe Edge
- Articulate Storyline
- Hot Lava Mobile
- Lectora Mobile
- Live Code
- mLearning Studio
- Pastiche (iPad)
- Upside 2 Go
Get The eLearning Coach delivered to your Inbox every month, with ideas, articles, freebies and resources.