{"id":13468,"date":"2017-11-13T11:00:37","date_gmt":"2017-11-13T11:00:37","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13468"},"modified":"2020-12-21T11:29:51","modified_gmt":"2020-12-21T11:29:51","slug":"designing-data-driven-interfaces","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/","title":{"rendered":"Designing Data-Driven User Interfaces"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script type=\"application\/ld+json\"> {\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"headline\": \"\n            Designing Data-Driven User Interfaces | Marvel Blog - Marvel Blog        \",\n  \"about\": [\n    {\"@type\": \"Thing\",\"name\": \"Designing\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Design\"}, \n    {\"@type\": \"Thing\",\"name\": \"Interfaces\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/User_interface\"}, \n    {\"@type\": \"Thing\",\"name\": \"Data\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Internet\"}\n  ],\n  \"mentions\": [\n    {\"@type\": \"Thing\",\"name\": \"Big Data\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Big_data\"}, \n    {\"@type\": \"Thing\",\"name\": \"Dashboard\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Dashboard_(business)\"}, \n    {\"@type\": \"Thing\",\"name\": \"Analytics\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Analytics\"}, \n    {\"@type\": \"Thing\",\"name\": \"companies\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Company\"}, \n    {\"@type\": \"Thing\",\"name\": \"story\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Narrative\"}, \n    {\"@type\": \"Thing\",\"name\": \"meaningful\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Semantics\"}, \n    {\"@type\": \"Thing\",\"name\": \"product\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Product_(business)\"}\n  ]\n}\n<\/script>\u201cDashboard\u201d, \u201cBig Data\u201d, \u201c<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/designing-ux-data-dashboard\/\">Data visualization<\/a>\u201d, \u201cAnalytics\u201d \u2014 there\u2019s been an explosion of people and companies looking to do interesting things with their data. I've been lucky to work on dozens of data-driven interfaces throughout my career and I wanted to share some thoughts on how to arrive at a distinct and meaningful product.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Many people have already tackled this topic, so I'm going to try and stick to the parts of our process that have the most impact.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Different users, different data<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whenever you're designing complex systems there will inevitably be multiple users or personas to design for. Executives, managers, and analysts are common personas that each have their own workflows and data needs.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Whenever you're designing complex systems there will inevitably be multiple users or personas to design for.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Defining good personas and generating insights is an art within itself, and it\u2019s not something I\u2019m going to detail here. If you're curious about how to do this, check out this <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.cooper.com\/journal\/2001\/08\/perfecting_your_personas\">helpful post<\/a> from <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.cooper.com\/\">Cooper<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">The important thing to remember about personas is to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">identify them upfront<\/strong> and organize your information architecture tasks and wireframes around them.<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Below is a deliverable we used for a healthcare reporting application we worked on last year. The system has distinct users each requiring their own data workflows. Once we established the key personas we included them alongside our deliverables with each review session.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1s-bpjeKSuGpNDQWYjYGI_w.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1s-bpjeKSuGpNDQWYjYGI_w.jpeg\" alt=\"Notice how the personas top each artboard. Our clients have been receptive to this approach.\" width=\"1200\" height=\"955\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Notice how the personas top each artboard. Our clients have been receptive to this approach.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Presenting artwork to a room of clients can be a difficult task. Whether you're explaining wireframes and flow diagrams or debating visual treatments, it\u2019s hard to keep everyone tracking to your vision.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Organizing your artwork by personas will help you (and your clients) stay on point during these discussions.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Shape the\u00a0page<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One technique I've picked up over the years is the concept of shaping the page. The core idea is really simple:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"Show the user what they <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">need<\/strong> to see first, then structure the remainder of the page based on the user story or hierarchy of information.\"<\/span><br \/>\nThe concept of shaping the page is a core principle of writing prose (and many other forms of communication), and something I became intimate with after <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.amazon.com\/Design-Software-Developers-Erik-Klimczak\/dp\/111994290X\/ref=sr_1_2?ie=UTF8&amp;qid=1433869795&amp;sr=8-2&amp;keywords=design+for+software&amp;pebp=1433869796086&amp;perid=1XDJZ606Z4PEA3NXKNKY\">writing a book<\/a>. Over the years I've spent a lot of time with the book \u201c<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.amazon.com\/Style-Basics-Clarity-Grace-4th\/dp\/0205830765\/ref=sr_1_2?s=books&amp;ie=UTF8&amp;qid=1433869993&amp;sr=1-2&amp;keywords=style+the+basics+of+clarity+and+grace&amp;pebp=1433869997336&amp;perid=07F6Z45EC9CA2930KW8V\">Style: The Basics of Clarity and Grace<\/a>\u201d. Aside from being an excellent reference for writing, it describes the concept eloquently:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"When you start with distractions, your audience has a hard time seeing not just what each element is about, but the focus of the entire passage.\"<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is a useful principle to keep in mind when designing UX. Below are two common approaches we use to shape the page.<\/p>\n<div id=\"attachment_6580\" style=\"width: 2073px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/14oQgegXVJ5y2-tUsPMlWUg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/14oQgegXVJ5y2-tUsPMlWUg.png\" alt=\"Give your dashboards some structure. Ask yourself \u2014 What story am I telling with this information?\" width=\"2063\" height=\"681\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Give your dashboards some structure. Ask yourself \u2014 What story am I telling with this information?<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Many of the dashboards and data viz projects I see popup on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.behance.net\/search?content=projects&amp;sort=appreciations&amp;time=week&amp;search=dashboard\">behance<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/search?q=dashboard\">dribbble<\/a> are beautifully designed (visually) but are often overwhelmingly <em>underwhelming<\/em>. They are either A) a myriad of graph widgets arranged in a pinterest-style layout with no hierarchy or B) over-designed visualizations that aren't appropriate for the data.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1690px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1OKKE-8wRnP6Y7nnDgH4uQQ.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1OKKE-8wRnP6Y7nnDgH4uQQ.jpeg\" alt=\"The left image shows an overwhelming approach to data vis. The right is an example of ornamentation that detracts from the point of the\u00a0data.\" width=\"1680\" height=\"712\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">The left image shows an overwhelming approach to data vis. The right is an example of ornamentation that detracts from the point of the\u00a0data.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the image above (on the left), the reporting dashboard takes a Mission Control approach to presenting the information\u2026which is pretty overwhelming. To avoid this, we try to approach these types of interfaces by <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">curating the information<\/strong> more like you're reading a magazine article.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Not to say there isn't a time and place for a <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/spaceflight.nasa.gov\/gallery\/images\/station\/crew-36\/hires\/jsc2013e066435.jpg\">mission control UI<\/a>\u2026I personally would love to design something like that. But for most situations seeing everything all the time is unnecessary.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The key thing to consider \u2014 <\/strong>avoid creating a smattering of visualizations<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">. <\/strong>Shape the information on the page so the user is presented with key information first, then follow it up with supporting content.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Choose the *right* visualizations<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are many (too many) designs floating around that misuse charts in favor of aesthetics.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The worst part is \u2014 these \u201cbad habits\u201d seem to be multiplying. Everywhere I look, I see area charts that should be pie graphs or line charts that should be bar graphs. So let\u2019s try to stop this together\u2026 Here\u2019s a few tips for doing your data justice:<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Start with the\u00a0data<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s not sexy \u2014 raw tabular rows of data. However, it\u2019s the best place to start. It will help you start thinking about what variables are available in the data and how the various data entities are related.<\/p>\n<div id=\"attachment_6580\" style=\"width: 2008px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1l2C0HVaLZ2PBgZ86O4vKzQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1l2C0HVaLZ2PBgZ86O4vKzQ.png\" alt=\"The flat nature of raw data will help you think through relationships between entities in the\u00a0system.\" width=\"1998\" height=\"1119\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">The flat nature of raw data will help you think through relationships between entities in the\u00a0system.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Aside from staring blankly at rows of data and hoping ideas eventually slip into your subconscious, you can be a little more proactive by checking out these great resources to help uncover interesting connections:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/data-lab\/introducing-charted-15161b2cd71e\">Charted<\/a> \u2014 a tool developed by Medium that automatically visualizes data.<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@nickkovacevich\/designing-better-charts-with-google-sheets-illustrator-and-sketch-bbdae473cf9\">Designing Better charts with Google Sheets, Illustrator, and Sketch<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.tableau.com\/\">Tableau<\/a> \u2014 This tool is one of the best out there, but very expensive.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There is no silver bullet for this part of the process<\/strong>. Don\u2019t be afraid to dive into the data and try making basic charts by mixing and matching different variables. It takes time, but it\u2019s worth it. Some of the best ideas I've come up with started with tinkering around with raw data files.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Working with discrete vs. continuous data<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It took me a while to realize this, some graphs do a better job of articulating your data than others. It\u2019s easy to pick charts that look good in your composition and hope your data works out. I've been guilty of doing this myself many times (I love me a good scatter plot).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"Depending on the type of data you're working with some types of visualizations work better than others. One way to choose the appropriate chart is to evaluate the type of data you have.\"<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are two main types of data:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Discrete Data <\/strong>\u2014 distinct values you can count. For example, a number of goals scored or Facebook likes.<\/p>\n<div id=\"attachment_6580\" style=\"width: 985px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1Y9d0imvuU2E1BOn3emWYTg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1Y9d0imvuU2E1BOn3emWYTg.png\" alt=\"Bar charts work best for discrete\u00a0data\" width=\"975\" height=\"512\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Bar charts work best for discrete\u00a0data<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Continuous Data \u2014 <\/strong>Any value in a range. For example, rainfall for a season or a person\u2019s height\/weight.<\/p>\n<div id=\"attachment_6580\" style=\"width: 995px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1wJu5h4NpN9wey0Q3H4hFsQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1wJu5h4NpN9wey0Q3H4hFsQ.png\" alt=\"Line charts work best for continuous data\" width=\"985\" height=\"522\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Line charts work best for continuous data<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In short, line graphs work best for continuous data and bar graphs work best for discrete data.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One resource that really solidified this for me is \u201c<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.amazon.com\/Street-Journal-Guide-Information-Graphics\/dp\/0393347281\">The Wall Street Journal: Guide to information Graphics<\/a>\u201d by Dona Wong. I wish I would have had this book with me years ago. Its an invaluable reference for choosing appropriate graphs and the dos &amp; don'ts for presenting information.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Basic vs. custom visualizations<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Lastly, as the designer of these data-rich systems you have to constantly ask yourself \u201cshould I take the path less traveled and go custom? Or should I use tried-and-true charts to articulate the message?\u201d.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I recently came across this article from 37 Signals \u2014<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/signalvnoise.com\/posts\/3388-three-charts-are-all-i-need\">\u00a0Three charts are all I need<\/a>. The author makes a strong point about how a visualization \u201cproblem solving\u201d characteristics supersedes its visual qualities. I totally agree with the sentiment of his post. <em>However<\/em>, I think his opinion represents a very utilitarian perspective. I believe custom visualizations can often enhance the usability of the data AND look unique and compelling.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1J-ajdBDC-YCp5J5T1oyAWg.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1J-ajdBDC-YCp5J5T1oyAWg.jpeg\" alt=\"An example of a basic bar\u00a0chart\" width=\"800\" height=\"312\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">An example of a basic bar\u00a0chart<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To me there are \u201cone-size-fits-all\u201d charts and \u201cbest-fit\u201d charts. Tables, lines and bar charts do a great job of accommodating many types of data, but they are also pretty generic (one-size-fits-all). As a professional designer I want the look and feel of my work to be <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">distinct and useful<\/strong>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, The New York Times does an amazing job augmenting their articles with custom interactive visualizations. You can see more of their work <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.nytimes.com\/interactive\/2014\/12\/29\/us\/year-in-interactive-storytelling.html?_r=0\">here<\/a>. Let\u2019s explore a couple examples of impeccable custom visualizations:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This example puts a twist on a line graph by offering a \u201cpeek\u201d into the underlying data driving the chart.<\/p>\n<div id=\"attachment_6580\" style=\"width: 680px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1WFtYTF2oVg-eTpQ01_riwg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1WFtYTF2oVg-eTpQ01_riwg.png\" alt=\"http:\/\/www.nytimes.com\/interactive\/2013\/03\/29\/sports\/baseball\/Strikeouts-Are-Still-Soaring.html?_r=0\" width=\"670\" height=\"390\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">http:\/\/www.nytimes.com\/interactive\/2013\/03\/29\/sports\/baseball\/Strikeouts-Are-Still-Soaring.html?_r=0<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In this 3D graph, the change in perspective is visually mind-blowing but also helps give the user a better insight into the relativity of the data.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1070px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1J-y6e2pirr4h7d0xCJdxkg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1J-y6e2pirr4h7d0xCJdxkg.png\" alt=\"http:\/\/www.nytimes.com\/interactive\/2015\/03\/19\/upshot\/3d-yield-curve-economic-growth.html?_r=0\" width=\"1060\" height=\"631\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">http:\/\/www.nytimes.com\/interactive\/2015\/03\/19\/upshot\/3d-yield-curve-economic-growth.html?_r=0<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This example from <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/selfiecity.net\/\">Selfiecity.net<\/a> does a nice job using the actual content to create the visualization.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1250px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1Um1czc4YvRHrBdPR4jkl4g.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1Um1czc4YvRHrBdPR4jkl4g.png\" alt=\"\" width=\"1240\" height=\"402\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">http:\/\/selfiecity.net\/<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Lastly, from a <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/truthlabs.com\/work\/cnn\">project<\/a> we did with CNN, we use color-coding to show political party preference and 3D extrusion to visualize demographic information simultaneously.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1410px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/1qFZ2VGSnc2VXRWZSyD4fmw.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1qFZ2VGSnc2VXRWZSyD4fmw.jpeg\" alt=\"http:\/\/truthlabs.com\/work\/cnn\" width=\"1400\" height=\"760\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">http:\/\/truthlabs.com\/work\/cnn<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>As a rule of thumb<\/em> \u2014 we try to come up with custom visualizations when the data and tech call for it, but we always have a plan B in case things don't pan out or the client prefers a less ambitious approach.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">So\u00a0what?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So why do we put all this data on the page anyway?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Answer: so people can do shit with it \u2014 make decisions, investigate, predict the future, whatever. The point is, your users aren't marveling at the pretty colors you've selected, they are trying to do their jobs.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>So here\u2019s my advice<\/em> \u2014 after you've gotten your page laid out and everything is crafted just right, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">ask yourself \u201cso what?\u201d<\/strong>. Look at each graph, widget, chart, table, and ponder what someone will glean from it. Often times you'll come to the conclusion, \u201cit doesn't matter\u201d, which a red flag to reduce or rethink.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s happened to me a few times \u2014 I\u2019ve created wonderfully complex dashboards housing a series of trend graphs, pie charts, and maps with thousands of data points. Only to be asked by the client \u201cI just want to know if the product is working\u2026where can I see that?\u201d or \u201cI only need to know 3 things\u2026X, Y, and Z. Where can I find those?\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sigh. In this moment you realize that you've gotten lost in the weeds and missed the big picture.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One tactic I've picked up to help with this is to try and use text to communicate exactly what someone wants to know.<\/p>\n<div id=\"attachment_6580\" style=\"width: 2411px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/151_Gojg6iZvmhNO3KMhKDw.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/151_Gojg6iZvmhNO3KMhKDw.png\" alt=\"At a high-level, text summaries can be more useful than\u00a0charts.\" width=\"2401\" height=\"808\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">At a high-level, text summaries can be more useful than\u00a0charts.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The images above are taken from two of our recent projects. Both simply tell the user what they need to know via text rather than relying on charts or graphs that need to be interpreted.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This approach resonates with our clients, especially for high-level information. But as I mentioned earlier there are always multiple personas to consider, so use where appropriate.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.truthlabs.com\/designing-data-driven-interfaces-a75d62997631\">Erik's Medium page.<\/a><\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/design-principles-help-shape-best-user-experience\/\" target=\"_blank\" rel=\"noopener noreferrer\">UX Design Principles That Help You Shape The Best User Experience<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/data-driven-vs-data-informed-design-enterprise-products\/\" target=\"_blank\" rel=\"noopener noreferrer\">Data Driven Design vs. Data Informed Design in Enterprise Products<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/data-driven-design-killing-instincts\/\" target=\"_blank\" rel=\"noopener noreferrer\">Data-Driven Design Is Killing Our Instincts<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/data-informed-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Data-informed Design<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u201cDashboard\u201d, \u201cBig Data\u201d, \u201cData visualization\u201d, \u201cAnalytics\u201d \u2014 there\u2019s been an explosion of people and companies looking to do interesting things with their data. I&#8217;ve been lucky to work on dozens of data-driven interfaces throughout my career and I wanted to share some thoughts on how to arrive at a distinct and meaningful product. Many people have already tackled this topic,&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":81,"featured_media":13487,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-13468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Designing Data-Driven User Interfaces - \u201cDashboard\u201d, \u201cBig Data\u201d, \u201cData visualization\u201d, \u201cAnalytics\u201d \u2014 there\u2019s been an explosion of people and companies looking to do interesting things with their data\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing Data-Driven User Interfaces | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Designing Data-Driven User Interfaces - \u201cDashboard\u201d, \u201cBig Data\u201d, \u201cData visualization\u201d, \u201cAnalytics\u201d \u2014 there\u2019s been an explosion of people and companies looking to do interesting things with their data\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-13T11:00:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-21T11:29:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/data.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2600\" \/>\n\t<meta property=\"og:image:height\" content=\"1314\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"8 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/11\/data.png\",\"width\":2600,\"height\":1314},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/\",\"name\":\"Designing Data-Driven User Interfaces | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/#primaryimage\"},\"datePublished\":\"2017-11-13T11:00:37+00:00\",\"dateModified\":\"2020-12-21T11:29:51+00:00\",\"description\":\"Designing Data-Driven User Interfaces - \\u201cDashboard\\u201d, \\u201cBig Data\\u201d, \\u201cData visualization\\u201d, \\u201cAnalytics\\u201d \\u2014 there\\u2019s been an explosion of people and companies looking to do interesting things with their data\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/17a32f9b93f672ad28c3fe6185e9fced\"},\"headline\":\"Designing Data-Driven User Interfaces\",\"datePublished\":\"2017-11-13T11:00:37+00:00\",\"dateModified\":\"2020-12-21T11:29:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-data-driven-interfaces\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/17a32f9b93f672ad28c3fe6185e9fced\",\"name\":\"Erik Klimczak\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f45fc433bf7199c7b3870bbbf0b76c65eff75e5666ddbc40386f5047547de7d?s=96&d=mm&r=g\",\"caption\":\"Erik Klimczak\"},\"description\":\"Designing the future at Uber in San Francisco. Follow me on @eklimcz.\",\"sameAs\":[\"https:\/\/blog.truthlabs.com\/@eklimcz\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/13468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=13468"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/13468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/13487"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=13468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=13468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=13468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}