Developing Delighting User Interfaces KA

7/28/2019 Developing Delighting User Interfaces KA

1/132

1

INTERNATIONAL CERTIFICATE IN

PRODUCT MANAGEMENT & MARKETING

PM 101

Developing Delighting UserInterfaces

Prof. Kshitiz Anand

15 Jun 13

PI-201


2/132

2

PROFILE Presently

Dean & Director - India Operations at L'cole deDesign Nantes Atlantique

Founder of Happy Horizons Consulting

Previous Design Head, Kuliza Technologies Founder & Director, Deskala Research and Design

& Consulting

Education

MS in HCI Design , Indiana University Bloomington,USA

BDes in Communication Design, IIT Guwahati, India

Contact

[email protected] Twitter: @kshitiz LinkedIn: in.linkedin.com/in/kshitizanand/ Website: www.kshitizanand.com


3/132

3


4/132

4

SCENARIO 1

Redesign an existing product, with a high levelof User Experience, that was initially designedprimarily by developers and managers, andnot by an interface or interaction designer orwith consultation by a user experience designspecialist who could point out workflow andrelated product issues, as well as design aproduct brand identity.


5/132

5

SCENARIO 2

Design an application that is high oninnovation, leveraging the power oftechnology, social media, keeping a largebase of users varied across geographies anddemocracies.

Make the applications to be web 2.0,responsive, device independent,and integrateit with Facebook in particular


6/132

6

THE WHAT


7/132

7

DEVELOPING

DELIGHTINGUSER INTERFACES


8/132

8

DELIGHT


9/132

9

Think of an

activity thatdelighted you?

(NON-WEB INTERACTION)


10/132

10

Delight = Features ?


11/132

11

SURPRISE PLEASURABLE EXPERIENCE DELIGHT

PROBLEM ANXIETY RESOLUTION DELIGHTSituation 1

Situation 2


12/132

12

Think of anproduct that

delighted you (or

did not) ?

(THAT YOU USE REGULARLY)


13/132

13


14/132

14

Web 1.0

Web 3.0

Web 2.0


15/132

15


16/132

16

VISCERAL

BEHAVIORAL

REFLECTIVE

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

Refers primarily to that initial impact, to its appearanceAppearance is rooted in form, aesthetics

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


17/132

17Time spent

Interaction

VISCERAL

BEHAVIORAL

REFLECTIVE


18/132

18

Products were once designed for the functionsthey performed. But when all companies can

make products that perform their functions

equally well, the distinctive advantage goes to

those who provide pleasure and enjoymentwhile 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


19/132

19

1993

2013


20/132

20


21/132

21

Subjectivity

Delight is governed by


22/132

22

Delight is governed by

Objectivity


23/132

23

If you dont take care of the customer,

someone else will.

- Raffaele Ciarla


24/132

24

USER EXPERIENCE

DELIVERING

DELIGHTSINCE MID 90s

CUSTOMER


25/132

25

TODAYWE ARE

LIVINGWITH

COMPLEXITY


26/132

26

GOOD UX AS THE DIFFERENTIATOR


27/132

27

Increased productivity

Reduced costs

Customer retention Increased sales

Savings on customerservice calls

Reduced effort and cost on redesign

ROI ON UX AT RIGHT TIME


28/132

28

Early focus on UX Design


29/132

29


30/132

30

HAVE YOU HEARD OF THE$300 MILLION BUTTON?


31/132

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


32/132

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


33/132

33

WHAT IS USER EXPERIENCE ?

(POPULARLY KNOWN AS UX)


34/132

34


35/132

35


36/132

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


37/132

37

Unclear boundaries


38/132

38

The T shaped (UX) professional


39/132

39


40/132

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


41/132

41

THE LEAGUE OF USEREXPERIENCE ROLES &

PROFESSIONAL?

(The people and work

involved)


42/132

42


43/132

43

UX researchers


44/132

44

Information Architects


45/132

45

Interaction Designer


46/132

46

Visual Designer

The aesthetics person One who does the magic

Last in First out !


47/132

47

Usability professionals


48/132

48

THE WHY


49/132

49

The UX role Shift

FROM AESTHETICS

TO PROCESSTO PRODUCTSTO SERVICETO STRATEGY


50/132

50


51/132

51


52/132

52

UX IN CONTEXT OF HCI (HUMANCOMPUTER INTERACTION)


53/132

53

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

Users

BusinessTechnology

UX


54/132

54


55/132

55

WHAT IS THE

SILICON VALLEYSNEW SECRET

WEAPON ?


56/132

56


57/132

57


58/132

58

Whats common between all of

these?


59/132

59


60/132

60

INTERFACE

INTERFACES ARE EVERYWHERE


61/132

61

Hand held devices

Information Kiosks

Interaction in public environment installations

Television based interfaces

Automotive interfaces Household and non household appliances

Audible interfaces

INTERFACES ARE EVERYWHERE


62/132

62

Software (products) should behave

like a considerate human being!

What is a considerate human being?

TO BE CONSIDERATE


63/132

63

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

TO BE CONSIDERATE .

The Knowledge Funnel


64/132

64

The Knowledge Funnelidentifying the considerate


65/132

65

THE HOW


66/132

66

The UX Design Process

Research Ideate Prototype Evaluate & Feedback Release

