How an application presents data plays a huge role, which is where UX designers come in.<\/p>\n\n\n\n
In this post, I am going to share tips and tricks UX designers can use to develop simple and clear data visualization, even when applying big data (data running into Gigabytes) for app dashboards, web pages, and so on.<\/p>\n\n\n\n
I\u2019ll leave the best languages for designing big data applications out of this conversation for now, though. <\/p>\n\n\n\n
Here’s how to design for data-heavy UX: <\/strong><\/p>\n\n\n\n\n\n Perhaps the best spot to start is to ask who your client is.<\/p>\n\n\n\n Maybe you\u2019ve cranked out a drop-dead gorgeous dashboard and delivered it to the client smack on time only for them to ask, \u201cSo, where can I do X, Y, and Z?\u201d<\/p>\n\n\n\n Ouch! That must have hurt.<\/p>\n\n\n\n As much as artificial intelligence and machine learning will keep improving, most organizations will still need human intervention to crunch uncategorized data. <\/p>\n\n\n\n And the best UX designers create products that will help solve a problem for the people who will be using data-driven applications.<\/p>\n\n\n\n How do they do it?<\/p>\n\n\n\n Erik Klimcz, the Senior Design Leader at Uber and Advanced Technologies Group, shared some actionable tips<\/a> on Medium. He suggests UX designers need to first identify, then define, users or personas for every project.<\/p>\n\n\n\n Because data-driven applications tend to be used by multiple personas within or outside of an organization, you need to identify those personas so you can organize your information architecture wireframes and tasks to meet everyone\u2019s needs.<\/p>\n\n\n\n That would make the design useful to the end user, your target audience\u2014your main client.<\/p>\n\n\n\n Here\u2019s an illustration:<\/p>\n\n\n\n Understanding your users\/personas can help you to customize the application\u2019s functionality to their needs\u2014which is the ultimate goal.<\/p>\n\n\n\n Also, you get to determine what type of data visualization tools to use for which client by answering important questions like:<\/p>\n\n\n\n For example:<\/strong><\/p>\n\n\n\n You can design a type of infographic that populates information based on a user\u2019s personal entries.<\/p>\n\n\n\n This kind of a data-driven app design would come in handy for situations where the user is required to or free to upload information as they get it or as they need to retract it to take further action.<\/p>\n\n\n\n One example is in customer service where a CS rep can enter a client\u2019s name or number to gather more information about them.<\/p>\n\n\n\n You can find this type of interactive data visualization tool in action over at Mahfix for You vs John Paulson<\/a>. It allows you to enter a number, and then it reports back information based on your input. It\u2019s pretty smooth!<\/p>\n\n\n\n It\u2019s easy to get caught up in designing an attractive UX that hooks you, but is, frankly, impractical to your client.<\/p>\n\n\n\n To be usable, an interface must be clear. \u201cClarity is job No. 1,\u201d to put it in the words of prolific UX designer Joshua Porter.<\/p>\n\n\n\n In fact, Joshua Porter has written a resourceful post on principles of user interface design<\/a>\u2014which still applies when designing big data applications.<\/p>\n\n\n\n So, to ramp up clarity around usability: Should designers use custom UX design or only go for tried and tested visualization tools, such as line charts?<\/p>\n\n\n\n That will depend on your client\/user cases.<\/p>\n\n\n\n Newer, custom data visualization tools keep popping up: infographics (both static and interactive), color-coded blocks, animations, 3D visualization, and so on.<\/p>\n\n\n\n However, there are really only four data presentation tools you should ever need:<\/p>\n\n\n\n Yet, you can go above just usability to create an attractive data-crunching interface.<\/p>\n\n\n\n Here\u2019s one way to do it:<\/p>\n\n\n\n Even better, designing for data-heavy interfaces could take a simpler turn:<\/p>\n\n\n\n Combining text and charts is one of the best ways to improve clarity while designing for a data-driven UX. Users can consume the visuals and read the text for improved clarity. But this approach might not work in all situations\u2014especially for colossal amounts of uncategorized data.<\/p>\n\n\n\n This design concept is more about usability and minimalism than, against popular belief, a dull two-dimension design. But flat design is neither boring nor dull. You get to utilize bright colors, clean-cut edges, and open spaces.<\/p>\n\n\n\n Using flat and material design is especially recommended for mobile applications, websites, and desktop browsers. Because the design is minimalist and does not hoard a ton of extra data (as in previous designs), it is fast-loading and, when designed to boost engagement, can help keep visitors viewing the page for longer.<\/p>\n\n\n\n This is great for data-driven websites or mobile sites that could benefit from the mobile-friendly, quick-loading, and fewer bounce rates (SEO and ranking benefits) that search engine algorithms are constantly scanning on the interwebs.<\/p>\n\n\n\n It\u2019s not just about making heavy, contextual data fluid and appealing (although that helps a lot). You also want to design data presentations that make it easy for the end user to:<\/p>\n\n\n\n How about we break out each of these elements?<\/p>\n\n\n\n Users should know what data is the most important<\/strong><\/p>\n\n\n\n One vital UX design principle is to observe and implement a hierarchy of information\u2014in this case, visual hierarchy.<\/p>\n\n\n\n In other words, a design that prioritizes the right metrics.<\/p>\n\n\n\n You want to organize, arrange, and prioritize the most important data first and supplement with any additional data later. Of course, the order of priority will vary depending on the application\u2019s user (from the personas defined above).<\/p>\n\n\n\n Not only does doing this declutter the dashboard, but it also helps direct the user\u2019s focus on what\u2019s important to them in an easy-to-follow, less overwhelming way.<\/p>\n\n\n\n Users should be able to comprehend the logical flow of data<\/p>\n\n\n\n Simplicity plays a major role in helping the user to connect the data to a certain outcome.<\/p>\n\n\n\n Similar to what\u2019s discussed in the previous point, you want to start with an overview grid of the overall data.<\/p>\n\n\n\n You can add an intuitive drop-down menu, which when the user clicks, slides down to reveal additional information, and then specific tasks or action items. People love this, and it’s gaining popularity already.<\/p>\n\n\n\n Here are two ways to help with the flow:<\/p>\n\n\n\n Hide additional information<\/strong><\/p>\n\n\n\n You can use clickable links or rollovers to reveal more information. Also, functions such as slide-to-reveal data and zoom-in-to-reveal are great ways to include additional information or highlight key data points. All using simple, natural gestures.<\/p>\n\n\n\n This allows users to click on the links or rollovers they perceive as important to their job and leave the ones they consider less important.<\/p>\n\n\n\n Again, you\u2019ll see how doing decent UX design persona research can help you identify what matters most to which user and when.<\/p>\n\n\n\n Use hover animations<\/strong><\/p>\n\n\n\n You can use hover animation effects to add more zing, engagement, and usefulness to the (seemingly) dull data.<\/p>\n\n\n\n Hover animations are particularly actionable for supplying additional information on specific tasks or items while helping to organize and clean up your data-driven application.<\/p>\n\n\n\n Still, there are more ways to use animation<\/a> to deliver useful and engaging data-heavy applications.<\/p>\n\n\n\n The thing about hiding information behind clickable links, slides, or rollovers is that you do the most work on the back-end side of things. So keep in mind that you need to design your architecture wireframes with this in mind from the get-go.<\/p>\n\n\n\n Users should be able to understand what the data means<\/strong><\/p>\n\n\n\n After organizing and prioritizing data on the dashboard, the next step is to break down the data into separate pages. If it is possible to categorize the information, be sure to allocate different pages\/screens for different data bundles.<\/p>\n\n\n\n This can fit in with both small and complex data-heavy application design projects, although it could take longer and demand more work on the back end.<\/p>\n\n\n\n In line with the \u201coverwhelming\u201d theme above, not only will doing this help your client\/users feel less overwhelmed, but they are likely to better crunch the figures on one page before moving on to the next, understanding the data one step at a time.<\/p>\n\n\n\n For example, a mission control UI might help your client get all data on one page, but it can be overwhelming to them over time\u2014not to mention squeezed, especially for different screen sizes.<\/p>\n\n\n\n Often a client will request this type of dashboard, but you should know better.<\/p>\n\n\n\n A mission control UI might look sophisticated, but it\u2019s not as smooth and easy to use as the one-page-at-a-time approach discussed before. The former might easily get in the way of delivering the meaning concealed in the mountain of data on display. And that\u2019s not useful.<\/p>\n\n\n\n Users should be able to understand the next step to take<\/strong><\/p>\n\n\n\n Following hot on the steps above, it becomes easier for users to identify and relate patterns in the raw data\u2014another key win to aim for when designing for data-heavy applications. When the data visualization tools you use help the users to make sense of big data, that\u2019s when you know you have done a great job.<\/p>\n\n\n\n Last but not least, you\u2019ll want to make your design agile.<\/p>\n\n\n\n As time whips by and users interact with your design, their feedback can prompt you to action and fix or redesign the entire thing. There is no one way to create a perfect design for crunching data, so keeping your design agile can help you make continuous improvements or a solid patch to start up from.<\/p>\n\n\n\n The purpose of UX design is to convey a message in a clear and actionable way. This is especially crucial for designing data-heavy applications. In this case, the business of good design is to help analysts or managers or end users make an informed decision.<\/p>\n\n\n\n And users cannot interpret and use raw data to inform a decision if they do not make good sense of it and how it is presented.<\/p>\n\n\n\n Designing for data-heavy UX projects should not be as exasperating as it seems. The above tips and tricks can help you figure out how to design for data-heavy interfaces. <\/p>\n\n\n\n
\n\n\n\nHow to Design Awesome Big Data Applications That Clients Love<\/h2>\n\n\n\n
![\"man](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/02\/2018.02.16-how-to-design-for-data-heavy-UX-applications-9578-copy.jpg\")
<\/figure>\n\n\n\n
\n\n\n\n1. Employ User Personas to Design Useful Data-Driven Dashboards<\/h3>\n\n\n\n
![\"example](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/02\/data-heavy-ux-design-layout-01-1.jpg\")
\n
\n\n\n\n2. Usability Over Style: Keeping It Simple, Clear, and Gracious<\/h3>\n\n\n\n
![\"Man](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/02\/2018.02.16-how-to-design-for-data-heavy-UX-applications-9694-copy.jpg\")
<\/figure>\n\n\n\n\n
![\"example](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/02\/tellius-data-heavy-ux-design-1.png\")
<\/a>![\"example](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/02\/goal-tracking-ui-data-heavy-ux-design.png\"){kind=tracking}
<\/a>
\n\n\n\n3. Combine Material and Flat Design\u2014Function Over Form<\/h3>\n\n\n\n
\n\n\n\n4. Accessibility over aesthetics<\/h3>\n\n\n\n
\n
![\"overhead](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/02\/2018.02.16-how-to-design-for-data-heavy-UX-applications-9618-copy.jpg\")
<\/figure>\n\n\n\n![\"gif](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/02\/av-event-dashboard-data-heavy-ux-design.gif\")
<\/a>
\n\n\n\n5. Allow Room for Improvement<\/h3>\n\n\n\n
Key takeaways<\/h2>\n\n\n\n