Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
User Experience and Prototyping
1. USER EXPERIENCE &
PROTOTYPING
Integra(ng Design & Product Development
Pune, September 24th, 2014
KshiBz Anand
Professor (Design), InsBtute of Product Leadership
2. Hello, I am @kshiBz
Presently
Dean & Director -‐ India OperaBons at L'École de Design Nantes Atlan(que
Professor (Design) -‐ Ins(tute of Product Leadership
Founder & Principal Designer -‐ Happy Horizons Consul(ng
Previous
Design Head, Kuliza Technologies
Founder & Director, Deskala Research and Design & Consul(ng
Designer @Motorola, Infosys
EducaBon
MS in HCI Design , Indiana University Bloomington, USA
BDes in CommunicaBon Design, IIT Guwaha(, India
Contact
kshiBz@happyhorizons.in
Twi[er: @kshiBz
LinkedIn: in.linkedin.com/in/kshiBzanand/
Website: www.kshiBzanand.com
4. Design is such a natural human ability
that almost everyone is designing most of the
time - whether they are conscious of it, or not.
- Harold Nelson, Erik Stolterman, in ‘The Design Way’
5. The best designs are the ones that do not need a
separate user manual !
6. We live in interesBng Bmes!
According to the 2011 Census, 46.9% Indians do not have
toilets at home, while 63.2% have landlines or mobiles.
53.2% own mobile phones.
16. Design should solve problems
for your business by solving
problems for your user
-‐ Laura Klein
18. Reference: Putting people together to create new products; Jonathan Korman
http://www.cooper.com/journal/2001/10/putting_people_together_to_cre.html
Key to Product Success
19. A requirement is short statement
of the problem
A specificaBon is how to solve
the problem
* Source: On Reqs and Specs: The Roles and Behaviors for Effective Product Definition
http://www.pragmaticmarketing.com/publications/topics/09/on-reqs-and-specs
ProductManagement
Engineering
UX
WHAT HOW
Sweet spot
Requirements vs. specificaBons
20. How much of UX should a Product
Manager know?
Reference:
h*p://boxesandarrows.com/transi8oning-‐from-‐user-‐experience-‐to-‐product-‐management/
21. Are usually
Business-‐centered
Are usually
User-centered
22. Design for
people,
emoBons, behaviors.
Do not
design for
technology.
25. VISCERAL
BEHAVIORAL
REFLECTIVE
A more detailed look and feel and function that is got by interactions
i.e. the total experience of using a product
Refers primarily to that initial impact, to its appearance
Appearance is rooted in form, aesthetics
Ones thoughts afterwards, how it makes one feel, the image it
portrays, the message it tells others about the owner's taste
27. 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
28. Internet users per 100 inhabitants
Reference
:
h*p://en.wikipedia.org/wiki/File:Internet_users_per_100_inhabitants_ITU.svg
Importance Of UX Today
43. Research à Ideate à Prototype à Evaluate Feedback à Release
UX Design Process
44. RESEARCH à discovery the ways of knowing
IDEATE à conceptualizaBons, features
funcBonaliBes
PROTOTYPE à get your hands dirty, bringing the
ideas to life
EVALUATE ITERATE à gather feedback
RELEASE à launch , deliver for development
Steps in UX Design Process
58. The mistakes we make!
² Most experiences are inchoate and not
thought through
² They are unfulfilled as they get interrupted
² FrustraBng and not significant and leads to
an unpleasant experience
59. THE AESTHETIC :
the “look and feel”
THE INTELLECTUAL :
business strategy
THE PRACTICAL:
what user actually
interacts with and
experiences and its
performance
+
+
MulBple things have to come together
to create the experience
64. • Take an interest in user’s actions
• Are differential
• Are forthcoming
• Anticipate people’s needs
• Are conscientious
• Don’t burden you with extra information
• Keep you informed
• Are perceptive
• Don’t ask you a lot of questions
• Take responsibility
• Know when to bend the rules
• GIVES A GOOD USER EXPERIENCE
CONSIDERATE PRODUCTS
75. WHAT IS A PERSONA?
WHY PERSONAS ARE
IMPORTANT?
76. PERSONAS
• A representation of the goals and behavior of
a real user group.
• 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.
77. • Giving a face to your users
• Helps in generating Use Cases
• Helpful for Scenario Generation
• Scenarios gives insights
WHY PERSONAS ARE
IMPORTANT?
85. • 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
86. When do you use
what kind of User
Research Method ?
Discussion
89. –Laura
Klein,
Author
of
UX
for
Lean
Startups
QuanBtaBve research tells you
WHAT your problem is.
QualitaBve research tells you WHY
you have that problem.
119. Stages of prototyping in Product
Design Engineering
Sketch à Earlier stage à Lesser cost à More reviewed
Prototype à Later Stage à Larger cost à More acceptance
120. Before making the Prototype ask this:
1. What needs to be real
2. What can we fake?
3. Where will they use it?
4. How will the interface work ?
5. Will the users understand where to click next?
6. Have I covered all possible user pathways?
121. Watch
Google
Glass
Prototyping
VIDEO
:
h*ps://www.youtube.com/watch?v=d5_h1VuwD6g
123. GESTALT’S THEORY :
How the mind
organizes and perceives
Visual InformaBon
125. • Gestalt theory focuses on the mind’s
perceptive processes
• The word Gestalt has no direct translation
in English
•
• It refers to a way a thing has been gestellt ;
i.e., ‘placed,’ or ‘put together”
• Common translations include form and
shape
126. Gestalt psychologists are interested in the way
that, within a world of ongoing change and
endless variety, people can make sense of so
much visual stimuli
(Schamber, 1986)
127. Characters,
punctuation
Words,
numbers
Sentences,
paragraphs
Story
Points,
lines,
shapes
Type,
pictures,
space
Layout
DESIGN
Component
Vocabulary
Syntax
Message
VERBAL VISUAL
Adapted
from
Schamber,
1986
128. The whole is greater than the sum of it’s parts
131. • Law of Similarity / Anamoly
– Similarity occurs when objects look similar
to one another. People often perceive
them as a group or pattern.
Gestalt’s principles
Anomaly uses the principle of similarity
but alters one figure to draw attention to
difference.
132. The
eye
differen?ates
an
object
from
its
surrounding
area.
A
form,
silhoueMe,
or
shape
is
naturally
perceived
as
figure
(object),
while
the
surrounding
area
is
perceived
as
ground
(background).
The
dark
background
encourages
your
eye
to
see
the
square
as
an
opening.
Gestalt’s principles
• Figure and Ground
134. Image
placement
can
also
create
depth
as
in
this
flyer.
So
much
centered
text,
however,
is
difficult
to
read.
Limit
centered
text
to
major
?tles.
Use
the
principle
of
proximity
and
alignment
for
other
textual
informa?on.
135. Gestalt’s principles
• Law of Proximity
– Proximity occurs when elements are
placed close together. They tend to be
perceived as a group.
Proximity
overpowers
similarity
in
color/contrast
139. Gestalt’s 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.
140. Closure
can
also
be
used
to
reinforce
a
concept
in
a
clever
way.
No?ce
how
the
brand
“Spartan”
is
presented
in
the
graphic
as
both
a
Greek
warrior,
complete
with
helmet,
and
a
man
swinging
a
golf
club.
141. Gestalt’s principles
• Law of Continuity
– Continuation occurs when the eye is
compelled to move through one object and
continue to another object.
144. Understanding Visual Hierarchy
When we look at visual information, we look for hierarchy
because it helps us sort what is most important.
The size of objects, shape, and color, and placement provide
cues that help us notice those things that are most important
and others that are supplemental.
Which circle did you notice first? Which one draws your attention
more?
What conclusions can you draw based on your response to the
two circles?
145. We also look for patterns as well as similarity and
difference to make sense of what we are seeing.
Most of us will view the square as more important than the circles.
The focal point in a design governs the visual hierarchy and should draw
the viewers interest while it also helps them understand what they are
looking at.
146. The focal point in this data-driven infographic is the large image of corn.
Notice how the designer applied principles of alignment and proximity for
text and other supporting images.
151. 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
166.
Limit the Number of Fonts to Two:
One for headings and one for text copy.
KEEP IT SIMPLE
167. What are the popular UI
mistakes that people make ?
Discussion
168. The Basics to remember
• Building Prototypes should be Easy
• Prototypes should not need to be pixel perfect
• The goals need to be clearly spelled out prior to
creaBon
• Build prototypes that have an output that everyone
can see
• Do not complicate things
• Create flows / sketches on paper first
177. REMEMBER
à Place users in control of the interface
à Reduce users’ memory load
à Make the user interface consistent.
178. 5 Prevalent Pitfalls
when Prototyping
Prototypes are a fabulous way to explore ideas with a team.
They shorten the time between “This is what we’re thinking...” and “Oh, I get it.”
179. #1: Focus on the Deliverable, not on the Learning
#2: Too Much Converging; Not Enough Diverging
#3: Working in the Wrong Fidelity
#4: Too Li[le EvaluaBng
#5: FixaBng On A Single Prototyping Tool
180. “It's really hard to design products by focus group.
A lot of times, people don't know what they want until
you show it to them.”
-Steve Jobs
188. KEEP IT SIMPLE
Dark font, light background.
Light font, dark background.
Color
Difference:
The
red
and
blue
colors
have
the
same
value,
and
the
effect
is
jarring
to
the
eyes.
The
text
seems
to
vibrate.
Color
Value:
Same
color
in
the
background
and
text,
but
the
values
are
different,
so
it
does
not
vibrate
but
creates
an
easy
to
read
text.
203. Video in the background
Reference:
h*p://www.fastcodesign.com/3028471/google-‐ventures-‐your-‐design-‐team-‐
needs-‐a-‐war-‐room-‐heres-‐how-‐to-‐set-‐one-‐up
236. • With the Internet of Things gexng larger day by day, our lives
are more connected than ever. It is not just about people, but
also our devices that are connected. This has resulted in
change in user behavior and with changing lifestyles comes
diseases and health problems that were not heard of before.
• The consumers on the other side are more aware about
healthcare and are doing various things in different capaciBes
to keep track of their health and wellbeing.
• Healthcare professionals and informaBon is more accessible
today.
• Insurance companies are cashing onto this phenomenon as
well.
• With the advent of smart devices, healthcare is finally
becoming a buzzword, but something that needs our most
a[enBon.
Your role as a product designer is to help consumers use a tablet or
phone app that helps in beZer healthcare management.
Design of Healthcare App
237. TODAY’s UX DESIGN CHALLENGE
Design of naBve app for managing healthcare
for Indians
Things to do
• Map out your system, define your focus area
• Define your User Group
• Do Interviews of Actual Users
• Create InformaBon Architecture
• Create Wireframes
• Make paper prototypes
• Refine design concept
• Present before class
238. How is MOBILE UX
different?
Would there be a difference in the
approach to UX on the Mobile
websites and Mobile apps ?
Your Opinion?
241. What does Mobile Device mean?
A mobile device is a handheld tablet or other device
that is made for portability, and is therefore both
compact and lightweight. New data storage,
processing and display technologies have allowed
these small devices to do nearly anything that had
previously been tradi(onally done with larger
personal computers.
257. SYSTEM MAPPING
CLASS ACTIVITY:
Put down everything that comes to your
mind when you think of the word
‘healthcare’
System comprises of context, products,
stakeholders
Write down any dependencies if applicable
10
mins
260. • Nearly all Digital NaBves possess a phone and a computer
• They use their phones conBnuously during the day
• 100% have a mobile phone and 89% of those are
smartphones
• Digital NaBves spend an average of 3.5 hours per-‐day
using their phones
• 80% say they can’t stand a single day without the Internet
• On average, they spend two hours per day surfing the
Internet
• The majority of Digital NaBves feel disconnected and “off
the radar” without their phones.
User Group : Digital NaBves
262. • As Digital Immigrants learn to adapt to their environment
• To some degree retain, their accent, that is, their foot in
the past.
• The “digital immigrant accent” can be seen in such things
as turning to the Internet for informaBon second rather
than first, or in reading the manual for a program rather
than assuming that the program itself will teach us to use
it.
• Today‟s older folk were socialized differently from their
kids, and are now in the process of learning a new
language. And a language learned later in life, scienBsts
tell us, goes into a different part of the brain.
User Group : Digital Immigrants
263. How to Provide an Outstanding User
Experience for Digital NaBves
à CreaBng stable, fast, user-‐friendly online user experience is a
necessity!
à When designing for Digital NaBves keep these guidelines in mind:
• Offer quick access to whatever they need
• Keep it simple to hold their a[enBon
• Use visuals and as li[le text as possible
• Make your product self-‐explanatory and intuiBve
• And last, but not least, give it a touch of fun
Reference:
hMp://uxmag.com/ar?cles/crea?ng-‐outstanding-‐experiences-‐for-‐digital-‐na?ves
264. USER INTERVIEWS
CLASS ACTIVITY:
Personal Interviews and Focus group
discussion of people within your group
Understand the users ac(ons, needs,
aspira(ons and what they want out of the
app
20 minutes
266. INFORMATION ARCHITECTURE
The categorizaBon of informaBon 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 chaoBc.
272. à Good InformaBon Architecture helps
immensely in the SEO.
à IA is the organizaBon and labeling of
website content to support usability
and findability.
273. UX is built step by step with
INFORMATION bits
Too much informaBon to
process, leads to CHAOS
Each informaBon processed
gives AN EXPERIENCE
274. Create InformaBon Architecture
for your Mobile app using Card
SorBng / Affinity Wall
Class AcBvity :
HOW TO DO
Step 1: DIVERGE (15 mins)
Record each idea on cards or post it notes.
Look for ideas that seem to be related
Step 2: CONVERGE (10 mins)
Sort cards into groups unBl all cards have been used.
25 mins
275. Task flow Conceptual models
Class AcBvity :
Ask what are the key things your app wants to do
create task flows for atleast 3 major tasks
20 mins
276. Wireframing Layouts
Wireframe: an image or set of images which displays
the func(onal elements of a website or page,
typically used for planning a site's structure and
func(onality.
277. Types of Prototypes
• Low Fidelity
• High Fidelity
• Horizontal Prototype
• Vertical Prototype
285. Responsive Design: Things to consider
• Content : Show only what is important
• Layout : Importance to Screen Real estate
• White space : Give ample breathing space
• NavigaBon : easy to go across screens
• InteracBons : Easy to complete tasks
• Touch vs Mouse : Finger friendly
• Visual Design : AestheBcally pleasing
• Typography: Easy to read
• Color : Device screen competency
286. WIREFRAMING:
CREATE SKETCHES
PAPER PROTOTYPES
Class AcBvity :
Visualize your task flow in terms of layouts,
features and funcBonaliBes.
Iterate based on feedback
Use near to scale screen size on paper to layout
your designs
30 mins