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.
1. UX for Multi Device
Applications
| www.universalmind.com
Joe Johnston
Senior UX Specialist
Monday, September 20, 2010
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
4. Challenges
Native UI vs Custom UI?
How do I build it?
| www.universalmind.com
Monday, September 20, 2010
5. Challenges
Users?
Who are the users.
| www.universalmind.com
Monday, September 20, 2010
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. Telco Wireless
Case Study
Case Study Video
| www.universalmind.com
Monday, September 20, 2010
8. Telco Wireless
Case Study
4 Personas - The users
| www.universalmind.com
Monday, September 20, 2010
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. Telco Wireless
Case Study
iPhone - Native experience
Used on the Go
Native bottom TabBar experience
| www.universalmind.com
Monday, September 20, 2010
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. 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. 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. 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. 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. Orientation
Reorganize
How does it handle Orientation changes,
Landscape vs Portrait.
Reorganize Content or Change Content
| www.universalmind.com
Monday, September 20, 2010
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. 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. 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. 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. 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. Thanks joe.johnston@universalmind.com
joe@merhl.com
@merhl
merhl.com
| www.universalmind.com
Joe Johnston
Senior UX Specialist
Monday, September 20, 2010