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

Are  you  a  designer?

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?

Does  it  delight  you?

1993      

2014  

Where did we come from? Where do we go?

Then  &  Now  

To  have  a  good  User  experience  is  to  Delight!

Delight  =  Features  ?

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

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

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  

Unclear  boundaries  

T  shaped  (UX)  professional  

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

The  goal  of  UX  

UX  is  a  team  effort  

UX  Process

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  

Comparing  UX  Process  

HOW  DO  YOU  FIT  UX  INTO  YOUR  

ORGANISATION?

The  elements  of   user  experience  design  

Just  remember  this

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  effort  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 experience An

experience

An experience

John Dewey American Educator & Philosopher

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

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

Take  a  break!

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  different  across  plaoorms. How  ? Mac  OS  vs  Windows Desktops  vs  Tablet  vs  mobile iOS  vs  Android  vs  Windows

Plaoorms  and  their  experiences  differ

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

Mapping  your  stakeholders

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  

Popular  User  Research  Techniques  

TOOLS  FOR  USER  RESEARCH    &  TESTING  

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

It would get people finally 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  first  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  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

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

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.    

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  

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.

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.  

Gestalt’s  principles  •  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  different  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

The  value  of  typography  

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  flows  /  sketches  on  paper  first

7 Easy to remember User Interface rules

1.  Law  of  Clarity

2.  Law  of  preferred  acBon

3.  Law  of  context

4.  Law  of  defaults

5.  Law  of  Guided  AcBon

6.  Law  of  feedback

7.  Law  of  easing

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  E

xperience  

The  whole  process  

People  want   Visual  Design   but  ask  for  UX

But  by  then  its   too  late  !  

The basics of Color

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.    

POPULAR DESIGN TRENDS  

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

MicrointeracBons  /  UX

Less  text

Minimalist  NavigaBon

Richer  Content  experiences

Making  full  use  of  one  page

MonochromaBc  Designs

Bold  Colors

Tile  /  App  style  UI

Larger  Images

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  

Prototyping tools  

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

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

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  UI  Pa[erns

Android  InteracBon  Pa[erns

Android  InteracBon  Pa[erns

Windows  apps  UX  Guidelines

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

Take  a  break

Afternoon working session  

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

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  different?   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.flickr.com/photos/sierragoddess/5435989568  

PrioriBze  your  informaBon  and  acBons

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

Design  for  scalability

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

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

Giving  ParBal  a[enBon  vs  full  a[enBon

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

Use  task-­‐based  design

Design  for  interrupBon  when  a  task  has  to  be  abandoned  midway

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

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

Design  by  understanding  hardware  and  plaoorms  capability

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

Image:  h*ps://www.flickr.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  surfing  the  Internet

•  The  majority  of  Digital  NaBves  feel  disconnected  and  “off  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:

•  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  

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        

InformaBon   Architecture

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

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  /  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  

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  

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

Remember  Responsive  Design

or

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

Delight  vs  Features  ?

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

THANK YOU

Email:  kshi?z@happyhorizons.in  |TwiMer:  @kshi?z    LinkedIn:  in.linkedin.com/in/kshi?zanand/