Data driven prototyping goes far beyond the mere administration of content for prototyping purposes. It is a powerful tool to handle the needs arising from interfaces with extensive amounts of microcontent - tiny but important pieces of content, usually involved in microinteractions like transactions, changes or updates. Ever so often users are sensitive to minute changes of content - for example stock prices changing quickly or dates and times in news reflecting current time. In these cases it is important to be able to rely on dynamic data that simulates the behavior of the real content as close as possible. 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 and contains a wide range of examples of how data driven prototyping can make the difference between a good and a great prototype.

1. Memi Beltrame
Data Driven Design
Frontendconf 2014
Zurich, August 28. 2014

2. Memi Beltrame
I make things fun
and easy to use.
This is where I work.
This is where I teach.

3. Modern Web Design
is broken
„It’s 2014 and something is really broken with modern web
design.“

4. „This tweet actually sums it up very nicely.“

5. Function & Data
„What is broken mainly has to do with 2 things we really
care a lot about on the web: function and data.
Sites like the sketch before don’t have much function and
also don’t show much data. This talk will be about
designing for function and with data. In other words:“

6. This Talk is about
designing for use & scale

7. „First let me tell you a short story.“

8. „A few years ago I was picked to design the mobile version
of the Intranet of the Swiss Agency for Development and
Cooperation. They had a terrible Intranet and were really
afraid that the mobile version would be just another version
of the same cluttered interface, filled with and slowed down
by irrelevance.“

9. „I had been making mockups and wireframes with
balsamiq, but I had the feeling that this would not be an
approach that the people from the agency would
unterstand.
I decided to get rid of the abstraction of a PDF mockup.
Instead I created a functional prototype in HTML and CSS.“

10. „I will never forget the glow in
the eyes of the people from the
agency when I presented the
prototype. In fact I did not
present it at all. I gave it into
their hands. They just went
THIS IS EXACTLY WHAT WE
WANT.“

11. Users Love their Data.
„The reason why they loved it was that they saw something
with the data it would eventually be in there and only the
data that really mattered.
That was the moment of a revelation:
Users love their data.“

12. Users don’t relate
to Dummy data.

13. „So let’s go back to the beginning“

14. What’s
Going Wrong
Here?

15. Or Here?
Responsive Design

16. Or Here?
Mobile First

17. Or Here?
Multi-Device Ready

18. These approaches are Great.
But NOT Enough.

19. the focus is still
on the Delivery.

20. At Best Digital Media Adapts
to Different Devices.

21. Digital Media Must adapt to
individual User Roles, Needs
and Behaviours.

22. The key is Data.

23. Data Driven Design

24. A New Discipline

25. The point of DDD is to
simulate everything
users can do with data.

26. Things users can do
with data
• Read
• Enter new data
• Edit & change existing data
• Delete data
• Undo what they just deleted
• Search & Filter data
• Combine

27. DDD Scenarios
• A lot of different data.
• Similar data with small differences
that matter.
• A lot of domain specific data.

28. A lot of data
„One example would be the data for an large event like the
WWDC or a medical congress. These will have thousands
of participants and very complex sessions.“

29. !
3000 Participants
80+ Parameter

30. Nested Events

31. Similar & Domain specific Data

32. Similar & Domain specific Data
„This highly specialized
interface for foreign exchange
traders shows a lot of similar
data. The differences within
the data are small and don’t
mean much to us designers
but are of great importance to
the users.
There is a great amount of data, labels and functions that is
very specific to that domain. This data has to be accurate
otherwise the interface will irritate the users with its errors
and users will not trust the interface.“

33. Fake it till you make it.
„These systems receive their data from complex systems.
Attaching theses systems to the prototype is ia lot of work
and inefficient. This calls for a fake data layer, containing
realistic data without having to be the real data itself.“

34. „A few years ago I was working on a prototype for an
application for stock brokers.
The prototype was using what we thought was realistic
data for the names of the stock“

35. „The real data looked quite different though:“

36. Prototype Data:!
(Company shares in an
application for stock traders)
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:

37. „Mistakes like this can completely mess up your designs.
Or rather: your designs must be prepared for the proper
data, or else:“

39. Things to fake
• Realistic data
• User-roles (Authentication)
• State
„User-roles and state are equally important to be faked.
This means
• simulating a role-based experience without actually having a
real authentication layer
• having the prototype remember entered data to allow end-to-end
testing of complex scenarios.“

40. A Data Layer
• Variables
(e.g. to change the language of the prototype)
• Session
Make it possible to have persistent data to test
the whole chain of event.
• Datasets
Simulate a lot of data, e.g. 200 news-entries.

41. Benchmarking
„Looks like a lot of work That was the feedback I usually
got when ever I presented my prototypes and how I made
them to other designers.
One day I set out to find out how my approach was doing
against other tools. I decided to make a small benchmark.“

42. Benchmarking
„I drew a 3-page mobile application on paper. The app
was a tourist guide for the region of Grisons in Switzerland.
The start screen would be a list of resorts and each resort
would have its page with a picture gallery.“

43. Benchmarking
Ganz Grischa!
Find Infos to Places in Grisons
!
Paper Prototype
2 Screens + Lightbox

44. Benchmarking
Prototype!
!
- Use different Tools
- Stop time
- See what works

