SlideShare a Scribd company logo
1 of 77
Download to read offline
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	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 2	
  
S i m p l i c i t y	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 3	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 4	
  
Architect	
  Javier	
  Artadi	
  from	
  Lima,	
  Peru
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
http://michaelgraves.com/
Industrial designer Michael Graves
@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	
  
@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	
  
@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…	
  
	
  
Simplicity	
  isn’t	
  
always	
  simple.	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
I’ll	
  know	
  it	
  
when	
  I	
  see	
  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	
  business	
  
applicaNons?	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 16	
  
16
Real	
  work	
  
tasks	
  are	
  
oden	
  
complex.	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 17	
  
Many	
  
funcNonal	
  
requirements	
  
must	
  be	
  met	
  
to	
  support	
  
business	
  
processes.	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 18	
  
ApplicaNons	
  
oden	
  are	
  
configurable	
  
to	
  support	
  
many	
  
different	
  
contexts	
  of	
  
use.	
  
@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
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
SIMPLE	
  	
  	
  ≠	
  	
  	
  	
  SIMPLISTIC	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
 22	
  
Design	
  should	
  be	
  made	
  
as	
  simple	
  as	
  possible,	
  
but	
  no	
  simpler.	
  
@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?	
  
@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
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Rethink	
  the	
  workflow	
  
FIND	
  A	
  NEW	
  WAY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Rethink	
  the	
  workflow	
  
FIND	
  A	
  NEW	
  WAY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Automate	
  it	
  
FIND	
  A	
  NEW	
  WAY	
  
1	
  
2	
  
3	
  
4	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Consider	
  alternaNve	
  channels	
  and	
  formats	
  
FIND	
  A	
  NEW	
  WAY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
FIND	
  A	
  NEW	
  WAY	
  
Rethink the workflow / task
Automate it
Consider alternative channels and formats
@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
@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	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Push	
  meaningful	
  and	
  relevant	
  informaNon	
  
WHAT	
  YOU	
  NEED	
  WHEN	
  YOU	
  NEED	
  IT	
  
@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	
  	
  	
  	
  	
  	
  
>	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
OpNmize	
  informaNon	
  density	
  
WHAT	
  YOU	
  NEED	
  WHEN	
  YOU	
  NEED	
  IT	
  
@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	
  
@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	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Layer	
  for	
  progressive	
  disclosure	
  
+	
  
+	
  
-­‐	
  
WHAT	
  YOU	
  NEED	
  WHEN	
  YOU	
  NEED	
  IT	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Layer	
  for	
  progressive	
  disclosure	
  
WHAT	
  YOU	
  NEED	
  WHEN	
  YOU	
  NEED	
  IT	
  
@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
@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
@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	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Reduce	
  the	
  number	
  of	
  clicks	
  
STRUCTURE	
  FOR	
  TASK	
  EFFICIENCY	
  
42	
  
@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…	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
c	
  
Allow	
  bulk	
  acNons	
  
STRUCTURE	
  FOR	
  TASK	
  EFFICIENCY	
  
44	
  
Reassign	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Recover	
  from	
  interrupNons	
  
STRUCTURE	
  FOR	
  TASK	
  EFFICIENCY	
  
Recently	
  Viewed	
  
@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	
  ✔	
  
>	
  
>	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Guide	
  the	
  user	
  step-­‐by-­‐step	
  for	
  infrequent	
  tasks	
  	
  
STRUCTURE	
  FOR	
  TASK	
  EFFICIENCY	
  
@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
@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
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Break	
  up	
  big	
  lists	
  and	
  menus	
  
	
  
JUST	
  ENOUGH	
  
	
  
	
  
	
  
	
  
	
  
more	
  …	
  
	
  
	
  
	
  
more	
  …	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
more	
  …	
  
	
  
	
  
	
  
	
  
	
  
more	
  …	
  
	
  
Filter	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Break	
  up	
  long	
  forms	
  into	
  manageable	
  pieces	
  
	
  
JUST	
  ENOUGH	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Break	
  up	
  long	
  forms	
  into	
  manageable	
  pieces	
  
	
  
