© 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
© Design for Context
SIMPLICITY
S i m p l i c i t y
@design4context Simplicity in Web Applica@on Design UXPA 2015 3
© Design for Context http://www.istockphoto.com/photo/white-and-beige-bedroom-with-chair-and-lamps-66012021?st=945ae7c
@design4context Simplicity in Web Applica@on Design UXPA 2015 4
© 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
© Design for Context
http://michaelgraves.com/
Industrial designer Michael Graves
@design4context Simplicity in Web Applica@on Design UXPA 2015 6
© Design for Context
“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
@design4context Simplicity in Web Applica@on Design UXPA 2015 7
© Design for Context
“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
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
@design4context Simplicity in Web Applica@on Design UXPA 2015 9
© Design for Context
http://www.smashingmagazine.com/2012/06/28/create-responsive-mobile-first-wordpress-theme/
@design4context Simplicity in Web Applica@on Design UXPA 2015 10
© Design for Context
And yet…
Simplicity isn’t always simple.
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
I’ll know it when I see it…
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
12
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
13
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
14
@design4context Simplicity in Web Applica@on Design UXPA 2015 15
© Design for Context
What about business applicaNons?
@design4context Simplicity in Web Applica@on Design UXPA 2015 16
© Design for Context 16
Real work tasks are oden complex.
@design4context Simplicity in Web Applica@on Design UXPA 2015 17
© Design for Context
Many funcNonal requirements must be met to support business processes.
@design4context Simplicity in Web Applica@on Design UXPA 2015 18
© Design for Context
ApplicaNons oden are configurable to support many different contexts of use.
@design4context Simplicity in Web Applica@on Design UXPA 2015 19
© Design for Context
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
© Design for Context
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
SIMPLE ≠ SIMPLISTIC
@design4context Simplicity in Web Applica@on Design UXPA 2015 22
© Design for Context
Design should be made as simple as possible, but no simpler.
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
FIND A NEW WAY
Rethink the workflow / task
Automate it
Consider alternative channels and formats
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Rethink the workflow FIND A NEW WAY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Rethink the workflow FIND A NEW WAY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Automate it FIND A NEW WAY
1
2
3
4
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Consider alternaNve channels and formats FIND A NEW WAY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
FIND A NEW WAY
Rethink the workflow / task
Automate it
Consider alternative channels and formats
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
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
© Design for Context
Push meaningful and relevant informaNon WHAT YOU NEED WHEN YOU NEED IT
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
OpNmize informaNon density WHAT YOU NEED WHEN YOU NEED IT
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
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
© Design for Context
Layer for progressive disclosure
+
+
-‐
WHAT YOU NEED WHEN YOU NEED IT
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Layer for progressive disclosure WHAT YOU NEED WHEN YOU NEED IT
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
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
© Design for Context
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
© Design for Context
Reduce the number of clicks STRUCTURE FOR TASK EFFICIENCY
42
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
c
Allow bulk acNons STRUCTURE FOR TASK EFFICIENCY
44
Reassign
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Recover from interrupNons STRUCTURE FOR TASK EFFICIENCY
Recently Viewed
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
Guide the user step-‐by-‐step for infrequent tasks STRUCTURE FOR TASK EFFICIENCY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
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
© Design for Context
Break up big lists and menus
JUST ENOUGH
more …
more …
more …
more …
Filter
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Break up long forms into manageable pieces
JUST ENOUGH
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Break up long forms into manageable pieces
JUST ENOUGH
Step 1
ConNnue > Save & Close
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Minimize clu.er
JUST ENOUGH
more …
more …
more …
>
Search
> >
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
CLEAR AND EASY-TO-USE INTERACTIONS Consistent and familiar controls
Direct manipulation
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Consistent and familiar controls CLEAR AND EASY-‐TO-‐USE INTERACTIONS
+
+
c
-‐
< >
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Direct manipulaNon CLEAR AND EASY-‐TO-‐USE INTERACTIONS
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
Direct manipulaNon CLEAR AND EASY-‐TO-‐USE INTERACTIONS
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
CLEAR AND EASY-TO-USE INTERACTIONS Consistent and familiar controls
Direct manipulation
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
Minimize visual noise
COMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Minimize visual noise
COMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
c
1
2
3
Use conversaNonal language
You’re a Genius!
COMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Provide visualizaNons and visual cues COMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Provide visualizaNons and visual cues COMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Provide visualizaNons and visual cues COMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Enhance appearance through visual design COMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
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
© Design for Context
Leverage open, public data NEW HORIZONS
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Use natural language and speech input NEW HORIZONS
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Learn from the users’ acNons NEW HORIZONS
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
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
© Design for Context
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
© Design for Context
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
© 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
Thanks!
Presenta@on is on Slideshare – Go to www.designforcontext.com/publica@ons
Top Related