SlideShare a Scribd company logo
Crea%ng	
  Awesome	
  User	
  Centric	
  
      Interface	
  Design	
  
Opera%on	
  Successful,	
  Pa%ent	
  Dead	
  




So=ware	
   development	
   teams	
   o=en	
   focus	
   on	
   just	
   the	
  
func%onality	
   and	
   claim	
   victory	
   when	
   the	
   so=ware	
   does	
   what	
   it	
  
claims	
  to	
  do.	
  User	
  experience	
  is	
  o=en	
  forgoDen	
  or	
  else	
  patched	
  
on	
  top	
  of	
  the	
  func%onality	
  as	
  an	
  “add-­‐on”.	
  This	
  is	
  akin	
  to	
  a	
  doctor	
  
saying,	
  the	
  opera%on	
  is	
  successful	
  but	
  the	
  pa%ent	
  is	
  dead.	
  	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  If	
  Func%onality	
  is	
  King,	
  Experience	
  is	
  Queen	
  !	
  	
  
Basic	
  UI	
  Philosophy	
  




UI	
   is	
   a	
   map	
   that	
   helps	
   you	
   understand	
   the	
   territory.	
   The	
   map,	
  
however,	
   is	
   not	
   the	
   territory.	
   UI	
   is	
   not	
   the	
   real	
   func%onality.	
  
Differently	
   put,	
   UI	
   is	
   just	
   a	
   window	
   to	
   the	
   actual	
   func%onality.	
  
The	
  key	
  insight	
  is	
  that	
  the	
  window	
  impacts	
  your	
  percep%on	
  of	
  
the	
   actual	
   world.	
   The	
   art	
   of	
   UI	
   lies	
   in	
   choosing	
   a	
   window	
   that	
  
portrays	
  the	
  actual	
  func%onality	
  in	
  its	
  fullest	
  effect.	
  	
  
Observe	
  the	
  UI	
  of	
  Everyday	
  Things	
  




These	
   pictures	
   reveal	
   something	
   interes%ng	
   about	
   UX	
   design	
   from	
   the	
  
everyday	
  world.	
  Users	
  make	
  use	
  of	
  things	
  in	
  unexpected	
  ways	
  because	
  
the	
  design	
  ‘affords’	
  those	
  unexpected	
  usages.	
  This	
  is	
  called	
  “affordance”	
  
in	
   design	
   lingo.	
   Examples:	
   Many	
   of	
   us	
   hang	
   coats	
   on	
   a	
   fire	
   hydrant.	
  
Washing	
   machines	
   are	
   used	
   to	
   make	
   Lassi	
   in	
   Punjab.	
   Who	
   hasn’t	
   seen	
  
clothes	
  hanging	
  on	
  a	
  gym	
  equipment?	
  	
  
Observe	
  the	
  design	
  

               Here	
  is	
  something	
  we	
  have	
  used	
  in	
  our	
  daily	
  
               lives	
  :	
  A	
  Bicycle.	
  

               Let	
   us	
   try	
   to	
   answer	
   a	
   few	
   ques%ons	
   now	
  
               about	
  its	
  design:	
  
               a.  What	
   is	
   the	
   ideal	
   user	
   experience	
   for	
   a	
  
                      bicycle?	
  
               b.  Is	
  this	
  design	
  good?	
  
               c.  What	
   design	
   improvements	
   would	
   you	
  
                      make	
  to	
  improve	
  it?	
  

               Think	
  for	
  some%me	
  before	
  proceeding.	
  