JUST	
  ENOUGH	
  
Step	
  1	
  
ConNnue	
  >	
  Save	
  &	
  Close	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Minimize	
  clu.er	
  
	
  
JUST	
  ENOUGH	
  
	
  
	
  
	
  
	
  
	
  
more	
  …	
  
	
  
	
  
	
  
more	
  …	
  
	
  
	
  
	
  
more	
  …	
  
>	
  
Search	
  	
  	
  	
  	
  	
  
>	
  >	
  
@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
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
CLEAR AND EASY-TO-
USE INTERACTIONS
Consistent and familiar controls
Direct manipulation
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Consistent	
  and	
  familiar	
  controls	
  
CLEAR	
  AND	
  EASY-­‐TO-­‐USE	
  INTERACTIONS	
  
+	
  
+	
  
c	
  
-­‐	
  
<	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  >	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Direct	
  manipulaNon	
  
CLEAR	
  AND	
  EASY-­‐TO-­‐USE	
  INTERACTIONS	
  
@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	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Direct	
  manipulaNon	
  
CLEAR	
  AND	
  EASY-­‐TO-­‐USE	
  INTERACTIONS	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
CLEAR AND EASY-TO-
USE INTERACTIONS
Consistent and familiar controls
Direct manipulation
@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
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Minimize	
  visual	
  noise	
  
	
  
COMMUNICATE	
  VISUALLY	
  AND	
  VERBALLY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Minimize	
  visual	
  noise	
  
	
  
COMMUNICATE	
  VISUALLY	
  AND	
  VERBALLY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
c	
  
1	
  
2	
  
3	
  
Use	
  conversaNonal	
  language	
  
You’re	
  a	
  Genius!	
  
COMMUNICATE	
  VISUALLY	
  AND	
  VERBALLY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Provide	
  visualizaNons	
  and	
  visual	
  cues	
  
COMMUNICATE	
  VISUALLY	
  AND	
  VERBALLY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Provide	
  visualizaNons	
  and	
  visual	
  cues	
  
COMMUNICATE	
  VISUALLY	
  AND	
  VERBALLY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Provide	
  visualizaNons	
  and	
  visual	
  cues	
  
COMMUNICATE	
  VISUALLY	
  AND	
  VERBALLY	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Enhance	
  appearance	
  through	
  visual	
  design	
  
COMMUNICATE	
  VISUALLY	
  AND	
  VERBALLY	
  
@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
@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
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Leverage	
  open,	
  public	
  data	
  
NEW	
  HORIZONS	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Use	
  natural	
  language	
  and	
  speech	
  input	
  
NEW	
  HORIZONS	
  
@design4context	
  	
  	
  	
  	
  	
  Simplicity  in  Web  Applica@on  Design          UXPA  2015
Learn	
  from	
  the	
  users’	
  acNons	
  
NEW	
  HORIZONS	
  
@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	
  
@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
@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	
  
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

More Related Content

Similar to Simplicity in Web Application Design - UXPA2015

Build Answer-generating Apps that Users Love: Development best practices for ...
Build Answer-generating Apps that Users Love: Development best practices for ...Build Answer-generating Apps that Users Love: Development best practices for ...
Build Answer-generating Apps that Users Love: Development best practices for ...TIBCO Jaspersoft
 
Mule soft meetup Houston 16
Mule soft meetup Houston 16Mule soft meetup Houston 16
Mule soft meetup Houston 16Jim Andrews
 
SharePoint Framework get started and best practices
SharePoint Framework get started and best practicesSharePoint Framework get started and best practices
SharePoint Framework get started and best practicesGiuliano De Luca
 
Expert System Global Intranet - Design Process
Expert System Global Intranet - Design ProcessExpert System Global Intranet - Design Process
Expert System Global Intranet - Design ProcessGianluca Nicoletta
 
Acquia Platform Update: New Features and Capabilities
Acquia Platform Update: New Features and CapabilitiesAcquia Platform Update: New Features and Capabilities
Acquia Platform Update: New Features and CapabilitiesAcquia
 
