Download - UX for Multi Device applications

Joe JohnstonSenior UX Specialist

UX for Multi Device Applications

| www.universalmind.com

Monday, September 20, 2010

http://www.universalmind.com



A Multi Device Application

Netflix Example

• Wii• XBox• TiVO• BlueRay• iPhone• iPad• Web• Other...

App Built for that Device• Wii vs XBox





Challenges

Devices?Which Devices to I target?



Challenges

Native UI vs Custom UI?How do I build it?



Challenges

Users?Who are the users.



Telco Wireless Case Study5 resources UX/ Dev/Design

AndroidiPhoneiPadFlash MultiTouch KioskHTML 5 ApplicationFlex ApplicationSilverlight Application



Telco Wireless Case Study

Case Study Video


http://www.youtube.com/watch?v=8SKCJNb-Coo

http://www.youtube.com/watch?v=8SKCJNb-Coo



4 Personas - The users




4 Context Scenarios - Eco System Story

Ecosystem story

Focus on four different individuals. (four persona’s each with a context scenario)All basically accomplish the same sort of task but the experience is focused for that specific device.

1. A stay at home Mom which logs into the Telco website and checks here account info, like minutes the family has used, pay her bills, compare her plan with others, see a chart of text and minutes used.

2. A younger individual say 15 that has a “Pay as you Go” type of phone and does not have a credit card. He wants to add more minutes to his phone so he goes to the kiosk either in the Telco store,movie theater or mall and logs in and sees his account info and decides to put more minutes on his phone with cash. The kiosk would have the ability to accept cash payments. Could allow to get other things like ringtones.

3. A business road warrior while traveling needs to check his account info using the Android App on his smart phone. He checks to see when his bill is due and even could allow him to pay his bills, compare his plan with others, see a chart of text and minutes used.

4. A grandparent or older individual that has an iPad in place of a computer. She hops on her iPad to check her account. She launches the iPad app which has all of her account info and allows her to pay her bill, compare her plan with others, see a chart of text and minutes used. Also could show some content for Help Support




iPhone - Native experience

Used on the Go

Native bottom TabBar experience




Android - Native experience

Used on the Go

Native Tab experience

Tactile buttons

Back Button




iPad - Bridge between Web and Mobile experience

Interesting Device

Used on the Couch




Kiosk - Key experience for a targeted user

Used in Entertaining environments - Movie Theaters, Airports, Malls



Less is MoreMobile

You don't need everything on a mobile device, its mobile and not the desktop/web

Use Aggressive Auto Completion - reduce typing

Flatten hierarchy

Truncate interfaces



ConnectivityWhat happens

How does your application react when its connected and when its not, smooth user experience

How does it handle Notifications and Updates



OrientationReorganize

How does it handle Orientation changes, Landscape vs Portrait.

Reorganize Content or Change Content



InputWhat is it?

Be aware of input methods and interactions

Touch/Multi TouchVirtual/Physical KeyboardsWheelsVUI - Voice User InterfaceTUI - Tactile User interfaceGUI - Graphical User Interface

Be aware of where the user’s hand will be while interacting with the device



HTML5Do I use it?

HTML5 features are incomplete and do not provide a consistent experience across multiple devices.

<audio/>, <video/>, and <canvas/> are not supported equally

different platforms support different codecs and implementations

No streaming media, only progressive download

CSS3 Styles are not consistent or reliable

HTML5 APIs, including geolocation and offline storage are not consistent or not implemented

No camera / device access



ResourcesUX/UI Guides

iOS Reference Library - iPhone Human Interface Guidelines

Android - User Interface Guidelines

RIM - Blackberry UI Guidelines

Windows - Phone 7 Series UI Guidelines(pdf)


http://developer.apple.com/library/ios/%23documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html






http://developer.android.com/guide/practices/ui_guidelines/index.html




http://docs.blackberry.com/en/developers/deliverables/17965/

http://docs.blackberry.com/en/developers/deliverables/17965/

http://download.microsoft.com/download/D/8/6/D869941E-455D-4882-A6B8-0DBCAA6AF2D4/UI%2520Design%2520and%2520Interaction%2520Guide%2520for%2520Windows%2520Phone%25207%2520Series.pdf





One More Thing

iPad Creative Collaboration app

iPhone Companion allowing ’flick’ interaction

StatsSubmitted July 19th

Week 1 - 39,816

Week 2 - 94,383

First Update Aug 3 39,544

Total updates to date over 130k

Total to date 397,345

www.ibrainstormapp.com





Ok, One More Thing

Lady Gaga iPad Collectorsdigital edition concept

Built using the Adobe Digital Publishing framework all in InDesign


Joe JohnstonSenior UX Specialist

Thanks


[email protected]

[email protected]

@merhl

merhl.com




Download - UX for Multi Device applications

Top Related