Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Laura	
  Chessman	
  

Principal  Consultant

laura@designforcontext.com

Lisa	
  Ba.le	
  

President

lisa@designforcont...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 2	
  
S i m p l i c i ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 3	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 4	
  
Architect	
  Jav...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
http://michaelgraves.co...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 6	
  
“The	
  architec...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 7	
  
“PerfecNon	
  is...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 9	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 10	
  
And	
  yet…	
  ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
I’ll	
  know	
  it	
  
...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 12	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 13	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 14	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 15	
  
What	
  about	
...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 16	
  
16
Real	
  work...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 17	
  
Many	
  
funcNo...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 18	
  
ApplicaNons	
  ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 19	
  
MORE	
  FEATURE...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
SIMPLE	
  	
  	
  ≠	
  ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 22	
  
Design	
  shoul...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
CONSIDER:	
  
1.  Do	
 ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 24	
  
FIND	
  A	
  NE...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Rethink	
  the	
  workfl...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Rethink	
  the	
  workfl...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Automate	
  it	
  
FIND...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Consider	
  alternaNve	...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
FIND	
  A	
  NEW	
  WAY...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
WHAT THEY NEED
WHEN THE...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Push	
  meaningful	
  a...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Push	
  meaningful	
  a...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
c	
  
Push	
  meaningfu...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
OpNmize	
  informaNon	
...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
c	
  
OpNmize	
  to	
  ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Layer	
  for	
  progres...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Layer	
  for	
  progres...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Layer	
  for	
  progres...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
WHAT THEY NEED
WHEN THE...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
STRUCTURE FOR
TASK EFFI...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Reduce	
  the	
  number...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Reduce	
  the	
  number...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
c	
  
Eliminate	
  step...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
c	
  
Allow	
  bulk	
  ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Recover	
  from	
  inte...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Guide	
  the	
  user	
 ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Guide	
  the	
  user	
 ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
STRUCTURE FOR
TASK EFFI...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
REDUCE TO
“JUST ENOUGH”...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Break	
  up	
  big	
  l...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Break	
  up	
  long	
  ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Break	
  up	
  long	
  ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Minimize	
  clu.er	
  
...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
REDUCE TO
“JUST ENOUGH”...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
CLEAR AND EASY-TO-
USE ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Consistent	
  and	
  fa...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Direct	
  manipulaNon	
...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
c	
  
Direct	
  manipul...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Direct	
  manipulaNon	
...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
CLEAR AND EASY-TO-
USE ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
COMMUNICATE
VISUALLY AN...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Minimize	
  visual	
  n...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Minimize	
  visual	
  n...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
c	
  
1	
  
2	
  
3	
  ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Provide	
  visualizaNon...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Provide	
  visualizaNon...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Provide	
  visualizaNon...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Enhance	
  appearance	
...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
COMMUNICATE
VISUALLY AN...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
NEW HORIZONS
Leverage o...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Leverage	
  open,	
  pu...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Use	
  natural	
  langu...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Learn	
  from	
  the	
 ...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Context-­‐aware	
  appl...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
NEW HORIZONS
Leverage o...
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
FIND	
  A	
  NEW	
  WAY...
Laura	
  Chessman	
  

Principal  Consultant

laura@designforcontext.com

Lisa	
  Ba.le	
  

President

lisa@designforcont...
Upcoming SlideShare
Loading in …5
×

Simplicity in Web Application Design - UXPA2015

2,328 views

Published on

Video available: http://www.designforcontext.com/insights/simplicity-web-application-design
Simplicity is one of the most important principles of design. It has been a pillar of design thinking for a very long time -- long before the advent of human factors, usability, and user experience. But, realistically, simplicity isn’t always simple. Commercial software, enterprise applications, software as a service (SaaS), and other highly interactive applications often have no choice but to do a great number of things, because they support a range of real world tasks, some of which are complex.

In this UXPA 2015 presentation, we discuss what to try when removing functionality or features isn’t an option. We provide practical questions to ask when deciding whether and how to simplify an application. And we summarize proven design techniques to use when simplifying applications, illustrated with examples from real projects.

Published in: Design
  • Be the first to comment

