Pragmatic Principles for Mobile Design


Published on

Presentation on how to effectively design and develop mobile educational apps for the corporate market. Delivered at ASTD TK 2014.

Published in: Technology, Education, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Michelle and Brandon
    You can download today’s session on Slideshare at this URL.
  • Michelle and Brandon Introductions
  • Brandon
    We are gonna try and cover a lot of material this morning. We’re going to focus on what three key areas to consider when supporting mobile workforces:
    mobile behaviors and mindsets
    mobile ID
    and a few mobile-related projects we’ve been working on.
  • Michelle
    When you see the Happy Monkey appear, that’s your prompt to ask a question and get a reward!
  • Brandon
    We want to make sure we’re all in “sync” for today’s presentation. We’ll assume you agree with us on the following:
    We’re in a post-mobile world now. We’re using the term “mobile” today because we need a way to categorize our session. Realistically, there is no such thing as “mobile learning” anymore.
  • Brandon
    Your workforce, your consumers are already ‘mobile’ – many are always connected, and not always present.
  • Brandon
    You may or may not be providing learning experiences optimized for their mobility – but you probably recognize that you need to be if you’re not already. We think you should begin thinking “mobile first” in all your design and development even if you’re not delivering on mobile yet.
    If you disagree with any of these, raise your hand and let us know your thoughts. We’re genuinely interested.
  • Michelle
    Have you recently asked yourself: How do my designs change when dealing with different screen sizes and resolutions?
  • Michelle
    How do I take advantage of mobile device capabilities?
  • Michelle
    How will I support and maintain content development for multiple devices? These are fundamentals that will help you as you move toward mobile-optimized designs.
  • Brandon
    To help answer those questions, are you: prepared to look closely at your content development workflow, your process, and even your organizational structure?
  • Brandon
    Are you willing to look at different internal tools, different ways to communicate?
  • Brandon
    Are you willing to look at your staff capabilities, roles and job descriptions?
    + … because …
  • Brandon
    Designing and delivering mobile learning experiences means you may need to change some of how you do what you do, and who you have doing it.
  • Michelle
    One of the first areas to concentrate on is your audience, and their mobile behaviors. We’ll take a look at the common behaviors that are important for us in L&D to understand.
    Then, we’ll discuss some principles for mobile instructional design.
    And finally, we’ll step through a few short case studies of training-related apps we’ve been involved with recently.
  • Brandon
    Some of what people do with their devices is not what we think they do with them… Yes, people read on their mobile devices. Sometimes in short bursts, sometimes they move around quickly, and sometimes they even read long articles.
  • Brandon
    Just because you may know the device the majority of your audience has in hand, doesn’t mean you know their intent. People traverse multiple devices doing similar things on various devices. A person doesn’t normally stop and think, “oh, I want to update my Facebook status, so I’ll use my tablet.”
  • And let’s stop trying to create specific mobile personas or to. Everyone is mobile, all the time.
  • Brandon
    Smartphones are the backbone of our daily media use. They are the devices used most throughout the day and serve as the most common starting point for activities across multiple screens.
  • Michelle
    The device we choose to use at a particular time is often driven by our context.
  • Michelle
    The four key context drivers are:
    The amount of time we have or need
    The goal we want to accomplish
    Our location
    Our attitude and state of mind
  • Michelle
    Users look at their devices differently:
    “I consider my phone to be my personal device, my go-to device. It’s always close to me if I need quick, precise feedback.”
  • Michelle
    “When I want more in-depth information, I use my tablet. I’m less distracted because I can’t get a phone call, and I can ignore email on it.”
  • Michelle
    “My laptop is purely for business. That’s work, where I feel like I need to be doing something productive.”
  • Brandon
    We recommend that when you embark on designing and developing a mobile app, you take a methodical approach and place yourself in the real-world contexts your users are in. Don’t make assumptions, go out there and observe them in their situations, and make sure you observe over time as they move through their workday.
  • Michelle
    Yahoo segmented all mobile behavior into seven mindsets:
    Connect: Covers all the ways a person communicates with their mobile device
    Search: Refers to information seeking, primarily using a search engine
    Entertain: Listening, playing or viewing media designed for entertainment
    Manage: Coordinating day-to-day activities like online banking and schedules
    Inform: Viewing news, information portals or educational material
    Shop: buying stuff. The one mindset retailers love the most!
    Navigate: Getting places via a GPS or Maps app
  • Brandon and Michelle
    Considering these mindsets:
    When do you think people are the most frustrated on their mobile devices?When searching or navigating. Because they’re on the go and trying to find something or get somewhere
    When do you think people are most relaxed on their mobile devices?When shopping and consuming entertainment
    What mindset do you think they’re in most when learning?More than likely it’s Inform, but could also be Search, Connect, and maybe Navigate.
    How do you see these mobile mindsets affecting how you design for mobile?
  • Brandon
    In short… People pogo-stick. They jump around, usually in short bursts, but they’ll stick with the content if it’s meaningful and relevant.
    The four key context drivers are: time, goal, location and attitude. Can someone tell me what types of audiences they support? What is their context? What type of device applies to them?
    Smartphones are the backbone of our daily media interactions. They have the highest number of user interactions per day and serve as the most common starting point for activities across multiple screens.
  • Brandon
    OK, so you’ve decided to create an app. Often the first question asked is ‘native or web app?’
    Individuals have different expectations when it comes to apps versus mobile browsers.
  • Brandon
    The majority of mobile users conceptualize the typical app experience as ‘discover – install – tap – run.’
    With web apps it’s not as clear-cut: the consumer visits the mobile site as if it's a regular website -- via a browser.
    People will play a game, music or video or update their social networking page on their desktop via the web without considering whether or not the experience is conducted via an app. On a mobile device, the same consumers prefer native apps, believe they perform better, and prefer how they are ‘packaged.’
    So, what are the differences?
  • Michelle
    Native apps must be installed on the device. They are either pre-installed or they can be downloaded from app stores.
    Native apps are written specifically for the operating system so they can take advantage of the device’s functions, such as the camera or GPS.
  • Michelle
    Web apps reside on a server and are accessed via the Internet. Web apps can be coded once to work across multiple operating systems, rather than being developed separately.
    This means that the same application can be used by most devices that can surf the web.
  • Michelle
    Here’s a simple table that can help you determine what type of app you should build.
  • Brandon
    Hybrid apps are written in native languages, downloaded to mobile devices, and able to access the device’s APIs, but the content is pulled from the web.
    Personalized news apps are good examples of hybrid apps.
    This also allows a higher level of personalization for your users and possibly a more consistent user experience.
  • Michelle
    Next, we’ll discuss some principles for mobile instructional design.
  • Michelle
    Always ask ‘why’ you want to create training for a specific device.
    Why do you want the content to be available on mobile devices?
    How are you choosing the specific device to support?
    Should the course provide a different experience on a phone vs. a tablet?
    Is there a business need to support deployment on mobile devices?
  • Brandon
    Fully comprehend the inherent constraints of the mobile ecosystem:
    + Small screens
    + Unreliable networks and connectivity
    + People in a myriad of situations when using mobile
  • Michelle
    Whether you’re designing for mobile first or you have no choice but to try to convert, take it one step at a time.
    Don’t build or convert 150 courses all at once. Conduct a pilot. Start with one course and create it for every device you intend to support.
    Take into account any problems during development, as well as deployment.
    Learn in-depth from your testers and your developers and apply those lessons to the other 149 courses before you ever start developing.
  • Brandon
    Think again about how you use your own mobile device, particularly your phone.
    As eLearning developers, we’re used to designing longer courses, 15 minutes or more.
    A longer course - especially if you’re designing for the smallest screen - isn’t effective.
    Would you want to learn by staring at your phone for 15 or more minutes?
    Chunkify your content into small learning objects that learners can access quickly and efficiently.
    Remember pogosticking!
  • Michelle
    Understand how users can rotate their devices. Do you need to support both portrait and landscape mode?
  • Michelle
    Make touchable elements look touchable. It’s of the utmost consideration to consider usability.
    If your app requires substantial interaction, consider a native app over a web app. Complex tasks can be difficult on a mobile device.
    Consider "tap symmetry" -- give your users enough space to touch the correct area.
    Re-think radio buttons because they are often too close together, and it's easy to touch the wrong one.
    Consider having a back button. It reduces navigation error.
    Make sure your touchable areas LOOK touchable.
  • Brandon
    Re-consider text input interactions. Users don't like to type on the touchscreen more than they have to.
    People share tablets -- they don't share smartphones. When designing for tablets, think of it as a multi-user device. With this consideration, make sure it's easy and intuitive to log out and log in to your app, and make sure you design an app icon that is easily recognized.
  • Brandon
    When considering graphics determine what your learner should be focused on: task or content.
    Notice that the ToDo List app has no original content. The focus is squarely on completing a task and, thus, the graphics are all user interface elements.
    The fitness app focuses purely on the content and even hides the status bar at the top in order to keep the user engaged in the content – without status updates as distractions.
  • Michelle
    Try to keep one action per screen.
    Only have the necessary elements on screen to fulfil the action and provide navigation choices
    Be sure to adequately space the elements
  • Michelle
    Which is the cleaner UI? Why?
  • Michelle
    Texting, cameras and GPS are now standard on smartphones. Leverage existing technology and create activities around features already built into the phone.
  • Michelle
    And finally, let’s step through some short case studies of training-related apps we’ve been involved with recently.
  • Brandon
    Recently, I worked on what might be called a Flash > Mobile conversion project. We had a course originally created in Articulate Presenter.
    + I wanted to develop a mobile version optimized for tablets. I didn’t want to redesign the course, so I thought I’d attempt a conversion with Storyline. Storyline has a ‘publish to mobile’ feature. It has a publish to HTML5 and Articulate has developed their own iPad app. This flexibility allows you to offer access across almost all mobile devices that support HTML5 and of course the iPad via Articulate’s app. So let me quickly explain what my conversion process was like.
    The Articulate course I had was a pretty basic one
    It consisted of graphics, videos, audio narration on each screen, several Engage interactions, and quizzes built in Articulate QuizMaker.
    Using Storyline, I opened the Articulate Presenter file and Storyline easily converted it.
    The Engage interactions converted as well, but they are designed as Flash-only output, so they will not publish to mobile. I had to re-build all the Engage interactions. That was a decent amount of work because I had several of them in the course.
    The QuizMaker files posed no problem.
    After the Engage interactions were re-built, I tested the course by publishing it to mobile.
    At first it looked pretty good. However, in mobile Safari on iPad, audio has to be initiated by the user. So the audio on each screen would not auto play. That caused a design work-around. Do I place an audio controller on each screen and expect the user to tap it?
    I can solve this issue without too much re-design by leveraging Articulate’s iPad app. But my initial design had a Menu LINK at the top of the UI. At the time of my use, the iPad app didn’t support that, and forced me to use the left navigation default. So to use the app to solve the audio problem, I had to change my UI design.
    And so it goes. Between HTML5, the iPad app, and the Flash version, I was not able to have ONE original source file.
    I had to optimize for each device.
    I was able to deploy a course that ran on PCs and the two mobile OS’s that I supported in record time. Is it a scalable strategy? No. Is it good for legacy content, or courses already existing in Flash format? Sure.
  • Brandon
    Here are some highlights from this project.
    We wanted to extend delivery options for the course since many in our audience were asking for a mobile option. We had a slim budget, and wanted a quick development cycle.
    Although the majority of our audiences used iPad, we wanted to ensure people with other tablet operating systems could also access the course. We were building a tablet version as an additional option – not to replace the desktop Flash version.
    We used Articulate Presenter and Storyline as development tools.
    This was done by me for a startup. So, again, the budget was tight.
    It only took us two weeks to convert 7 modules into Storyline and then optimize for tablets.
  • Brandon
    Storyline easily converts existing Presenter files
    Watch those Engage interactions
    If you have substantial interaction, consider the iPad app over a web app (native). Complex tasks can be difficult using a tablet browser
    Know that when a user can’t activate navigation, they consider the app to be broken
  • Michelle
    Goal: To provide new hires with instant information to pertinent tasks and questions without requiring access to the VPN.
    Format: We were discussing redesigning our New Hire portal on our intranet and in the process, added the mobile app for increased access. We started over, designing for mobile first and using responsive web design (specifically CSS within Dreamweaver) to parse the same, and at times different, content depending on the device used.
    Visibility: The project has high visibility. We keep iterating, until we really feel we have it right. Once we get it down, we’ll use this model to move most of Global HR portal to mobile first design.
  • Michelle
    One of the biggest sticking points I’ve had is this game, and it’s a source of disagreement on our team. Several people like it, as it’s a game (acquired from the eLearning Brothers and GUI modified).
    The game itself is a fun exercise, and requires you to earn points by answering Oracle trivia (learned in the app) and using those points to shoot baskets.
    My issue with the game is that it forces you into landscape mode. What are your thoughts on forcing an orientation change on the user? Good, bad, neutral?
  • Michelle
    It’s a high visibility project, so we have too many people chiming in. Initially, we had 2 IDs for user experience, a graphic designer, and a web developer.
    We started the mobile app on paper in September and by December, we had our current working prototype. However, this is still a work in progress and we’ll continue to iterate until we’re completely happy.
  • Michelle
    Bottom Line:
    We’re still in beta / testing. But our output is now successfully parsing to both mobile and web. Iterating constantly.
    Our biggest issues have been too many cooks in the kitchen (so to speak) and disagreement over the forced landscape mode of the game.
    We have learned a lot and as we continue to iterate, we are keeping a list of lessons learned on an internal wiki so that we can apply them to our future mobile apps.
    Any questions?
  • Brandon
    We created a simple web-app optimized for iPhone as a prototype. We used Adobe’s Muse software, which is available via their Creative Cloud software subscription service. With Muse, you can leverage built-in templates and widgets to quickly build prototypes and even full apps.
    This app uses conventional navigation elements for mobile apps, including large areas for touch.
  • Brandon
    The idea behind this app is to provide a support aid to reinforce information about a specific topic
    It’s a web-based app optimized for iPhone
    App was created in Adobe Muse using existing templates provided by Muse. Simple interface elements are all drawn in Muse so that scaling will produce the best results.
    This was done by a developer on our team in 3 days
  • Brandon
    Muse is a WYSIWYG editor for creating web apps
    Comes loaded with templates and widgets
    Real easy to build rapid prototypes: you can import PSD and Fireworks files
    It’s important to build wireframes and prototypes before you apply a lot of user interface design. You want to iterate and test until you’re confident your design will support the information architecture you need for your content.
  • Brandon
    Focus on goals. As IDs we are used to task analysis as a part of the science of what we do. But goal-directed design is a way to provide for ambiguities in execution and implementation.
    Launch and Iterate. Iterate a lot. Iterative design surfaces both ambiguities and the design solutions that can accommodate them. Get the app in front of users early so they can show you how to refine it. Expect that the design will not be perfect at launch, provide for continuous improvement.
  • Brandon
    Here are some good references if you’re interested in learning more about mobile development
  • Brandon
    Some of our data came from these two research reports.
  • Michelle and Brandon
  • Pragmatic Principles for Mobile Design

    1. 1. “We are so overwhelmed with things these days that our lives are all, more or less, cluttered. Everyone is hurrying and usually just a little late. Notice the faces of the people who rush past on the streets. They nearly all have a strained, harassed look, and anyone you meet will tell you there is no time for anything anymore.” 
 Written in 1924 by Laura Ingalls Wilder—while living on a farm in rural Missouri.