UX for Multi Device
       Applications


                          | www.universalmind.com


        Joe Johnston
       ...
A Multi Device
 Application
 Netflix Example

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


 App...
Challenges
 Devices?
 Which Devices to I target?




                     | www.universalmind.com




Monday, September 20...
Challenges
 Native UI vs Custom UI?
 How do I build it?




                     | www.universalmind.com




Monday, Septe...
Challenges
 Users?
 Who are the users.




                     | www.universalmind.com




Monday, September 20, 2010
Telco Wireless
 Case Study
 5 resources
 UX/ Dev/Design

 Android
 iPhone
 iPad
 Flash MultiTouch Kiosk
 HTML 5 Applicatio...
Telco Wireless
 Case Study




                                               Case Study Video




                     | ...
Telco Wireless
 Case Study
 4 Personas - The users




                     | www.universalmind.com




Monday, September ...
Telco Wireless                                Ecosystem story
 Case Study                                    Focus on four...
Telco Wireless
 Case Study
 iPhone - Native experience

 Used on the Go

 Native bottom TabBar experience




            ...
Telco Wireless
 Case Study
 Android - Native experience

 Used on the Go

 Native Tab experience

 Tactile buttons

 Back ...
Telco Wireless
 Case Study
 iPad - Bridge between Web and Mobile
 experience

 Interesting Device

 Used on the Couch




...
Telco Wireless
 Case Study
 Kiosk - Key experience for a targeted user

 Used in Entertaining environments - Movie
 Theate...
Less is More
 Mobile
 You don't need everything on a mobile
 device, its mobile and not the desktop/web

 Use Aggressive A...
Connectivity
 What happens
 How does your application react when its
 connected and when its not, smooth user
 experience
...
Orientation
 Reorganize

 How does it handle Orientation changes,
 Landscape vs Portrait.

 Reorganize Content or Change C...
Input
 What is it?

 Be aware of input methods and interactions

 Touch/Multi Touch
 Virtual/Physical Keyboards
 Wheels
 V...
HTML5
 Do I use it?
 HTML5 features are incomplete and do not
 provide a consistent experience across
 multiple devices.

...
Resources
 UX/UI Guides

   iOS Reference Library -
   iPhone Human Interface
   Guidelines


   Android - User Interface
...
One More
 Thing                                           www.ibrainstormapp.com




 iPad Creative Collaboration app

 iP...
Ok, One More
 Thing

 Lady Gaga iPad Collectors
 digital edition concept

 Built using the Adobe
 Digital Publishing frame...
Thanks                                       joe.johnston@universalmind.com

                                             ...
Upcoming SlideShare
Loading in...5
×

UX for Multi Device applications

2,471

Published on

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 it’s 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
* Gesture’s 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, Managers

Attain: A better understanding of what to think about when building applications for Multi Devices in future.

Published in: Design

UX for Multi Device applications

  1. 1. UX for Multi Device Applications | www.universalmind.com Joe Johnston Senior UX Specialist Monday, September 20, 2010
  2. 2. A Multi Device Application Netflix 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. 3. Challenges Devices? Which Devices to I target? | www.universalmind.com Monday, September 20, 2010
  4. 4. Challenges Native UI vs Custom UI? How do I build it? | www.universalmind.com Monday, September 20, 2010
  5. 5. Challenges Users? Who are the users. | www.universalmind.com Monday, September 20, 2010
  6. 6. Telco Wireless Case Study 5 resources UX/ Dev/Design Android iPhone iPad Flash MultiTouch Kiosk HTML 5 Application Flex Application Silverlight Application | www.universalmind.com Monday, September 20, 2010
  7. 7. Telco Wireless Case Study Case Study Video | www.universalmind.com Monday, September 20, 2010
  8. 8. Telco Wireless Case Study 4 Personas - The users | www.universalmind.com Monday, September 20, 2010
  9. 9. Telco Wireless Ecosystem story Case Study 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. 4 Context Scenarios - Eco System Story 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 | www.universalmind.com Monday, September 20, 2010
  10. 10. Telco Wireless Case Study iPhone - Native experience Used on the Go Native bottom TabBar experience | www.universalmind.com Monday, September 20, 2010
  11. 11. Telco Wireless Case Study Android - Native experience Used on the Go Native Tab experience Tactile buttons Back Button | www.universalmind.com Monday, September 20, 2010
  12. 12. Telco Wireless Case Study iPad - Bridge between Web and Mobile experience Interesting Device Used on the Couch | www.universalmind.com Monday, September 20, 2010
  13. 13. Telco Wireless Case Study Kiosk - Key experience for a targeted user Used in Entertaining environments - Movie Theaters, Airports, Malls | www.universalmind.com Monday, September 20, 2010
  14. 14. Less is More Mobile 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 | www.universalmind.com Monday, September 20, 2010
  15. 15. Connectivity What happens How does your application react when its connected and when its not, smooth user experience How does it handle Notifications and Updates | www.universalmind.com Monday, September 20, 2010
  16. 16. Orientation Reorganize How does it handle Orientation changes, Landscape vs Portrait. Reorganize Content or Change Content | www.universalmind.com Monday, September 20, 2010
  17. 17. Input What is it? Be aware of input methods and interactions Touch/Multi Touch Virtual/Physical Keyboards Wheels VUI - Voice User Interface TUI - Tactile User interface GUI - Graphical User Interface Be aware of where the user’s hand will be while interacting with the device | www.universalmind.com Monday, September 20, 2010
  18. 18. HTML5 Do 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 | www.universalmind.com Monday, September 20, 2010
  19. 19. Resources UX/UI Guides iOS Reference Library - iPhone Human Interface Guidelines Android - User Interface Guidelines RIM - Blackberry UI Guidelines Windows - Phone 7 Series UI Guidelines(pdf) | www.universalmind.com Monday, September 20, 2010
  20. 20. One More Thing www.ibrainstormapp.com iPad Creative Collaboration app iPhone Companion allowing ’flick’ interaction Stats Submitted 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. 21. Ok, One More Thing Lady Gaga iPad Collectors digital edition concept Built using the Adobe Digital Publishing framework all in InDesign | www.universalmind.com Monday, September 20, 2010
  22. 22. Thanks joe.johnston@universalmind.com joe@merhl.com @merhl merhl.com | www.universalmind.com Joe Johnston Senior UX Specialist Monday, September 20, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×