MuleSoft_meetup | Integralzone
MuleSoft_meetup | IntegralzoneMuleSoft_meetup | Integralzone
MuleSoft_meetup | IntegralzoneIntegralZone
 
Progressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignProgressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignKarin Tracy
 
An involving approach to intranet design
An involving approach to intranet designAn involving approach to intranet design
An involving approach to intranet designCristiano Siri
 
Practical Tips on Designing an effective Digital Workplace #m365vconf
Practical Tips on Designing an effective Digital Workplace #m365vconfPractical Tips on Designing an effective Digital Workplace #m365vconf
Practical Tips on Designing an effective Digital Workplace #m365vconfKanwal Khipple
 
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016Pekka Hartikainen
 
How UX Can Drive the Vision of Future Products - Arttu Niskasaari
How UX Can Drive the Vision of Future Products - Arttu NiskasaariHow UX Can Drive the Vision of Future Products - Arttu Niskasaari
How UX Can Drive the Vision of Future Products - Arttu NiskasaariUXPA International
 
SAP Design Day 2016 (Montreal) - F.L.U.T.E.
SAP Design Day 2016 (Montreal) - F.L.U.T.E.SAP Design Day 2016 (Montreal) - F.L.U.T.E.
SAP Design Day 2016 (Montreal) - F.L.U.T.E.Wayne Pau
 
Keeping the Vision Alive: UX Leadership in Long-Term Projects
Keeping the Vision Alive: UX Leadership in Long-Term ProjectsKeeping the Vision Alive: UX Leadership in Long-Term Projects
Keeping the Vision Alive: UX Leadership in Long-Term ProjectsDesign for Context
 
Developer Experience
Developer ExperienceDeveloper Experience
Developer ExperienceThoughtworks
 
MuleSoft Milano Meetup #7 Florence Consulting
MuleSoft Milano Meetup #7  Florence Consulting MuleSoft Milano Meetup #7  Florence Consulting
MuleSoft Milano Meetup #7 Florence Consulting Florence Consulting
 
Design Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDesign Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDianaGray10
 
Mulesoft Milano meetup #6 Florence Consulting
Mulesoft Milano meetup #6 Florence ConsultingMulesoft Milano meetup #6 Florence Consulting
Mulesoft Milano meetup #6 Florence ConsultingFlorence Consulting
 
Introduction to UX Design
Introduction to UX DesignIntroduction to UX Design
Introduction to UX DesignBill Tribble
 
Data Insights and Analytics: Simplifying Data Lake and Modern BI Architecture
Data Insights and Analytics: Simplifying Data Lake and Modern BI ArchitectureData Insights and Analytics: Simplifying Data Lake and Modern BI Architecture
Data Insights and Analytics: Simplifying Data Lake and Modern BI ArchitectureDATAVERSITY
 

Similar to Simplicity in Web Application Design - UXPA2015 (20)

Build Answer-generating Apps that Users Love: Development best practices for ...
Build Answer-generating Apps that Users Love: Development best practices for ...Build Answer-generating Apps that Users Love: Development best practices for ...
Build Answer-generating Apps that Users Love: Development best practices for ...
 
Mule soft meetup Houston 16
Mule soft meetup Houston 16Mule soft meetup Houston 16
Mule soft meetup Houston 16
 
SharePoint Framework get started and best practices
SharePoint Framework get started and best practicesSharePoint Framework get started and best practices
SharePoint Framework get started and best practices
 
Expert System Global Intranet - Design Process
Expert System Global Intranet - Design ProcessExpert System Global Intranet - Design Process
Expert System Global Intranet - Design Process
 
Acquia Platform Update: New Features and Capabilities
Acquia Platform Update: New Features and CapabilitiesAcquia Platform Update: New Features and Capabilities
Acquia Platform Update: New Features and Capabilities
 
MuleSoft_meetup | Integralzone
MuleSoft_meetup | IntegralzoneMuleSoft_meetup | Integralzone
MuleSoft_meetup | Integralzone
 
Progressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignProgressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive Redesign
 
