developing delighting user interfaces ka
Post on 03-Apr-2018
221 Views
Preview:
TRANSCRIPT
-
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
-
7/28/2019 Developing Delighting User Interfaces KA
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
kshitiz@happyhorizons.in Twitter: @kshitiz LinkedIn: in.linkedin.com/in/kshitizanand/ Website: www.kshitizanand.com
-
7/28/2019 Developing Delighting User Interfaces KA
3/132
3
-
7/28/2019 Developing Delighting User Interfaces KA
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.
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
6/132
6
THE WHAT
-
7/28/2019 Developing Delighting User Interfaces KA
7/132
7
DEVELOPING
DELIGHTINGUSER INTERFACES
-
7/28/2019 Developing Delighting User Interfaces KA
8/132
8
DELIGHT
-
7/28/2019 Developing Delighting User Interfaces KA
9/132
9
Think of an
activity thatdelighted you?
(NON-WEB INTERACTION)
-
7/28/2019 Developing Delighting User Interfaces KA
10/132
10
Delight = Features ?
-
7/28/2019 Developing Delighting User Interfaces KA
11/132
11
SURPRISE PLEASURABLE EXPERIENCE DELIGHT
PROBLEM ANXIETY RESOLUTION DELIGHTSituation 1
Situation 2
-
7/28/2019 Developing Delighting User Interfaces KA
12/132
12
Think of anproduct that
delighted you (or
did not) ?
(THAT YOU USE REGULARLY)
-
7/28/2019 Developing Delighting User Interfaces KA
13/132
13
-
7/28/2019 Developing Delighting User Interfaces KA
14/132
14
Web 1.0
Web 3.0
Web 2.0
-
7/28/2019 Developing Delighting User Interfaces KA
15/132
15
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
17/132
17Time spent
Interaction
VISCERAL
BEHAVIORAL
REFLECTIVE
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
19/132
19
1993
2013
-
7/28/2019 Developing Delighting User Interfaces KA
20/132
20
-
7/28/2019 Developing Delighting User Interfaces KA
21/132
21
Subjectivity
Delight is governed by
-
7/28/2019 Developing Delighting User Interfaces KA
22/132
22
Delight is governed by
Objectivity
-
7/28/2019 Developing Delighting User Interfaces KA
23/132
23
If you dont take care of the customer,
someone else will.
- Raffaele Ciarla
-
7/28/2019 Developing Delighting User Interfaces KA
24/132
24
USER EXPERIENCE
DELIVERING
DELIGHTSINCE MID 90s
CUSTOMER
-
7/28/2019 Developing Delighting User Interfaces KA
25/132
25
TODAYWE ARE
LIVINGWITH
COMPLEXITY
-
7/28/2019 Developing Delighting User Interfaces KA
26/132
26
GOOD UX AS THE DIFFERENTIATOR
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
28/132
28
Early focus on UX Design
-
7/28/2019 Developing Delighting User Interfaces KA
29/132
29
-
7/28/2019 Developing Delighting User Interfaces KA
30/132
30
HAVE YOU HEARD OF THE$300 MILLION BUTTON?
-
7/28/2019 Developing Delighting User Interfaces KA
31/132
31http://www.uie.com/articles/three_hund_million_button/
-
7/28/2019 Developing Delighting User Interfaces KA
32/132
32http://www.uie.com/articles/three_hund_million_button/
-
7/28/2019 Developing Delighting User Interfaces KA
33/132
33
WHAT IS USER EXPERIENCE ?
(POPULARLY KNOWN AS UX)
-
7/28/2019 Developing Delighting User Interfaces KA
34/132
34
-
7/28/2019 Developing Delighting User Interfaces KA
35/132
35
-
7/28/2019 Developing Delighting User Interfaces KA
36/132
36http://www.stephenthomas.com/about/images/what_is_ux.jpg
-
7/28/2019 Developing Delighting User Interfaces KA
37/132
37
Unclear boundaries
-
7/28/2019 Developing Delighting User Interfaces KA
38/132
38
The T shaped (UX) professional
-
7/28/2019 Developing Delighting User Interfaces KA
39/132
39
-
7/28/2019 Developing Delighting User Interfaces KA
40/132
40PETER MORVILLES HONEYCOMB MODEL Image Source: http://semanticstudios.com/publications/semantics/000029.php
-
7/28/2019 Developing Delighting User Interfaces KA
41/132
41
THE LEAGUE OF USEREXPERIENCE ROLES &
PROFESSIONAL?
(The people and work
involved)
-
7/28/2019 Developing Delighting User Interfaces KA
42/132
42
-
7/28/2019 Developing Delighting User Interfaces KA
43/132
43
UX researchers
-
7/28/2019 Developing Delighting User Interfaces KA
44/132
44
Information Architects
-
7/28/2019 Developing Delighting User Interfaces KA
45/132
45
Interaction Designer
-
7/28/2019 Developing Delighting User Interfaces KA
46/132
46
Visual Designer
The aesthetics person One who does the magic
Last in First out !
-
7/28/2019 Developing Delighting User Interfaces KA
47/132
47
Usability professionals
-
7/28/2019 Developing Delighting User Interfaces KA
48/132
48
THE WHY
-
7/28/2019 Developing Delighting User Interfaces KA
49/132
49
The UX role Shift
FROM AESTHETICS
TO PROCESSTO PRODUCTSTO SERVICETO STRATEGY
-
7/28/2019 Developing Delighting User Interfaces KA
50/132
50
-
7/28/2019 Developing Delighting User Interfaces KA
51/132
51
-
7/28/2019 Developing Delighting User Interfaces KA
52/132
52
UX IN CONTEXT OF HCI (HUMANCOMPUTER INTERACTION)
-
7/28/2019 Developing Delighting User Interfaces KA
53/132
53
USER EXPERIENCE TODAY : { U, B , T } ?
Users
BusinessTechnology
UX
-
7/28/2019 Developing Delighting User Interfaces KA
54/132
54
-
7/28/2019 Developing Delighting User Interfaces KA
55/132
55
WHAT IS THE
SILICON VALLEYSNEW SECRET
WEAPON ?
-
7/28/2019 Developing Delighting User Interfaces KA
56/132
56
-
7/28/2019 Developing Delighting User Interfaces KA
57/132
57
-
7/28/2019 Developing Delighting User Interfaces KA
58/132
58
Whats common between all of
these?
-
7/28/2019 Developing Delighting User Interfaces KA
59/132
59
-
7/28/2019 Developing Delighting User Interfaces KA
60/132
60
INTERFACE
INTERFACES ARE EVERYWHERE
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
62/132
62
Software (products) should behave
like a considerate human being!
What is a considerate human being?
TO BE CONSIDERATE
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
64/132
64
The Knowledge Funnelidentifying the considerate
-
7/28/2019 Developing Delighting User Interfaces KA
65/132
65
THE HOW
-
7/28/2019 Developing Delighting User Interfaces KA
66/132
66
The UX Design Process
Research Ideate Prototype Evaluate & Feedback Release
UX P
-
7/28/2019 Developing Delighting User Interfaces KA
67/132
67
UX Process
UX Wh l
-
7/28/2019 Developing Delighting User Interfaces KA
68/132
68
UX Wheel
UX T M
-
7/28/2019 Developing Delighting User Interfaces KA
69/132
69
UX Treasure Map
-
7/28/2019 Developing Delighting User Interfaces KA
70/132
70
RESEARCH
THE WAYS OF KNOWING
DISCOVERY
-
7/28/2019 Developing Delighting User Interfaces KA
71/132
71
IDEATE
CONCEPTUALIZATIONS
FEATURES & FUNCTIONALITIES
-
7/28/2019 Developing Delighting User Interfaces KA
72/132
72
PROTOTYPE
GETTING HANDS DIRTY
BRINGING THOUGHTS TO LIFE
-
7/28/2019 Developing Delighting User Interfaces KA
73/132
73
FEEDBACK
EMBRACING CRITICISM
ANALYTICS
-
7/28/2019 Developing Delighting User Interfaces KA
74/132
74
THE ELEMENTS OF USEREXPERIENCE DESIGN
-
7/28/2019 Developing Delighting User Interfaces KA
75/132
75
-
7/28/2019 Developing Delighting User Interfaces KA
76/132
76
Just remember this
USER RESEARCH TECHNIQUES
-
7/28/2019 Developing Delighting User Interfaces KA
77/132
77
Contextual Inquiry Ethnographic Study / Field Observations
Interviews and Focus Groups
Surveys / Questionnaires Journaled Sessions
Self-reporting logs
Screen Snapshots
USER RESEARCH TECHNIQUES
USER RESEARCH TECHNIQUES
-
7/28/2019 Developing Delighting User Interfaces KA
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
USER RESEARCH TECHNIQUES
-
7/28/2019 Developing Delighting User Interfaces KA
79/132
79
IDENTIFYING THE USERSThe target group(s)The affected group(s)
IDENTIFYING THE USERS
-
7/28/2019 Developing Delighting User Interfaces KA
80/132
80
IDENTIFYING THE USERSThe target group(s)
The affected group(s)
IDENTIFYING THE STAKEHOLDERS
IDENTIFYING STAKEHOLDERS
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
82/132
82
WHAT IS A PERSONA?
WHY PERSONAS AREIMPORTANT?
PERSONAS
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
84/132
84
Giving a face to your users Helps in generating Use Cases
Helpful for Scenario Generation
Scenarios gives insights
WHY PERSONAS AREIMPORTANT?
-
7/28/2019 Developing Delighting User Interfaces KA
85/132
85
-
7/28/2019 Developing Delighting User Interfaces KA
86/132
86
INFORMATION ARCHITECTURE
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
88/132
88http://wiki.fluidproject.org/display/fluid/Affinity+Diagrams
AFFINITY WALL / CARD SORTING
-
7/28/2019 Developing Delighting User Interfaces KA
89/132
89
-
7/28/2019 Developing Delighting User Interfaces KA
90/132
90
-
7/28/2019 Developing Delighting User Interfaces KA
91/132
91
-
7/28/2019 Developing Delighting User Interfaces KA
92/132
92
PROTOTYPING
Low Fidelity High Fidelity Horizontal Prototype Vertical Prototype
Low Fidelity
-
7/28/2019 Developing Delighting User Interfaces KA
93/132
93
Paper Prototypes and Sketches
Easy to discard
Low Fidelity
High Fidelity
-
7/28/2019 Developing Delighting User Interfaces KA
94/132
94
High Fidelity Wireframes
HTML Mockups
Horizontal Prototype
-
7/28/2019 Developing Delighting User Interfaces KA
95/132
95
Horizontal Prototype Cover major functionalities
Superficial information on all
Vertical Prototype
-
7/28/2019 Developing Delighting User Interfaces KA
96/132
96
Vertical Prototype Deep into one or two functionality
-
7/28/2019 Developing Delighting User Interfaces KA
97/132
97
VISUAL DESIGN
What mostpeople think
Design is !
The elements of design
-
7/28/2019 Developing Delighting User Interfaces KA
98/132
98
Lines Shapes
Mass
Color
Texture
g
-
7/28/2019 Developing Delighting User Interfaces KA
99/132
99
-
7/28/2019 Developing Delighting User Interfaces KA
100/132
100
-
7/28/2019 Developing Delighting User Interfaces KA
101/132
101
Gestalts principles
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
106/132
106
y y
Containing Block
Logo Navigation
Content Footer
White Space
-
7/28/2019 Developing Delighting User Interfaces KA
107/132
107
GRIDS
- soul and skeletonof good design
More about GRIDS
-
7/28/2019 Developing Delighting User Interfaces KA
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
-
7/28/2019 Developing Delighting User Interfaces KA
109/132
109
-
7/28/2019 Developing Delighting User Interfaces KA
110/132
110
-
7/28/2019 Developing Delighting User Interfaces KA
111/132
111
The value of typography
-
7/28/2019 Developing Delighting User Interfaces KA
112/132
112
-
7/28/2019 Developing Delighting User Interfaces KA
113/132
113
-
7/28/2019 Developing Delighting User Interfaces KA
114/132
114
-
7/28/2019 Developing Delighting User Interfaces KA
115/132
115
-
7/28/2019 Developing Delighting User Interfaces KA
116/132
116
-
7/28/2019 Developing Delighting User Interfaces KA
117/132
117
-
7/28/2019 Developing Delighting User Interfaces KA
118/132
118
-
7/28/2019 Developing Delighting User Interfaces KA
119/132
119
-
7/28/2019 Developing Delighting User Interfaces KA
120/132
120
-
7/28/2019 Developing Delighting User Interfaces KA
121/132
121
-
7/28/2019 Developing Delighting User Interfaces KA
122/132
122
-
7/28/2019 Developing Delighting User Interfaces KA
123/132
123
THE WHO
-
7/28/2019 Developing Delighting User Interfaces KA
124/132
124
CO-CREATION
COLLABORATIVE USER EXPERIENCE
-
7/28/2019 Developing Delighting User Interfaces KA
125/132
125
-
7/28/2019 Developing Delighting User Interfaces KA
126/132
126
In CONCLUSION
USER EXPERIENCE MYTHS
-
7/28/2019 Developing Delighting User Interfaces KA
127/132
12
7
http://www.slideshare.net/whitneyhess/10-most-common-misconceptions-about-user-experience-design?from=ss_embed
-
7/28/2019 Developing Delighting User Interfaces KA
128/132
12
8
A GOOD USEREXPERIENCELEADS TO
DELIGHT
-
7/28/2019 Developing Delighting User Interfaces KA
129/132
12
9
DELIGHT IS WHENTHE INTERFACECONVEYS A
STORY
-
7/28/2019 Developing Delighting User Interfaces KA
130/132
13
0
STORIESDELIGHT US
-
7/28/2019 Developing Delighting User Interfaces KA
131/132
13
1
WHATs YOUR
STORY ?
-
7/28/2019 Developing Delighting User Interfaces KA
132/132
THANK YOU
top related