© 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

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

© IDC, IIT Bombay 3 Ghetto

© IDC, IIT Bombay 4 Automatic Ghetto

© IDC, IIT Bombay 5 Arm’s Length

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

© IDC, IIT Bombay 7 Cultural Assimilation

© IDC, IIT Bombay 8 Gradual Cultural Assimilation

© IDC, IIT Bombay 9 Mutual Aid

© IDC, IIT Bombay 10 Two Solutions

© IDC, IIT Bombay 11 Brain Washer

© 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

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

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

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

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

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

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

© IDC, IIT Bombay Elements of User Experience 19 Jesse James Garrett, The Elements of User Experience, New Riders (2003) Second edition (2010)

© 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

© 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

© 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

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

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

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

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

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

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

© 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?

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

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

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

33

© 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?

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

© IDC, IIT Bombay 36

© IDC, IIT Bombay 37

38

Swarachakra

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

© IDC, IIT Bombay 41

© IDC, IIT Bombay 42

© IDC, IIT Bombay 43

© IDC, IIT Bombay 44

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

© 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

48

49

50

© 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?

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

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

© IDC, IIT Bombay 54 Task