Home > Prototyping and wireframing > Data-driven prototyping for web & mobile: 3 UX data visualization tips for beginners

Data-driven applications have 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 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 prototyping 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 prototyping 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.


Download Justinmind and discover data-driven prototyping the right way!

DOWNLOAD NOW


Getting started with UX data visualization

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.

1-mobile-wireframe-confirmation-pop-up-data-masters

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.

Data-driven prototyping: Taking things to the next level

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.

simulate-log-in-form-ui-prototype

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 prototyping 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 prototyping worked for you.

download-justinmind-prototyping-tool-banner-1

Victor is the Product Manager at Justinmind. His specialties include business analysis, usability, requirements management and prototyping. When not busy doing that he is known to eat or sleep.

Download Free