Find out how real data can improve your prototyping process and bring UI designs to life
Data. It’s the not-so-secret sauce behind the success of the likes of Facebook, Amazon and Netflix. But when it comes to designing web and mobile interfaces, incorporating real data can feel pretty tricky. Shouldn’t we just stick to building pixel-perfect prototypes based on hypothetical (and comfortingly predictable) use cases?
Nice try, but no banana. Prototyping designs based on real data is a smart way to reap rewards, and it doesn’t have to be a headache if you choose the right prototyping tool (shameless Justinmind shout-out!).
Let’s take a look at the benefits of using real data in your UI prototyping process.
Prototyping with data in Justinmind: what’s possible
Justinmind has some of the most advanced data capacities of any prototyping tool out there. You can create interactive prototypes with data simulation, import real data, customize data visualization, add complex conditions and more. You can even interact with data when you simulate the prototype and use it to control events.
- Import real data or enter manual data directly into prototypes
- Visualize data in UX-friendly layouts to match your product aims
- Create Variables and Conditional Navigation with speedy drag-and-drop action
- Enable users to search and filter the data in different ways – sort, filter, predictive search, whatever you need
- Build forms that behave just like the real thing, with real user data
- Customize your data visualization elements to harmonize with your UI design
How to get started prototyping UIs with real data
Choose whether you want to display that data in a grid or a list (use your UX superpowers to figure out which layout you need), and customize the layout to meet your UI project needs. You can associate some of Justinmind’s UI widgets to your real world data, giving you additional control over the handling of data.
From there, it’s up to you what you want to prototype with the real data at your fingertips. Ecommerce sites, chat apps, advanced log-ins, security pages – a little bit of data goes a long way.
Once you’ve started prototyping with data, you can expect to reap these 5 benefits.
5 reasons why you should be prototyping with real data
Get stakeholder buy-in for your UI design
Stakeholders, whether that means investors, your manager or the guys from the development team, can be tricky to get on side. They understand that UX and UI are important, but they have other priorities too. Like turning a profit, or keeping up with the competition. How do you make sure that stakeholders support your UI design ideas and understand their value?
Using real data in prototypes can help. Let’s take an example case: you’re prototyping an eCommerce mobile app. You know that, for usability, products have to be displayed in a grid layout. This way, app users will be able to search specific fields and see results displayed intuitively.
An investor, however, might have a different idea – maybe the competition displays items in a list. So your stakeholder wants a list layout, come hell or high water. Get them on-side by prototyping with real data.
First off, add a Data Master to your web or app prototype. From there you can create a Data Grid. The grid will automatically expand to include all the records in your Data Master in neat columns – already pretty organized.
Add data manually as you prototype, and rearrange the default information as needed. You’ve got full control over what data is displayed and how; Justinmind even allows you to apply conditions to the Data Grid for complex outcomes.
Follow our step-by-step tutorial on using Data Grids.
You’ll have a greater chance of getting stakeholder buy-in if you can present them with high fidelity prototypes built around real world data, rather than theoretical cases built purely on pixels.
Still got questions about stakeholder buy-in for UX projects? We wrote a post about that.
Discover what you don’t know about your UI design
We’re willing to bet there are things you know you don’t know about your design idea. Hey, if you knew everything before you started, Design Thinking would be out of a job!
For example, maybe you’re struggling to figure out exactly how the structure of a log-in form impacts on return rates in a mobile app prototype. Rules of thumb are helpful, but they won’t get you to the heart of the user experience you’re building.
Instead of working off generalisations, you can create the log-in form based on real data and evaluate the true impact of the form on engagement rates.
It’s pretty simple – all you need is a Data Master with the names of example users and their passwords (you can input that manually or import a .csv file). Then you can whip up a log-in form by dragging and dropping text widgets and buttons (customize the UI elements to match your prototype’s branding).
Finally, Justinmind’s expression builder allows you to create the condition that checks if the user introduced in the log-in form matches any of the ones in the Data Master.
Pro-tip – By dragging a previously created Data Master to the canvas, a form is automatically created, and users can then enter information which is stored in the Master.
Done! Now you can run in-depth user tests on this data-driven prototype, monitoring engagement rates and abandonment based on the usability of the log-in form. Real world user testers using real world data with 100% high fidelity prototypes translates to fewer unknowns and better data-driven UI design.
Find out more in this tutorial.
Save time without compromising design
No one ever has enough time, especially UX designers. Another hour in the day, isn’t that the holy grail of UX (apart from delighted users, obviously)?
At Justinmind we get it – we’re a small team too! That’s why we wanted to speed up the process of prototyping with real data. So we came up with a nifty feature – the OnDataChange event trigger.
Say what now?! Don’t worry, OnDataChange is beautifully simple. Basically it’s a trigger that prompts events when a value changes in a Data List or Data Grid,
So, imagine you want to create a list of users and their online status – like you might see in a web app such as Skype. Once again you’re starting from a basic Data Master with real data added, associated with a Data List customized to your needs.
Once you’ve built the Events that change user status from Active to Offline, or vice versa, you can use OnDataChange to dictate the style of the list whenever a user goes from active to offline. Gray them out, change the background color, add a sad-face emoji – whatever you need.
That change will apply to all cases, saving you time and work when creating data-driven prototypes. You’re welcome 😉
Stay ahead of UI design trends
UI design is always changing. Whether it’s mobile-first, AR or navigation patterns, there’s always something new about to blow up in UI. That’s what makes it fun!
However, the relentless dynamism of UI and UX can also pose a challenge for hard-pressed UXers who need to stay on top of trends.
Take chatbots. As Mariya Yao laid out in Smashing Magazine, conversational interfaces can provide a whole hunk of UX opportunities, but a whole hunk of challenges too. How can UX designers get to grip with a new trend like bots?
Prototyping a conversational interface with real data is a good place to start. Now we’re not saying Justinmind can magic you up a chatty-kathy bot out of nowhere, but we can help you prototype and simulate a chat app which you can then test as a basic chatbot.
Instead of creating a Data Master with names, products or status information, like we’ve done up ’til now, you’ll create a Data Master with chunks of conversation. A customer query conversation might work, or a simple “Hey what’s up?” “Just Netflix and chill”, style interaction.
You can then prototype your chat interface with text bubbles, message times, user avatars and data grids. It’ll look just like a real chat, and you can make the prototype interactive with Events and Conditions. Voila! It’s not artificial intelligence, but it is one heck of a fancy functional prototype.
Our chat app tutorial explains how to use real data to do this.
Better user testing, better UI design iteration
You don’t need us to tell you that the more realistic a prototype is, the more profound the results of your usability testing. That’s not to say that testing wireframes is pointless – Justinmind loves wireframes! But there’s nothing like providing a soup-to-nuts testing experience with a fully functional prototype.
Amy Schade over at NN Group identifies a double benefit to using real user data when testing prototypes:
- reveal more diverse issues in the interface than if all users enter the same fake information
- participants more likely to relate to the assigned tasks and more involved in the study
To make testing as realistic as possible, you can ask testers to provide personal information and build that into your interface. From obvious stuff like email address to more confidential information, you can go as deep as you want. Just don’t forget to get user permission and to assuage user anxiety about handing over their details, or else you might get some drop-outs.
5 reasons to use real data in your web and mobile prototypes – final word
Designing with live data can seem scary, or just too arduous. Luckily, some prototyping tools do the heavy lifting for you. If you do choose a tool that lets you easily incorporate and manipulate real data in your designs, you’ll find that your ussability tests go deeper, your time goes further and your stakeholders go for your ideas.