simplifyingapplicationsuxpa2015 150623181355-lva1-app6891

© Design for Context

Laura Chessman Principal Consultant [email protected]

Lisa Ba.le President [email protected] @design4context

Simplicity in Web Applica0on Design UXPA 2015 Conference • 23 June 2015

@design4context Simplicity in Web Applica@on Design UXPA 2015 2


SIMPLICITY

S i m p l i c i t y


© Design for Context Lima-based studio Javier Artadi Arquitectos has designed this 2,300 square foot contemporary beach house in Las Arenas, a hundred miles south of Lima, Peru.

Architect Javier Artadi from Lima, Peru

@design4context Simplicity in Web Applica@on Design UXPA 2015


http://michaelgraves.com/

Industrial designer Michael Graves



“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

https://www.flickr.com/photos/jasephotos/247803143/in/photolist-nU4eZ-nUAix-quUJhg-pePXsR-psxUsi-qbae1w-p3THKw-pDG8ZV-92NiRS-oEWZnw-7XAkTv-pf7DEs-pCeYmW-qm1trR-qAuEtw-oJeFHY-sAERiz-8jBgkF-rf6mwZ-oWd6MS-7Xw7sK-pPXmaR-r1SHp8-cEpwxy-ptUE34-aorEeL-5MWZ8d-75BRWa-75FGqJ-s5N7m2-oMBR4x-8jBgct-7BgJpe-rav6vp-cDevv7-7V7wjG-71VKC3-99DN5X-rtYa41-8NPj5g-97ttdo-75BNpk-6M3JvT-gfmG8z-6DNAji-kS3FF-75BNFi-6DSJW3-75FFFb-6vS1VT

Photo by Jason Bechtel, Flickr



“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)

http://en.wikipedia.org/wiki/The_Little_Prince

Photo from Wikipedia



http://www.smashingmagazine.com/2012/06/28/create-responsive-mobile-first-wordpress-theme/



And yet…

Simplicity isn’t always simple.



I’ll know it when I see it…



12



13



14



What about business applicaNons?


© Design for Context 16

Real work tasks are oden complex.



Many funcNonal requirements must be met to support business processes.



ApplicaNons oden are configurable to support many different contexts of use.



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



SIMPLE ≠ SIMPLISTIC



Design should be made as simple as possible, but no simpler.



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?



FIND A NEW WAY

Rethink the workflow / task

Automate it

Consider alternative channels and formats



Rethink the workflow FIND A NEW WAY



Automate it FIND A NEW WAY

1

2

3

4



Consider alternaNve channels and formats FIND A NEW WAY



FIND A NEW WAY

Rethink the workflow / task

Automate it

Consider alternative channels and formats



WHAT THEY NEED WHEN THEY NEED IT Push meaningful and relevant information

Optimize information density

Optimize to support common tasks

Layer for progressive disclosure



Push meaningful and relevant informaNon WHAT YOU NEED WHEN YOU NEED IT

To Do’s

Produc0vity

Group Ac0vity



c


33

Customer Overview

AcNon AcNon AcNon More AcNons >



OpNmize informaNon density WHAT YOU NEED WHEN YOU NEED IT



c

OpNmize to support common tasks STRUCTURE FOR TASK EFFICIENCY

35

Customer Overview


Recent Ac0vity

Recent Touchpoints

Record Details

Remarks



Layer for progressive disclosure WHAT YOU NEED WHEN YOU NEED IT

15 6 11 19 LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM




+

+

-‐

WHAT YOU NEED WHEN YOU NEED IT



Layer for progressive disclosure WHAT YOU NEED WHEN YOU NEED IT



WHAT THEY NEED WHEN THEY NEED IT Push meaningful and relevant information

Optimize information density

Optimize to support common tasks




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



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



Reduce the number of clicks STRUCTURE FOR TASK EFFICIENCY

42



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…



c

Allow bulk acNons STRUCTURE FOR TASK EFFICIENCY

44

Reassign



Recover from interrupNons STRUCTURE FOR TASK EFFICIENCY

Recently Viewed



Guide the user step-‐by-‐step for infrequent tasks STRUCTURE FOR TASK EFFICIENCY

1 2 3 ✔

>

>



Guide the user step-‐by-‐step for infrequent tasks STRUCTURE FOR TASK EFFICIENCY



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



REDUCE TO “JUST ENOUGH” Break up big lists and menus

Break up long forms

Minimize clutter



Break up big lists and menus

JUST ENOUGH

more …

more …

more …

more …

Filter



Break up long forms into manageable pieces

JUST ENOUGH



Break up long forms into manageable pieces

JUST ENOUGH

Step 1

ConNnue > Save & Close



Minimize clu.er

JUST ENOUGH

more …

more …

more …

>

Search

> >



REDUCE TO “JUST ENOUGH” Break up big lists and menus

Break up long forms

Minimize clutter



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

Direct manipulation



Consistent and familiar controls CLEAR AND EASY-‐TO-‐USE INTERACTIONS

+

+

c

-‐

< >



Direct manipulaNon CLEAR AND EASY-‐TO-‐USE INTERACTIONS



c

Direct manipulaNon

58

Customer Overview


Recent Ac0vity

Recent Touchpoints

Record Details

Remarks

CLEAR AND EASY-‐TO-‐USE INTERACTIONS



Direct manipulaNon CLEAR AND EASY-‐TO-‐USE INTERACTIONS



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

Direct manipulation



COMMUNICATE VISUALLY AND VERBALLY Minimize visual noise

Use conversational language

Provide visualizations and visual cues

Enhance appearance through visual design



Minimize visual noise

COMMUNICATE VISUALLY AND VERBALLY



c

1

2

3

Use conversaNonal language

You’re a Genius!

COMMUNICATE VISUALLY AND VERBALLY



Provide visualizaNons and visual cues COMMUNICATE VISUALLY AND VERBALLY



Enhance appearance through visual design COMMUNICATE VISUALLY AND VERBALLY



COMMUNICATE VISUALLY AND VERBALLY Minimize visual noise

Use conversational language

Provide visualizations and visual cues

Enhance appearance through visual design



NEW HORIZONS

Leverage open, public data

Use natural language and speech input

Learn from the users’ actions

Context-aware applications



Leverage open, public data NEW HORIZONS



Use natural language and speech input NEW HORIZONS



Learn from the users’ acNons NEW HORIZONS



Context-‐aware applicaNons NEW HORIZONS

Full applicaNon

Context-‐aware mobile version uses date, locaNon and task to push most relevant info and funcNons



NEW HORIZONS

Leverage open, public data

Use natural language and speech input

Learn from the users’ actions

Context-aware applications



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 [email protected]

Lisa Ba.le President [email protected] @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

Documents

web applica

i c i t y

whataboutbusiness applicanons

dierent contextsof use

workflow task

realwork tasksare oden

theywill taketheitemthatdoes

antoinedesaint exupry