Download - Data Driven Design

Transcript
Page 1: Data Driven Design

Memi Beltrame

Data Driven Design

UX Camp Zürich May 24. 2014

Page 2: Data Driven Design

Memi Beltrame

I make things fun and easy to use.

Page 3: Data Driven Design

Users Love their Data.

Page 4: Data Driven Design
Page 5: Data Driven Design
Page 6: Data Driven Design

Add complexity

Page 7: Data Driven Design
Page 8: Data Driven Design

Hence: Data Driven Design

Page 9: Data Driven Design
Page 10: Data Driven Design

Focus on Behaviour

Page 11: Data Driven Design

Content First will change your workflow.

Page 12: Data Driven Design

Asking the users the right questions at an early

stage.

Page 13: Data Driven Design

The point of DDD is to simulate everything

users can do with data.

Page 14: Data Driven Design

Things users can do with data• Read

• Enter new

• Edit & change existing

• Delete

• Search & Filter

• Combine

Page 15: Data Driven Design

The point of DDD is to simulate everything

users can do with data.

Simulation = Testing

Page 16: Data Driven Design

Well, do you test?

Page 17: Data Driven Design
Page 18: Data Driven Design

Testing is the best way to making needs visible.

Page 19: Data Driven Design

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

A lot of data

Page 21: Data Driven Design

Similar Data & Domain specific Data

Page 22: Data Driven Design
Page 23: Data Driven Design

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

Fake it till you make it.

Page 25: Data Driven Design

Things to fake• Realistic data

• Userroles (Authentication)

• State

Page 26: Data Driven Design

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

Benchmarking

Page 28: Data Driven Design

BenchmarkingGanz Grischa!Find Infos to Places in Grischun !Paper Prototype 2 Screens + Lightbox

Page 29: Data Driven Design

BenchmarkingPrototype!!- Use different Tools - Stop time - See what works

Page 30: Data Driven Design

Tools• Balsamiq

• Prototyper

• Protostrap

Page 31: Data Driven Design

Tools

Page 32: Data Driven Design

Adobe Edge Reflow Balsamiq Axure Prototyper Protostrap

Templates ✖ ✔ ✔ ✔ ✔

Data ✖ ✖ ✖ ✔ ✔

Variables! ✖ ✖ (✔) ✔ ✔

Session ✖ ✖ ✔ ✔ ✔Testability on

Device ✔ ✖ ✔ ✔ ✔

Responsive ✔ ✖ ✔ ✔ ✔

GUI ✔ ✔ ✔ ✔ ✖

Reuse ✔ ✖ ✖ ✖ ✔

Tool comparison

Page 33: Data Driven Design

Prepare your designs for real data, or else…

Page 34: Data Driven Design
Page 35: Data Driven Design

Thank you!

I’m @bratwurstkomet on Twitter Protostrap: http://protostrap.ch