An involving approach to intranet design
An involving approach to intranet designAn involving approach to intranet design
An involving approach to intranet design
 
Practical Tips on Designing an effective Digital Workplace #m365vconf
Practical Tips on Designing an effective Digital Workplace #m365vconfPractical Tips on Designing an effective Digital Workplace #m365vconf
Practical Tips on Designing an effective Digital Workplace #m365vconf
 
Webinar: NextGen Portals: What? Why? When?
Webinar: NextGen Portals: What? Why? When?Webinar: NextGen Portals: What? Why? When?
Webinar: NextGen Portals: What? Why? When?
 
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
 
How UX Can Drive the Vision of Future Products - Arttu Niskasaari
How UX Can Drive the Vision of Future Products - Arttu NiskasaariHow UX Can Drive the Vision of Future Products - Arttu Niskasaari
How UX Can Drive the Vision of Future Products - Arttu Niskasaari
 
SAP Design Day 2016 (Montreal) - F.L.U.T.E.
SAP Design Day 2016 (Montreal) - F.L.U.T.E.SAP Design Day 2016 (Montreal) - F.L.U.T.E.
SAP Design Day 2016 (Montreal) - F.L.U.T.E.
 
Keeping the Vision Alive: UX Leadership in Long-Term Projects
Keeping the Vision Alive: UX Leadership in Long-Term ProjectsKeeping the Vision Alive: UX Leadership in Long-Term Projects
Keeping the Vision Alive: UX Leadership in Long-Term Projects
 
Developer Experience
Developer ExperienceDeveloper Experience
Developer Experience
 
MuleSoft Milano Meetup #7 Florence Consulting
MuleSoft Milano Meetup #7  Florence Consulting MuleSoft Milano Meetup #7  Florence Consulting
MuleSoft Milano Meetup #7 Florence Consulting
 
Design Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDesign Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX Wireframes
 
Mulesoft Milano meetup #6 Florence Consulting
Mulesoft Milano meetup #6 Florence ConsultingMulesoft Milano meetup #6 Florence Consulting
Mulesoft Milano meetup #6 Florence Consulting
 
Introduction to UX Design
Introduction to UX DesignIntroduction to UX Design
Introduction to UX Design
 
Data Insights and Analytics: Simplifying Data Lake and Modern BI Architecture
Data Insights and Analytics: Simplifying Data Lake and Modern BI ArchitectureData Insights and Analytics: Simplifying Data Lake and Modern BI Architecture
Data Insights and Analytics: Simplifying Data Lake and Modern BI Architecture
 

More from Design for Context

IA-for-AI: An evolving framework for a changing IA practice
IA-for-AI: An evolving framework for a changing IA practiceIA-for-AI: An evolving framework for a changing IA practice
IA-for-AI: An evolving framework for a changing IA practiceDesign for Context
 
Linked Art: Archival Collection Design Considerations
Linked Art: Archival Collection Design ConsiderationsLinked Art: Archival Collection Design Considerations
Linked Art: Archival Collection Design ConsiderationsDesign for Context
 
Engaging with Provenance and Linked Data
Engaging with Provenance and Linked DataEngaging with Provenance and Linked Data
Engaging with Provenance and Linked DataDesign for Context
 
Collaboration in Context: AI and Human Interaction
Collaboration in Context: AI and Human InteractionCollaboration in Context: AI and Human Interaction
Collaboration in Context: AI and Human InteractionDesign for Context
 
Hello, meet Hola! Design for mixed-language interfaces
Hello, meet Hola! Design for mixed-language interfacesHello, meet Hola! Design for mixed-language interfaces
Hello, meet Hola! Design for mixed-language interfacesDesign for Context
 
How IAs Can Shape the Future of Human-AI Collaboration
How IAs Can Shape the Future of Human-AI CollaborationHow IAs Can Shape the Future of Human-AI Collaboration
How IAs Can Shape the Future of Human-AI CollaborationDesign for Context
 
The Delicate Art of Facilitation
The Delicate Art of FacilitationThe Delicate Art of Facilitation
The Delicate Art of FacilitationDesign for Context
 
