simplicity in web application design - laura chessman, lisa battle and rachel sengers

Laura ChessmanPrincipal Consultant

[email protected]

Lisa BattlePresident

[email protected]@design4context

Simplicity in Web Application DesignUXPA 2015 Conference • 23 June 2015

@design4context Simplicity in Web Application Design UXPA 2015 2

S i m p l i c i t y


http://www.istockphoto.com/photo/white-and-beige-bedroom-with-chair-and-lamps-66012021?st=945ae7c


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 Application Design UXPA 2015

http://michaelgraves.com/

Industrial designer Michael Graves


“The architect should strive continually to simplify; the ensemble of the rooms should then be carefully considered that comfort and utility 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


“Perfection is finally attained 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


And yet…

Simplicity isn’t always simple.


I’ll know it when I see it…


What about business applications?


Real work tasks are often complex.


Many functional requirements must be met to support business processes.


Applications often 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/information need to be most obvious and which can be minimized or hidden?

3. Can context be used to focus on the most relevant information 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 automation, re-using data, defaults, or preferences?


FIND A NEW WAY

Rethink the workflow / task

Automate it

Consider alternative channels and formats


Rethink the workflowFIND A NEW WAY


Automate itFIND A NEW WAY

1

2

3

4


Consider alternative channels and formatsFIND 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 informationWHAT YOU NEED WHEN YOU NEED IT

To Do’s

Productivity

Group Activity


c


33

Customer Overview

Action Action Action More Actions

>


Optimize information densityWHAT YOU NEED WHEN YOU NEED IT


c

Optimize to support common tasksSTRUCTURE FOR TASK EFFICIENCY

35

Customer Overview


>

Recent Activity

Recent Touchpoints

Record Details

Remarks


Layer for progressive disclosureWHAT YOU NEED WHEN YOU NEED IT

15 6 11 19LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM



+

+

-

WHAT YOU NEED WHEN YOU NEED IT


Layer for progressive disclosureWHAT 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 EFFICIENCYReduce 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 clicksSTRUCTURE FOR TASK EFFICIENCY

41

Next course: March 15, 2015(2)

(10)

(1) Required by: July 30, 2015

(0)

(1) American Dental Association


Reduce the number of clicksSTRUCTURE FOR TASK EFFICIENCY

42


c

Eliminate steps through defaults and re-useSTRUCTURE FOR TASK EFFICIENCY

43

Event Name

Action Action Action

Registration

Event Details

RemarksAction

More Actions

>

Copy event…


c

Allow bulk actionsSTRUCTURE FOR TASK EFFICIENCY

44

Reassign


Recover from interruptionsSTRUCTURE 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 EFFICIENCYReduce 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 menusJUST ENOUGH

more …

more …

more …

more …

Filter


Break up long forms into manageable piecesJUST ENOUGH


Break up long forms into manageable piecesJUST ENOUGH

Step 1

Continue >Save & Close


Minimize clutterJUST 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 controlsCLEAR AND EASY-TO-USE INTERACTIONS

+

+

c

-

< >


Direct manipulationCLEAR AND EASY-TO-USE INTERACTIONS


c

Direct manipulation

Customer Overview


>

Recent Activity

Recent Touchpoints

Record Details

Remarks



Direct manipulationCLEAR AND EASY-TO-USE INTERACTIONS



Consistent and familiar controls

Direct manipulation


COMMUNICATE VISUALLY AND VERBALLYMinimize visual noise

Use conversational language

Provide visualizations and visual cues

Enhance appearance through visual design


Minimize visual noiseCOMMUNICATE VISUALLY AND VERBALLY


c

1

2

3


You’re a Genius!

COMMUNICATE VISUALLY AND VERBALLY


Provide visualizations and visual cuesCOMMUNICATE VISUALLY AND VERBALLY


Enhance appearance through visual designCOMMUNICATE VISUALLY AND VERBALLY


COMMUNICATE VISUALLY AND VERBALLYMinimize visual noise


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 dataNEW HORIZONS


Use natural language and speech inputNEW HORIZONS


Learn from the users’ actionsNEW HORIZONS


Context-aware applicationsNEW HORIZONS

Full application

Context-aware mobile version uses date, location and task to push most relevant info and functions


NEW HORIZONS

Leverage open, public data

Use natural language and speech input

Learn from the users’ actions

Context-aware applications


FIND A NEW WAYRethink the workflow / taskAutomate itConsider alternative channels and formats

WHAT THEY NEED WHEN THEY NEED ITPush meaningful and relevant informationOptimize information densityOptimize to support common tasksLayer for progressive disclosure

STRUCTURE FOR TASK EFFICIENCYReduce the number of clicksEliminate steps through defaults and re-useAllow bulk actionsRecover from interruptionsGuide step-by-step for infrequent tasks

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

CLEAR AND EASY-TO-USE INTERACTIONSConsistent and familiar controlsDirect manipulation

COMMUNICATE VISUALLY AND VERBALLYMinimize visual noiseUse conversational languageProvide visualizations and visual cuesEnhance appearance through visual design

THE FUTURE IS HERE!Leverage open, public dataUse natural language and speech inputLearn from the users’ actionsContext–aware applications

Laura ChessmanPrincipal Consultant

[email protected]

Lisa BattlePresident

[email protected]@design4context

Simplicity in Web Application DesignUXPA 2015 Conference • 23 June 2015

Thanks!

Presentation is on Slideshare – Go to www.designforcontext.com/publications

http://www.designforcontext.com/publications

http://www.designforcontext.com/publications

simplicity in web application design - laura chessman, lisa battle and rachel sengers

Design

design4context simplicity

web application design

simplicity isnt

informed design decisions

i c i t y

context of use

business applications

real work tasks