Data-driven UI design: 3 tips to prototype interfaces with real data
Everything you need to know about data driven design and web prototypes
Data driven design has never been hotter: Uber uses mobile data to improve its services, and even influence urban design; Facebook just announced its support for an incubator for data driven design startups in Paris; and VentureBeat was named 2017 as “the year of data”.
Visualizing data in a mobile or web app is, however, no picnic for developers and designers. Building UIs that live up to UX best practices while accommodating a large amount of data poses a challenge: how do you present big data to users accessibly?
Data driven UI can help solve those challenges, especially when you’re armed with a wireframing tool that lets you create interactive, data driven prototypes with real data that can be customized, filtered and paginated.
Let’s check out how data driven design can supercharge your UI designs and solve common data visualization niggles.
UX data visualization with Justinmind
With Justinmind prototyping tool, not only can you import real data into high fidelity prototypes and wireframes, but you can also interact with that data as if it were a fully functional application, without having to worry about coding.
- Import real data or enter manual data directly into the prototype
- Visualize data in UX-friendly data lists and grids
- Use simple drag and drop actions to create Variables and Conditional Navigation
- 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
- Customize your data visualization elements to harmonize with your UI design
Testing data visualization in a web or app prototype provides an opportunity to prioritize user experience and usability; it also means you can run ideas by stakeholders and ensure that their data needs, as well as the users’, are being met. This is one of the key tenets of data driven design.
Download Justinmind and do data driven design the right way!
Data driven UI: getting started
First of all, download Justinmind if you haven’t already. Once you’ve created a web or mobile prototype, you can either import existing data or manually enter data right there into the interface, storing the data in a Data Master. Data masters give you the power to prototype advanced confirmation pop ups, wish lists, to-do lists and more.
The information stored in the Data Master can be visualized as user-friendly lists or grids. Data Grids mean you can create searches by filtering real data and applying conditions to the search, just like an eCommerce product marketplace that allows shoppers to search specific fields. In UX terms, data grids allow you show links or relationships between elements. Data lists are great for presenting large amounts of information without compromising UX, as they allow you to reveal select fields.
Both lists and grids are fully customizable and editable, right down to spacing and fonts. They’re also 100% interactive – use them in user testing to watch how users navigate through your app, then iterate on the findings.
Taking things to the next level with data driven prototyping
It’s not enough just to visualize data in the UI in a user-friendly way; Justinmind also makes that data interactive. Take our Variables feature, which allows data to be entered and saved during prototype simulation. Take the log-in form below – the user enters their details and, that data is transferred over to a sign in screen; all you need to do is drag and drop the Variable.
Data can also drive form design in Justinmind. 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. Plus searches can then be performed on that fresh data, making the experience truly interactive and realistic.
Data driven design and UX – the takeaway
Data visualization is crucial to giving both you and stakeholders an understanding of how a mobile or web app is going to work. Visualizing that data in a wireframe or prototype is an ideal way to validate your ideas before going to code, ensuring that both user experience and business goals are served by the UI.
We’d love to hear about your experience visualizing and interacting with data in Justinmind. Go ahead and tell us how our data driven design worked for you.
- The ultimate mockup tool to design websites and mobile appsOur powerful mockup tool lets you create and share highly interactive mockups, while getting feedback on every aspect. Your whole team can benefit from enhanced collaboration and seamless developer-designer handoff. And best of all? It's absolutely free to download.