Design Strategy forCross-Device User Experience      Silicon India WebApps 2011 Chennai                        Ashutosh Ku...
About me...- Industrial designer from IIT Mumbai- Designing User Experiences for 11 years- Principal Interaction Designer ...
Evolving Nature of UX Complexity        User Profiles are vast and wide.
Too Many DevicesThese users are using multiple devices, sometimes to do the same tasks
Typical Device Usage PatternMulti tasking     Low connection       High connection, High attention span, Desk work   Low c...
People are spending more time on         internet devices
How do we achieve a seamless experience across devices?
Typical Design Process                                      Detailed         Data  User         Conceptual                ...
Rapid Technology Changes
Consumption Pattern is ChangingUsers are seeking content any where on any Device.  Yahoo! Finance     Yahoo! Deals      Ya...
Consumption Pattern is Changing
Play on Device Strength
Play on Device StrengthLeverage Device specific features to offer innovative       navigation and content presentation.
Can we have a single Design?
What is Responsive Design“A design that "responds" to the user’s behavior and environment         based on screen size, pl...
Responsive Design Ingredients                                       Flexible Images    Media Queries                    Se...
Why Responsive Design                                                           @ Morten HjerdeFlexible layouts are “Neces...
Fluid Design LimitationsWhen rendered on smaller widths… fluid               design starts degrading
Adoptive LayoutIn response to the changed screen size,  layout is changed suitably for optimum                    viewing ...
Adoptive Layout
Responsive Layout Rendering      real estate      wastage                                Device targeting through         ...
Fluid ImagesScaling Images with the Layout Container                                             Flexible images          ...
Displaying Essential Content OnlyWe can…shrink things proportionally & rearrange elements to fit in smaller screensBut doe...
Provide Essential Content OnlyWith 80% less screen space, we should knowwhat matters mostThe application for small devices...
Provide Essential Content Only
Touch Friendly Design Considerations          Visually differentiate links..          from content w/o relying on mouse ov...
Touch Experience Design - Target45-48 px is ideal targets for     Visual feedback is critical and necessary in a touchable...
Touch Experience Design - GesturesLeverage standard gestural controls to respond exactlyas a user would expect.Provide eas...
Touch Experience Design - TransitionsIn Touch UI, Transition animations help confirmthat action is completed.Engages user ...
Touch Friendly Input Controls        Text field vs. pickers
Emerging Trends…                     Content for Connected devicesComplementary Apps                                   Dev...
Thank YouCredits: Yahoo! Images, Flicker, Google Images, Iconarchive                                                      ...
Upcoming SlideShare
Loading in...5
×

Design Strategy for Cross-Device User Experience

3,013

Published on

