siliconIndia_chennai

PowerPoint Presentation: 

Ashutosh Kumar, Yahoo! Design Design Strategy for Cross-Device User Experience Silicon India WebApps 2011 Chennai

PowerPoint Presentation: 

- Industrial designer from IIT Mumbai - Designing User Experiences for 11 years - Principal Interaction Designer in Yahoo! Past: Worked with HumanFactors ashutoshk77@yahoo.com ashutoshk77 About me...

PowerPoint Presentation: 

Evolving Nature of UX Complexity User Profiles are vast and wide.

PowerPoint Presentation: 

Too Many Devices These users are using multiple devices, sometimes to do the same tasks

PowerPoint Presentation: 

Typical Device Usage Pattern Morning Commute to Work Office Hours Commute to Home Before Bed Relax Multi tasking Subconscious Short Attention Low connection Variable Time and attention High connection, High attention span, Desk work Variable tasks Low connection Variable Time and attention Full Attention Relaxing Entertainment Full Attention Focused Lying in bed

PowerPoint Presentation: 

People are spending more time on internet devices

PowerPoint Presentation: 

How do we achieve a seamless experience across devices?

PowerPoint Presentation: 

Typical Design Process Concept Evaluation Evaluation and Testing To cater multiple device world… we need more considerations… Changing Technology Trends Play on Device Strengths Responsive Design

PowerPoint Presentation: 

Rapid Technology Changes

PowerPoint Presentation: 

Consumption Pattern is Changing Yahoo! Finance Yahoo! Deals Yahoo! Messenger Users are seeking content any where on any Device.

PowerPoint Presentation: 

Consumption Pattern is Changing

PowerPoint Presentation: 

Play on Device Strength

PowerPoint Presentation: 

Play on Device Strength Leverage Device specific features to offer innovative navigation and content presentation.

PowerPoint Presentation: 

Can we have a single Design?

PowerPoint Presentation: 

What is Responsive Design “A design that "responds" to the user’s behavior and environment based on screen size, platform and orientation.” Adaptive layout to suit different screen sizes Resizing images to suit the screen resolution Serving low-bandwidth images to mobile devices Render only essential elements on smaller screens Providing “touch-friendly” links and buttons for mobile users Detecting and responding to mobile features

PowerPoint Presentation: 

Responsive Design Ingredients Media Queries Flexible Images Seamless UX across devices Adoptive Layouts

PowerPoint Presentation: 

Why Responsive Design @ Morten Hjerde Flexible 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.

PowerPoint Presentation: 

Fluid Design Limitations When rendered on smaller widths… fluid design starts degrading

PowerPoint Presentation: 

In response to the changed screen size, layout is changed suitably for optimum viewing experience. Adoptive Layout

PowerPoint Presentation: 

Adoptive Layout ADOPTIVE LAYOUT

PowerPoint Presentation: 

max-device-width: <width> Device targeting through CSS3 Media Queries max-device-width: <width> Responsive Layout Rendering real estate wastage Gutters are removed while rendering on small device <link rel =" stylesheet " type="text/ css " media="screen and (max-device-width: 480px)” href =” small.css ”/>

PowerPoint Presentation: 

Fluid Images Scaling Images with the Layout Container Hiding and Revealing Portions of Images img { max-width: 100%; Flexible images

PowerPoint Presentation: 

Displaying Essential Content Only We can… shrink things proportionally & rearrange elements to fit in smaller screens But does user need that very same content on smaller screen or mobile device? display: none <meta name="viewport" content="width=device-width" /

PowerPoint Presentation: 

Provide Essential Content Only With 80% less screen space, we should know what matters most The application for small devices should provide only what customers need and nothing else

PowerPoint Presentation: 

Provide Essential Content Only

PowerPoint Presentation: 

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 fat Fingers… In spite of advanced touch screens…finger is not As accurate as cursor so…space out your links & interactive elements optimally. Design for device rotation… Most of the devices supporting rotation so detect the rotation and switch CSS for optimum layout.

PowerPoint Presentation: 

Touch Experience Design - Target 45-48 px is ideal targets for finger. Hit targets are proportional to the device resolution so… Keep touchable element size to 10 mm minimum Keep Tolerances to avoid accidentally hitting an adjacent element. Visual feedback is critical and necessary in a touchable environment. it is still visible after released touch and guides a user through an interface. Audible feedback is secondary mechanism Use audible cues in specific ranges to cut through the user’s natural environment.

PowerPoint Presentation: 

Touch Experience Design - Gestures Leverage standard gestural controls to respond exactly as a user would expect. Provide easy access to functionality (buttons, sliders, menu items, etc.) but allow advanced, learnable gestures as shortcuts. Distinguish between global, system-level gestures and local, app-level gestures. Don’t put labels below a control, as it can be obscured by the user's own hand. Trigger actions on release, not on press.

PowerPoint Presentation: 

Touch Experience Design - Transitions Provide touch, press and release states for actionable elements in absence of focus states or hover states. In Touch UI, Transition animations help confirm that action is completed. Engages user and provides a immersive dive in to application context. Transitions should be simple, elegant and subtle NOT dramatic to draw attention to themselves.

PowerPoint Presentation: 

Touch Friendly Input Controls Text field vs. pickers

PowerPoint Presentation: 

Emerging Trends… Device Shifting Complementary Apps Content for Connected devices

PowerPoint Presentation: 

Thank You ashutoshk77@yahoo.com 8197820540 ashutoshk77 Credits: Yahoo! Images, Flicker, Google Images, Iconarchive