Simplifyingapplicationsuxpa2015 150623181355-lva1-app6891

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

3

@design4context

4

Architect
Javier
Artadi
from
Lima,
Peru

@design4context

http://michaelgraves.com/
Industrial designer Michael Graves

@design4context

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

7

“PerfecNon
is
ﬁnally

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


@design4context

9

@design4context

10

And
yet…

Simplicity
isn’t

always
simple.

@design4context

I’ll
know
it

when
I
see
it…

@design4context

12

@design4context

13

@design4context

14

@design4context

15

What
about
business

applicaNons?

@design4context

16

16
Real
work

tasks
are

oden

complex.

@design4context

17

Many

funcNonal

requirements

must
be
met

to
support

business

processes.

@design4context

18

ApplicaNons

oden
are

conﬁgurable

to
support

many

diﬀerent

contexts
of

use.

@design4context

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

SIMPLE

≠

SIMPLISTIC

@design4context

22

Design
should
be
made

as
simple
as
possible,

but
no
simpler.

@design4context

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

24

FIND
A
NEW
WAY

Rethink the workflow / task
Automate it
Consider alternative channels and formats

@design4context

Rethink
the
workﬂow

FIND
A
NEW
WAY

@design4context

Automate
it

FIND
A
NEW
WAY

1

2

3

4

@design4context

Consider
alternaNve
channels
and
formats

FIND
A
NEW
WAY

@design4context

FIND
A
NEW
WAY

Rethink the workflow / task
Automate it
Consider alternative channels and formats

@design4context

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

Push
meaningful
and
relevant
informaNon

WHAT
YOU
NEED
WHEN
YOU
NEED
IT

To
Do’s

Produc0vity

Group
Ac0vity

@design4context

Push
meaningful
and
relevant
informaNon

WHAT
YOU
NEED
WHEN
YOU
NEED
IT

@design4context

c

Push
meaningful
and
relevant
informaNon

WHAT
YOU
NEED
WHEN
YOU
NEED
IT

33

Customer
Overview

AcNon
AcNon
AcNon
More
AcNons

>

@design4context

OpNmize
informaNon
density

WHAT
YOU
NEED
WHEN
YOU
NEED
IT

@design4context

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

Layer
for
progressive
disclosure

WHAT
YOU
NEED
WHEN
YOU
NEED
IT

15

6

11
19
LOREM

IPSUM

LOREM

IPSUM

LOREM

IPSUM

LOREM

IPSUM

@design4context

Layer
for
progressive
disclosure

+

+

-‐

WHAT
YOU
NEED
WHEN
YOU
NEED
IT

@design4context

Layer
for
progressive
disclosure

WHAT
YOU
NEED
WHEN
YOU
NEED
IT

@design4context

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

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

Reduce
the
number
of
clicks

STRUCTURE
FOR
TASK
EFFICIENCY

42

@design4context

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

c

Allow
bulk
acNons

STRUCTURE
FOR
TASK
EFFICIENCY

44

Reassign

@design4context

Recover
from
interrupNons

STRUCTURE
FOR
TASK
EFFICIENCY

Recently
Viewed

@design4context

Guide
the
user
step-‐by-‐step
for
infrequent
tasks

STRUCTURE
FOR
TASK
EFFICIENCY

1
2
3
✔

>

>

@design4context

Guide
the
user
step-‐by-‐step
for
infrequent
tasks

STRUCTURE
FOR
TASK
EFFICIENCY

@design4context

REDUCE TO
“JUST ENOUGH”
Break up big lists and menus
Break up long forms
Minimize clutter

@design4context

Break
up
big
lists
and
menus

JUST
ENOUGH

more
…

more
…

more
…

more
…

Filter

@design4context

Break
up
long
forms
into
manageable
pieces

JUST
ENOUGH

@design4context

Break
up
long
forms
into
manageable
pieces

JUST
ENOUGH

Step
1

ConNnue
>
Save
&
Close

@design4context

Minimize
clu.er

JUST
ENOUGH

more
…

more
…

more
…

>

Search

>
>

@design4context

CLEAR AND EASY-TO-
USE INTERACTIONS
Consistent and familiar controls
Direct manipulation

@design4context

Consistent
and
familiar
controls

CLEAR
AND
EASY-‐TO-‐USE
INTERACTIONS

+

+

c

-‐

<

>

@design4context

Direct
manipulaNon

CLEAR
AND
EASY-‐TO-‐USE
INTERACTIONS

@design4context

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

COMMUNICATE
VISUALLY AND
VERBALLY
Minimize visual noise
Use conversational language
Provide visualizations and visual cues
Enhance appearance through visual design

@design4context

Minimize
visual
noise

COMMUNICATE
VISUALLY
AND
VERBALLY

@design4context

c

1

2

3

Use
conversaNonal
language

You’re
a
Genius!

COMMUNICATE
VISUALLY
AND
VERBALLY

@design4context

Provide
visualizaNons
and
visual
cues

COMMUNICATE
VISUALLY
AND
VERBALLY

@design4context

Enhance
appearance
through
visual
design

COMMUNICATE
VISUALLY
AND
VERBALLY

@design4context

NEW HORIZONS
Leverage open, public data
Use natural language and speech input
Learn from the users’ actions
Context-aware applications

@design4context

Leverage
open,
public
data

NEW
HORIZONS

@design4context

Use
natural
language
and
speech
input

NEW
HORIZONS

@design4context

Learn
from
the
users’
acNons

NEW
HORIZONS

@design4context

Context-‐aware
applicaNons

NEW
HORIZONS

Full
applicaNon

Context-‐aware
mobile

version
uses
date,
locaNon

and
task
to
push
most

relevant
info
and
funcNons

@design4context

FIND
A
NEW
WAY

Rethink
the
workﬂow
/
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

Simplifyingapplicationsuxpa2015 150623181355-lva1-app6891

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Simplifyingapplicationsuxpa2015 150623181355-lva1-app6891

Similar to Simplifyingapplicationsuxpa2015 150623181355-lva1-app6891 (20)

More from UXPA International

More from UXPA International (20)

Simplifyingapplicationsuxpa2015 150623181355-lva1-app6891