293
USER EXPERIENCE & PROTOTYPING Integra(ng Design & Product Development Pune, September 24 th , 2014 KshiBz Anand Professor (Design), InsBtute of Product Leadership

User Experience and Prototyping

Embed Size (px)

Citation preview

Page 1: User Experience and Prototyping

USER  EXPERIENCE  &  PROTOTYPING Integra(ng  Design  &  Product  Development  Pune,  September  24th,  2014 KshiBz  Anand Professor  (Design),  InsBtute  of  Product  Leadership  

Page 2: User Experience and Prototyping

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

[email protected] Twi[er:  @kshiBz LinkedIn:  in.linkedin.com/in/kshiBzanand/ Website:  www.kshiBzanand.com

Page 3: User Experience and Prototyping

Are  you  a  designer?

Page 4: User Experience and Prototyping

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’

Page 5: User Experience and Prototyping

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

Page 6: User Experience and Prototyping

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.  

Page 7: User Experience and Prototyping

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

Page 8: User Experience and Prototyping

Mobile  has  made  us  ……  ?

Page 9: User Experience and Prototyping

How  many  of  you  have  a  smartphone?

Page 10: User Experience and Prototyping

Does  it  delight  you?

Page 11: User Experience and Prototyping

1993      

2014  

Page 12: User Experience and Prototyping

Where did we come from? Where do we go?

Page 13: User Experience and Prototyping

Then  &  Now  

Page 14: User Experience and Prototyping

To  have  a  good  User  experience  is  to  Delight!

Page 15: User Experience and Prototyping

Delight  =  Features  ?

Page 16: User Experience and Prototyping

Design  should  solve  problems  for  your  business  by  solving  problems  for  your  user -­‐   Laura  Klein        

Page 17: User Experience and Prototyping
Page 18: 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

Page 19: User Experience and Prototyping

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

Prod

uct M

anag

emen

t Engineering

UX

WHAT HOW

Sweet  spot

Requirements  vs.  specificaBons

Page 20: User Experience and Prototyping

How  much  of  UX  should  a  Product  Manager  know?  

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

Page 21: User Experience and Prototyping

Are  usually    Business-­‐centered

Are usually User-centered

Page 22: User Experience and Prototyping

Design  for    people,    emoBons,  behaviors.      Do  not    design  for    technology.

Page 23: User Experience and Prototyping
Page 24: User Experience and Prototyping
Page 25: User Experience and Prototyping

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

Page 26: User Experience and Prototyping

Time  spent  

Interac8on  

VISCERAL  

BEHAVIORAL  

REFLECTIVE  

Page 27: User Experience and Prototyping

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

Page 28: User Experience and Prototyping

Internet users per 100 inhabitants

Reference  :  h*p://en.wikipedia.org/wiki/File:Internet_users_per_100_inhabitants_ITU.svg  

Importance  Of  UX  Today  

Page 29: User Experience and Prototyping
Page 30: User Experience and Prototyping

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

Page 31: User Experience and Prototyping
Page 32: User Experience and Prototyping

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

Page 33: User Experience and Prototyping

User  Experience  Google  Trends

Page 34: User Experience and Prototyping

USER EXPERIENCE

DELIVERING

DELIGHT SINCE MID 90s  

CUSTOMER

Page 35: User Experience and Prototyping

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

Page 36: User Experience and Prototyping

Unclear  boundaries  

Page 37: User Experience and Prototyping

T  shaped  (UX)  professional  

Page 38: User Experience and Prototyping

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

The  goal  of  UX  

Page 39: User Experience and Prototyping

UX  is  a  team  effort  

Page 40: User Experience and Prototyping
Page 41: User Experience and Prototyping

UX  Process

Page 42: User Experience and Prototyping

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

UX  Design  Process  

Page 43: User Experience and Prototyping

Research à Ideate à Prototype à Evaluate & Feedback à Release

UX  Design  Process  

Page 44: User Experience and Prototyping

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  

Page 45: User Experience and Prototyping

Companies  Customize  the  design  process  

Page 46: User Experience and Prototyping
Page 47: User Experience and Prototyping

Comparing  UX  Process  

Page 48: User Experience and Prototyping

HOW  DO  YOU  FIT  UX  INTO  YOUR  

ORGANISATION?

Page 49: User Experience and Prototyping

The  elements  of   user  experience  design  

Page 50: User Experience and Prototyping
Page 51: User Experience and Prototyping

Just  remember  this

Page 52: User Experience and Prototyping

The  UX  role  Shim  

FROM AESTHETICS TO PROCESS TO PRODUCTS TO SERVICE TO STRATEGY

Page 53: User Experience and Prototyping

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

Page 54: User Experience and Prototyping

Design  is  the  conscious  effort  to  impose  a  meaningful  order.  -­‐  Victor  Papanek  

Page 55: User Experience and Prototyping

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

Page 56: User Experience and Prototyping

The  UX  of  Angry  Birds  –    what  makes  it  successful  ?  

Page 57: User Experience and Prototyping

“The” experience

An experience

An experience

An experience

An experience

An experience

An experience An

experience

An experience

John Dewey American Educator & Philosopher

Page 58: User Experience and Prototyping

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

Page 59: User Experience and Prototyping

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

Page 60: User Experience and Prototyping
Page 61: User Experience and Prototyping

Take  a  break!

Page 62: User Experience and Prototyping
Page 63: User Experience and Prototyping

Somware  (products)  should  behave  like  a  considerate  human  being! What  does  being  considerate  mean?  

Page 64: User Experience and Prototyping

•  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  

Page 65: User Experience and Prototyping

<<Show  Pomegranate  Phone  video>>  

Page 66: User Experience and Prototyping

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

Page 67: User Experience and Prototyping

Plaoorms  and  their  experiences  differ

Page 68: User Experience and Prototyping

Think  of  a  product  that  delighted  you  (or  did  not)  ?      Why  so?   (THAT YOU USE REGULARLY)  

Page 69: User Experience and Prototyping

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

Page 70: User Experience and Prototyping
Page 71: User Experience and Prototyping

QUESTION  THE  STATUS  QUO Fly  on  the  wall  Observa(on  

Page 72: User Experience and Prototyping

What  does  this  image  say  ?  

Page 73: User Experience and Prototyping

Design  interven(ons  in  daily  life    ANALYSING  USAGE  CONTEXT

Page 74: User Experience and Prototyping

UNDERSTANDING  USER  GROUPS Crea(on  of  Personas  

Page 75: User Experience and Prototyping

WHAT  IS  A  PERSONA?      WHY  PERSONAS  ARE  IMPORTANT?  

Page 76: User Experience and Prototyping

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.

Page 77: User Experience and Prototyping

•  Giving a face to your users •  Helps in generating Use Cases •  Helpful for Scenario Generation

•  Scenarios gives insights

WHY  PERSONAS  ARE  IMPORTANT?  

Page 78: User Experience and Prototyping
Page 79: User Experience and Prototyping

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

Page 80: User Experience and Prototyping

Mapping  your  stakeholders

Page 81: User Experience and Prototyping

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

Page 82: User Experience and Prototyping
Page 83: User Experience and Prototyping

Research  is  important  for  the  success  of  any  design  

Page 84: User Experience and Prototyping
Page 85: User Experience and Prototyping

•  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  

Page 86: User Experience and Prototyping

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

Page 87: User Experience and Prototyping

ACTIVITY Wallet  Mapping  Exercise   (20  mins)  

Page 88: User Experience and Prototyping
Page 89: User Experience and Prototyping

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

Page 90: User Experience and Prototyping

User  Based  Research

Qualita5ve:  Lesser  number  of  par?cipants  Quan5ta5ve:  Higher  number  of  par?cipants  

Page 91: User Experience and Prototyping

Popular  User  Research  Techniques  

Page 92: User Experience and Prototyping

Popular  User  Research  Techniques  

Page 93: User Experience and Prototyping

TOOLS  FOR  USER  RESEARCH    &  TESTING  

h*p://uxdesign.cc/ux-­‐tools/  

Page 94: User Experience and Prototyping

It would get people finally noticing design - because when design's working properly, you don't notice it.

Page 95: User Experience and Prototyping

PROTOTYPES  The real thing in UX!

Page 96: User Experience and Prototyping
Page 97: User Experience and Prototyping

The 4 dimensions of Prototyping  

Page 98: User Experience and Prototyping

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

Page 99: User Experience and Prototyping

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

Page 100: User Experience and Prototyping

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

Page 101: User Experience and Prototyping

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

Page 102: User Experience and Prototyping

WHY PROTOTYPE?  

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

Page 103: User Experience and Prototyping

Find  Design  issues  early

Page 104: User Experience and Prototyping

Iterate  more  quickly  on  a  design  concept  

Page 105: User Experience and Prototyping

Compare  design  variaBons  quickly

Page 106: User Experience and Prototyping

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

Gather  design  feedback  be[er

Page 107: User Experience and Prototyping

Use  prototypes  as  a  presentaBon  tool

Page 108: User Experience and Prototyping

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

Page 109: User Experience and Prototyping

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

Page 110: User Experience and Prototyping

WHAT ARE THE DIFFERENT WAYS TO PROTOTYPE?  

Page 111: User Experience and Prototyping

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

Page 112: User Experience and Prototyping

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

Page 113: User Experience and Prototyping

VariaBons  in  elements  and  style  in  prototyping

Page 114: User Experience and Prototyping

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

Tracy Lepore, from Ideation towards Usability

Page 115: User Experience and Prototyping
Page 116: User Experience and Prototyping
Page 117: User Experience and Prototyping

©  Bill  Buxton,  Sketching  the  User  Experience  h*p://www.cs.cmu.edu/~bam/uicourse/Buxton-­‐SketchesPrototypes.pdf  

Getting the term right

Page 118: User Experience and Prototyping
Page 119: User Experience and Prototyping

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

Page 120: User Experience and Prototyping

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?    

Page 121: User Experience and Prototyping

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

Page 122: User Experience and Prototyping

Discussion: would you prototype this differently ?

Page 123: User Experience and Prototyping

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

Page 124: User Experience and Prototyping
Page 125: User Experience and Prototyping

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

Page 126: User Experience and Prototyping

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)

Page 127: User Experience and Prototyping

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  

Page 128: User Experience and Prototyping

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

Page 129: User Experience and Prototyping
Page 130: User Experience and Prototyping

What  did  you  see  first  here?  

Page 131: User Experience and Prototyping

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

Page 132: User Experience and Prototyping

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

Page 133: User Experience and Prototyping

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

Page 134: User Experience and Prototyping

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.    

Page 135: User Experience and Prototyping

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  

Page 136: User Experience and Prototyping
Page 137: User Experience and Prototyping
Page 138: User Experience and Prototyping
Page 139: User Experience and Prototyping

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.

Page 140: User Experience and Prototyping

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.  

Page 141: User Experience and Prototyping

Gestalt’s  principles  •  Law of Continuity

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

Page 142: User Experience and Prototyping
Page 143: User Experience and Prototyping
Page 144: User Experience and Prototyping

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?

Page 145: User Experience and Prototyping

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.

Page 146: User Experience and Prototyping

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.

Page 147: User Experience and Prototyping

Crea?ve  thought  

Gestalt  laws  

Good  design  

Page 148: User Experience and Prototyping

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

Page 149: User Experience and Prototyping

à Foreground  –  background à Highlights à Playing  with  color à Font  sizes à Font  emphasis à Font  family à Contrast  between  different  elements

Page 150: User Experience and Prototyping

GRIDS    -­‐  soul  and  skeleton  of  good  design    

Page 151: User Experience and Prototyping

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

Page 152: User Experience and Prototyping
Page 153: User Experience and Prototyping
Page 154: User Experience and Prototyping

The  value  of  typography  

Page 155: User Experience and Prototyping
Page 156: User Experience and Prototyping

Can  you  tell  Arial  from  HelveBca?    

Page 157: User Experience and Prototyping
Page 158: User Experience and Prototyping
Page 159: User Experience and Prototyping
Page 160: User Experience and Prototyping
Page 161: User Experience and Prototyping
Page 162: User Experience and Prototyping
Page 163: User Experience and Prototyping
Page 164: User Experience and Prototyping
Page 165: User Experience and Prototyping
Page 166: User Experience and Prototyping

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

KEEP IT SIMPLE

Page 167: User Experience and Prototyping

What are the popular UI mistakes that people make ? <<Discussion>>

Page 168: User Experience and Prototyping

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

Page 169: User Experience and Prototyping

7 Easy to remember User Interface rules

Page 170: User Experience and Prototyping

1.  Law  of  Clarity

Page 171: User Experience and Prototyping

2.  Law  of  preferred  acBon

Page 172: User Experience and Prototyping

3.  Law  of  context

Page 173: User Experience and Prototyping

4.  Law  of  defaults

Page 174: User Experience and Prototyping

5.  Law  of  Guided  AcBon

Page 175: User Experience and Prototyping

6.  Law  of  feedback

Page 176: User Experience and Prototyping

7.  Law  of  easing

Page 177: User Experience and Prototyping

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

Page 178: User Experience and Prototyping

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

Page 179: User Experience and Prototyping

#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

Page 180: User Experience and Prototyping

“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

Page 181: User Experience and Prototyping

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

Page 182: User Experience and Prototyping

Visual  Design  

Last  in  First  Out  User  E

xperience  

The  whole  process  

Page 183: User Experience and Prototyping

People  want   Visual  Design   but  ask  for  UX

Page 184: User Experience and Prototyping

But  by  then  its   too  late  !  

Page 185: User Experience and Prototyping

The basics of Color

Page 186: User Experience and Prototyping
Page 187: User Experience and Prototyping
Page 188: User Experience and Prototyping

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.    

Page 189: User Experience and Prototyping

POPULAR DESIGN TRENDS  

Page 190: User Experience and Prototyping

2014  Web  Design  Trends

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

Page 191: User Experience and Prototyping

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

Flat  UI

Page 192: User Experience and Prototyping

MicrointeracBons  /  UX

Page 193: User Experience and Prototyping

Less  text

Page 194: User Experience and Prototyping

Minimalist  NavigaBon

Page 195: User Experience and Prototyping

Richer  Content  experiences

Page 196: User Experience and Prototyping

Making  full  use  of  one  page

Page 197: User Experience and Prototyping

MonochromaBc  Designs

Page 198: User Experience and Prototyping

Bold  Colors

Page 199: User Experience and Prototyping

Tile  /  App  style  UI

Page 200: User Experience and Prototyping

Larger  Images

Page 201: User Experience and Prototyping

Increased  use  of  typography  &  info-­‐graphics

Page 202: User Experience and Prototyping

Fixed  posiBon  navigaBon  menus

Page 203: User Experience and Prototyping

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  

Page 204: User Experience and Prototyping

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

Page 205: User Experience and Prototyping
Page 206: User Experience and Prototyping
Page 207: User Experience and Prototyping
Page 208: User Experience and Prototyping
Page 209: User Experience and Prototyping
Page 210: User Experience and Prototyping
Page 211: User Experience and Prototyping
Page 212: User Experience and Prototyping
Page 213: User Experience and Prototyping
Page 214: User Experience and Prototyping
Page 215: User Experience and Prototyping

Prototyping tools  

Page 216: User Experience and Prototyping

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

Page 217: User Experience and Prototyping

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

Page 218: User Experience and Prototyping

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

Page 219: User Experience and Prototyping

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

Page 220: User Experience and Prototyping
Page 221: User Experience and Prototyping
Page 222: User Experience and Prototyping
Page 223: User Experience and Prototyping

….  and  then  you  just  Play  J    

Page 224: User Experience and Prototyping
Page 225: User Experience and Prototyping
Page 226: User Experience and Prototyping

Idea  Tool/  PPT  /  

Balsamiq  

HTML  /  CSS   CODE  

Page 227: User Experience and Prototyping

iOS  UI  Style  Guide

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

Page 228: User Experience and Prototyping

Android  UI  Pa[erns

Page 229: User Experience and Prototyping

Android  InteracBon  Pa[erns

Page 230: User Experience and Prototyping

Android  InteracBon  Pa[erns

Page 231: User Experience and Prototyping

Windows  apps  UX  Guidelines

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

Page 232: User Experience and Prototyping

Take  a  break

Page 233: User Experience and Prototyping

Afternoon working session  

Page 234: User Experience and Prototyping

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

The  problem  at  hand  

Page 235: User Experience and Prototyping

Today’s  class  Design  Challenge

Page 236: User Experience and Prototyping

•  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

Page 237: User Experience and Prototyping

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  

Page 238: User Experience and Prototyping

How  is  MOBILE  UX  different?   Would there be a difference in the approach to UX on the Mobile websites and Mobile apps ?

Your Opinion?

Page 239: User Experience and Prototyping

MOBILE  FIRST What  are  the  advantages  and  disadvantages  of  it  ? <<DISCUSSION>>

Page 240: User Experience and Prototyping

Graceful  DegradaBon  vs.  Progressive  Enhancement

or

Page 241: User Experience and Prototyping

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.  

Page 242: User Experience and Prototyping

MOBILE  FIRST  PRINCIPLES Towards  beHer  User  Experience

Page 243: User Experience and Prototyping

Make  best  use  of  screen  real  estate

Image  :  h*ps://www.flickr.com/photos/sierragoddess/5435989568  

Page 244: User Experience and Prototyping

PrioriBze  your  informaBon  and  acBons

Image  :  h*ps://www.flickr.com/photos/johanl/5547851770  

Page 245: User Experience and Prototyping

Design  for  scalability

Image:  h*ps://www.flickr.com/photos/sierragoddess/5435989568  

Page 246: User Experience and Prototyping

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

Giving  ParBal  a[enBon  vs  full  a[enBon

Page 247: User Experience and Prototyping

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

Use  task-­‐based  design

Page 248: User Experience and Prototyping

Design  for  interrupBon  when  a  task  has  to  be  abandoned  midway

Image:  h*ps://www.flickr.com/photos/whiteafrican/2911951329  

Page 249: User Experience and Prototyping

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

Design  by  understanding  hardware  and  plaoorms  capability

Page 250: User Experience and Prototyping

Image:  h*ps://www.flickr.com/photos/osde-­‐info/763025492  

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

Page 251: User Experience and Prototyping

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

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

Page 252: User Experience and Prototyping
Page 253: User Experience and Prototyping
Page 254: User Experience and Prototyping

Good  design  or  Bad  design  ?  

Page 255: User Experience and Prototyping

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

Page 256: User Experience and Prototyping
Page 257: User Experience and Prototyping

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  

Page 258: User Experience and Prototyping

Framing  your  research  quesBons  the  5Ws  and  1  H

Page 259: User Experience and Prototyping

Digital  NaBves   Vs Digital  Immigrants

Page 260: User Experience and Prototyping

•  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  

Page 261: User Experience and Prototyping

à A  Highly  Social  GeneraBon à An  ImpaBent  GeneraBon

Page 262: User Experience and Prototyping

•  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  

Page 263: User Experience and Prototyping

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  

Page 264: User Experience and Prototyping

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        

Page 265: User Experience and Prototyping

InformaBon   Architecture

Page 266: User Experience and Prototyping

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.

Page 267: User Experience and Prototyping

INFORMATION  ARCHITECTURE  is  not  the  same  as  TECHNICAL  ARCHITECTURE  

Page 268: User Experience and Prototyping

Organizing  InformaBon  based  on

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

Page 269: User Experience and Prototyping
Page 270: User Experience and Prototyping

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

Affinity  Wall  /  Card  SorBng  

Page 271: User Experience and Prototyping
Page 272: User Experience and Prototyping

à  Good  InformaBon  Architecture  helps  immensely  in  the  SEO. à  IA  is  the  organizaBon  and  labeling  of  

website  content  to  support  usability  and  findability.

Page 273: User Experience and Prototyping

UX  is  built  step  by  step  with  INFORMATION  bits    Too  much  informaBon  to  process,  leads  to  CHAOS    Each  informaBon  processed  gives  AN  EXPERIENCE  

Page 274: User Experience and Prototyping

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  

Page 275: User Experience and Prototyping

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  

Page 276: User Experience and Prototyping

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.  

Page 277: User Experience and Prototyping

Types  of  Prototypes  

• Low Fidelity • High Fidelity • Horizontal Prototype • Vertical Prototype

Page 278: User Experience and Prototyping

•  Paper Prototypes and Sketches •  Easy to discard

Low  Fidelity  

Page 279: User Experience and Prototyping

High  Fidelity  •  Wireframes •  HTML Mockups

Page 280: User Experience and Prototyping

Horizontal  Prototype  •  Cover major functionalities •  Superficial information on all

Page 281: User Experience and Prototyping

VerBcal  Prototype  •  Deep into one or two functionality

Page 282: User Experience and Prototyping

Remember  the  responsive  design  challenge

Page 283: User Experience and Prototyping
Page 284: User Experience and Prototyping
Page 285: User Experience and Prototyping

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  

Page 286: User Experience and Prototyping

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  

Page 287: User Experience and Prototyping

Remember  Responsive  Design

or

Page 288: User Experience and Prototyping

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

Page 289: User Experience and Prototyping

Delight  vs  Features  ?

Page 290: User Experience and Prototyping

Dieter  Rams-­‐  Principles  of  good  design  

Page 291: User Experience and Prototyping

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  

Page 292: User Experience and Prototyping

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  flexible à  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  

Page 293: User Experience and Prototyping

THANK YOU

Email:  [email protected]  |TwiMer:  @kshi?z    LinkedIn:  in.linkedin.com/in/kshi?zanand/