From Desktop to Mobile: Application Functionality for Small Screens

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

From Desktop to Mobile: Application Functionality for Small Screens Joseph Labrecque


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


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


Planning Stages : Research

What do you need to know?

4


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


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


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


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


Mobile vs. Desktop

Mobile Considerations

9


Mobile Differences: Desktop User Experience

My normal setup: dual 1680 x 1050 displays

Lots of applications opened simultaneously

Uber-Multitasking!

10


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


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


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


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


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.


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]


Design and Development

Ready? How to Proceed?

17


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


Functional Distillation

19

Cut

Move


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


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


Flex 4.6 / AIR 3.0

Captive Runtime ActionScript Native Extensions Tablet Enhancements SplitViewNavigator

CalloutButton

ButtonBar

Mobile Enhancements ToggleSwitch

DateSpinner

SpinnerList

22


Development and Distribution

Oh… now we have to actually build it?

23


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


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.



26



27



28


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


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


Success?

Time will tell…

31


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


Questions?

Ask ‘em.

33

?


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


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!

From Desktop to Mobile: Application Functionality for Small Screens

Technology

Transcript of From Desktop to Mobile: Application Functionality for Small Screens