1. © IDC, IIT Bombay Children Solve Problems  “We can learn a lot from children, and especially from watching children think.” Edward de Bono, Children Solve Problems, Allen Lane, The Penguin Press, (1972) 1

2. © IDC, IIT Bombay Problem  How to stop a cat and a dog from fighting? 2

3. © IDC, IIT Bombay 3 Ghetto

4. © IDC, IIT Bombay 4 Automatic Ghetto

5. © IDC, IIT Bombay 5 Arm’s Length

6. © IDC, IIT Bombay 6 Arm’s Length ++

7. © IDC, IIT Bombay 7 Cultural Assimilation

8. © IDC, IIT Bombay 8 Gradual Cultural Assimilation

9. © IDC, IIT Bombay 9 Mutual Aid

10. © IDC, IIT Bombay 10 Two Solutions

11. © IDC, IIT Bombay 11 Brain Washer

12. © IDC, IIT Bombay 12 Solutions  Ghetto  Automatic ghetto  Arm’s length  Feature rich arm’s length  Cultural assimilation  Gradual cultural assimilation  Mutual aid  Two solutions  Brain washer

13. The Layers of User Experience (What is there to design in an interactive product?)

14. © IDC, IIT Bombay The Five Layers of User Experience  Surface Plane –Text –Images –Look 14

15. © IDC, IIT Bombay The Five Layers of User Experience  Surface Plane  Skeleton Plane –Layouts, placement, arrangement –Interface –Widgets –Navigation –Feel 15

16. © IDC, IIT Bombay The Five Layers of User Experience  Surface Plane  Skeleton Plane  Structure Plane –Categories –Hierarchy –Conceptual model 16

17. © IDC, IIT Bombay The Five Layers of User Experience  Surface Plane  Skeleton Plane  Structure Plane  Scope Plane –Features, functions –Services, facilities –Content 17

18. © IDC, IIT Bombay The Five Layers of User Experience  Surface Plane  Skeleton Plane  Structure Plane  Scope Plane  Strategy Plane –User goals –Business goals 18

19. © IDC, IIT Bombay Elements of User Experience 19 Jesse James Garrett, The Elements of User Experience, New Riders (2003) Second edition (2010) http://www.jjg.net/elements/

20. © IDC, IIT Bombay 20 Strategy  Sell books  Be the place to find books  Encourage return customers  Sell other non-touch-and-feel goods  Assimilate competition User goals, business goals

21. © IDC, IIT Bombay Scope  Sell books  Be the place to find books  Encourage return customers  Sell other non-touch-and-feel goods  Assimilate competition  Shopping cart –With gift wrap –Deliver world wide  Book reviews –Review ratings –Book lists  Cross reference books  Remember addresses  Recommendations  Wish list and promos  Second-hand books  CDs, DVDs, Segway  Partner programs 21 Features, functions, services, facilities, content

22. © IDC, IIT Bombay  Shopping cart –With gift wrap –Deliver world wide  Book reviews –Review ratings –Book lists  Cross reference books  Remember addresses  Recommendations  Wish list and promos  Second-hand books  CDs, DVDs, Segway  Partner programs Structure 22 Categories, hierarchy, conceptual model

23. © IDC, IIT Bombay 23 Skeleton Layouts, placement, arrangement, interface, widgets, navigation, feel

24. © IDC, IIT Bombay 24 Skeleton Layouts, placement, arrangement, interface, widgets, navigation, feel

25. © IDC, IIT Bombay 25 Surface Text, images, look

26. © IDC, IIT Bombay 26 Elements of User Experience Concrete Abstract

27. © IDC, IIT Bombay Tool or Medium?  Functionality –Tool –Automation –Productivity –Synthesis –Creativity  Information –Medium –Hypertext –Publishing –Communication –Decision making 27

28. © IDC, IIT Bombay 28 Strategy  User needs –User goals –Expressed + latent needs  Product objectives –Business goals –Brand strategy  Why are we making this?

29. © IDC, IIT Bombay 29 Scope  Functional specification –Features, functions, services, facilities –Timelines, versions  Content requirements –Content –Editorial workflow –Content shelf life –Timelines, versions  What are we making when?

30. © IDC, IIT Bombay 30 Structure  Interaction design –Conceptual model –Scenarios, storyboards, workflows, use cases

31. © IDC, IIT Bombay 31 Flower Portal, Amisha Bankar, IDC 2004

32. © IDC, IIT Bombay 32 Structure  Interaction design –Conceptual model –Scenarios, storyboards, workflows, use cases  Information architecture –Categories –Hierarchy –Scenarios, storyboards, workflows, use cases

33. 33

34. © IDC, IIT Bombay 34 Structure  Interaction design –Conceptual model –Scenarios, storyboards, workflows, use cases  Information architecture –Categories –Hierarchy –Scenarios, storyboards, workflows, use cases  How does the product fit in the life of the user?

35. © IDC, IIT Bombay 35 Skeleton  Interface design –Interface, widgets, controls –Tasks-flows / actions

36. © IDC, IIT Bombay 36

37. © IDC, IIT Bombay 37

38. 38

39. Swarachakra

40. © IDC, IIT Bombay Skeleton  Interface design –Interface, widgets, controls –Tasks-flows / actions  Information design –Script –Page complexity –Visualization –Layouts, grid, hierarchy 40

41. © IDC, IIT Bombay 41

42. © IDC, IIT Bombay 42

43. © IDC, IIT Bombay 43

44. © IDC, IIT Bombay 44

45. © IDC, IIT Bombay Assignment  Redesign the Jet Privilege Account Summary page to make it easy to understand from a passenger point of view 45

46. © IDC, IIT Bombay 46 Skeleton  Interface design –Interface, widgets, controls –Tasks-flows / actions  Information design –Script –Page complexity –Visualization –Layouts, grid, hierarchy  Navigation design –Navigation elements

47. 47

48. 48

49. 49

50. 50

51. © IDC, IIT Bombay 51 Skeleton  Interface design –Interface, widgets, controls –Tasks-flows / actions  Information design –Script –Page complexity –Visualization –Layouts, grid, hierarchy  Navigation design –Navigation elements  How should the design be detailed?

52. © IDC, IIT Bombay 52 Surface  Sensory design –Text –Visual elements (colour, typography, photography, illustrations) –Media elements (audio, video, animation) –Hardware elements –Identity, styling, finish

53. © IDC, IIT Bombay 53 by Jesse James Garrett Elements of User Experience

54. © IDC, IIT Bombay 54 Task