Think	
  About	
  The	
  User	
  and	
  The	
  Usage	
  

                          Those	
  were	
  trick	
  ques%ons	
  !	
  
                          If	
   you	
   tried	
   to	
   come	
   up	
   with	
   a	
   beDer	
   design	
  
                          without	
   asking	
   for	
   more	
   informa%on,	
   you	
   are	
  
                          making	
  a	
  mistake.	
  	
  

                          Some	
   key	
   ques%ons	
   you	
   have	
   to	
   ask	
   before	
  
                          aDemp%ng	
  to	
  redesign:	
  
                          1.	
   Who	
   is	
   going	
   to	
   use	
   the	
   cycle?	
   Kids?	
   Men?	
  
                          Women?	
  Athletes?	
  
                          2.	
  What	
  kind	
  of	
  cycle	
  is	
  it?	
  Mountain	
  bike,	
  City	
  
                          bike,	
  Casual	
  bike?	
  

                          Remember,	
  UI/UX	
  decisions	
  should	
  evolve	
  from	
  
                          the	
  user	
  and	
  the	
  usage.	
  
More	
  Daily	
  Examples	
  
                                                           There	
   are	
   cars	
   where	
   the	
   window	
   controls	
  
                                                           are	
   closer	
   to	
   the	
   gear	
   box.	
   Why	
   do	
   you	
   think	
  
                                                           the	
   designers	
   chose	
   to	
   put	
   the	
   controls	
  
                                                           there?	
   Maybe	
   because	
   if	
   you	
   put	
   them	
   in	
  
                                                           the	
  center,	
  the	
  passenger	
  can	
  also	
  control	
  it?	
  
                                                           Now,	
   what	
   are	
   the	
   downsides	
   of	
   that	
  
                                                           choice?	
   The	
   interface	
   and	
   the	
   object	
   are	
  
                                                           separated	
  and	
  can	
  cause	
  confusion.	
  	
  

This	
   is	
   another	
   classic.	
   We	
   have	
   all	
  
experienced	
   this	
   one.	
   There	
   are	
   8	
   switches.	
  
Which	
  one	
  turns	
  on	
  the	
  fan?	
  
We	
  can	
  learn	
  this	
  only	
  through	
  trial	
  and	
  error.	
  
This	
  approach	
  may	
  not	
  be	
  feasible	
  in	
  mission	
  
cri%cal	
  applica%ons.	
  	
  
How	
   do	
   you	
   solve	
   this?	
   Using	
   labels?	
  
Diagrams?	
  Placing	
  the	
  UI	
  close	
  to	
  the	
  object?	
  
Constraints	
  Drive	
  Design	
  Decisions	
  
                      Design	
   should	
   take	
   constraints	
   into	
  
                      considera%on.	
   In	
   a	
   Formula	
   1	
   car,	
   the	
  
                      driver	
   is	
   zooming	
   at	
   crazy	
   speeds	
   and	
  
                      cannot	
   take	
   his	
   hands	
   off	
   the	
   wheel.	
  
                      Hence	
   controls,	
   mostly	
   buDons	
   and	
   flip	
  
                      switches,	
   	
   are	
   within	
   the	
   reach	
   of	
   the	
  
                      thumb.	
  	
  

                      Here	
   is	
   an	
   example	
   from	
   the	
   so=ware	
  
                      world.	
   If	
   the	
   bandwidth	
   of	
   the	
   users	
   is	
  
                      poor,	
   you	
   cannot	
   afford	
   to	
   have	
   super-­‐
                      rich	
   graphics	
   in	
   your	
   design.	
   You	
   are	
  
                      forced	
  to	
  think	
  of	
  simpler	
  alterna%ves.	
  	
  	
  
Simplicity	
  :	
  The	
  Nirvana	
  State	
  	
  

                                                  As	
  the	
  complexity	
  of	
  the	
  system	
  grows,	
  
                                                  so	
   does	
   the	
   complexity	
   of	
   the	
   UI.	
   The	
  
                                                  challenge	
   for	
   the	
   designer	
   is	
   to	
   keep	
  
                                                  the	
  UI	
  simple	
  even	
  when	
  the	
  system’s	
  
                                                  complexity	
  soars.	
  
                                                  Google	
   homepage	
   is	
   a	
   great	
   example	
  
                                                  for	
   brilliant	
   simplis%c	
   design	
   which	
  
                                                  masks	
   the	
   underlying	
   complexity	
   of	
  
                                                  the	
   system.	
   Click	
   wheel	
   of	
   the	
   iPod	
   is	
  
                                                  another	
  example	
  that	
  comes	
  to	
  mind.	
  


	
     	
     	
     	
   	
   	
   	
  	
  	
  The	
  Goal	
  
	
     	
     	
     UI	
  Complexity	
  	
  <	
  	
  System	
  Complexity	
  
