UX for Multi Device applications

Download UX for Multi Device applications

Post on 08-May-2015

2.411 views

Category:

Design

1 download

DESCRIPTION

As we see more devices flood the market, we run into challenges with the variety of specifications and building experiences for them. Joe Johnston wanted to explore whether its better to utilize the native controls for each device, or use a more consistent and custom UI (that may be on an existing desktop/Web app). In this presentation, Joe will go through the entire process of building a sample application across multiple devices.Some items that will be explored:* Screen size* Screen Resolution* Orientation (Portrait and Landscape Modes)* Physical Navigation Buttons* On Screen Keyboards vs Physical Keyboards* Gestures and Multi-touch* Device Form Factor* Left-handed vs Right-handed users and placement of UI elements* Network Connectivity: How does your app respond without it?Audience: Designers, UX, Developers, ManagersAttain: A better understanding of what to think about when building applications for Multi Devices in future.

TRANSCRIPT

  • 1.UX for Multi DeviceApplications | www.universalmind.com Joe Johnston Senior UX Specialist Monday, September 20, 2010

2. A Multi DeviceApplicationNetix Example Wii XBox TiVO BlueRay iPhone iPad Web Other...App Built for that Device Wii vs XBox| www.universalmind.com Monday, September 20, 2010 3. ChallengesDevices?Which Devices to I target?| www.universalmind.com Monday, September 20, 2010 4. ChallengesNative UI vs Custom UI?How do I build it?| www.universalmind.com Monday, September 20, 2010 5. ChallengesUsers?Who are the users.| www.universalmind.com Monday, September 20, 2010 6. Telco WirelessCase Study5 resourcesUX/ Dev/Design AndroidiPhoneiPadFlash MultiTouch KioskHTML 5 ApplicationFlex ApplicationSilverlight Application| www.universalmind.com Monday, September 20, 2010 7. Telco WirelessCase StudyCase Study Video| www.universalmind.com Monday, September 20, 2010 8. Telco WirelessCase Study4 Personas - The users| www.universalmind.com Monday, September 20, 2010 9. Telco WirelessEcosystem storyCase StudyFocus on four different individuals. (four personas each with a context scenario)All basically accomplish the same sort of task but the experience is focused for that specicdevice.4 Context Scenarios - Eco System Story 1. A stay at home Mom which logs into the Telco website and checks here account info, likeminutes the family has used, pay her bills, compare her plan with others, see a chart of textand minutes used. 2. A younger individual say 15 that has a Pay as you Go type of phone and does not have acredit card. He wants to add more minutes to his phone so he goes to the kiosk either inthe Telco store,movie theater or mall and logs in and sees his account info and decides toput more minutes on his phone with cash. The kiosk would have the ability to accept cashpayments. Could allow to get other things like ringtones. 3. A business road warrior while traveling needs to check his account info using the AndroidApp on his smart phone. He checks to see when his bill is due and even could allow him topay 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 heriPad to check her account. She launches the iPad app which has all of her account info andallows 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| www.universalmind.com Monday, September 20, 2010 10. Telco WirelessCase StudyiPhone - Native experience Used on the Go Native bottom TabBar experience| www.universalmind.com Monday, September 20, 2010 11. Telco WirelessCase StudyAndroid - Native experience Used on the Go Native Tab experience Tactile buttons Back Button| www.universalmind.com Monday, September 20, 2010 12. Telco WirelessCase StudyiPad - Bridge between Web and Mobileexperience Interesting Device Used on the Couch | www.universalmind.com Monday, September 20, 2010 13. Telco WirelessCase StudyKiosk - Key experience for a targeted user Used in Entertaining environments - MovieTheaters, Airports, Malls| www.universalmind.com Monday, September 20, 2010 14. Less is MoreMobileYou don't need everything on a mobiledevice, its mobile and not the desktop/web Use Aggressive Auto Completion - reducetyping Flatten hierarchy Truncate interfaces| www.universalmind.com Monday, September 20, 2010 15. ConnectivityWhat happensHow does your application react when itsconnected and when its not, smooth userexperience How does it handle Notications andUpdates| www.universalmind.com Monday, September 20, 2010 16. OrientationReorganize How does it handle Orientation changes,Landscape vs Portrait. Reorganize Content or Change Content| www.universalmind.com Monday, September 20, 2010 17. 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 users hand will bewhile interacting with the device| www.universalmind.com Monday, September 20, 2010 18. HTML5Do I use it?HTML5 features are incomplete and do notprovide a consistent experience acrossmultiple devices. , , and are not supported equally different platforms support different codecsand implementations No streaming media, only progressivedownload CSS3 Styles are not consistent or reliable HTML5 APIs, including geolocation andofine storage are not consistent or notimplemented No camera / device access | www.universalmind.com Monday, September 20, 2010 19. ResourcesUX/UI Guides iOS Reference Library -iPhone Human InterfaceGuidelinesAndroid - User InterfaceGuidelines RIM - Blackberry UI GuidelinesWindows - Phone 7 Series UIGuidelines(pdf)| www.universalmind.com Monday, September 20, 2010 20. One MoreThing www.ibrainstormapp.comiPad Creative Collaboration app iPhone Companion allowing ickinteractionStatsSubmitted 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.universalmind.com Monday, September 20, 2010 21. Ok, One MoreThing Lady Gaga iPad Collectorsdigital edition concept Built using the AdobeDigital Publishing frameworkall in InDesign| www.universalmind.com Monday, September 20, 2010 22. Thanks joe.johnston@universalmind.comjoe@merhl.com@merhlmerhl.com | www.universalmind.com Joe Johnston Senior UX Specialist Monday, September 20, 2010