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.
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
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