Speak	
  in	
  the	
  User’s	
  Language	
  




We	
  have	
  all	
  been	
  subjected	
  to	
  this.	
  Many	
  a	
  %mes,	
  messages	
  
are	
   machine	
   readable,	
   not	
   human	
   readable.	
   Feedback	
   for	
  
user	
  ac%ons	
  should	
  be	
  friendly,	
  %mely	
  and	
  ac%onable.	
  	
  
Be	
  Tolerant	
  to	
  Errors	
  




To	
  Err	
  is	
  Human.	
  System	
  designers	
  should	
  keep	
  this	
  in	
  mind	
  
                     and	
  protect	
  users	
  in	
  case	
  of	
  a	
  failure.	
  
Million	
  Dollar	
  Ques%on	
  

	
   	
  	
   	
   Are	
  designers	
  born	
  or	
  made?	
  

More Related Content

PDF
The Long Tail of User Experience
PDF
Portfolio_Srinivas_Somasundaram_6_6_16
PDF
UX Architecture for the Small Guy
PDF
UX Basics Workshop at General Assembly London by Tricia Okin
PPTX
MoDev Tablet 2012 - Now thats engaging!
PDF
Learnings from founding a Computer Vision startup: Chapter 8 Software Enginee...
PPT
The Agile Gap: Closing it with User Experience
PDF
By the Book: Examining the Art of Building Great User Experiences in Software
The Long Tail of User Experience
Portfolio_Srinivas_Somasundaram_6_6_16
UX Architecture for the Small Guy
UX Basics Workshop at General Assembly London by Tricia Okin
MoDev Tablet 2012 - Now thats engaging!
Learnings from founding a Computer Vision startup: Chapter 8 Software Enginee...
The Agile Gap: Closing it with User Experience
By the Book: Examining the Art of Building Great User Experiences in Software

What's hot (9)

PDF
Learnings from founding a Computer Vision startup: Chapter 10: Competition & ...
PDF
Hp e print_square_plan_v1
PPTX
Triffort - iOS Application Portfolio
PPTX
Role of UX in Mobility Landscape
PPT
User experience - Why the mobile space is important
PDF
Principles of User Interface Design
PDF
Mobile User Experience
PDF
User-Centered Mobile Concept Development
PDF
Collaboration in the User Experience Design Process
Learnings from founding a Computer Vision startup: Chapter 10: Competition & ...
Hp e print_square_plan_v1
Triffort - iOS Application Portfolio
Role of UX in Mobility Landscape
User experience - Why the mobile space is important
Principles of User Interface Design
Mobile User Experience
User-Centered Mobile Concept Development
Collaboration in the User Experience Design Process
Ad

Viewers also liked (7)

PDF
TRK Lighting Design - Opera &amp; Dance
PPT
Designing a companion screen experience to accompany an opera performance.
PPSX
David Leventi's Operas
PDF
Soundtect presentation january 2017
PPTX
Paris opera house
PDF
Acoustic, Sound and Noise Control
PPT
Site Analysis
TRK Lighting Design - Opera &amp; Dance
Designing a companion screen experience to accompany an opera performance.
David Leventi's Operas
Soundtect presentation january 2017
Paris opera house
Acoustic, Sound and Noise Control
Site Analysis
Ad

Similar to User centric interface_article (20)

