Designing for Multiple DevicesSarit Arora, Yahoo!
Evolving Nature of UX ComplexityUser Profiles are vast and wide.
Evolving Nature of UX ComplexityMany Languages, Many Cultures
Evolving Nature of UX ComplexityIn the consumer space, just rational and emotional design is not enoughDesigns should be meaningful. Meaningful Emotional Rational
Evolving Nature of UX ComplexityChanging consumer behaviorSocial Networks preferred over email for informal communication
Evolving Nature of UX ComplexityThese users are using multiple devices, sometimes to do the same tasks
Evolving Nature of UX ComplexityPeople start their Online lives with a Mobile, not a PC
How do we achieve a seamless experienceacross devices?
Study the daily activities and the tasks of thepeople, in their context
Uncover how technology can improve localconditions
See what technology and solutions are inplace and how its being used
Validate that unique solutions are properlydesigned
Detailed Data User Conceptual Design & Analytics andResearch Design Prototyping Feedback Evaluation Concept and Evaluation Testing
However, to design for the multiple deviceworld… a few more considerations have to betaken into accountChanging Technology TrendsPlay on Device Strengths
Changing Technology TrendsDevices, Apps, HTML 5
Changing Technology TrendsDesign for devices is more than just “apps”
Changing Technology TrendsDesign for devices is more than just “apps” – Think Platforms
Changing Technology TrendsBut for apps consider…..“Native” vs. “web” vs. “hybrid” apps?Web apps are accessed via the browser & updated automatically (from user’sperspective)Native apps are downloaded & updates must also be downloaded (unless theyare “hybrids.”)Native apps have greater access to the device hardware & content (though that’schanging.)
Changing Technology TrendsWeb App ExamplesIt 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 diﬀerent na1ve apps. Gyroscope Game (Occipital) (BeatTouch)
Changing Technology TrendsWeb App – Fluid GridA web grid system that allows designers to use the screen real estate on largemonitors and retain great design on smaller ones.
Changing Technology TrendsHowever, if you need device access, multi-tasking, or micropayments, in mostcases you’ll want to create a native app. Take calls Listen to music (Skype) (Pandora) Tapparatus
Changing Technology TrendsiOS, Android, Web OS, Windows 7…
Design for iPhoneIt is a small 320x480 pixel screen (163ppi), 640x960 in case ofiPhone 4The size of a fingertip is 44x44 pixelsMind your gestures and animationDelight with stunning graphics, add realismMinimum required inputExpress information briefly
Yahoo! Finance Yahoo! Deals Yahoo! MessengerThursday, May 24, 12
1. Small Screen One of the longest standing issues in Web design has been the "everything including the kitchen sink problem” On a 1024x768 screen theres lots of pixels to fill!
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
1. Small ScreenApp should be instantly understandableMain function should be immediately apparentMinimize the number of controls
2. Fingertip Targets 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 pixelsThursday, May 24, 12
3. Animation & Gestures 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
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
5. Minimum Required Input Small screen requires lot of attention to input information Text field vs. pickersThursday, May 24, 12
6. Express Information Briefly Short and Direct Real life/world metaphorsThursday, May 24, 12