We are overwhelmed with things these days and our lives are cluttered. Everyone is always hurrying and usually just a little late. If you meet people on the streets, nearly all of them have a strained, harassed look, and anyone you meet will tell you there is no time for anything anymore.
Driving Behavioral Change for Information Management through Data-Driven Gree...
Overwhelmed by the Pace of Modern Life
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.
1
20. Knowing the type of device the user is holding doesn’t
tell us anything about their intent.
21. The device we choose to use at a particular time is driven by our context
21
22. The four key context drivers are:
• Time
• Goal
• Location
• Attitude
22
23. 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.
23
24. “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.”
24
25. “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.”
25
26. “My laptop is purely for business. That’s work,
where I feel like I need to be doing something
productive.”
26
27. Ethnography – go out there and understand
how people behave with mobile devices in the
real world and what they actually need.
27
31. People “pogo-stick”
!
Context drives device choice. The four
context drivers are:
Time
Goal
Location
Attitude
!
Smartphones are the backbone of our
daily device interactions.
Image from Life Magazine, 1955. Photographer George Skadding.
38. Characteristic
Native
Downloaded to the device
X
Coded in a language specific to the device OS
(Objective C, Java)
Web
X
Runs in a browser
X
Coded in HTML, JavaScript, and CSS
X
Distributed via an app store
X
Full use of device hardware and APIs
X
Limited access to device hardware and data, as well as
user data
X
39. hybrid apps
!
written in native languages
downloaded to the device
can access APIs
content comes from the web
40. Why do you want the content to be available on
mobile devices?
!
Is there a business need to support deployment
on mobile devices?
always ask why
!
How are you choosing the specific
device(s) to support?
!
Should there be a different experience on a
phone vs. a tablet?
42. 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
one step at a time
development, as well as deployment.
!
Learn from your testers and apply those lessons
to the other courses before you start developing.
46. If your app requires substantial interaction, consider a native app over a
web app. Complex tasks can be difficult on a mobile browser.
!
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.
47. 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.
48. how clean are you?
!
one action per screen
only necessary elements
adequate spacing
62. Conversion from Articulate Presenter
Purpose
Extend delivery option of existing Flash-based desktop course to tablets
Output
Web and native app to support Android, Windows and iOS devices
Tools Used
Articulate Presenter and Storyline
Key Team
Members
Me
Timeline
2 weeks to convert 7 modules (2 hrs. of seat time) from Articulate
Presenter to Storyline and output to both web and native versions
63. Conversion from Articulate Presenter
Bottom Line:
• 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
64.
65. Mobile App for New Hires
Need to get
FULL
screenshot
of app s
Web Page
using
SnagIt?
67. Mobile App for New Hires
Purpose
Give new hires access to most requested information without the complication of a firewall
and from whatever device they choose to use. App includes Oracle news, welcome videos
from executives, a To Do list, the History of Oracle, and a game.
Output
Web-based mobile app that also works on a PC. By thinking mobile first, we were able to
create a responsive web app that supports both mobile and desktop.
Tools Used
App was created in Dreamweaver with extensive use of CSS to create the responsive design.
Key Team
Members
Web designer/programmer, graphic designer, instructional designers, HR SME.
Timeline
Ongoing. While move new hire information to mobile is important, we have an iterative
process with exhaustive reviews. We’re constantly refining and learning. Our goal is to get
this one right and then apply our lessons learned to future apps.
68. Mobile App for New Hires
Bottom Line:
• We’re still in beta.
• Too many cooks in the kitchen.
• Lessons learned on an internal wiki.
• IT/Security concerns
71. Mobile App for Performance Support
Purpose
Provide a support aid to reinforce information about a specific topic.
Output
Web-based mobile app optimized for iPhone.
Tools
Used
App was created in Adobe Muse using existing templates provided by
Muse.
Key
Team
Members
I developer and 1 ID
Timeline
3 days
http://tincanapi.businesscatalyst.com/overview-of-tin-can.html
72. Mobile App for Performance Support
Bottom Line:
• 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
76. some research for this
presentation came from:
!
Yahoo! Mobile Mindsets:
http://www.ipsos-mori.com/Assets/Docs/Publications/
IpsosMediaCT_Yahoo_Mobile_Modes_Sept2011.pdf
!
Google:The New Multi-Screen World Study
http://www.google.com/think/research-studies/the-new-multi-screenworld-study.html
!
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:
Brandon
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
Michelle
When do you think people are most relaxed on their mobile devices?When shopping and consuming entertainment
Brandon
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.
Michelle
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.