User and Information Design Considerations for Effective Semantic Search
User and Information Design Considerations for Effective Semantic SearchUser and Information Design Considerations for Effective Semantic Search
User and Information Design Considerations for Effective Semantic SearchDesign for Context
 
Know Thyself, and To Thine Users Be True: Understanding and Managing Biases t...
Know Thyself, and To Thine Users Be True: Understanding and Managing Biases t...Know Thyself, and To Thine Users Be True: Understanding and Managing Biases t...
Know Thyself, and To Thine Users Be True: Understanding and Managing Biases t...Design for Context
 
Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Appli...
Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Appli...Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Appli...
Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Appli...Design for Context
 
Archives Strengthening Historical Narrative: Sharing digital and linked data ...
Archives Strengthening Historical Narrative: Sharing digital and linked data ...Archives Strengthening Historical Narrative: Sharing digital and linked data ...
Archives Strengthening Historical Narrative: Sharing digital and linked data ...Design for Context
 
Going Global: The Intersection of IA and UX in a Multilingual Environment
Going Global: The Intersection of IA and UX in a Multilingual EnvironmentGoing Global: The Intersection of IA and UX in a Multilingual Environment
Going Global: The Intersection of IA and UX in a Multilingual EnvironmentDesign for Context
 
No Static: IA for Dynamic Information Environments
No Static: IA for Dynamic Information EnvironmentsNo Static: IA for Dynamic Information Environments
No Static: IA for Dynamic Information EnvironmentsDesign for Context
 
Integrating Taxonomies and Ontologies into Enterprise Search and Browse
Integrating Taxonomies and Ontologies into Enterprise Search and BrowseIntegrating Taxonomies and Ontologies into Enterprise Search and Browse
Integrating Taxonomies and Ontologies into Enterprise Search and BrowseDesign for Context
 
Ethics: A Human-Centered Design Goal
Ethics: A Human-Centered Design GoalEthics: A Human-Centered Design Goal
Ethics: A Human-Centered Design GoalDesign for Context
 
Split Focus: Designing Applications for Multiple Monitor Setups
Split Focus: Designing Applications for Multiple Monitor SetupsSplit Focus: Designing Applications for Multiple Monitor Setups
Split Focus: Designing Applications for Multiple Monitor SetupsDesign for Context
 
Perspectives on Open Source for Museums’ Digital Projects
Perspectives on Open Source for Museums’ Digital ProjectsPerspectives on Open Source for Museums’ Digital Projects
Perspectives on Open Source for Museums’ Digital ProjectsDesign for Context
 
User Experience Design Considerations for Multi-Museum Collaborations
User Experience Design Considerations for Multi-Museum CollaborationsUser Experience Design Considerations for Multi-Museum Collaborations
User Experience Design Considerations for Multi-Museum CollaborationsDesign for Context
 
Designing Great Dashboards for SaaS and Enterprise Applications
Designing Great Dashboards for SaaS and Enterprise ApplicationsDesigning Great Dashboards for SaaS and Enterprise Applications
Designing Great Dashboards for SaaS and Enterprise ApplicationsDesign for Context
 

More from Design for Context (20)

IA-for-AI: An evolving framework for a changing IA practice
IA-for-AI: An evolving framework for a changing IA practiceIA-for-AI: An evolving framework for a changing IA practice
IA-for-AI: An evolving framework for a changing IA practice
 
Linked Art: Archival Collection Design Considerations
Linked Art: Archival Collection Design ConsiderationsLinked Art: Archival Collection Design Considerations
Linked Art: Archival Collection Design Considerations
 
Engaging with Provenance and Linked Data
Engaging with Provenance and Linked DataEngaging with Provenance and Linked Data
Engaging with Provenance and Linked Data
 
Collaboration in Context: AI and Human Interaction
Collaboration in Context: AI and Human InteractionCollaboration in Context: AI and Human Interaction
Collaboration in Context: AI and Human Interaction
 
Hello, meet Hola! Design for mixed-language interfaces
Hello, meet Hola! Design for mixed-language interfacesHello, meet Hola! Design for mixed-language interfaces
Hello, meet Hola! Design for mixed-language interfaces
 
