simplicity in web application design - laura chessman, lisa battle and rachel sengers
Post on 18-Aug-2015
107 Views
Preview:
TRANSCRIPT
Laura ChessmanPrincipal Consultant
laura@designforcontext.com
Lisa BattlePresident
lisa@designforcontext.com@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
@design4context Simplicity in Web Application Design UXPA 2015 3
http://www.istockphoto.com/photo/white-and-beige-bedroom-with-chair-and-lamps-66012021?st=945ae7c
@design4context Simplicity in Web Application Design UXPA 2015 4
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
@design4context Simplicity in Web Application Design UXPA 2015 6
“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
@design4context Simplicity in Web Application Design UXPA 2015 7
“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
@design4context Simplicity in Web Application Design UXPA 2015
@design4context Simplicity in Web Application Design UXPA 2015 9
@design4context Simplicity in Web Application Design UXPA 2015 10
And yet…
Simplicity isn’t always simple.
@design4context Simplicity in Web Application Design UXPA 2015
I’ll know it when I see it…
@design4context Simplicity in Web Application Design UXPA 2015 12
@design4context Simplicity in Web Application Design UXPA 2015 13
@design4context Simplicity in Web Application Design UXPA 2015 14
@design4context Simplicity in Web Application Design UXPA 2015 15
What about business applications?
@design4context Simplicity in Web Application Design UXPA 2015 1616
Real work tasks are often complex.
@design4context Simplicity in Web Application Design UXPA 2015 17
Many functional requirements must be met to support business processes.
@design4context Simplicity in Web Application Design UXPA 2015 18
Applications often are configurable to support many different contexts of use.
@design4context Simplicity in Web Application 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
@design4context Simplicity in Web Application Design UXPA 2015
@design4context Simplicity in Web Application Design UXPA 2015
SIMPLE ≠ SIMPLISTIC
@design4context Simplicity in Web Application Design UXPA 2015 22
Design should be made as simple as possible, but no simpler.
@design4context Simplicity in Web Application 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/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?
@design4context Simplicity in Web Application Design UXPA 2015 24
FIND A NEW WAY
Rethink the workflow / task
Automate it
Consider alternative channels and formats
@design4context Simplicity in Web Application Design UXPA 2015
Rethink the workflowFIND A NEW WAY
@design4context Simplicity in Web Application Design UXPA 2015
Rethink the workflowFIND A NEW WAY
@design4context Simplicity in Web Application Design UXPA 2015
Automate itFIND A NEW WAY
1
2
3
4
@design4context Simplicity in Web Application Design UXPA 2015
Consider alternative channels and formatsFIND A NEW WAY
@design4context Simplicity in Web Application Design UXPA 2015
FIND A NEW WAY
Rethink the workflow / task
Automate it
Consider alternative channels and formats
@design4context Simplicity in Web Application 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
@design4context Simplicity in Web Application Design UXPA 2015
Push meaningful and relevant informationWHAT YOU NEED WHEN YOU NEED IT
To Do’s
Productivity
Group Activity
@design4context Simplicity in Web Application Design UXPA 2015
Push meaningful and relevant informationWHAT YOU NEED WHEN YOU NEED IT
@design4context Simplicity in Web Application Design UXPA 2015
c
Push meaningful and relevant informationWHAT YOU NEED WHEN YOU NEED IT
33
Customer Overview
Action Action Action More Actions
>
@design4context Simplicity in Web Application Design UXPA 2015
Optimize information densityWHAT YOU NEED WHEN YOU NEED IT
@design4context Simplicity in Web Application Design UXPA 2015
c
Optimize to support common tasksSTRUCTURE FOR TASK EFFICIENCY
35
Customer Overview
Action Action Action More Actions
>
Recent Activity
Recent Touchpoints
Record Details
Remarks
@design4context Simplicity in Web Application Design UXPA 2015
Layer for progressive disclosureWHAT YOU NEED WHEN YOU NEED IT
15 6 11 19LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
@design4context Simplicity in Web Application Design UXPA 2015
Layer for progressive disclosure
+
+
-
WHAT YOU NEED WHEN YOU NEED IT
@design4context Simplicity in Web Application Design UXPA 2015
Layer for progressive disclosureWHAT YOU NEED WHEN YOU NEED IT
@design4context Simplicity in Web Application 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
@design4context Simplicity in Web Application Design UXPA 2015
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
@design4context Simplicity in Web Application Design UXPA 2015
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
@design4context Simplicity in Web Application Design UXPA 2015
Reduce the number of clicksSTRUCTURE FOR TASK EFFICIENCY
42
@design4context Simplicity in Web Application Design UXPA 2015
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…
@design4context Simplicity in Web Application Design UXPA 2015
c
Allow bulk actionsSTRUCTURE FOR TASK EFFICIENCY
44
Reassign
@design4context Simplicity in Web Application Design UXPA 2015
Recover from interruptionsSTRUCTURE FOR TASK EFFICIENCY
Recently Viewed
@design4context Simplicity in Web Application Design UXPA 2015
Guide the user step-by-step for infrequent tasks STRUCTURE FOR TASK EFFICIENCY
1 2 3✔
>>
@design4context Simplicity in Web Application Design UXPA 2015
Guide the user step-by-step for infrequent tasks STRUCTURE FOR TASK EFFICIENCY
@design4context Simplicity in Web Application Design UXPA 2015
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
@design4context Simplicity in Web Application Design UXPA 2015
REDUCE TO “JUST ENOUGH”
Break up big lists and menus
Break up long forms
Minimize clutter
@design4context Simplicity in Web Application Design UXPA 2015
Break up big lists and menusJUST ENOUGH
more …
more …
more …
more …
Filter
@design4context Simplicity in Web Application Design UXPA 2015
Break up long forms into manageable piecesJUST ENOUGH
@design4context Simplicity in Web Application Design UXPA 2015
Break up long forms into manageable piecesJUST ENOUGH
Step 1
Continue >Save & Close
@design4context Simplicity in Web Application Design UXPA 2015
Minimize clutterJUST ENOUGH
more …
more …
more …
>
Search
>>
@design4context Simplicity in Web Application Design UXPA 2015
REDUCE TO “JUST ENOUGH”
Break up big lists and menus
Break up long forms
Minimize clutter
@design4context Simplicity in Web Application Design UXPA 2015
CLEAR AND EASY-TO-USE INTERACTIONS
Consistent and familiar controls
Direct manipulation
@design4context Simplicity in Web Application Design UXPA 2015
Consistent and familiar controlsCLEAR AND EASY-TO-USE INTERACTIONS
+
+
c
-
< >
@design4context Simplicity in Web Application Design UXPA 2015
Direct manipulationCLEAR AND EASY-TO-USE INTERACTIONS
@design4context Simplicity in Web Application Design UXPA 2015 58
c
Direct manipulation
Customer Overview
Action Action Action More Actions
>
Recent Activity
Recent Touchpoints
Record Details
Remarks
CLEAR AND EASY-TO-USE INTERACTIONS
@design4context Simplicity in Web Application Design UXPA 2015
Direct manipulationCLEAR AND EASY-TO-USE INTERACTIONS
@design4context Simplicity in Web Application Design UXPA 2015
CLEAR AND EASY-TO-USE INTERACTIONS
Consistent and familiar controls
Direct manipulation
@design4context Simplicity in Web Application Design UXPA 2015
COMMUNICATE VISUALLY AND VERBALLYMinimize visual noise
Use conversational language
Provide visualizations and visual cues
Enhance appearance through visual design
@design4context Simplicity in Web Application Design UXPA 2015
Minimize visual noiseCOMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Application Design UXPA 2015
Minimize visual noiseCOMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Application Design UXPA 2015
c
1
2
3
Use conversational language
You’re a Genius!
COMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Application Design UXPA 2015
Provide visualizations and visual cuesCOMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Application Design UXPA 2015
Provide visualizations and visual cuesCOMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Application Design UXPA 2015
Provide visualizations and visual cuesCOMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Application Design UXPA 2015
Enhance appearance through visual designCOMMUNICATE VISUALLY AND VERBALLY
@design4context Simplicity in Web Application Design UXPA 2015
COMMUNICATE VISUALLY AND VERBALLYMinimize visual noise
Use conversational language
Provide visualizations and visual cues
Enhance appearance through visual design
@design4context Simplicity in Web Application Design UXPA 2015
NEW HORIZONS
Leverage open, public data
Use natural language and speech input
Learn from the users’ actions
Context-aware applications
@design4context Simplicity in Web Application Design UXPA 2015
Leverage open, public dataNEW HORIZONS
@design4context Simplicity in Web Application Design UXPA 2015
Use natural language and speech inputNEW HORIZONS
@design4context Simplicity in Web Application Design UXPA 2015
Learn from the users’ actionsNEW HORIZONS
@design4context Simplicity in Web Application Design UXPA 2015
Context-aware applicationsNEW HORIZONS
Full application
Context-aware mobile version uses date, location and task to push most relevant info and functions
@design4context Simplicity in Web Application Design UXPA 2015
NEW HORIZONS
Leverage open, public data
Use natural language and speech input
Learn from the users’ actions
Context-aware applications
@design4context Simplicity in Web Application Design UXPA 2015
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
laura@designforcontext.com
Lisa BattlePresident
lisa@designforcontext.com@design4context
Simplicity in Web Application DesignUXPA 2015 Conference • 23 June 2015
Thanks!
Presentation is on Slideshare – Go to www.designforcontext.com/publications
top related