User Experience and Prototyping

USER EXPERIENCE &
PROTOTYPING

Integra(ng Design & Product Development
Pune, September 24th, 2014

KshiBz Anand
Professor (Design), InsBtute of Product Leadership

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

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’

The best designs are the ones that do not need a
separate user manual !

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.

Show ConnecBng Film (18 mins) hZp://youtu.be/lciYKwVLTuk

Mobile has made us …… ?

How many of you have a
smartphone?

Where did we come from?
Where do we go?

To have a good
User experience
is to Delight!

Design should solve problems
for your business by solving
problems for your user

-‐ Laura Klein

User Experience and Prototyping

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

A requirement is short statement
of the problem

A speciﬁcaBon 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. speciﬁcaBons

How much of UX should a Product
Manager know?
Reference:

h*p://boxesandarrows.com/transi8oning-‐from-‐user-‐experience-‐to-‐product-‐management/

Are usually
Business-‐centered
Are usually
User-centered

Design for
people,
emoBons, behaviors.

Do not
design for
technology.

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

Time
spent

Interac8on

VISCERAL

BEHAVIORAL

REFLECTIVE

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

Internet users per 100 inhabitants
Reference
:
h*p://en.wikipedia.org/wiki/File:Internet_users_per_100_inhabitants_ITU.svg

Importance Of UX Today

Reference:
h*p://wearesocial.net/

Reference:
h*p://scoop.intel.com/celebra8ng-‐interna8onal-‐internet-‐of-‐things-‐day/

User Experience Google Trends

USER EXPERIENCE
DELIVERING
DELIGHT
SINCE MID 90s

CUSTOMER

h*p://www.stephenthomas.com/about/images/what_is_ux.jpg

T shaped (UX) professional

PETER
MORVILLE’S
HONEYCOMB
MODEL
Image
Source:
h*p://seman8cstudios.com/publica8ons/seman8cs/000029.php

The goal of UX

Reference:
h*p://www.thinkbrownstone.com/design-‐process/

UX Design Process

Research à Ideate à Prototype à Evaluate Feedback à Release
UX Design Process

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

Companies Customize the design process

HOW DO YOU FIT UX
INTO YOUR
ORGANISATION?

The elements of
user experience design

The UX role Shim
FROM AESTHETICS
TO PROCESS
TO PRODUCTS
TO SERVICE
TO STRATEGY

The product is no longer the basis
of value. The experience is.

Design is the conscious eﬀort to impose a meaningful
order. -‐ Victor Papanek

ACTIVITY :
Deconstruc*ng the UX
Exercise
(10 mins)

The UX of Angry Birds –
what makes it successful ?

“The”
experience
An
experience
An
experience
An
experience
An
experience
An
experience
An
experienceAn
experience
An
experience
John Dewey
American Educator
Philosopher

The mistakes we make!
²  Most experiences are inchoate and not
thought through
²  They are unfulﬁlled as they get interrupted
²  FrustraBng and not signiﬁcant and leads to
an unpleasant experience

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

Somware (products) should
behave like a considerate
human being!

What does being considerate
mean?

•  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

Show
Pomegranate
Phone
video

UX could be
diﬀerent across
plaoorms.
How ?
Mac OS vs Windows
Desktops vs Tablet vs mobile
iOS vs Android vs Windows

Plaoorms and their experiences diﬀer

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

Why so?
(THAT YOU USE REGULARLY)

USER RESEARCH
Why is it important ?
How do we do it ?

QUESTION THE STATUS QUO
Fly on the wall Observa(on

What does this image say ?

Design interven(ons in daily life
ANALYSING USAGE CONTEXT

UNDERSTANDING USER GROUPS
Crea(on of Personas

WHAT IS A PERSONA?

WHY PERSONAS ARE
IMPORTANT?

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.

•  Giving a face to your users
•  Helps in generating Use Cases
•  Helpful for Scenario Generation
•  Scenarios gives insights
WHY PERSONAS ARE
IMPORTANT?

Ac(vity: Finding Primary, Secondary user groups
STAKEHOLDER MAPPING

Ac(vity: Experiencing what personas feel, do, see, hear
EMPATHY MAPPING

Research is
important for the
success of any
design

•  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

When do you use
what kind of User
Research Method ?
Discussion

ACTIVITY
Wallet Mapping Exercise
(20 mins)

–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.

User Based Research
Qualita5ve:
Lesser
number
of
par?cipants

Quan5ta5ve:
Higher
number
of
par?cipants

Popular User Research Techniques

TOOLS FOR USER RESEARCH TESTING
h*p://uxdesign.cc/ux-‐tools/

It would get people ﬁnally noticing design - because when design's working properly,

you don't notice it.

PROTOTYPES

The real thing in UX!

The 4 dimensions
of Prototyping

1. Representation
à Describes the form of the
prototype, e.g., sets of paper
sketches or computer
simulations

2. Precision
à Describes the level of detail
at which the prototype is to be
evaluated; e.g., informal and
rough or highly polished

3. Interactivity
à Describes the extent to
which the user can actually
interact with the prototype;
e.g., watch-only or fully
interactive

4. Evolution
à Describes the expected life-
cycle of the prototype

WHY PROTOTYPE?

Reference:
h*p://designinstruct.com/web-‐design/prototyping-‐is-‐essen8al/

Find Design issues early

Iterate more quickly on a design concept

Compare design variaBons quickly

Reference:
h*p://refereemindset.com/give-‐feedback

Gather design feedback be[er

Use prototypes as a presentaBon tool

à FAST
à EASY
à GETS STAKEHOLDERS INVOLVED SOONER
à SAVES MONEY

If a picture is worth 1000 words,
a prototype is worth 1000 meetings!

WHAT ARE THE DIFFERENT
WAYS TO PROTOTYPE?

Reference:
h*p://www.slideshare.net/visualrinse/prototyping-‐23421094

We will never all agree on what “design” is. But we can probably
agree that sketching is an archetypal activity associated with
design!

VariaBons in elements and style in prototyping

Reference:
h*p://www.usability.gov/how-‐to-‐and-‐tools/methods/prototyping.html

Tracy Lepore, from Ideation towards Usability

©
Bill
Buxton,
Sketching
the
User
Experience

h*p://www.cs.cmu.edu/~bam/uicourse/Buxton-‐SketchesPrototypes.pdf

Getting the term right

Stages of prototyping in Product
Design Engineering
Sketch à Earlier stage à Lesser cost à More reviewed
Prototype à Later Stage à Larger cost à More acceptance

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?

Watch
Google
Glass
Prototyping
VIDEO
:
h*ps://www.youtube.com/watch?v=d5_h1VuwD6g

Discussion: would you prototype this differently ?

GESTALT’S THEORY :
How the mind
organizes and perceives
Visual InformaBon

•  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

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)

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

The whole is greater than the sum of it’s parts

What did you see ﬁrst here?

•  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.

The
eye
diﬀeren?ates
an
object
from
its
surrounding
area.
A
form,
silhoueMe,
or

shape
is
naturally
perceived
as
ﬁgure
(object),
while
the
surrounding
area
is

perceived
as
ground
(background).

The
dark

background

encourages

your
eye
to

see
the

square
as
an

opening.

•  Figure and Ground

Effec?ve
figure/ground
rela?onship.
Compe?ng
figure/ground
rela?onship.

Image
placement
can
also
create

depth
as
in
this
ﬂyer.

So
much
centered
text,
however,

is
diﬃcult
to
read.

Limit
centered
text
to
major

?tles.

Use
the
principle
of
proximity

and
alignment
for
other
textual

informa?on.

•  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

•  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.

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.

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

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?

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.

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.

Crea?ve

thought

Gestalt

laws

Good

design

What are some ways you can
create Visual Hierarchy in
interfaces?

à Foreground – background
à Highlights
à Playing with color
à Font sizes
à Font emphasis
à Font family
à Contrast between diﬀerent elements

GRIDS
-‐ soul and skeleton of
good design

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

Can you tell Arial from HelveBca?

Limit the Number of Fonts to Two:
One for headings and one for text copy.

KEEP IT SIMPLE

What are the popular UI
mistakes that people make ?
Discussion

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 ﬂows / sketches on paper ﬁrst

7 Easy to remember
User Interface rules

2. Law of preferred acBon

5. Law of Guided AcBon

REMEMBER
à Place users in control of the interface
à Reduce users’ memory load
à Make the user interface consistent.

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.”

#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

“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

VISUAL DESIGN
What most people
think
(UX) Design is !

Visual
Design

Last
in
First
Out

User
Experience

The
whole
process

People want
Visual Design
but ask for UX

But by then its
too late !

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.

2014 Web Design Trends
Reference:
h*p://www.pinterest.com/melissacales/2014-‐design-‐trends/

Reference:
h*ps://econsultancy.com/blog/64096-‐18-‐pivotal-‐web-‐design-‐trends-‐for-‐2014

Flat UI

Richer Content experiences

Making full use of one page

Increased use of typography info-‐graphics

Fixed posiBon navigaBon menus

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

Reference:
h*p://www.slideshare.net/goldengekko/mobile-‐apps-‐design-‐trends-‐2014

Reference:
h*ps://hackdesign.org/toolkit/rapid-‐prototyping

BALSAMIQ

•  Good repository of UI elements
•  Almost all popular UI elements used
•  Highly collaborative
•  Make it interactive

….
and
then
you
just
Play
J

Idea

Tool/

PPT
/

Balsamiq

HTML
/

CSS

CODE

iOS UI Style Guide
•  hZps://developer.apple.com/library/ios/documenta(on/userexperience/conceptual/MobileHIG/index.html

Android InteracBon Pa[erns

Windows apps UX Guidelines
Reference:
h*p://msdn.microsoe.com/en-‐us/library/windows/apps/hh465424.aspx

Reference:
h*p://www.ndtv.com/ar8cle/india/india-‐is-‐world-‐s-‐coronary-‐diabe8c-‐capital-‐says-‐expert-‐447189

The problem at hand

Today’s class Design Challenge

•  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 diﬀerent 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 ﬁnally
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

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

How is MOBILE UX
diﬀerent?
Would there be a difference in the
approach to UX on the Mobile
websites and Mobile apps ?
Your Opinion?

MOBILE FIRST
What are the advantages and
disadvantages of it ?

DISCUSSION

Graceful DegradaBon vs. Progressive Enhancement
or

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.

MOBILE FIRST
PRINCIPLES
Towards beHer User Experience

Make best use of screen real estate
Image
:
h*ps://www.ﬂickr.com/photos/sierragoddess/5435989568

PrioriBze your informaBon and acBons
Image
:
h*ps://www.ﬂickr.com/photos/johanl/5547851770

Design for scalability
Image:
h*ps://www.ﬂickr.com/photos/sierragoddess/5435989568

Image:
h*ps://www.ﬂickr.com/photos/koalazymonkey/2626094585

Giving ParBal a[enBon vs full a[enBon

Image
:
h*ps://www.ﬂickr.com/photos/29881930@N00/2086642736

Use task-‐based design

Design for interrupBon when a task
has to be abandoned midway
Image:
h*ps://www.ﬂickr.com/photos/whiteafrican/2911951329

Image:
h*ps://www.ﬂickr.com/photos/epsos/3842690051

Design by understanding hardware
and plaoorms capability

Image:
h*ps://www.ﬂickr.com/photos/osde-‐info/763025492

Screen size implies a user’s state.
User’s state infers their commitment
to what is on the screen

Image:
h*ps://www.ﬂickr.com/photos/skohlmann/14772342171

IdenBfy your users well. Users have a
personal relaBonship with mobile!

Good design or Bad design ?

Reference
:
h*p://uxmag.com/ar8cles/avoiding-‐featuri8s-‐in-‐the-‐connected-‐car-‐gold-‐rush

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

Framing your research quesBons
the 5Ws and 1 H

Digital NaBves
Vs
Digital Immigrants

•  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 surﬁng the
Internet
•  The majority of Digital NaBves feel disconnected and “oﬀ
the radar” without their phones.
User Group : Digital NaBves

à A Highly Social GeneraBon
à An ImpaBent GeneraBon

•  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

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:
•  Oﬀer 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

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

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.

INFORMATION ARCHITECTURE
is not the same as
TECHNICAL ARCHITECTURE

Organizing InformaBon based on
•  Date/Bme
•  AlphabeBcal
•  Geography/locaBon
•  Topic
•  Target audience
•  Task/process
•  A[ributes/facets
•  CombinaBons

h*p://wiki.fluidproject.org/display/fluid/Affinity+Diagrams

Affinity Wall / Card SorBng

à Good InformaBon Architecture helps
immensely in the SEO.

à  IA is the organizaBon and labeling of
website content to support usability
and ﬁndability.

UX is built step by step with
INFORMATION bits

Too much informaBon to
process, leads to CHAOS

Each informaBon processed
gives AN EXPERIENCE

Create InformaBon Architecture
for your Mobile app using Card
SorBng / Aﬃnity 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

Task ﬂow Conceptual models

Class AcBvity :
Ask what are the key things your app wants to do
create task ﬂows for atleast 3 major tasks

20 mins

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.

Types of Prototypes
• Low Fidelity
• High Fidelity
• Horizontal Prototype
• Vertical Prototype

•  Paper Prototypes and Sketches
•  Easy to discard
Low Fidelity

High Fidelity
•  Wireframes
•  HTML Mockups

Horizontal Prototype
•  Cover major functionalities
•  Superficial information on all

VerBcal Prototype
•  Deep into one or two functionality

Remember the responsive design challenge

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

WIREFRAMING:
CREATE SKETCHES
PAPER PROTOTYPES

Class AcBvity :
Visualize your task ﬂow 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

Remember Responsive Design
or

“Make everything as simple as possible, but not simpler.”
—Albert Einstein

Dieter Rams-‐ Principles of good design

Innova?ve
=
early
adop?on

Useful
=
increased
repeat
visits

Aesthe?c
=
improved
customer
sa?sfac?on

Understandable
=
reduced
errors

Unobtrusive
=
quicker
task
comple?on

Honest
=
does
everything
you
expect

Long
las?ng
=
less
release
cycles

Thorough
=
100%
task
comple?on

Environmentally
friendly
=
Responsive
(mul?-‐device)

As
liMle
design
as
possible
=
lightweight

Dieter Rams-‐ Principles of good design

h*p://www.slideshare.net/whitneyhess/10-‐most-‐common-‐misconcep8ons-‐about-‐user-‐experience-‐design?from=ss_embed

USER EXPERIENCE MYTHS
1.  User interface design
2.  A step in the process
3.  Just about technology
4.  Just about usability
5.  Just about the user
6.  Expensive
7.  Easy
8.  The role of one person or dept
9.  A single discipline
10. A choice
à It is the system
à It is the process
à It is about behavior
à It is about value
à It is about context
à It is ﬂexible
à It is a balancing act
à It is a culture
à It is a collaboraBon
à It is a means of survival
© Whitney Hess @ whitneyhess
UX is NOT

THANK YOU
Email:
kshi?z@happyhorizons.in
|TwiMer:
@kshi?z

LinkedIn:
in.linkedin.com/in/kshi?zanand/

User Experience and Prototyping

Recommended

More Related Content

What's hot (20)

Similar to User Experience and Prototyping (20)

More from Kshitiz Anand (20)

Recently uploaded (20)

User Experience and Prototyping