45. Tools
• Balsamiq
• Axure
• Protostrap (HTML / CSS / JS / PHP )

46. Protostrap (html / CSS /JS / PHP)
„While balsamiq and axure don’t need no introduction I
would like to quickly present Protostrap, the tool I’m using
for prototyping.
!
Right after the project for the Swiss Agency for
Development and Collaboration I started to put together
Protostrap. At the beginning it was just a means to stitch
templates together. Gradually it evolved into a very
powerful tool.“

47. Protostrap (html / CSS /JS / PHP)
• Based on Bootstrap
!
• Data Layer with
YAML or Google
Spreadsheets
• Persistent Data
• Authentication

48. Benchmarking
„The benchmark results were quite interesting. The main
result was the connection between complexity and time
spent to realize it in the prototype“

49. Time
Balsamiq
Complexity „Balsamiq was efficient for
really simple things. As soon as
complexity rose it got really
time consuming. In addition
there balsamiq can manage
only little complexity.“

50. „Axure was better but had the
same issue: time skyrocketed with
more complexity.“
Time
Balsamiq
Complexity AXURE

51. Time
Balsamiq
Complexity AXURE
Protostrap
„Protostrap was not very efficient
for simple things but handled
complexity much better than the
other tools. The increase was
much more linear.“

52. Benchmarking
„As a result of the benchmark I put together a list of criteria
I could use in future to quickly benchmark new tools.
!
This proved to be quite handy:“

53. Tool comparison
Templates
Does the tool have the abilty to have reusable parts? E.g. For footers or
navigation.
Variables!
Does it have key-value pairs to allow simple data based actions? E.g. Active
language or if the user is logged in.
Data
Does it have a data layer that allows you to have the data of items. E.g. a list of
resorts with their names, claim, address of the tourist office.
Large Data
Can you load a large set of data in order to allow the simulation of applications
with a lot of data? E.g. 2000 Participants to an event.
Session Is data kept in a user session, so that it can be manipulated?
Testability on
Device
Can it be tested on a device, especially mobile?
Responsive Does it provide a workflow to cover responsive projects?
GUI Does it have a graphical user interface?
Reuse in
Development
Can parts of the resulting prototype be reused in development?

54. Tool comparison
Adobe Edge
Reflow Balsamiq Axure Prototyper Protostrap
Templates ✖ ✔ ✔ ✔ ✔
Variables! ✖ ✖ (✔) ✔ ✔
Data ✖ ✖ ✖ ✔ ✔
Large Data ✖ ✖ ✖ ✖ ✔
Session ✖ ✖ ✔ ✔ ✔
Device ✔ ✖ ✔ ✔ ✔
Testability on
Responsive ✔ ✖ ✔ ✔ ✔
GUI ✔ ✔ ✔ ✔ ✖
Reuse in
✔ ✖ ✖ ✖ ✔
Development

55. Patterns for scale
„There is only little documentation on patterns that
deal with handling data, especially a lot of data.
I put together a few patterns that address that.“

56. Filtering a List with a lot of records
„Filtering long lists with a relatively small amount
columns can be straight forward. Each column
has a text filter. This is a pattern users get really
easily. Watch this video“

57. Lists with a lot of records AND Parameters
Parameter Operator Value
„With a large amount of parameters the display of all the
columns does not scale.
This calls for a more flexible way to filter data.
Filters are built with a parameter, an operator and a value“

58. Searchable
Dropdowns
„Parameters are found
using searchable
dropdowns.
!
This in itself is a very
effective pattern.“

59. Lists with a lot of records AND Parameters
Add multiple parameters
„Filters can be combined.“

60. Lists with a lot of records AND Parameters
Add filter logic
„This construction also allows for more complex logic“

61. Lists with a lot of records AND Parameters
„Watch this video“

62. Bulk Editing Data
„Once you have found the entries of data you need, you
must be able to act upon them. This means that bulk
editing data has to take into account that what you want to
edit is different from the criteria used for selection.
!
As an example:
You are looking for all Spanish speaking participants that
are staying at the Hotel Belvedere and you want to assign
them an emergency contact and an emergency number.“

63. Bulk Editing Data
„Watch this video“

64. Remember Selections
„If you work with pagination one useful thing to have is when the
interface remembers your selection.
Remembering a selection is a good thing in general, since you
might want to perform more than just aone action. E.g. After
setting the emergency contact you might want to send them an
email with this info.“

65. Searchable Multiselect
„Searchable multiselects are a handy extention of the
searchable dropdowns.“

66. Assigning groups
„Sometimes you have to
assign each item of a list to a
specific group.
With only a few items you
might want to have a group of
radio boxes or a select menu
to choose from.“
!
This however does not scale
for larger sets of items.

67. Assigning groups
„With large sets of items you can use the order of the elements in the list
itself to make groups.
Instead of assigning elements to a group you place groups as headlines
within a vertical list. Everything below is part of that group
!
This has the advantage of not having to touch each item to put it in a group.“

68. Assigning groups
„Watch this video“

69. Recap
Data Is not only about content,
it’s also about function.
!
- Provide a data layer
- Simulate processes from End To End
- Use advanced Patterns, they are powerful!

70. Thank you!
I’m @bratwurstkomet on Twitter
Protostrap: http://protostrap.ch