SlideShare a Scribd company logo
user experience agency
Design	
  

Applying	
  neuroscience	
  in	
  web	
  design:	
  part	
  I	
  
Neuroscience	
  
The	
  study	
  of	
  the	
  nervous	
  system,	
  advancing	
  the	
  understanding	
  of	
  HUMAN	
  …..	
  	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
THOUGHT	
  ………………	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  EMOTION	
  ………………..	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  BEHAVIOUR.	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  



Neuroscience	
  –	
  explained	
  
Living	
  in	
  a	
  perfect	
  world	
  
•  In	
  a	
  perfect	
  world,	
  everything	
  would	
  
                                                   be	
  perfect	
  
                                              •    Users	
  would	
  interpret	
  designs	
  and	
  
                                                   architecture	
  as	
  perfectly	
  as	
  intended	
  
                                              •    Decisions	
  by	
  Users	
  would	
  be	
  based	
  
                                                   on	
  whats	
  most	
  important,	
  with	
  
                                                   common	
  sense,	
  as	
  opposed	
  to	
  
                                                   what’s	
  easiest.	
  




Thinking	
  in	
  a	
  perfect	
  world	
  
•  Users	
  don’t	
  always	
  make	
  the	
  
     decisions	
  we	
  want	
  or	
  expect	
  
•    WHY?	
  Because	
  they	
  have	
  400+	
  
     MORE	
  important	
  decisions	
  to	
  make	
  
     daily.	
  

We	
  have	
  less	
  of	
  our	
  Users	
  Rme	
  and	
  
aSenRon	
  when	
  it	
  comes	
  to	
  decision	
  
making	
  –	
  so	
  we	
  have	
  to	
  understand	
  
HOW	
  and	
  WHY	
  decisions	
  are	
  made.	
  	
  




Time	
  for	
  informed	
  decisions?	
  
Neuroscience	
  
Control	
  –	
  the	
  dream	
  of	
  the	
  good	
  and	
  
bad.	
  
•  Designing	
  for	
  control	
  is	
  what	
  we	
  UX	
  
   people	
  do.	
  Control	
  over	
  what	
  our	
  
   Users	
  do	
  
•  Human	
  behaviour	
  is	
  centred	
  around	
  
   a	
  need	
  to	
  control	
  
•  The	
  21st	
  century	
  digital	
  age	
  has	
  seen	
  
   a	
  shiX	
  of	
  power	
  from	
  insRtuRons	
  to	
  
   Users,	
  the	
  consumer	
  
•  We	
  need	
  to	
  “learn	
  to	
  design	
  for	
  a	
  
   loss	
  of	
  control,”	
  JP	
  Rangaswari.	
  

Control	
  
•  Neuroscience	
  is	
  the	
  key	
  to	
  designing	
  
       for	
  a	
  loss	
  of	
  control	
  
•      Its	
  not	
  enough	
  to	
  test	
  our	
  Users	
  
       conscious	
  self	
  (focus	
  groups,	
  lab	
  
       tesRng)	
  …	
  we	
  need	
  to	
  go	
  further	
  and	
  
       discover	
  what’s	
  behind	
  subconscious	
  
       decision	
  making.	
  	
  
	
  




Designing	
  for	
  a	
  loss	
  of	
  control	
  
“Let	
  go	
  your	
  	
  
                                 conscious	
  self,	
  	
  
                                act	
  on	
  ins:nct.”	
  
                                                             	
  




Work	
  like	
  a	
  jedi	
  
Our	
  brain	
  controls	
  US	
  
•  We	
  start	
  to	
  design	
  for	
  a	
  loss	
  of	
  
     control	
  by	
  applying	
  neuroscience	
  
     thinking	
  to	
  the	
  design	
  process	
  
•    By	
  designing	
  for	
  HOW	
  the	
  brain	
  
     works	
  we	
  recognise	
  that	
  we	
  cant	
  
     control	
  our	
  brain	
  –	
  IT	
  controls	
  us.	
  




How	
  you	
  approach	
  design	
  problems	
  
•  Too	
  oXen	
  we	
  design	
  for	
  a	
  problem	
  
                                                                         we	
  already	
  know	
  
                                         •  Let	
  go	
  of	
  this	
  conscious	
  problem,	
  
                                              what	
  we	
  are	
  ALREADY	
  aware	
  of	
  
                                            •  Open	
  your	
  design	
  approach	
  to	
  
                                        addressing	
  the	
  3	
  fundamental	
  layers	
  
                                                                                 of	
  the	
  brain	
  
                                                                                     -­‐  InsRnct	
  
                                                                                      -­‐  Feeling	
  
                                                                                 -­‐  Thinking.	
  
                                                                                                   	
  


