![Page 1: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/1.jpg)
© 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
![Page 2: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/2.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015 2
© Design for Context
SIMPLICITY
S i m p l i c i t y
![Page 3: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/3.jpg)
@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
![Page 4: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/4.jpg)
@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
![Page 5: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/5.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
http://michaelgraves.com/
Industrial designer Michael Graves
![Page 6: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/6.jpg)
@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
![Page 7: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/7.jpg)
@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
![Page 8: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/8.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
![Page 9: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/9.jpg)
@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/
![Page 10: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/10.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015 10
© Design for Context
And yet…
Simplicity isn’t always simple.
![Page 11: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/11.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
I’ll know it when I see it…
![Page 12: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/12.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
12
![Page 13: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/13.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
13
![Page 14: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/14.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
14
![Page 15: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/15.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015 15
© Design for Context
What about business applicaNons?
![Page 16: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/16.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015 16
© Design for Context 16
Real work tasks are oden complex.
![Page 17: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/17.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015 17
© Design for Context
Many funcNonal requirements must be met to support business processes.
![Page 18: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/18.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015 18
© Design for Context
ApplicaNons oden are configurable to support many different contexts of use.
![Page 19: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/19.jpg)
@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
![Page 20: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/20.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
![Page 21: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/21.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
SIMPLE ≠ SIMPLISTIC
![Page 22: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/22.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015 22
© Design for Context
Design should be made as simple as possible, but no simpler.
![Page 23: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/23.jpg)
@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?
![Page 24: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/24.jpg)
@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
![Page 25: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/25.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Rethink the workflow FIND A NEW WAY
![Page 26: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/26.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Rethink the workflow FIND A NEW WAY
![Page 27: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/27.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Automate it FIND A NEW WAY
1
2
3
4
![Page 28: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/28.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Consider alternaNve channels and formats FIND A NEW WAY
![Page 29: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/29.jpg)
@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
![Page 30: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/30.jpg)
@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
![Page 31: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/31.jpg)
@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
![Page 32: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/32.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Push meaningful and relevant informaNon WHAT YOU NEED WHEN YOU NEED IT
![Page 33: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/33.jpg)
@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 >
![Page 34: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/34.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
OpNmize informaNon density WHAT YOU NEED WHEN YOU NEED IT
![Page 35: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/35.jpg)
@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
![Page 36: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/36.jpg)
@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
![Page 37: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/37.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Layer for progressive disclosure
+
+
-‐
WHAT YOU NEED WHEN YOU NEED IT
![Page 38: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/38.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Layer for progressive disclosure WHAT YOU NEED WHEN YOU NEED IT
![Page 39: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/39.jpg)
@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
![Page 40: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/40.jpg)
@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
![Page 41: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/41.jpg)
@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
![Page 42: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/42.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Reduce the number of clicks STRUCTURE FOR TASK EFFICIENCY
42
![Page 43: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/43.jpg)
@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…
![Page 44: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/44.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
c
Allow bulk acNons STRUCTURE FOR TASK EFFICIENCY
44
Reassign
![Page 45: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/45.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Recover from interrupNons STRUCTURE FOR TASK EFFICIENCY
Recently Viewed
![Page 46: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/46.jpg)
@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 ✔
>
>
![Page 47: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/47.jpg)
@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
![Page 48: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/48.jpg)
@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
![Page 49: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/49.jpg)
@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
![Page 50: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/50.jpg)
@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
![Page 51: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/51.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Break up long forms into manageable pieces
JUST ENOUGH
![Page 52: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/52.jpg)
@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
![Page 53: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/53.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Minimize clu.er
JUST ENOUGH
more …
more …
more …
>
Search
> >
![Page 54: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/54.jpg)
@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
![Page 55: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/55.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
CLEAR AND EASY-TO-USE INTERACTIONS Consistent and familiar controls
Direct manipulation
![Page 56: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/56.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Consistent and familiar controls CLEAR AND EASY-‐TO-‐USE INTERACTIONS
+
+
c
-‐
< >
![Page 57: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/57.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Direct manipulaNon CLEAR AND EASY-‐TO-‐USE INTERACTIONS
![Page 58: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/58.jpg)
@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
![Page 59: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/59.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Direct manipulaNon CLEAR AND EASY-‐TO-‐USE INTERACTIONS
![Page 60: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/60.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
CLEAR AND EASY-TO-USE INTERACTIONS Consistent and familiar controls
Direct manipulation
![Page 61: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/61.jpg)
@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
![Page 62: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/62.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Minimize visual noise
COMMUNICATE VISUALLY AND VERBALLY
![Page 63: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/63.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Minimize visual noise
COMMUNICATE VISUALLY AND VERBALLY
![Page 64: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/64.jpg)
@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
![Page 65: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/65.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Provide visualizaNons and visual cues COMMUNICATE VISUALLY AND VERBALLY
![Page 66: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/66.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Provide visualizaNons and visual cues COMMUNICATE VISUALLY AND VERBALLY
![Page 67: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/67.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Provide visualizaNons and visual cues COMMUNICATE VISUALLY AND VERBALLY
![Page 68: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/68.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Enhance appearance through visual design COMMUNICATE VISUALLY AND VERBALLY
![Page 69: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/69.jpg)
@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
![Page 70: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/70.jpg)
@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
![Page 71: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/71.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Leverage open, public data NEW HORIZONS
![Page 72: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/72.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Use natural language and speech input NEW HORIZONS
![Page 73: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/73.jpg)
@design4context Simplicity in Web Applica@on Design UXPA 2015
© Design for Context
Learn from the users’ acNons NEW HORIZONS
![Page 74: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/74.jpg)
@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
![Page 75: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/75.jpg)
@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
![Page 76: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/76.jpg)
@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
![Page 77: Simplicity in Web Application Design - UXPA2015](https://reader034.vdocument.in/reader034/viewer/2022042615/55c34ac8bb61eb9f1f8b478d/html5/thumbnails/77.jpg)
© 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