PDF
Design for developers
PDF
Machine, Meet Human
PPT
What Is Interaction Design
PDF
GHAMAS Design Principles
PDF
20 Principles: UI Design
PDF
UI Design Principles : 20 Essential Rules for User Interface Design
PDF
Implementing Modernization by Trevor Perry
PPT
2nd part of Unit 1.ppt
PDF
HCI Basics
PPTX
What makes your app grouse - #appfest Sydney
PPT
Unit-3- Part-1 Principles of visual design including Gestalt Theory.ppt
PDF
UI Design
PDF
Principles of Interactive Design
DOCX
Assignment 4 hci
PDF
Principles of user interface design
PPTX
Chapter 4 interaction design
PPT
E3 chap-05
PPT
HCI 3e - Ch 5: Interaction design basics
PPT
E3 Chap 05 Interaction Design Basics
Design for developers
Machine, Meet Human
What Is Interaction Design
GHAMAS Design Principles
20 Principles: UI Design
UI Design Principles : 20 Essential Rules for User Interface Design
Implementing Modernization by Trevor Perry
2nd part of Unit 1.ppt
HCI Basics
What makes your app grouse - #appfest Sydney
Unit-3- Part-1 Principles of visual design including Gestalt Theory.ppt
UI Design
Principles of Interactive Design
Assignment 4 hci
Principles of user interface design
Chapter 4 interaction design
E3 chap-05
HCI 3e - Ch 5: Interaction design basics
E3 Chap 05 Interaction Design Basics

Recently uploaded (20)

PDF
Empathic Computing: Creating Shared Understanding
PDF
Encapsulation theory and applications.pdf
PPTX
MYSQL Presentation for SQL database connectivity
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Approach and Philosophy of On baking technology
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
PDF
KodekX | Application Modernization Development
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Spectral efficient network and resource selection model in 5G networks
PPTX
Big Data Technologies - Introduction.pptx
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
A Presentation on Artificial Intelligence
Empathic Computing: Creating Shared Understanding
Encapsulation theory and applications.pdf
MYSQL Presentation for SQL database connectivity
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Encapsulation_ Review paper, used for researhc scholars
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
“AI and Expert System Decision Support & Business Intelligence Systems”
Diabetes mellitus diagnosis method based random forest with bat algorithm
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Approach and Philosophy of On baking technology
CIFDAQ's Market Insight: SEC Turns Pro Crypto
KodekX | Application Modernization Development
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Spectral efficient network and resource selection model in 5G networks
Big Data Technologies - Introduction.pptx
Network Security Unit 5.pdf for BCA BBA.
Dropbox Q2 2025 Financial Results & Investor Presentation
A Presentation on Artificial Intelligence