UX P


67/132

67

UX Process

UX Wh l


68/132

68

UX Wheel

UX T M


69/132

69

UX Treasure Map


70/132

70

RESEARCH

THE WAYS OF KNOWING

DISCOVERY


71/132

71

IDEATE

CONCEPTUALIZATIONS

FEATURES & FUNCTIONALITIES


72/132

72

PROTOTYPE

GETTING HANDS DIRTY

BRINGING THOUGHTS TO LIFE


73/132

73

FEEDBACK

EMBRACING CRITICISM

ANALYTICS


74/132

74

THE ELEMENTS OF USEREXPERIENCE DESIGN


75/132

75


76/132

76

Just remember this

USER RESEARCH TECHNIQUES


77/132

77

Contextual Inquiry Ethnographic Study / Field Observations

Interviews and Focus Groups

Surveys / Questionnaires Journaled Sessions

Self-reporting logs

Screen Snapshots




78/132

78

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



79/132

79

IDENTIFYING THE USERSThe target group(s)The affected group(s)

IDENTIFYING THE USERS


80/132

80

IDENTIFYING THE USERSThe target group(s)

The affected group(s)

IDENTIFYING THE STAKEHOLDERS

IDENTIFYING STAKEHOLDERS


81/132

81

IDENTIFYING STAKEHOLDERS

Doing Stake Holders Interviews

Business

Technical Team

Actual Users

Try to understand the direct impact / indirect impacton the solution

Different User Groups

Target Groups

Affected Groups


82/132

82

WHAT IS A PERSONA?

WHY PERSONAS AREIMPORTANT?

PERSONAS


83/132

83

PERSONAS

A representation of the goals and behavior of

a real user group. In most cases, personas aresynthesized from data collected frominterviews 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 fewfictional personal details to bring the personato life.

For any site, more than one persona is usuallycreated, but generally one persona shouldalways be the primary focus for the design

WHY PERSONAS ARE


84/132

84

Giving a face to your users Helps in generating Use Cases

Helpful for Scenario Generation

Scenarios gives insights

WHY PERSONAS AREIMPORTANT?


85/132

85


86/132

86

INFORMATION ARCHITECTURE


87/132

87

INFORMATION ARCHITECTURE

Information architecture is thecategorization of information into acoherent structure, preferably onethat the most people canunderstand quickly, if notinherently.

It's usually hierarchical, but canhave other structures, such asconcentric or even chaotic.

AFFINITY WALL / CARD SORTING


88/132

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

AFFINITY WALL / CARD SORTING


89/132

89


90/132

90


91/132

91


92/132

92

PROTOTYPING

Low Fidelity High Fidelity Horizontal Prototype Vertical Prototype

Low Fidelity


93/132

93

Paper Prototypes and Sketches

Easy to discard

Low Fidelity

High Fidelity


94/132

94

High Fidelity Wireframes

HTML Mockups

Horizontal Prototype


95/132

95

Horizontal Prototype Cover major functionalities

Superficial information on all

Vertical Prototype


96/132

96

Vertical Prototype Deep into one or two functionality


97/132

97

VISUAL DESIGN

What mostpeople think

Design is !

The elements of design


98/132

98

Lines Shapes

Mass

Color

Texture

g


99/132

99


100/132

100


101/132

101

Gestalts principles


102/132

102

Law of Similarity Similarity occurs when objects look similar

to one another. People often perceivethem as a group or pattern.

p p

Gestalts principles


103/132

103

p p

Law of Proximity Proximity occurs when elements are

placed close together. They tend to beperceived as a group.

Gestalts principles


104/132

104

p p Law of Closure

Closure occurs when an object is incompleteor a space is not completely enclosed. Ifenough of the shape is indicated, peopleperceive the whole by filling in the missinginformation.

Gestalts principles


105/132

105

p p Law of Continuity

Continuation occurs when the eye iscompelled to move through one object andcontinue to another object.

The Layout Anatomy


106/132

106

y y

Containing Block

Logo Navigation

Content Footer

White Space


107/132

107

GRIDS

- soul and skeletonof good design

More about GRIDS


108/132

108

Optimum

Designing with the 960 GridSystem for the most commonly used1024x768 screen resolution

Grids divide the screen into areas

All spacing becomes multiple of thesmallest spacing between elements

Enhances Consistency of screens Standardizations reduces design time


109/132

109


110/132

110


111/132

111

The value of typography


112/132

112


113/132

113


114/132

114


115/132

115


116/132

116


117/132

117


118/132

118


119/132

119


120/132

120


121/132

121


122/132

122


123/132

123

THE WHO


124/132

124

CO-CREATION

COLLABORATIVE USER EXPERIENCE


125/132

125


126/132

126

In CONCLUSION

USER EXPERIENCE MYTHS


127/132

12

7

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


128/132

12

8

A GOOD USEREXPERIENCELEADS TO

DELIGHT


129/132

12

9

DELIGHT IS WHENTHE INTERFACECONVEYS A

STORY


130/132

13

0

STORIESDELIGHT US


131/132

13

1

WHATs YOUR

STORY ?


132/132

THANK YOU

Date post:	03-Apr-2018
Category:	Documents
Upload:	rahul-tewari
View:	221 times
Download:	0 times

Developing Delighting User Interfaces KA

Documents