InsRnct,	
  feeling,	
  thinking	
  
Design	
  

Gap	
  logo	
  redesign	
  –	
  case	
  study	
  
•  In	
  2010	
  Gap	
  aSempted	
  a	
  
     relaunch	
  of	
  their	
  iconic	
  brand	
  
     idenRty	
  
•    The	
  new	
  logo	
  was	
  met	
  with	
  
     massive	
  criRcism	
  from	
  both	
  
     consumers,	
  markeRng	
  /	
  brand	
  
     people	
  and	
  the	
  design	
  
     community	
  
•    Its	
  a	
  great	
  case	
  study	
  for	
  the	
  
     applicaRon	
  of	
  neuroscience	
  in	
  
     design.	
  



Gap	
  logo	
  redesign	
  
•  NeuroFocus,	
  US	
  neuromarkeRng	
  
                                    agency,	
  used	
  a	
  mix	
  of	
  neurological	
  	
  
                                  tesRng	
  methods	
  to	
  discover	
  why	
  the	
  	
  
                                                        new	
  Gap	
  logo	
  failed	
  
                                             •  Methods	
  used	
  included	
  –	
  	
  
                                      -­‐  EEG	
  based	
  brainwave	
  acRvity	
  
                                                               -­‐  Eye	
  tracking.	
  




TesRng	
  of	
  Gap	
  logo	
  
•  Results	
  stated	
  that	
  the	
  logo	
  violated	
  SIX	
  core	
  principal	
  Neurological	
  	
  
best	
  pracRces	
  …………….	
  
-­‐  Overlays	
  Equal	
  Overlooked	
  
-­‐  Sharp	
  Edges	
  UnseSle	
  the	
  Subconscious	
  
-­‐  InteresRng	
  Fonts	
  Work	
  
-­‐  High/Low	
  Contrast	
  
-­‐  Stronger	
  SemanRc	
  Content	
  
-­‐  Lost	
  Legacy.	
  
	
  
	
  
	
  
	
  
Visit	
  hSp://www.zabisco.com/blog/applying-­‐neuroscience-­‐in-­‐web-­‐design-­‐part-­‐i/	
  for	
  a	
  detailed	
  breakdown	
  of	
  the	
  above	
  

	
  
	
  
Test	
  of	
  Gap	
  logo	
  -­‐	
  results	
  
•  Using	
  the	
  Gap	
  case	
  study	
  as	
  a	
  
       example	
  Dr	
  A.K	
  Pradeep	
  raises	
  two	
  
       vital	
  quesRons	
  when	
  undertaking	
  
       design	
  projects	
  –	
  	
  

-­‐  Does	
  the	
  new	
  design	
  violate	
  any	
  
       Neurological	
  best	
  pracRce?	
  
-­‐    Does	
  the	
  design	
  build	
  upon	
  exisRng	
  
       brand	
  aSributes	
  that	
  are	
  idenRfied	
  
       through	
  the	
  Brand	
  Essence	
  
       Framework?	
  



Lessons	
  to	
  be	
  learnt	
  
Thanks



Marcus Marritt


marcus@zabisco.com
0203 1511 330

More Related Content

PPTX
W4 what we can easily see
PPTX
W3 visual queries
PDF
HCI Quick Guide
PDF
Mobile Research
PDF
Quantum Lab White Paper
PPT
Design for the "older folks"
PDF
Cognetics
PPT
Nur hidayati ramli & tor swee ching
W4 what we can easily see
W3 visual queries
HCI Quick Guide
Mobile Research
Quantum Lab White Paper
Design for the "older folks"
Cognetics
Nur hidayati ramli & tor swee ching

Similar to Applying neuroscience in web design part i by marcus marritt (20)