How IAs Can Shape the Future of Human-AI Collaboration
How IAs Can Shape the Future of Human-AI CollaborationHow IAs Can Shape the Future of Human-AI Collaboration
How IAs Can Shape the Future of Human-AI Collaboration
 
The Delicate Art of Facilitation
The Delicate Art of FacilitationThe Delicate Art of Facilitation
The Delicate Art of Facilitation
 
User and Information Design Considerations for Effective Semantic Search
User and Information Design Considerations for Effective Semantic SearchUser and Information Design Considerations for Effective Semantic Search
User and Information Design Considerations for Effective Semantic Search
 
Know Thyself, and To Thine Users Be True: Understanding and Managing Biases t...
Know Thyself, and To Thine Users Be True: Understanding and Managing Biases t...Know Thyself, and To Thine Users Be True: Understanding and Managing Biases t...
Know Thyself, and To Thine Users Be True: Understanding and Managing Biases t...
 
Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Appli...
Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Appli...Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Appli...
Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Appli...
 
Archives Strengthening Historical Narrative: Sharing digital and linked data ...
Archives Strengthening Historical Narrative: Sharing digital and linked data ...Archives Strengthening Historical Narrative: Sharing digital and linked data ...
Archives Strengthening Historical Narrative: Sharing digital and linked data ...
 
Going Global: The Intersection of IA and UX in a Multilingual Environment
Going Global: The Intersection of IA and UX in a Multilingual EnvironmentGoing Global: The Intersection of IA and UX in a Multilingual Environment
Going Global: The Intersection of IA and UX in a Multilingual Environment
 
No Static: IA for Dynamic Information Environments
No Static: IA for Dynamic Information EnvironmentsNo Static: IA for Dynamic Information Environments
No Static: IA for Dynamic Information Environments
 
Integrating Taxonomies and Ontologies into Enterprise Search and Browse
Integrating Taxonomies and Ontologies into Enterprise Search and BrowseIntegrating Taxonomies and Ontologies into Enterprise Search and Browse
Integrating Taxonomies and Ontologies into Enterprise Search and Browse
 
Accessibility 101
Accessibility 101Accessibility 101
Accessibility 101
 
Ethics: A Human-Centered Design Goal
Ethics: A Human-Centered Design GoalEthics: A Human-Centered Design Goal
Ethics: A Human-Centered Design Goal
 
Split Focus: Designing Applications for Multiple Monitor Setups
Split Focus: Designing Applications for Multiple Monitor SetupsSplit Focus: Designing Applications for Multiple Monitor Setups
Split Focus: Designing Applications for Multiple Monitor Setups
 
Perspectives on Open Source for Museums’ Digital Projects
Perspectives on Open Source for Museums’ Digital ProjectsPerspectives on Open Source for Museums’ Digital Projects
Perspectives on Open Source for Museums’ Digital Projects
 
User Experience Design Considerations for Multi-Museum Collaborations
User Experience Design Considerations for Multi-Museum CollaborationsUser Experience Design Considerations for Multi-Museum Collaborations
User Experience Design Considerations for Multi-Museum Collaborations
 
Designing Great Dashboards for SaaS and Enterprise Applications
Designing Great Dashboards for SaaS and Enterprise ApplicationsDesigning Great Dashboards for SaaS and Enterprise Applications
Designing Great Dashboards for SaaS and Enterprise Applications
 

Recently uploaded

Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Recently uploaded (18)

Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