Simplicity in Web Application Design - UXPA2015

  1. 1. Laura  Chessman   Principal  Consultant laura@designforcontext.com Lisa  Ba.le   President lisa@designforcontext.com @design4context Simplicity  in     Web  Applica0on  Design   UXPA  2015  Conference  •  23  June  2015  
  2. 2. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 2   S i m p l i c i t y  
  3. 3. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 3  
  4. 4. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 4   Architect  Javier  Artadi  from  Lima,  Peru
  5. 5. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 http://michaelgraves.com/ Industrial designer Michael Graves
  6. 6. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 6   “The  architect  should   strive  conNnually  to   simplify;  the  ensemble   of  the  rooms  should   then  be  carefully   considered  that   comfort  and  uNlity  may   go  hand  in  hand  with   beauty.”              —Frank  Lloyd   Wright,  1908   Photo  by  Jason  Bechtel,  Flickr  
  7. 7. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 7   “PerfecNon  is  finally   a.ained  not  when   there  is  no  longer   anything  to  add,  but   when  there  is  no  longer   anything  to  take  away.”       —Antoine  de  Saint   Exupéry,  Terre  des   Hommes  (1939)   Photo    from  Wikipedia  
  8. 8. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015
  9. 9. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 9  
  10. 10. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 10   And  yet…     Simplicity  isn’t   always  simple.  
  11. 11. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 I’ll  know  it   when  I  see  it…  
  12. 12. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 12  
  13. 13. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 13  
  14. 14. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 14  
  15. 15. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 15   What  about  business   applicaNons?  
  16. 16. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 16   16 Real  work   tasks  are   oden   complex.  
  17. 17. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 17   Many   funcNonal   requirements   must  be  met   to  support   business   processes.  
  18. 18. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 18   ApplicaNons   oden  are   configurable   to  support   many   different   contexts  of   use.  
  19. 19. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 19   MORE  FEATURES  =   MORE  COMPETITIVE   “Make  it  simple  and   people  won’t  buy.   Given  a  choice,  they  will   take  the  item  that  does   more.  Features  win  over   simplicity.”   -­‐-­‐Donald  Norman Photo from http://www.jnd.org/NNg-Photographs/NNg- photographs.html
  20. 20. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015
  21. 21. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 SIMPLE      ≠        SIMPLISTIC  
  22. 22. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 22   Design  should  be  made   as  simple  as  possible,   but  no  simpler.  
  23. 23. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 CONSIDER:   1.  Do  you  know  enough  about  the  users,  tasks  and  context   of  use  to  make  informed  design  decisions?   2.  Which  features/informaNon  need  to  be  most  obvious   and  which  can  be  minimized  or  hidden?   3.  Can  context  be  used  to  focus  on  the  most  relevant   informaNon  or  features?   4.  Can  the  display  be  made  less  dense?   5.  Can  tasks  be  done  in  fewer  steps  or  clicks?   6.  Can  tasks  be  streamlined  through  automaNon,  re-­‐using   data,  defaults,  or  preferences?  
  24. 24. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 24   FIND  A  NEW  WAY   Rethink the workflow / task Automate it Consider alternative channels and formats
  25. 25. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Rethink  the  workflow   FIND  A  NEW  WAY  
  26. 26. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Rethink  the  workflow   FIND  A  NEW  WAY  
  27. 27. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Automate  it   FIND  A  NEW  WAY   1   2   3   4  
  28. 28. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Consider  alternaNve  channels  and  formats   FIND  A  NEW  WAY  
  29. 29. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 FIND  A  NEW  WAY   Rethink the workflow / task Automate it Consider alternative channels and formats
  30. 30. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 WHAT THEY NEED WHEN THEY NEED IT Push meaningful and relevant information Optimize information density Optimize to support common tasks Layer for progressive disclosure
  31. 31. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Push  meaningful  and  relevant  informaNon   WHAT  YOU  NEED  WHEN  YOU  NEED  IT   To  Do’s   Produc0vity   Group  Ac0vity  
  32. 32. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Push  meaningful  and  relevant  informaNon   WHAT  YOU  NEED  WHEN  YOU  NEED  IT  
  33. 33. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 c   Push  meaningful  and  relevant  informaNon   WHAT  YOU  NEED  WHEN  YOU  NEED  IT   33   Customer  Overview       AcNon   AcNon   AcNon   More  AcNons             >  
  34. 34. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 OpNmize  informaNon  density   WHAT  YOU  NEED  WHEN  YOU  NEED  IT  
  35. 35. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 c   OpNmize  to  support  common  tasks   STRUCTURE  FOR  TASK  EFFICIENCY   35   Customer  Overview       AcNon   AcNon   AcNon   More  AcNons             >   Recent  Ac0vity       Recent  Touchpoints   Record  Details   Remarks  
  36. 36. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Layer  for  progressive  disclosure   WHAT  YOU  NEED  WHEN  YOU  NEED  IT   15    6    11   19  LOREM   IPSUM   LOREM   IPSUM   LOREM   IPSUM   LOREM   IPSUM  
  37. 37. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Layer  for  progressive  disclosure   +   +   -­‐   WHAT  YOU  NEED  WHEN  YOU  NEED  IT  
  38. 38. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Layer  for  progressive  disclosure   WHAT  YOU  NEED  WHEN  YOU  NEED  IT  
  39. 39. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 WHAT THEY NEED WHEN THEY NEED IT Push meaningful and relevant information Optimize information density Optimize to support common tasks Layer for progressive disclosure
  40. 40. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 STRUCTURE FOR TASK EFFICIENCY Reduce the number of clicks Eliminate steps through defaults and re-use Allow bulk actions Recover from interruptions Guide the user step-by-step for infrequent tasks
  41. 41. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Reduce  the  number  of  clicks   STRUCTURE  FOR  TASK  EFFICIENCY   41   Next  course:  March  15,  2015  (2)   (10)   (1)   Required  by:  July  30,  2015   (0)   (0)   American  Dental  AssociaNon  
  42. 42. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Reduce  the  number  of  clicks   STRUCTURE  FOR  TASK  EFFICIENCY   42  
  43. 43. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 c   Eliminate  steps  through  defaults  and  re-­‐use   STRUCTURE  FOR  TASK  EFFICIENCY   43   Event  Name       AcNon   AcNon   AcNon   Registra0on       Event  Details   Remarks   AcNon   More  AcNons             >   Copy  event…  
  44. 44. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 c   Allow  bulk  acNons   STRUCTURE  FOR  TASK  EFFICIENCY   44   Reassign  
  45. 45. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Recover  from  interrupNons   STRUCTURE  FOR  TASK  EFFICIENCY   Recently  Viewed  
  46. 46. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Guide  the  user  step-­‐by-­‐step  for  infrequent  tasks     STRUCTURE  FOR  TASK  EFFICIENCY   1   2   3  ✔   >   >  
  47. 47. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Guide  the  user  step-­‐by-­‐step  for  infrequent  tasks     STRUCTURE  FOR  TASK  EFFICIENCY  
  48. 48. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 STRUCTURE FOR TASK EFFICIENCY Reduce the number of clicks Eliminate steps through defaults and re-use Allow bulk actions Recover from interruptions Guide the user step-by-step for infrequent tasks
  49. 49. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 REDUCE TO “JUST ENOUGH” Break up big lists and menus Break up long forms Minimize clutter
  50. 50. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Break  up  big  lists  and  menus     JUST  ENOUGH             more  …         more  …                 more  …             more  …     Filter  
  51. 51. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Break  up  long  forms  into  manageable  pieces     JUST  ENOUGH  
  52. 52. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Break  up  long  forms  into  manageable  pieces     JUST  ENOUGH   Step  1   ConNnue  >  Save  &  Close  
  53. 53. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Minimize  clu.er     JUST  ENOUGH             more  …         more  …         more  …   >   Search             >  >  
  54. 54. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 REDUCE TO “JUST ENOUGH” Break up big lists and menus Break up long forms Minimize clutter
  55. 55. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 CLEAR AND EASY-TO- USE INTERACTIONS Consistent and familiar controls Direct manipulation
  56. 56. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Consistent  and  familiar  controls   CLEAR  AND  EASY-­‐TO-­‐USE  INTERACTIONS   +   +   c   -­‐   <                                                  >  
  57. 57. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Direct  manipulaNon   CLEAR  AND  EASY-­‐TO-­‐USE  INTERACTIONS  
  58. 58. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 c   Direct  manipulaNon   58   Customer  Overview       AcNon   AcNon   AcNon   More  AcNons             >   Recent  Ac0vity       Recent  Touchpoints   Record  Details   Remarks   CLEAR  AND  EASY-­‐TO-­‐USE  INTERACTIONS  
  59. 59. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Direct  manipulaNon   CLEAR  AND  EASY-­‐TO-­‐USE  INTERACTIONS  
  60. 60. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 CLEAR AND EASY-TO- USE INTERACTIONS Consistent and familiar controls Direct manipulation
  61. 61. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 COMMUNICATE VISUALLY AND VERBALLY Minimize visual noise Use conversational language Provide visualizations and visual cues Enhance appearance through visual design
  62. 62. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Minimize  visual  noise     COMMUNICATE  VISUALLY  AND  VERBALLY  
  63. 63. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Minimize  visual  noise     COMMUNICATE  VISUALLY  AND  VERBALLY  
  64. 64. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 c   1   2   3   Use  conversaNonal  language   You’re  a  Genius!   COMMUNICATE  VISUALLY  AND  VERBALLY  
  65. 65. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Provide  visualizaNons  and  visual  cues   COMMUNICATE  VISUALLY  AND  VERBALLY  
  66. 66. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Provide  visualizaNons  and  visual  cues   COMMUNICATE  VISUALLY  AND  VERBALLY  
  67. 67. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Provide  visualizaNons  and  visual  cues   COMMUNICATE  VISUALLY  AND  VERBALLY  
  68. 68. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Enhance  appearance  through  visual  design   COMMUNICATE  VISUALLY  AND  VERBALLY  
  69. 69. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 COMMUNICATE VISUALLY AND VERBALLY Minimize visual noise Use conversational language Provide visualizations and visual cues Enhance appearance through visual design
  70. 70. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 NEW HORIZONS Leverage open, public data Use natural language and speech input Learn from the users’ actions Context-aware applications
  71. 71. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Leverage  open,  public  data   NEW  HORIZONS  
  72. 72. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Use  natural  language  and  speech  input   NEW  HORIZONS  
  73. 73. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Learn  from  the  users’  acNons   NEW  HORIZONS  
  74. 74. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Context-­‐aware  applicaNons   NEW  HORIZONS   Full  applicaNon   Context-­‐aware  mobile   version  uses  date,  locaNon   and  task  to  push  most   relevant  info  and  funcNons  
  75. 75. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 NEW HORIZONS Leverage open, public data Use natural language and speech input Learn from the users’ actions Context-aware applications
  76. 76. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 FIND  A  NEW  WAY   Rethink  the  workflow  /  task   Automate  it   Consider  alternaNve  channels  and  formats     WHAT  THEY  NEED  WHEN  THEY   NEED  IT   Push  meaningful  and  relevant  informaNon   OpNmize  informaNon  density   OpNmize  to  support  common  tasks   Layer  for  progressive  disclosure     STRUCTURE  FOR  TASK   EFFICIENCY   Reduce  the  number  of  clicks   Eliminate  steps  through  defaults  and  re-­‐use   Allow  bulk  acNons   Recover  from  interrupNons   Guide  step-­‐by-­‐step  for  infrequent  tasks     REDUCE  TO  “JUST  ENOUGH”   Break  up  big  lists  and  menus     Break  up  long  forms   Minimize  clu.er     CLEAR  AND  EASY-­‐TO-­‐USE   INTERACTIONS   Consistent  and  familiar  controls   Direct  manipulaNon     COMMUNICATE  VISUALLY  AND   VERBALLY   Minimize  visual  noise   Use  conversaNonal  language   Provide  visualizaNons  and  visual  cues   Enhance  appearance  through  visual  design     THE  FUTURE  IS  HERE!   Leverage  open,  public  data   Use  natural  language  and  speech  input   Learn  from  the  users’  acNons   Context–aware  applicaNons  
  77. 77. Laura  Chessman   Principal  Consultant laura@designforcontext.com Lisa  Ba.le   President lisa@designforcontext.com @design4context Simplicity  in     Web  Applica0on  Design   UXPA  2015  Conference  •  23  June  2015   Thanks!   Presenta@on  is  on  Slideshare  –  Go  to  www.designforcontext.com/publica@ons

×