Prototyping data with coloured blocks
How I used coloured placeholder blocks to prototype changing data in an enterprise product
My team is in the middle of product discovery and quickly iterating through concepts to get feedback from users and stakeholders. It’s an enterprise product (internal users only) for reviewing data before it gets published. We wanted to validate the end-to-end flow and experience of the product first without getting bogged down in the details of the data so we used grey blocks to represent cells in a table.
I’ve used this pattern before but this time we tried something new: coloured blocks as placeholders for the data. These blocks showed that data on the page was different without showing the details, which saved us loads of time creating dummy data.
We used the coloured blocks in a few different ways.
1- Different colours represent unique rows
2- Mixing up the colours means it’s been refreshed or sorted
3- Coloured columns mean the data has changed
This worked really well to quickly show how a concept works. Users and stakeholders understood what the page was doing, which was what we were aiming for. We got feedback that there was a step missing in the flow which could easily be added in without changing lots of text on the prototype.
How this helped
Focused people’s attention on the end-to-end flow, not the details
We noticed that this helped focus people’s attention on how the flow of the prototype felt and less on the details. When there’s real data, people can’t help but look at them. With blocks, it’s more obvious this is not the real thing.
Saved time creating (enterprise) placeholder data
Creating placeholder data can be painful and there’s growing reasons not to use lorem ipsum. There’s lots of tools, like Craft, to create realistic data automatically but for enterprise products it’s harder and people will be quick to call out that data doesn’t look right. I’ve found it’s better to either use no data or realistic data.
What did you think?
I’d love to hear from readers and know what resonated: leave a comment or drop a message to gfenderux -at- gmail.com.
And if you try this, let me know how it went!