My talk at WebApps'11 Chennai on UX strategy for multiple devices and Design considerations for seamless and meaningful user experience

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,013
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
89
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Design Strategy for Cross-Device User Experience

  1. 1. Design Strategy forCross-Device User Experience Silicon India WebApps 2011 Chennai Ashutosh Kumar, Yahoo! Design
  2. 2. About me...- Industrial designer from IIT Mumbai- Designing User Experiences for 11 years- Principal Interaction Designer in Yahoo!-Past: Worked with HumanFactors ashutoshk77@yahoo.com ashutoshk77
  3. 3. Evolving Nature of UX Complexity User Profiles are vast and wide.
  4. 4. Too Many DevicesThese users are using multiple devices, sometimes to do the same tasks
  5. 5. Typical Device Usage PatternMulti tasking Low connection High connection, High attention span, Desk work Low connection Full Attention Full AttentionSubconscious Variable Variable tasks Variable Relaxing FocusedShort Attention Time and attention Time and attention Entertainment Lying in bed Morning Commute to Work Office Hours Commute to Home Relax Before Bed
  6. 6. People are spending more time on internet devices
  7. 7. How do we achieve a seamless experience across devices?
  8. 8. Typical Design Process Detailed Data User Conceptual Design & Analytics andResearch Design Prototyping Feedback Evaluation Concept and Evaluation Testing To cater multiple device world… we need more considerations… • Changing Technology Trends • Play on Device Strengths • Responsive Design
  9. 9. Rapid Technology Changes
  10. 10. Consumption Pattern is ChangingUsers are seeking content any where on any Device. Yahoo! Finance Yahoo! Deals Yahoo! Messenger
  11. 11. Consumption Pattern is Changing
  12. 12. Play on Device Strength
  13. 13. Play on Device StrengthLeverage Device specific features to offer innovative navigation and content presentation.
  14. 14. Can we have a single Design?
  15. 15. What is Responsive Design“A design that "responds" to the user’s behavior and environment based on screen size, platform and orientation.”o Adaptive layout to suit different screen sizeso Resizing images to suit the screen resolutiono Serving low-bandwidth images to mobile deviceso Render only essential elements on smaller screenso Providing “touch-friendly” links and buttons for mobile userso Detecting and responding to mobile features
  16. 16. Responsive Design Ingredients Flexible Images Media Queries Seamless UX across devices Adoptive Layouts
  17. 17. Why Responsive Design @ Morten HjerdeFlexible layouts are “Necessity” NOT “luxury” for websites unlike years ago.Keep creating custom solutions for each Device is not always feasible.One responsive design is easy to manage and maintain.
  18. 18. Fluid Design LimitationsWhen rendered on smaller widths… fluid design starts degrading
  19. 19. Adoptive LayoutIn response to the changed screen size, layout is changed suitably for optimum viewing experience.
  20. 20. Adoptive Layout
  21. 21. Responsive Layout Rendering real estate wastage Device targeting through CSS3 Media Queries max-device-width: <width> max-device-width: <width> <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)” href=”small.css”/> Gutters are removed while rendering on small device
  22. 22. Fluid ImagesScaling Images with the Layout Container Flexible images img { max-width: 100%;Hiding and Revealing Portions of Images
  23. 23. Displaying Essential Content OnlyWe can…shrink things proportionally & rearrange elements to fit in smaller screensBut does user need that very same content on smaller screen or mobiledevice? display: none <meta name="viewport" content="width=device-width" /
  24. 24. Provide Essential Content OnlyWith 80% less screen space, we should knowwhat matters mostThe application for small devices should provide only what customersneed and nothing else
  25. 25. Provide Essential Content Only
  26. 26. Touch Friendly Design Considerations Visually differentiate links.. from content w/o relying on mouse over discovery. CSS hover states (a:hover) is unsupported. Design obvious drop-down menus… tap-to-open needs a link / button like affordance Design for device rotation… Most of the devices supporting rotation so detect the rotation and switch CSS for optimum layout. Design for fat Fingers… In spite of advanced touch screens…finger is not As accurate as cursor so…space out your links & interactive elements optimally.
  27. 27. Touch Experience Design - Target45-48 px is ideal targets for Visual feedback is critical and necessary in a touchablefinger. environment. it is still visible after released touch and guides a user through an interface.Hit targets are proportional tothe device resolution so… Audible feedback is secondary mechanism Use audible cues in specific ranges to cut through the user’s natural environment.Keep touchable element sizeto 10 mm minimum Keep Tolerances to avoid accidentally hitting an adjacent element.
  28. 28. Touch Experience Design - GesturesLeverage standard gestural controls to respond exactlyas a user would expect.Provide easy access to functionality (buttons, sliders,menu items, etc.) but allow advanced, learnablegestures as shortcuts.Distinguish between global, system-level gestures andlocal, app-level gestures.Don’t put labels below a control, as it can be obscuredby the users own hand.Trigger actions on release, not on press.
  29. 29. Touch Experience Design - TransitionsIn Touch UI, Transition animations help confirmthat action is completed.Engages user and provides a immersive dive in toapplication context.Transitions should be simple, elegant and subtleNOT dramatic to draw attention to themselves. Provide touch, press and release states for actionable elements in absence of focus states or hover states.
  30. 30. Touch Friendly Input Controls Text field vs. pickers
  31. 31. Emerging Trends… Content for Connected devicesComplementary Apps Device Shifting
  32. 32. Thank YouCredits: Yahoo! Images, Flicker, Google Images, Iconarchive ashutoshk77 ashutoshk77@yahoo.com 8197820540
  1. A particular slide catching your eye?

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

×