Memi Beltrame

Data Driven Design

Frontendconf 2014 Zurich, August 28. 2014

Memi Beltrame

I make things fun and easy to use.

This is where I work.

This is where I teach.

Modern Web Design is broken

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

„This tweet actually sums it up very nicely.“

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:“

This Talk is about designing for use & scale

„First let me tell you a short story.“

„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.“

„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.“

„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.“

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.“

Users don’t relate to Dummy data.

„So let’s go back to the beginning“

What’s Going Wrong

Here?

Or Here?

Responsive Design

Mobile First

Or Here?

Multi-Device Ready

Or Here?

These approaches are Great.

But NOT Enough.

the focus is still on the Delivery.

At Best Digital Media Adapts to Different Devices.

Digital Media Must adapt to individual User Roles, Needs

and Behaviours.

The key is Data.

Data Driven Design

A New Discipline

The point of DDD is to simulate everything

users can do with data.

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

DDD Scenarios• A lot of different data.

• Similar data with small differences that matter.

• A lot of domain specific data.

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.“

!

3000 Participants 80+ Parameter

Nested Events

Similar & Domain specific Data

Similar & Domain specific Data

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.“

„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.

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.“

„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“

„The real data looked quite different though:“

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:

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

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.“

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.

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.“

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.“

Benchmarking

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

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

Tools

• Balsamiq

• Axure

• 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.“

Protostrap (html / CSS /JS / PHP)

Protostrap (html / CSS /JS / PHP)

• Based on Bootstrap!

• Data Layer withYAML or Google Spreadsheets

• Persistent Data

• Authentication

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

Benchmarking

Complexity

Time

Balsamiq

„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.“

Complexity

Time

Balsamiq

AXURE

„Axure was better but had the same issue: time skyrocketed with more complexity.“

Complexity

Time

Balsamiq

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.“

„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:“

Benchmarking

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?

Tool comparison

Adobe Edge Reflow Balsamiq Axure Prototyper Protostrap

Templates ✖ ✔ ✔ ✔ ✔

Variables! ✖ ✖ (✔) ✔ ✔

Data ✖ ✖ ✖ ✔ ✔

Large Data ✖ ✖ ✖ ✖ ✔

Session ✖ ✖ ✔ ✔ ✔Testability on

Device ✔ ✖ ✔ ✔ ✔

Responsive ✔ ✖ ✔ ✔ ✔

GUI ✔ ✔ ✔ ✔ ✖Reuse in

Development ✔ ✖ ✖ ✖ ✔

Tool comparison

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.“

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“

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“

Searchable Dropdowns

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

Lists with a lot of records AND Parameters

Add multiple parameters

„Filters can be combined.“

Lists with a lot of records AND Parameters

Add filter logic

„This construction also allows for more complex logic“

Lists with a lot of records AND Parameters

„Watch this video“

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.“

Bulk Editing Data

„Watch this video“

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.“

Searchable Multiselect

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

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.

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.“

Assigning groups

„Watch this video“

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!

Thank you!

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