Upload
joseph-labrecque
View
4.735
Download
3
Tags:
Embed Size (px)
Citation preview
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
From Desktop to Mobile: Application Functionality for Small Screens Joseph Labrecque
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Introduction
2
Joseph Labrecque, MA University of Denver - CTL Senior Interactive Software Engineer Adjunct Faculty
Fractured Vision Media, LLC Proprietor
Adobe Community Professional
Adobe Education Leader
What’s New in Flash Player 11
What’s New in Adobe AIR 3
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Topics Covered
There is a lot of talk when it comes to building mobile apps but not a lot of anything when it comes to translating desktop functionality to mobile.
This talk is about that experience.
We will cover… Initial choices in platform
Flash; do we use pure AS3 or Flex?
Mobile vs. desktop
Smartphones and tablets
Target application: DU CourseMedia
Moving from desktop to mobile
Design, development, testing, and distribution
3
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Planning Stages : Research
What do you need to know?
4
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Where to begin?
Okay – you have this web application that’s been very successful… but it was never made with mobile in mind.
Ask lots of questions
What are your goals?
Is this really a good idea?
Involve your current users
You have an established user base – leverage it!
5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile Application or Mobile Web Application?
Mobile Web Apps
Limited functionality w/ HTML
Flash is problematic for iOS
Mobile Applications
Native or cross-compile?
Both provide much more functionality than “Web”
Native is platform-specific
Cross-compile casts a wider net- but performance and experience could* suffer
6
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Platform Selection
Web
HTML with JavaScript/CSS
Cross-compile
Adobe AIR (AS3, MXML)
PhoneGap (JS, HTML)
Titanium (JS, HTML)
Native (only choose one)
Objective-C (iOS)
Java (Android)
C#/Silverlight/XAML (Windows)
7
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
We Chose AIR : Pure AS3 or Flex?
ActionScript 3
Total control over everything
Everything must be designed
Layout/structure non-existent
Performance usually good
Flex Framework
Great foundation for apps
Lots of goodies in place
Layout/structure is solid
Performance getting better
Compiles to AS3 anyway!
8
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile vs. Desktop
Mobile Considerations
9
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile Differences: Desktop User Experience
My normal setup: dual 1680 x 1050 displays
Lots of applications opened simultaneously
Uber-Multitasking!
10
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile Differences: Screens
Users generally have very small screens and therefore not a lot of room to work with.
Applications take up the entire screen when running.
This means:
Serious choices must be made in terms of what is made available to the user.
Interface elements should be kept to a minimum.
No clutter!
11
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile Differences: Pixels Per Inch (PPI)
Traditionally, software developers have not had to worry about PPI.
Desktop PPI
72
Mobile PPI
160-240
240-320
320-XXX
Actually, these are generalizations. PPI on mobile is all over the place, as is screen resolution.
12
320ppi 240ppi 160ppi
100px
100px 100px
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile Differences: Touch and Gestures
Touch interfaces completely derail the concept of a single, clicking arrow, substituting fingertips, gestures, and sensors for the simple mouse pointer.
This fact alone reshapes the entire interactive landscape when considering a user’s experience with these devices.
Touch and gestures are ancient and powerful! Nothing new at all- the mouse has been an imperfect deviation.
13
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile Differences: Hardware
Dedicated Buttons…
iOS: one button.
Android: four buttons along the bottom or side, which include a home key, dedicated back button, dedicated options menu button, and search.
Tablet OS: a unique bezel through which a variety of gestures can be used, moving beyond simple button presses.
14
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile Differences: Menu Systems
15
Menu Systems
Android: a dedicated menu button built into the device that can be programmed to reveal application options, normally via a menu at the bottom of the screen.
iOS: a button within the application that allows the user to access application-specific menus.
Tablet OS: a swipe from the top bezel will pull down or dismiss a set of menu options defined for any given application.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Note Existing OS Paradigms
When users have become familiar with a specific platform, they will expect certain behaviors when interacting with that device.
Deviating from an established expectation can cause confusion for the user and lead to a frustrating experience, or even to total abandonment of the application.
16
[image courtesy of GestureWorks]
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Design and Development
Ready? How to Proceed?
17
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adapting Existing Application Functionality
When moving from a full desktop application to a more limited* experience, what steps and consideration will allow us to perform this adaptation in a clear and organized manner?
Know your product
Know your audience
Become familiar with different devices
Become familiar with user expectations
Do not be afraid
Experiment
18
* Limited in terms of overall functionality
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Functional Distillation
19
Cut
Move
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Small Mobile Devices
Mobile Phones
Conventions exist due to these devices being in the market for a few years now: ActionBar, for example.
Keep in mind that we have absolutely no room for anything extra on these devices.
Design must be focused.
Functionality must be distilled, stripped, SOLID.
20
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Larger Mobile Devices
Tablets
Generally have more room that phones: 7” – 10”
Instead of simply scaling the application elements, re-form them to work better within the space.
Tablets are generally more powerful than smaller devices as well.
21
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flex 4.6 / AIR 3.0
Captive Runtime ActionScript Native Extensions Tablet Enhancements SplitViewNavigator
CalloutButton
ButtonBar
Mobile Enhancements ToggleSwitch
DateSpinner
SpinnerList
22
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Development and Distribution
Oh… now we have to actually build it?
23
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Development
Multiplatform Flex
Use CSS Media Queries
Flex Libraries can be leveraged
Take advantage of the Flash Builder simulator
Use targeted application logic which wraps the core
Export release builds specific to each target platform
24
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CourseMedia™ Mobile
25
CourseMedia™ Mobile allows DU CourseMedia™ gallery access on-the-go!
Allows students and faculty of the University of Denver to access DU CourseMedia™ gallery objects from mobile devices.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CourseMedia™ Mobile
26
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CourseMedia™ Mobile
27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CourseMedia™ Mobile
28
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
BETA Period and Testing
Native and cross-compiled applications are much more difficult to test than traditional web projects.
Android is the perfect testing platform due to openness and simplicity.
Gather live data from a small set of users to inform refinements and enhancements.
Move onto other platforms from this foundation.
29
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Distribution and Education
So now that you have something for the users, how do you advertise and get them going?
Leverage internal communication channels.
Try and get marketing involved.
Let your current users know – advertise the mobile app within the desktop/web application!
30
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Success?
Time will tell…
31
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Closing Thoughts
There is a lot to consider when translating web application functionality from desktop to mobile.
Ask lots of questions up front.
Consider the entirely of options available.
Know the differences between desktop and mobile and become familiar with the extra challenges inherent in mobile platforms.
Don’t be afraid to cut functionality- users need a directed experience.
Testing on multiple devices is a must!
32
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Questions?
Ask ‘em.
33
?
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Get in Touch!
34
Joseph Labrecque, MA University of Denver - CTL Senior Interactive Software Engineer Adjunct Faculty
Fractured Vision Media, LLC Proprietor
EMAIL [email protected]
WEB http://josephlabrecque.com/
TWITTER @JosephLabrecque What’s New in Flash Player 11
What’s New in Adobe AIR 3
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hand in your surveys to the room monitors
One survey per session will be selected as a winner of an Adobe Press e-book or Video
Introduction to Adobe Edge
Web Design with Muse (code name) from Adobe
Android App Development and Design: Learn by Video
Winners will be notified via e-mail at the end of each day
Turn in your surveys for a chance to WIN!