INTERNATIONAL CERTIFICATE IN PRODUCT MANAGEMENT & MARKETING

PM 101
PI-201

Developing Delighting User Interfaces

Prof. Kshitiz Anand
15 Jun 13

PROFILE
Presently

Dean & Director - India Operations at L'cole de Design Nantes Atlantique Founder of Happy Horizons Consulting

Previous

Design Head, Kuliza Technologies Founder & Director, Deskala Research and Design & Consulting MS in HCI Design , Indiana University Bloomington, USA BDes in Communication Design, IIT Guwahati, India

Education

Contact

kshitiz@happyhorizons.in Twitter: @kshitiz LinkedIn: in.linkedin.com/in/kshitizanand/ Website: www.kshitizanand.com

2

SCENARIO 1
Redesign an existing product, with a high level of User Experience, that was initially designed primarily by developers and managers, and not by an interface or interaction designer or with consultation by a user experience design specialist who could point out workflow and related product issues, as well as design a product brand identity.

SCENARIO 2
Design an application that is high on innovation, leveraging the power of technology, social media, keeping a large base of users varied across geographies and democracies. Make the applications to be web 2.0, responsive, device independent, and integrate it with Facebook in particular

THE WHAT
6

DEVELOPING DELIGHTING
USER INTERFACES
7

DELIGHT

Think of an activity that delighted you?

(NON-WEB INTERACTION)
9

Delight = Features ?

10

Situation 1
PROBLEM ANXIETY RESOLUTION DELIGHT

Situation 2
SURPRISE PLEASURABLE EXPERIENCE DELIGHT

11

Think of an product that delighted you (or did not) ?

(THAT YOU USE REGULARLY)
12

13

Web 1.0

Web 2.0

Web 3.0
14

15

VISCERAL
Refers primarily to that initial impact, to its appearance Appearance is rooted in form, aesthetics

BEHAVIORAL
A more detailed look and feel and function that is got by interactions i.e. the total experience of using a product

REFLECTIVE
Ones thoughts afterwards, how it makes one feel, the image it portrays, the message it tells others about the owner's taste
16

Interaction

REFLECTIVE

BEHAVIORAL

VISCERAL

Time spent

17

Products were once designed for the functions they performed. But when all companies can make products that perform their functions equally well, the distinctive advantage goes to those who provide pleasure and enjoyment while maintaining the power. If functions are equated with cognition, pleasure is equated with emotion; today we want products that appeal to both cognition and emotion.
Don Norman

18

1993 2013

19

20

Delight is governed by

Subjectivity
21

Delight is governed by

Objectivity
22

If you dont take care of the customer, someone else will.

- Raffaele Ciarla

23

USER EXPERIENCE

DELIVERING

CUSTOMER
SINCE MID 90s

DELIGHT
24

TODAY WE ARE LIVING WITH COMPLEXITY

25

GOOD UX AS THE DIFFERENTIATOR

26

ROI ON UX AT RIGHT TIME

Increased productivity Reduced costs Customer retention Increased sales Savings on customer service calls Reduced effort and cost on redesign

27

Early focus on UX Design

28

29

HAVE YOU HEARD OF THE $300 MILLION BUTTON?

30

http://www.uie.com/articles/three_hund_million_button/

31

http://www.uie.com/articles/three_hund_million_button/

32

WHAT IS USER EXPERIENCE ?

(POPULARLY KNOWN AS UX)

33

34

35

36
http://www.stephenthomas.com/about/images/what_is_ux.jpg

Unclear boundaries

37

The T shaped (UX) professional

38

39

PETER MORVILLES HONEYCOMB MODEL Image Source: http://semanticstudios.com/publications/semantics/000029.php

40

THE LEAGUE OF USER EXPERIENCE ROLES & PROFESSIONAL?

(The people and work involved)
41

42

UX researchers

43

Information Architects

44

Interaction Designer

45

Visual Designer
The aesthetics person One who does the magic Last in First out !

46

Usability professionals

47

THE WHY
48

The UX role Shift

FROM AESTHETICS TO PROCESS TO PRODUCTS TO SERVICE TO STRATEGY
49

50

51

UX IN CONTEXT OF HCI (HUMAN COMPUTER INTERACTION)

52

USER EXPERIENCE TODAY : { U, B , T } ?

Users

UX Technology Business

53

54

WHAT IS THE SILICON VALLEYS NEW SECRET WEAPON ?

55

56

57

Whats common between all of these?

58

59

INTERFACE

60

INTERFACES ARE EVERYWHERE

Hand held devices Information Kiosks Interaction in public environment installations Television based interfaces Automotive interfaces Household and non household appliances Audible interfaces

61

Software (products) should behave like a considerate human being! What is a considerate human being?

62

TO BE CONSIDERATE .
Considerate Products (and humans)
Take an interest Are differential Are forthcoming Use common sense Anticipate peoples needs Are conscientious Dont burden you with their personal problems Keep you informed Are perceptive Are self confidents Dont ask you a lot of questions Take responsibility Know when to bend the rules
63