PPTX
Designing for Impact
PDF
Neuro_Design_Neuromarketing_Insights_to_Boost_Engagement_and_Profitability.pdf
PDF
Action.Reaction - Emotional Design
PDF
Psychology, UX and the perfect design
PDF
Design feeling: A secret superpower
PDF
UX Antwerp Meetup december 2017 - "Design Feeling: A secret superpower"
PDF
Five areas to apply psychological principles for a better User Experience
PPTX
A Summary of Neuromarketing
PDF
UX London Redux - Dan Saffer
PPTX
Usability and User Experience Training Seminar
PPTX
The Decision Making Process - Neuromarketing Overview
PDF
SxSW 2012: Applying Behavior Design
PDF
Designing for Brains: the Psychology of User Experience
PPTX
Design Thinking 101 Workshop
PDF
Niiu digital - SXSW Highlights 2015
PDF
Brain secrets every UXer needs to know
PDF
Designing For Brains: Let's Be Honest, People Suck (PVDUX)
PDF
Lean Innovation
KEY
How Design Works
PDF
The Importance of Design - 7 UX Design Principles
Designing for Impact
Neuro_Design_Neuromarketing_Insights_to_Boost_Engagement_and_Profitability.pdf
Action.Reaction - Emotional Design
Psychology, UX and the perfect design
Design feeling: A secret superpower
UX Antwerp Meetup december 2017 - "Design Feeling: A secret superpower"
Five areas to apply psychological principles for a better User Experience
A Summary of Neuromarketing
UX London Redux - Dan Saffer
Usability and User Experience Training Seminar
The Decision Making Process - Neuromarketing Overview
SxSW 2012: Applying Behavior Design
Designing for Brains: the Psychology of User Experience
Design Thinking 101 Workshop
Niiu digital - SXSW Highlights 2015
Brain secrets every UXer needs to know
Designing For Brains: Let's Be Honest, People Suck (PVDUX)
Lean Innovation
How Design Works
The Importance of Design - 7 UX Design Principles
Ad

More from Zabisco Digital (16)

PDF
UX of Chartered Institutes
PDF
UX of Royal Colleges of Medicine
PPTX
What's trending?
PPTX
 Infographics in multichannel environments
PPTX
Insight into Application Design & Oracle Fusion
POTX
How typographic animation delivers your message
PDF
Web Accessibility
PDF
Expressive Typography in Web Design
PPTX
User Research Tools: Don't just do it, do it well
PPTX
User Research
POTX
Using animation to enhance ux
PPTX
How to install Civicrm in Drupal 7
PPTX
Do Icons Aid The User Experience
PDF
Infographics - A Business Tool, by Marcus Marritt, Zabisco
PPTX
Website Navigation Systems
PPTX
Personas & Audience Segmentation Methodology
UX of Chartered Institutes
UX of Royal Colleges of Medicine
What's trending?
 Infographics in multichannel environments
Insight into Application Design & Oracle Fusion
How typographic animation delivers your message
Web Accessibility
Expressive Typography in Web Design
User Research Tools: Don't just do it, do it well
User Research
Using animation to enhance ux
How to install Civicrm in Drupal 7
Do Icons Aid The User Experience
Infographics - A Business Tool, by Marcus Marritt, Zabisco
Website Navigation Systems
Personas & Audience Segmentation Methodology
Ad

Recently uploaded (20)

PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PPTX
An introduction to AI in research and reference management
PPTX
Media And Information Literacy for Grade 12
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
PPTX
rapid fire quiz in your house is your india.pptx
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PPTX
12. Community Pharmacy and How to organize it
PDF
Urban Design Final Project-Context
DOCX
actividad 20% informatica microsoft project
PDF
Phone away, tabs closed: No multitasking
PPTX
building Planning Overview for step wise design.pptx
PPTX
HPE Aruba-master-icon-library_052722.pptx
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
PDF
Interior Structure and Construction A1 NGYANQI
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
An introduction to AI in research and reference management
Media And Information Literacy for Grade 12
Wisp Textiles: Where Comfort Meets Everyday Style
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
rapid fire quiz in your house is your india.pptx
BRANDBOOK-Presidential Award Scheme-Kenya-2023
Fundamental Principles of Visual Graphic Design.pptx
12. Community Pharmacy and How to organize it
Urban Design Final Project-Context
actividad 20% informatica microsoft project
Phone away, tabs closed: No multitasking
building Planning Overview for step wise design.pptx
HPE Aruba-master-icon-library_052722.pptx
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
Interior Structure and Construction A1 NGYANQI
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
DOC-20250430-WA0014._20250714_235747_0000.pptx

