data driven design
DESCRIPTION
Building interactive prototypes is becoming a standard in today’s UX practice. This allows to simulate and test the complete workflow in apps and applications. The biggest drawback though: most interactive prototypes are confined to being able to link between screens and enter data to test the affordance of forms. This talk is about why it is important to build rich functional prototypes that focus on content and how this can be achieved. It gives an overview of the benefits and obstacles of data driven prototyping.TRANSCRIPT
![Page 1: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/1.jpg)
Memi Beltrame
Data Driven Design
UX Camp Zürich May 24. 2014
![Page 2: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/2.jpg)
Memi Beltrame
I make things fun and easy to use.
![Page 3: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/3.jpg)
Users Love their Data.
![Page 4: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/4.jpg)
![Page 5: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/5.jpg)
![Page 6: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/6.jpg)
Add complexity
![Page 7: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/7.jpg)
![Page 8: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/8.jpg)
Hence: Data Driven Design
![Page 9: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/9.jpg)
![Page 10: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/10.jpg)
Focus on Behaviour
![Page 11: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/11.jpg)
Content First will change your workflow.
![Page 12: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/12.jpg)
Asking the users the right questions at an early
stage.
![Page 13: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/13.jpg)
The point of DDD is to simulate everything
users can do with data.
![Page 14: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/14.jpg)
Things users can do with data• Read
• Enter new
• Edit & change existing
• Delete
• Search & Filter
• Combine
![Page 15: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/15.jpg)
The point of DDD is to simulate everything
users can do with data.
Simulation = Testing
![Page 16: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/16.jpg)
Well, do you test?
![Page 17: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/17.jpg)
![Page 18: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/18.jpg)
Testing is the best way to making needs visible.
![Page 19: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/19.jpg)
DDD Scenarios• A lot of different data.
• Similar data with small differences that matter.
• A lot of domain specific data.
![Page 20: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/20.jpg)
A lot of data
![Page 21: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/21.jpg)
Similar Data & Domain specific Data
![Page 22: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/22.jpg)
![Page 23: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/23.jpg)
Prototype Data:!(Fonds in an application !
for bankers)
VF - European Mid and Small Cap Equity B (Lux)!Aberdeen Global - Emerging Markets Equity A Acc!UBS (Lux) Medium Term Bond Fund - CHF P-acc!UBS (Lux) Medium Term Bond Fund - EUR P-acc!UBS (Lux) Medium Term Bond Fund - USD P-acc!
Real Data:
![Page 24: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/24.jpg)
Fake it till you make it.
![Page 25: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/25.jpg)
Things to fake• Realistic data
• Userroles (Authentication)
• State
![Page 26: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/26.jpg)
A Data Layer• Variables
(e.g. to change the language of the prototype)
• SessionMake it possible to have persistent data to test the whole chain of event.
• DatasetsSimulate a lot of data, e.g. 200 news-entries.
![Page 27: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/27.jpg)
Benchmarking
![Page 28: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/28.jpg)
BenchmarkingGanz Grischa!Find Infos to Places in Grischun !Paper Prototype 2 Screens + Lightbox
![Page 29: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/29.jpg)
BenchmarkingPrototype!!- Use different Tools - Stop time - See what works
![Page 30: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/30.jpg)
Tools• Balsamiq
• Prototyper
• Protostrap
![Page 31: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/31.jpg)
Tools
![Page 32: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/32.jpg)
Adobe Edge Reflow Balsamiq Axure Prototyper Protostrap
Templates ✖ ✔ ✔ ✔ ✔
Data ✖ ✖ ✖ ✔ ✔
Variables! ✖ ✖ (✔) ✔ ✔
Session ✖ ✖ ✔ ✔ ✔Testability on
Device ✔ ✖ ✔ ✔ ✔
Responsive ✔ ✖ ✔ ✔ ✔
GUI ✔ ✔ ✔ ✔ ✖
Reuse ✔ ✖ ✖ ✖ ✔
Tool comparison
![Page 33: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/33.jpg)
Prepare your designs for real data, or else…
![Page 34: Data Driven Design](https://reader033.vdocuments.net/reader033/viewer/2022060108/554d2263b4c905ca208b4cb7/html5/thumbnails/34.jpg)