Más contenido relacionado La actualidad más candente (20) Similar a From Desktop to Mobile: Application Functionality for Small Screens (20) Más de Joseph Labrecque (20) From Desktop to Mobile: Application Functionality for Small Screens1. From Desktop to Mobile:
Application Functionality
for Small Screens
Joseph Labrecque
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
2. Introduction
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. 2
3. 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
4. Planning Stages : Research
What do you need to know?
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
5. 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!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
6. 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6
7. 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)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
8. 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!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
9. Mobile vs. Desktop
Mobile Considerations
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
10. Mobile Differences: Desktop User Experience
My normal setup: dual 1680 x 1050 displays
Lots of applications opened simultaneously
Uber-Multitasking!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
11. 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!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
12. Mobile Differences: Pixels Per Inch (PPI)
Traditionally, software developers
have not had to worry about PPI. 100px
100px
Desktop PPI 100px
72
Mobile PPI 320ppi 240ppi 160ppi
160-240
240-320
320-XXX
Actually, these are generalizations.
PPI on mobile is all over the place,
as is screen resolution.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
13. 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.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
14. 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.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
15. Mobile Differences: Menu Systems
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. 15
16. 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.
[image courtesy of GestureWorks]
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
17. Design and Development
Ready? How to Proceed?
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
18. 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
* Limited in terms of overall functionality
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
19. Functional Distillation
Cut
Move
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
20. 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.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
21. 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.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
22. Flex 4.6 / AIR 3.0
Captive Runtime
ActionScript Native Extensions
Tablet Enhancements
SplitViewNavigator
CalloutButton
ButtonBar
Mobile Enhancements
ToggleSwitch
DateSpinner
SpinnerList
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
23. Development and Distribution
Oh… now we have to actually build it?
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
24. 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
25. CourseMedia™ Mobile
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. 25
29. 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.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
30. 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!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
31. Success?
Time will tell…
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
32. 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!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
33. Questions?
Ask ‘em.
?
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
34. Get in Touch!
Joseph Labrecque, MA
University of Denver - CTL
Senior Interactive Software Engineer
Adjunct Faculty
Fractured Vision Media, LLC
Proprietor
EMAIL Joseph.Labrecque@du.edu
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. 34
35. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
36. Turn in your surveys for a chance to WIN!
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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.