Applying neuroscience in web design part i by marcus marritt

  • 2. Design   Applying  neuroscience  in  web  design:  part  I  
  • 4. The  study  of  the  nervous  system,  advancing  the  understanding  of  HUMAN  …..                   THOUGHT  ………………                                  EMOTION  ………………..                            BEHAVIOUR.                                                                     Neuroscience  –  explained  
  • 5. Living  in  a  perfect  world  
  • 6. •  In  a  perfect  world,  everything  would   be  perfect   •  Users  would  interpret  designs  and   architecture  as  perfectly  as  intended   •  Decisions  by  Users  would  be  based   on  whats  most  important,  with   common  sense,  as  opposed  to   what’s  easiest.   Thinking  in  a  perfect  world  
  • 7. •  Users  don’t  always  make  the   decisions  we  want  or  expect   •  WHY?  Because  they  have  400+   MORE  important  decisions  to  make   daily.   We  have  less  of  our  Users  Rme  and   aSenRon  when  it  comes  to  decision   making  –  so  we  have  to  understand   HOW  and  WHY  decisions  are  made.     Time  for  informed  decisions?  
  • 9. Control  –  the  dream  of  the  good  and   bad.   •  Designing  for  control  is  what  we  UX   people  do.  Control  over  what  our   Users  do   •  Human  behaviour  is  centred  around   a  need  to  control   •  The  21st  century  digital  age  has  seen   a  shiX  of  power  from  insRtuRons  to   Users,  the  consumer   •  We  need  to  “learn  to  design  for  a   loss  of  control,”  JP  Rangaswari.   Control  
  • 10. •  Neuroscience  is  the  key  to  designing   for  a  loss  of  control   •  Its  not  enough  to  test  our  Users   conscious  self  (focus  groups,  lab   tesRng)  …  we  need  to  go  further  and   discover  what’s  behind  subconscious   decision  making.       Designing  for  a  loss  of  control  
  • 11. “Let  go  your     conscious  self,     act  on  ins:nct.”     Work  like  a  jedi  
  • 13. •  We  start  to  design  for  a  loss  of   control  by  applying  neuroscience   thinking  to  the  design  process   •  By  designing  for  HOW  the  brain   works  we  recognise  that  we  cant   control  our  brain  –  IT  controls  us.   How  you  approach  design  problems  
  • 14. •  Too  oXen  we  design  for  a  problem   we  already  know   •  Let  go  of  this  conscious  problem,   what  we  are  ALREADY  aware  of   •  Open  your  design  approach  to   addressing  the  3  fundamental  layers   of  the  brain   -­‐  InsRnct   -­‐  Feeling   -­‐  Thinking.     InsRnct,  feeling,  thinking  
  • 15. Design   Gap  logo  redesign  –  case  study  
  • 16. •  In  2010  Gap  aSempted  a   relaunch  of  their  iconic  brand   idenRty   •  The  new  logo  was  met  with   massive  criRcism  from  both   consumers,  markeRng  /  brand   people  and  the  design   community   •  Its  a  great  case  study  for  the   applicaRon  of  neuroscience  in   design.   Gap  logo  redesign  
  • 17. •  NeuroFocus,  US  neuromarkeRng   agency,  used  a  mix  of  neurological     tesRng  methods  to  discover  why  the     new  Gap  logo  failed   •  Methods  used  included  –     -­‐  EEG  based  brainwave  acRvity   -­‐  Eye  tracking.   TesRng  of  Gap  logo  
  • 18. •  Results  stated  that  the  logo  violated  SIX  core  principal  Neurological     best  pracRces  …………….   -­‐  Overlays  Equal  Overlooked   -­‐  Sharp  Edges  UnseSle  the  Subconscious   -­‐  InteresRng  Fonts  Work   -­‐  High/Low  Contrast   -­‐  Stronger  SemanRc  Content   -­‐  Lost  Legacy.           Visit  hSp://www.zabisco.com/blog/applying-­‐neuroscience-­‐in-­‐web-­‐design-­‐part-­‐i/  for  a  detailed  breakdown  of  the  above       Test  of  Gap  logo  -­‐  results  
  • 19. •  Using  the  Gap  case  study  as  a   example  Dr  A.K  Pradeep  raises  two   vital  quesRons  when  undertaking   design  projects  –     -­‐  Does  the  new  design  violate  any   Neurological  best  pracRce?   -­‐  Does  the  design  build  upon  exisRng   brand  aSributes  that  are  idenRfied   through  the  Brand  Essence   Framework?   Lessons  to  be  learnt