User centric interface_article

  • 1. Crea%ng  Awesome  User  Centric   Interface  Design  
  • 2. Opera%on  Successful,  Pa%ent  Dead   So=ware   development   teams   o=en   focus   on   just   the   func%onality   and   claim   victory   when   the   so=ware   does   what   it   claims  to  do.  User  experience  is  o=en  forgoDen  or  else  patched   on  top  of  the  func%onality  as  an  “add-­‐on”.  This  is  akin  to  a  doctor   saying,  the  opera%on  is  successful  but  the  pa%ent  is  dead.                                  If  Func%onality  is  King,  Experience  is  Queen  !    
  • 3. Basic  UI  Philosophy   UI   is   a   map   that   helps   you   understand   the   territory.   The   map,   however,   is   not   the   territory.   UI   is   not   the   real   func%onality.   Differently   put,   UI   is   just   a   window   to   the   actual   func%onality.   The  key  insight  is  that  the  window  impacts  your  percep%on  of   the   actual   world.   The   art   of   UI   lies   in   choosing   a   window   that   portrays  the  actual  func%onality  in  its  fullest  effect.    
  • 4. Observe  the  UI  of  Everyday  Things   These   pictures   reveal   something   interes%ng   about   UX   design   from   the   everyday  world.  Users  make  use  of  things  in  unexpected  ways  because   the  design  ‘affords’  those  unexpected  usages.  This  is  called  “affordance”   in   design   lingo.   Examples:   Many   of   us   hang   coats   on   a   fire   hydrant.   Washing   machines   are   used   to   make   Lassi   in   Punjab.   Who   hasn’t   seen   clothes  hanging  on  a  gym  equipment?    
  • 5. Observe  the  design   Here  is  something  we  have  used  in  our  daily   lives  :  A  Bicycle.   Let   us   try   to   answer   a   few   ques%ons   now   about  its  design:   a.  What   is   the   ideal   user   experience   for   a   bicycle?   b.  Is  this  design  good?   c.  What   design   improvements   would   you   make  to  improve  it?   Think  for  some%me  before  proceeding.  
  • 6. Think  About  The  User  and  The  Usage   Those  were  trick  ques%ons  !   If   you   tried   to   come   up   with   a   beDer   design   without   asking   for   more   informa%on,   you   are   making  a  mistake.     Some   key   ques%ons   you   have   to   ask   before   aDemp%ng  to  redesign:   1.   Who   is   going   to   use   the   cycle?   Kids?   Men?   Women?  Athletes?   2.  What  kind  of  cycle  is  it?  Mountain  bike,  City   bike,  Casual  bike?   Remember,  UI/UX  decisions  should  evolve  from   the  user  and  the  usage.  
  • 7. More  Daily  Examples   There   are   cars   where   the   window   controls   are   closer   to   the   gear   box.   Why   do   you   think   the   designers   chose   to   put   the   controls   there?   Maybe   because   if   you   put   them   in   the  center,  the  passenger  can  also  control  it?   Now,   what   are   the   downsides   of   that   choice?   The   interface   and   the   object   are   separated  and  can  cause  confusion.     This   is   another   classic.   We   have   all   experienced   this   one.   There   are   8   switches.   Which  one  turns  on  the  fan?   We  can  learn  this  only  through  trial  and  error.   This  approach  may  not  be  feasible  in  mission   cri%cal  applica%ons.     How   do   you   solve   this?   Using   labels?   Diagrams?  Placing  the  UI  close  to  the  object?  
  • 8. Constraints  Drive  Design  Decisions   Design   should   take   constraints   into   considera%on.   In   a   Formula   1   car,   the   driver   is   zooming   at   crazy   speeds   and   cannot   take   his   hands   off   the   wheel.   Hence   controls,   mostly   buDons   and   flip   switches,     are   within   the   reach   of   the   thumb.     Here   is   an   example   from   the   so=ware   world.   If   the   bandwidth   of   the   users   is   poor,   you   cannot   afford   to   have   super-­‐ rich   graphics   in   your   design.   You   are   forced  to  think  of  simpler  alterna%ves.      
  • 9. Simplicity  :  The  Nirvana  State     As  the  complexity  of  the  system  grows,   so   does   the   complexity   of   the   UI.   The   challenge   for   the   designer   is   to   keep   the  UI  simple  even  when  the  system’s   complexity  soars.   Google   homepage   is   a   great   example   for   brilliant   simplis%c   design   which   masks   the   underlying   complexity   of   the   system.   Click   wheel   of   the   iPod   is   another  example  that  comes  to  mind.                    The  Goal         UI  Complexity    <    System  Complexity  
  • 10. Speak  in  the  User’s  Language   We  have  all  been  subjected  to  this.  Many  a  %mes,  messages   are   machine   readable,   not   human   readable.   Feedback   for   user  ac%ons  should  be  friendly,  %mely  and  ac%onable.    
  • 11. Be  Tolerant  to  Errors   To  Err  is  Human.  System  designers  should  keep  this  in  mind   and  protect  users  in  case  of  a  failure.  
  • 12. Million  Dollar  Ques%on           Are  designers  born  or  made?