Talk by Sarit Arora, Yahoo, at the STC India UX Conference on Saturday, August 27, 2011, conducted at WE School, Bangalore. https://sites.google.com/site/stcindiaux/speakers#Sarit

1. Designing for Multiple Devices
Sarit Arora, Yahoo!

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

3. Evolving Nature of UX Complexity
Many Languages, Many Cultures

4. Evolving Nature of UX Complexity
In the consumer space, just rational and emotional design is not enough
Designs should be meaningful.
Meaningful
Emotional
Rational

5. Evolving Nature of UX Complexity
Changing consumer behavior
Social Networks preferred over email for informal communication

6. Evolving Nature of UX Complexity
These users are using multiple devices, sometimes to do the same tasks

7. Evolving Nature of UX Complexity
People start their Online lives with a Mobile, not a PC

8. How do we achieve a seamless experience
across devices?

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

10. Uncover how technology can improve local
conditions

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

12. Validate that unique solutions are properly
designed

13. Detailed Data
User Conceptual
Design & Analytics and
Research Design
Prototyping Feedback
Evaluation
Concept
and
Evaluation
Testing

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

15. Changing Technology Trends
Devices, Apps, HTML 5

16. Changing Technology Trends
Design for devices is more than just “apps”

17. Changing Technology Trends
Design for devices is more than just “apps” – Think Platforms

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

19. Changing Technology Trends
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.
Gyroscope Game
(Occipital) (BeatTouch)

20. Changing Technology Trends
Web App – Fluid Grid
A web grid system that allows designers to use the screen real estate on large
monitors and retain great design on smaller ones.

21. 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 Listen to music
(Skype) (Pandora) Tapparatus

22. Changing Technology Trends
iOS, Android, Web OS, Windows 7…

23. Changing Technology Trends
iOS Prototyping
Apple’s iOS Interface Builder http://www.zambetti.com/ http://giveabrief.com/
projects/liveview/

24. Changing Technology Trends
Prototyping for Android
http://appinventor.googlelabs.com/about/index.html

25. Changing Technology Trends
Prototyping for Windows

26. Changing Technology Trends
… and not to forget

27. However, to design for the multiple device
world… a few considerations have to be taken
into account
Changing Technology Trends
Play on Device Strengths

28. Play on Device Strength

29. Design for iPhone
It is a small 320x480 pixel screen (163ppi), 640x960 in case of
iPhone 4
The size of a fingertip is 44x44 pixels
Mind your gestures and animation
Delight with stunning graphics, add realism
Minimum required input
Express information briefly

30. Yahoo! Finance Yahoo! Deals Yahoo! Messenger
Thursday, May 24, 12

31. 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 there's
lots of pixels to fill!

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

33. 1. Small Screen

34. 1. Small Screen

35. 1. Small Screen
App should be instantly understandable
Main function should be immediately apparent
Minimize the number of controls

36. 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 pixels
Thursday, May 24, 12

37. 2. Fingertip Targets
Thursday, May 24, 12

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

39. 3. Animation & Gestures
Thursday, May 24, 12

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

41. 4. Graphics & Realism
Thursday, May 24, 12

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

43. 5. Minimum Required Input
Small screen requires lot of attention to input
information
Text field vs. pickers
Thursday, May 24, 12

44. 6. Express Information Briefly
Short and Direct
Real life/world metaphors
Thursday, May 24, 12

45. Example: Yahoo! Cricket

46. Example: Yahoo! Cricket

47. Example: Yahoo! Cricket

48. The Future is here…
Websites looking and behaving like apps

49. The Future is here…
Websites looking and behaving like apps

50. The Future is here…
Companion Apps…

51. A Special Thanks to…
Harshad Kulkarni, Biju Damodaran and Sandeep Datar

52. Thanks !
Questions?