Download - Designing for Multiple Devices - Sarit Arora

Designing for Multiple Devices Sarit Arora, Yahoo!

User Profiles are vast and wide.

Evolving Nature of UX Complexity

Many Languages, Many Cultures


In the consumer space, just rational and emotional design is not enough


Designs should be meaningful.

Rational

Emotional

Meaningful

Changing consumer behavior


Social Networks preferred over email for informal communication

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


People start their Online lives with a Mobile, not a PC


How do we achieve a seamless experience across devices?

Study the daily activities and the tasks of the people, in their context

Uncover how technology can improve local conditions

See what technology and solutions are in place and how its being used

Validate that unique solutions are properly designed

User Research

Conceptual Design

Detailed Design &

Prototyping

Data Analytics and

Feedback

Concept Evaluation

Evaluation and

Testing

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


Devices, Apps, HTML 5


Design for devices is more than just “apps”


Design for devices is more than just “apps” – Think Platforms


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.)


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.

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


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


iOS, Android, Web OS, Windows 7…


iOS Prototyping

Apple’s iOS Interface Builder

http://www.zambetti.com/projects/liveview/

http://giveabrief.com/


Prototyping for Android

http://appinventor.googlelabs.com/about/index.html


Prototyping for Windows


… and not to forget

However, to design for the multiple device world… a few considerations have to be taken into account


Play on Device Strengths

Play on Device Strength

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

Yahoo! Finance Yahoo! Deals Yahoo! Messenger

Thursday, May 24, 12

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

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 Screen

1. Small Screen

App should be instantly understandable

Main function should be immediately apparent

Minimize the number of controls

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


2. Fingertip Targets


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

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


4. Graphics & Realism


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.


5. Minimum Required Input

Small screen requires lot of attention to input information

Text field vs. pickers


6. Express Information Briefly

Short and Direct

Real life/world metaphors


Example: Yahoo! Cricket

The Future is here… Websites looking and behaving like apps

The Future is here… Companion Apps…

A Special Thanks to…

Harshad Kulkarni, Biju Damodaran and Sandeep Datar

Thanks ! Questions?