Embed Size (px)
DESCRIPTION
How did we squeeze a feature-rich desktop program into a lightweight mobile app? In our case study we talk about redesigning desktop features for a mobile OS: - The process we used to choose the essential tasks to support in our app - How those tasks influenced which UI elements of the existing desktop program the app needed - How we found ways to reduce the drawbacks of mobile devices We also discuss the additional challenge we had: our app does computations in the cloud. We cover the UI feedback we provided to mimic the snappy performance of local apps. We include how we made dropped connections invisible to our users. You could use our process for any desktop program that you’re moving to a mobile app.
Citation preview
Mobilize:Make Good Things Come in Small Packages
Copyright 2012 MathWorks, Inc.
Lissa Story & Claudia Wey
The Move to Mobile
Source: International Data Corporation and Canalys 2
Smart phones PCs0
20,000,000
40,000,000
60,000,000
80,000,000
100,000,000
120,000,000
2011 Sales
Agenda• Our Product & User
• Phone Design
• Activity
• Tablet Design
• Cloud Connection Challenges
• Lessons Learned
• Questions
4
What: MATLAB in 1982
5
What: MATLAB in 1982
What: MATLAB in 2011
What: MATLAB in 2011
Who: Our iPhone User
Photo by Robert Scoble
Users’ NeedsiPhone’s Sweet Spot
8
Who: Our iPhone User
Photo by Robert Scoble
Users’ Needs iPhone’s Sweet Spot
9
Intersection
What was needed for the tasks?
10
Figure
Command History
11
Command
History
Figures
12
Command
core of MATLAB
13
Command
improve typing
Lesson Learned:Balance between showing content & making interaction easier
14
Command
improve typing
Lesson Learned:Following OS standards doesn’t automatically produce a design that works for your user.
15
Command
review results
Lesson Learned:Provide a glimpse of essential information in context whenever possible.
History
reduce typing
16
Figures
review all results
17
18
Figures
look more in depth
19
Figures
get the data
20
Figures
look more in depth
21
Figures
look more in depth
22
Figures
data is everything
23
Move Data Cursor
Can tap anywhere to move crosshair so you don’tcover selection
Lesson Learned:When a user needs to select a specific location, find a way to keep fingers from blocking it.
24
• Form small groups
• List what features you would include for MS Project on a smartphone
• Why?
Activity:
25
Activity: MS Project
List what features you would include for MS Project on a smartphone.
26
• View tasks & timeline separately
• Check task dates & status
• See how changing a task date affects project end date
• See what’s due now
• See what’s overdue
• Add a task from a template26
Some Ideas:
Who: Our iPad User
Users’ Needs iPad’s Real Estate
27
28
further improve typingreduce screen switching
29
reduce screen switching
30
review all your results
31
work using the history
32
look more in depth
33
User expectations:
• Local app
• Snappy performance
Local App vs. Cloud Connection
Lesson Learned:Show feedback so users know what’s happening while the app completes a command.
34
Zoom
Pixel zoom while fetching the new image
35
Show Data Cursor
Display a message while retrieving data
36
Handling loss of connectivity :
• History stored on the device
• Status preserved on the server
Local App vs. Cloud Connection
Lesson Learned:Make dropped network connections invisible to users by saving session info and data on the device and in the cloud.
Lessons LearnedMobile
• Balance using real estate to show content & to make interaction easier
• Check that OS standards are right for your users
• Provide a glimpse of essential information in context whenever possible.
• Use the extra space of a tablet to address the pains of the small phone screen
Lessons LearnedMobile
• Know that fingers are fatter than mice
• Users tap - lots
Cloud
• Provide feedback and approximations
• Plan for dropped connections
Questions?
39
