PATHOPHYSIOLOGY OF DIABETES MELLITUS By Prarit Arora By Prarit Arora.
Designing for Multiple Devices - Sarit Arora
-
Upload
stc-india-ux-sig -
Category
Design
-
view
755 -
download
0
description
Transcript of Designing for Multiple Devices - Sarit Arora
![Page 1: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/1.jpg)
Designing for Multiple Devices Sarit Arora, Yahoo!
![Page 2: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/2.jpg)
User Profiles are vast and wide.
Evolving Nature of UX Complexity
![Page 3: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/3.jpg)
Many Languages, Many Cultures
Evolving Nature of UX Complexity
![Page 4: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/4.jpg)
In the consumer space, just rational and emotional design is not enough
Evolving Nature of UX Complexity
Designs should be meaningful.
Rational
Emotional
Meaningful
![Page 5: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/5.jpg)
Changing consumer behavior
Evolving Nature of UX Complexity
Social Networks preferred over email for informal communication
![Page 6: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/6.jpg)
These users are using multiple devices, sometimes to do the same tasks
Evolving Nature of UX Complexity
![Page 7: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/7.jpg)
People start their Online lives with a Mobile, not a PC
Evolving Nature of UX Complexity
![Page 8: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/8.jpg)
How do we achieve a seamless experience across devices?
![Page 9: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/9.jpg)
Study the daily activities and the tasks of the people, in their context
![Page 10: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/10.jpg)
Uncover how technology can improve local conditions
![Page 11: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/11.jpg)
See what technology and solutions are in place and how its being used
![Page 12: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/12.jpg)
Validate that unique solutions are properly designed
![Page 13: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/13.jpg)
User Research
Conceptual Design
Detailed Design &
Prototyping
Data Analytics and
Feedback
Concept Evaluation
Evaluation and
Testing
![Page 14: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/14.jpg)
However, to design for the multiple device world… a few more considerations have to be taken into account
Changing Technology Trends
Play on Device Strengths
![Page 15: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/15.jpg)
Changing Technology Trends
Devices, Apps, HTML 5
![Page 16: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/16.jpg)
Changing Technology Trends
Design for devices is more than just “apps”
![Page 17: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/17.jpg)
Changing Technology Trends
Design for devices is more than just “apps” – Think Platforms
![Page 18: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/18.jpg)
Changing Technology Trends
But for apps consider…..“Native” vs. “web” vs. “hybrid” apps?
Web apps are accessed via the browser & updated automatically (from user’s perspective)
Native apps are downloaded & updates must also be downloaded (unless they are “hybrids.”)
Native apps have greater access to the device hardware & content (though that’s changing.)
![Page 19: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/19.jpg)
Changing Technology Trends
Gyroscope (Occipital)
Game (BeatTouch)
Web App Examples It is easier to make a cross-‐pla0orm applica1on if it is on the web. It is also easier to migrate an exis1ng web-‐app to mobile pla0orms through a mobile-‐friendly web version, rather than by making a bunch of different na1ve apps.
![Page 20: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/20.jpg)
A web grid system that allows designers to use the screen real estate on large monitors and retain great design on smaller ones.
Changing Technology Trends Web App – Fluid Grid
![Page 21: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/21.jpg)
Changing Technology Trends
However, if you need device access, multi-tasking, or micropayments, in most cases you’ll want to create a native app.
Take calls (Skype)
Listen to music (Pandora) Tapparatus
![Page 22: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/22.jpg)
Changing Technology Trends
iOS, Android, Web OS, Windows 7…
![Page 23: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/23.jpg)
Changing Technology Trends
iOS Prototyping
Apple’s iOS Interface Builder
http://www.zambetti.com/projects/liveview/
http://giveabrief.com/
![Page 24: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/24.jpg)
Changing Technology Trends
Prototyping for Android
http://appinventor.googlelabs.com/about/index.html
![Page 25: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/25.jpg)
Changing Technology Trends
Prototyping for Windows
![Page 26: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/26.jpg)
Changing Technology Trends
… and not to forget
![Page 27: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/27.jpg)
However, to design for the multiple device world… a few considerations have to be taken into account
Changing Technology Trends
Play on Device Strengths
![Page 28: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/28.jpg)
Play on Device Strength
![Page 29: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/29.jpg)
It is a small 320x480 pixel screen (163ppi), 640x960 in case of iPhone 4
Mind your gestures and animation
The size of a fingertip is 44x44 pixels
Delight with stunning graphics, add realism
Design for iPhone
Minimum required input
Express information briefly
![Page 30: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/30.jpg)
Yahoo! Finance Yahoo! Deals Yahoo! Messenger
Thursday, May 24, 12
![Page 31: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/31.jpg)
One of the longest standing issues in Web design has been the "everything including the kitchen sink problem” On a 1024x768 screen there's lots of pixels to fill!
1. Small Screen
![Page 32: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/32.jpg)
1. Small Screen
With 80% less screen space, you should know what matters most The app should have a laser-like focus on what customers need and no room for anything else
![Page 33: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/33.jpg)
1. Small Screen
![Page 34: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/34.jpg)
1. Small Screen
![Page 35: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/35.jpg)
1. Small Screen
App should be instantly understandable
Main function should be immediately apparent
Minimize the number of controls
![Page 36: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/36.jpg)
The average cursor size is 16x16 pixels, but the average size of your fingertip is 44x44 pixels Give tappable elements in your application a target area of about 44x44 pixels
2. Fingertip Targets
Thursday, May 24, 12
![Page 37: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/37.jpg)
2. Fingertip Targets
Thursday, May 24, 12
![Page 38: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/38.jpg)
Animation is a great way to communicate effectively, as long as it doesn’t get in the way of users Animation can communicate status, provide useful feedback, and help people visualize the results of their actions
3. Animation & Gestures
![Page 39: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/39.jpg)
3. Animation & Gestures
Thursday, May 24, 12
![Page 40: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/40.jpg)
Use complex gestures as shortcuts to expedite a task
Avoid associating different actions with the standard gestures users know
In general, avoid defining new gestures
3. Animation & Gestures
![Page 41: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/41.jpg)
4. Graphics & Realism
Thursday, May 24, 12
![Page 42: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/42.jpg)
4. Graphics & Realism
When appropriate, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.
Thursday, May 24, 12
![Page 43: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/43.jpg)
5. Minimum Required Input
Small screen requires lot of attention to input information
Text field vs. pickers
Thursday, May 24, 12
![Page 44: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/44.jpg)
6. Express Information Briefly
Short and Direct
Real life/world metaphors
Thursday, May 24, 12
![Page 45: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/45.jpg)
Example: Yahoo! Cricket
![Page 46: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/46.jpg)
Example: Yahoo! Cricket
![Page 47: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/47.jpg)
Example: Yahoo! Cricket
![Page 48: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/48.jpg)
The Future is here… Websites looking and behaving like apps
![Page 49: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/49.jpg)
The Future is here… Websites looking and behaving like apps
![Page 50: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/50.jpg)
The Future is here… Companion Apps…
![Page 51: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/51.jpg)
A Special Thanks to…
Harshad Kulkarni, Biju Damodaran and Sandeep Datar
![Page 52: Designing for Multiple Devices - Sarit Arora](https://reader037.fdocuments.in/reader037/viewer/2022102921/54512eedaf7959af2f8b4af0/html5/thumbnails/52.jpg)
Thanks ! Questions?