Simplicity in Web Application Design - UXPA2015

  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 2   S i m p l i c i t y  
  • 3. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 3  
  • 4. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 4   Architect  Javier  Artadi  from  Lima,  Peru
  • 5. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 http://michaelgraves.com/ Industrial designer Michael Graves
  • 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. @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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015
  • 9. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 9  
  • 10. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 10   And  yet…     Simplicity  isn’t   always  simple.  
  • 11. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 I’ll  know  it   when  I  see  it…  
  • 12. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 12  
  • 13. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 13  
  • 14. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 14  
  • 15. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 15   What  about  business   applicaNons?  
  • 16. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 16   16 Real  work   tasks  are   oden   complex.  
  • 17. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 17   Many   funcNonal   requirements   must  be  met   to  support   business   processes.  
  • 18. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 18   ApplicaNons   oden  are   configurable   to  support   many   different   contexts  of   use.  
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015
  • 21. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 SIMPLE      ≠        SIMPLISTIC  
  • 22. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 22   Design  should  be  made   as  simple  as  possible,   but  no  simpler.  
  • 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. @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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Rethink  the  workflow   FIND  A  NEW  WAY  
  • 26. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Rethink  the  workflow   FIND  A  NEW  WAY  
  • 27. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Automate  it   FIND  A  NEW  WAY   1   2   3   4  
  • 28. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Consider  alternaNve  channels  and  formats   FIND  A  NEW  WAY  
  • 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. @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. @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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Push  meaningful  and  relevant  informaNon   WHAT  YOU  NEED  WHEN  YOU  NEED  IT  
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 OpNmize  informaNon  density   WHAT  YOU  NEED  WHEN  YOU  NEED  IT  
  • 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. @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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Layer  for  progressive  disclosure   +   +   -­‐   WHAT  YOU  NEED  WHEN  YOU  NEED  IT  
  • 38. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Layer  for  progressive  disclosure   WHAT  YOU  NEED  WHEN  YOU  NEED  IT  
  • 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. @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. @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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Reduce  the  number  of  clicks   STRUCTURE  FOR  TASK  EFFICIENCY   42  
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 c   Allow  bulk  acNons   STRUCTURE  FOR  TASK  EFFICIENCY   44   Reassign  
  • 45. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Recover  from  interrupNons   STRUCTURE  FOR  TASK  EFFICIENCY   Recently  Viewed  
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Guide  the  user  step-­‐by-­‐step  for  infrequent  tasks     STRUCTURE  FOR  TASK  EFFICIENCY  
  • 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. @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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Break  up  big  lists  and  menus     JUST  ENOUGH             more  …         more  …                 more  …             more  …     Filter  
  • 51. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Break  up  long  forms  into  manageable  pieces     JUST  ENOUGH  
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Minimize  clu.er     JUST  ENOUGH             more  …         more  …         more  …   >   Search             >  >  
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 CLEAR AND EASY-TO- USE INTERACTIONS Consistent and familiar controls Direct manipulation
  • 56. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Consistent  and  familiar  controls   CLEAR  AND  EASY-­‐TO-­‐USE  INTERACTIONS   +   +   c   -­‐   <                                                  >  
  • 57. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Direct  manipulaNon   CLEAR  AND  EASY-­‐TO-­‐USE  INTERACTIONS  
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Direct  manipulaNon   CLEAR  AND  EASY-­‐TO-­‐USE  INTERACTIONS  
  • 60. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 CLEAR AND EASY-TO- USE INTERACTIONS Consistent and familiar controls Direct manipulation
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Minimize  visual  noise     COMMUNICATE  VISUALLY  AND  VERBALLY  
  • 63. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Minimize  visual  noise     COMMUNICATE  VISUALLY  AND  VERBALLY  
  • 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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Provide  visualizaNons  and  visual  cues   COMMUNICATE  VISUALLY  AND  VERBALLY  
  • 66. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Provide  visualizaNons  and  visual  cues   COMMUNICATE  VISUALLY  AND  VERBALLY  
  • 67. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Provide  visualizaNons  and  visual  cues   COMMUNICATE  VISUALLY  AND  VERBALLY  
  • 68. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Enhance  appearance  through  visual  design   COMMUNICATE  VISUALLY  AND  VERBALLY  
  • 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. @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. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Leverage  open,  public  data   NEW  HORIZONS  
  • 72. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Use  natural  language  and  speech  input   NEW  HORIZONS  
  • 73. @design4context            Simplicity  in  Web  Applica@on  Design          UXPA  2015 Learn  from  the  users’  acNons   NEW  HORIZONS  
  • 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. @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. @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. 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