The Knowledge Funnel identifying the considerate

64

THE HOW
65

The UX Design Process

Research Ideate Prototype Evaluate & Feedback Release

66

UX Process

67

UX Wheel

68

UX Treasure Map

69

RESEARCH
THE WAYS OF KNOWING DISCOVERY

70

IDEATE
CONCEPTUALIZATIONS FEATURES & FUNCTIONALITIES

71

PROTOTYPE
GETTING HANDS DIRTY BRINGING THOUGHTS TO LIFE

72

FEEDBACK
EMBRACING CRITICISM ANALYTICS

73

THE ELEMENTS OF USER EXPERIENCE DESIGN

74

75

Just remember this

76

USER RESEARCH TECHNIQUES

Contextual Inquiry Ethnographic Study / Field Observations Interviews and Focus Groups Surveys / Questionnaires Journaled Sessions Self-reporting logs Screen Snapshots

77

USER RESEARCH TECHNIQUES

On Location User Research
Actual User Interviews Studying User environments Contextual Inquiries

Remote User Research

Questionnaire Surveys Telephonic Interviews Video recordings of users performing their tasks
78

IDENTIFYING THE USERS

The target group(s) The affected group(s)

79

IDENTIFYING THE USERS

The target group(s) The affected group(s)

IDENTIFYING THE STAKEHOLDERS

80

IDENTIFYING STAKEHOLDERS

Doing Stake Holders Interviews Business Technical Team Actual Users Try to understand the direct impact / indirect impact on the solution Different User Groups
Target Groups Affected Groups

81

WHAT IS A PERSONA?
WHY PERSONAS ARE IMPORTANT?

82

PERSONAS
A representation of the goals and behavior of a real user group. In most cases, personas are synthesized from data collected from interviews with users. They are captured in a range of formats (depending on the requirements of the client) that typically include behavior patterns, goals, skills, attitudes, and environment; with a few fictional personal details to bring the persona to life. For any site, more than one persona is usually created, but generally one persona should always be the primary focus for the design
83

WHY PERSONAS ARE IMPORTANT?

Giving a face to your users Helps in generating Use Cases Helpful for Scenario Generation Scenarios gives insights

84

85

86

INFORMATION ARCHITECTURE
Information architecture is the categorization of information into a coherent structure, preferably one that the most people can understand quickly, if not inherently.

It's usually hierarchical, but can have other structures, such as concentric or even chaotic.
87

AFFINITY WALL / CARD SORTING

http://wiki.fluidproject.org/display/fluid/Affinity+Diagrams

88

89

90

91

PROTOTYPING
Low Fidelity High Fidelity Horizontal Prototype Vertical Prototype

92

Low Fidelity
Paper Prototypes and Sketches Easy to discard

93

High Fidelity
Wireframes HTML Mockups

94

Horizontal Prototype
Cover major functionalities Superficial information on all

95

Vertical Prototype
Deep into one or two functionality

96

VISUAL DESIGN What most people think Design is !

97

The elements of design

Lines Shapes Mass Color Texture

98

99

10 0

10 1

Gestalts principles
Law of Similarity
Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern.

10 2

Gestalts principles
Law of Proximity
Proximity occurs when elements are placed close together. They tend to be perceived as a group.

10 3

Gestalts principles
Law of Closure
Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, people perceive the whole by filling in the missing information.

10 4

Gestalts principles
Law of Continuity
Continuation occurs when the eye is compelled to move through one object and continue to another object.

10 5

The Layout Anatomy

Containing Block Logo Navigation Content Footer White Space

10 6

GRIDS - soul and skeleton of good design

10 7

More about GRIDS

Optimum Designing with the 960 Grid System for the most commonly used 1024x768 screen resolution Grids divide the screen into areas All spacing becomes multiple of the smallest spacing between elements Enhances Consistency of screens Standardizations reduces design time
10 8

10 9

11 0

The value of typography

11 1

11 2

11 3

11 4

11 5

11 6

11 7

11 8

11 9

12 0

12 1

12 2

THE WHO
12 3

CO-CREATION
COLLABORATIVE USER EXPERIENCE

12 4

12 5

In CONCLUSION

12 6

USER EXPERIENCE MYTHS

http://www.slideshare.net/whitneyhess/10-most-common-misconceptions-about-user-experience-design?from=ss_embed

12 7

A GOOD USER EXPERIENCE LEADS TO DELIGHT

12 8

DELIGHT IS WHEN THE INTERFACE CONVEYS A STORY

12 9

STORIES DELIGHT US
13 0

WHATs YOUR STORY ?

13 1

THANK YOU

Email: kshitiz@happyhorizons.in |Twitter: @kshitiz LinkedIn: in.linkedin.com/in/kshitizanand/

13 2