{"id":26125,"date":"2021-12-14T07:38:47","date_gmt":"2021-12-14T07:38:47","guid":{"rendered":"https:\/\/codeandpepper.com\/?p=26125"},"modified":"2022-07-01T07:17:04","modified_gmt":"2022-07-01T07:17:04","slug":"data-visualization-ux-best-practices","status":"publish","type":"post","link":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/","title":{"rendered":"Data Visualization UX &#8211; Best Practices &#038; Bad Patterns"},"content":{"rendered":"\n<p>FinTech is for people, not for robots that crawl for data. Apps should be simple, functional and display all information in a way that can be understood by everyone. Tech-savvy Generation Z and seniors. The art of presenting data to a user should involve fun and user involvement, you want people to actively use the product.&nbsp;<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg\" alt=\"Data visualization ux best practices\" class=\"wp-image-26239\" width=\"864\" height=\"450\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-300x156.jpeg 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-768x400.jpeg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-80x42.jpeg 80w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-119x62.jpeg 119w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-361x188.jpeg 361w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-433x226.jpeg 433w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-192x100.jpeg 192w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-720x375.jpeg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX-432x225.jpeg 432w\" sizes=\"auto, (max-width: 864px) 100vw, 864px\" \/><\/figure><\/div>\n\n\n\n<p>That means eliminating all the noise in <strong>data visualization UX<\/strong> and focusing on important elements.<\/p>\n\n\n\n<p>How to achieve that? By realizing how data is displayed in real life. There is a difference between an Excel and FinTech application. The first one is used to gather information and showcase numbers, the second one exists for making life easier for millions of users. <strong>Here are data visualization UX best practices as well as some bad data visualization examples.<\/strong><\/p>\n\n\n<p><\/p>\n<h4>Table of contents<\/h4>\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#Take control, the strength is in numbers!\">Best data visualization UX patterns<\/a><\/li><li><a href=\"#Data visualization UX \u2013 best practices for showing information\">Data visualization UX \u2013 best practices for showing information<\/a><\/li><li><a href=\"#Focus data visualization UX on the user, not artificial factors\">Focus data visualization UX on the user, not artificial factors<\/a><\/li><li><a href=\"#Follow the white rabbit, Neo!\">Follow the white rabbit, Neo!<\/a><\/li><li><a href=\"#Take control, the strength is in numbers!\">Take control, the strength is in numbers!<\/a><\/li><\/ul>\n\n\n\n<section id=\"Best data visualization UX patterns\" class=\"hidden-block\"><\/section>\n\n<style type=\"text\/css\">\n  #Best data visualization UX patterns {\n    visibility: hidden !important;\n  }\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-best-data-visualization-ux-patterns\">Best data visualization UX patterns<\/h2>\n\n\n\n<p>Best designs, as always, share common elements. In this case, these are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Clarity<\/strong>. The information displayed on a screen doesn\u2019t have elements that don\u2019t belong. If you want to give a user information about the current state of the account, don\u2019t show numbers related to account history or the number of withdrawals in the previous month. Just balance. Unless relations between these numbers are important, which in this particular example would be doubtful, forget about them.<\/li><li><strong>Color<\/strong>. To differentiate parts of the screen and draw attention to an important part of them at the same time, designers use different things. Different colours, their saturation, even placement on the screen.<\/li><li><strong>Design logic<\/strong>. Nothing is more important than an overall idea behind data visualization UX. After all, UX stands for \u201cuser experience\u201d. If the graphics are well-designed and understood at first glance, then someone did a good job. The user knows where to click or tap, everything is accessible and one action away.<\/li><li><strong>Hierarchy<\/strong>. Sometimes the amount of information on a given subject is big. The power of FinTech comes from accessibility, not from a Ph.D. required from every user. Showing how the data is organized and why, what numbers are important and stay above others, gives users context.<\/li><li><strong>Similarity<\/strong>. If some other data provides additional context to something that is displayed currently on the screen, give the user access to it with one tap. The information should not be displayed next to what is currently important but giving context to a number or set of numbers that are on the device right now gives the user additional information.<\/li><\/ul>\n\n\n\n<p>All those factors give users perspective. <strong>Successful data visualization UX is very informative in the first place, giving people the power to make choices based on facts<\/strong>.<\/p>\n\n\n\n<section id=\"Data visualization UX \u2013 best practices for showing information\" class=\"hidden-block\"><\/section>\n\n<style type=\"text\/css\">\n  #Data visualization UX \u2013 best practices for showing information {\n    visibility: hidden !important;\n  }\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-data-visualization-ux-best-practices-for-showing-information\">Data visualization UX \u2013 best practices for showing information<\/h2>\n\n\n\n<p>In a traditional model, there are 10 ways to display data: line chart, bar chart, scatter chart, area chart, maps, indicators, pivot tables, bullet graphs, box plot and matrix. In FinTech, <strong>designers have to figure out data visualization UX patterns to see how to best take care of a user.<\/strong> All previously mentioned ways are good but too complicated for a mobile screen. After all, this is a base for FinTech.<\/p>\n\n\n\n<p>How to do that correctly, then? In a few simple steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Remove the background by making it one simple surface<\/strong> \u2013 white or dark grey. People don\u2019t need ornaments when it comes to data, they need to understand what they are looking at.<\/li><li><strong>Remove unnecessary labels<\/strong>. Data presented on the screen should be self-explanatory. Adding additional words to them can make people confused. Should I look at the word, the numbers, both? Is one connected to the other somehow? What is more important \u2013 the word or the chart? So many questions! Sure, people are not stupid but when looking at something so important as money, especially on the go, there is no room for doubt. Eliminate its sources.<\/li><li><strong>Use vibrant colours but reduce those which don\u2019t contribute to making a point<\/strong>. Vibrant colours highlight data, many vibrant colours generate confusion.<\/li><li><strong>Forget about special effects<\/strong>. 3D, shades, shadows, etc. Keep it clean, keep it simple. FinTech is not a Hollywood movie, rather a Hollywood elevator pitch. You have seconds to explain your script to an executive. Either he or she buys it or not. The same goes for FinTech \u2013 a user can understand data or not. You have a narrow timeframe to make it happen.<\/li><\/ul>\n\n\n\n<section id=\"Focus data visualization UX on the user, not artificial factors\" class=\"hidden-block\"><\/section>\n\n<style type=\"text\/css\">\n  #Focus data visualization UX on the user, not artificial factors {\n    visibility: hidden !important;\n  }\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-focus-data-visualization-ux-on-the-user-not-artificial-factors\">Focus data visualization UX on the user, not artificial factors<\/h2>\n\n\n\n<p>Either way, a <a href=\"https:\/\/codeandpepper.com\/services\/ux-design-agency\/\">UX design specialist<\/a> should always remember a few things. Data visualization UX enables users to take actions based on the displayed information. <strong>Since good data visualization, UX patterns are more comprehensible than data<\/strong>, we can say that the best way to drive these actions is through <a href=\"https:\/\/codeandpepper.com\/storytelling-with-data-5-steps-to-create-an-in-app-data-visualization\">storytelling with data<\/a>. Don\u2019t show people numbers, tell a story using them.&nbsp;<\/p>\n\n\n\n<p>Users these days are drawn to interactions and something that moves rather than static content. That\u2019s why video format is increasingly important. Translating it into FinTech \u2013 users are attracted to multimedia. Charts that can be changed through a single tap, information at a fingertip. <strong>This makes people feel powerful and in control of their money<\/strong>. Isn\u2019t that the point of a FinTech as a whole?<\/p>\n\n\n\n<p><a href=\"https:\/\/codeandpepper.com\/startup-ecosystem-and-the-use-of-ai-ask-me-anyfin-koray-koska\">Startups<\/a> often use artificial intelligence to advance their product but have problems when it comes to displaying data to users. Remember that Hollywood analogy? There\u2019s no business like SHOW business. Don\u2019t explain data, SHOW it to them. Don\u2019t worry about the app\u2019s download rate or the number of freshly set up accounts per week. These are important but artificial factors, at least to a point. Worry about the usefulness of the app.<\/p>\n\n\n\n<section id=\"Follow the white rabbit, Neo!\" class=\"hidden-block\"><\/section>\n\n<style type=\"text\/css\">\n  #Follow the white rabbit, Neo! {\n    visibility: hidden !important;\n  }\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-follow-the-white-rabbit-neo\">Follow the white rabbit, Neo!<\/h2>\n\n\n\n<p>Here are just three examples of how the tips above are implemented into real-life products.<\/p>\n\n\n\n<p><a href=\"https:\/\/emma-app.com\/\" rel=\"nofollow\">Emma<\/a> is a good example of a clean user experience interface. Here everything is clean and sorted, with colors to differentiate options. Notice how emojis are used to spark reactions.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1.png\" alt=\"Data visualization ux patterns\" class=\"wp-image-33078\" width=\"521\" height=\"462\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1.png 1042w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-300x266.png 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-1024x908.png 1024w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-768x681.png 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-73x65.png 73w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-70x62.png 70w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-236x209.png 236w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-281x249.png 281w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-113x100.png 113w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-720x638.png 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-864x766.png 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/1-432x383.png 432w\" sizes=\"auto, (max-width: 521px) 100vw, 521px\" \/><\/figure><\/div>\n\n\n\n<p>Another example is <a href=\"https:\/\/enjoybundil.com\/\" rel=\"nofollow\">Bundil<\/a>. This app lets people invest in cryptocurrencies. Displaying their options and digital wallet with different currencies could mean a lot of confusion. But the app is minimalistic and stays true to its branding.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2.png\" alt=\"Bad data visualizations\" class=\"wp-image-33079\" width=\"379\" height=\"497\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2.png 758w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2-229x300.png 229w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2-50x65.png 50w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2-47x62.png 47w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2-159x209.png 159w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2-190x249.png 190w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2-76x100.png 76w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2-534x700.png 534w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/2-432x567.png 432w\" sizes=\"auto, (max-width: 379px) 100vw, 379px\" \/><\/figure><\/div>\n\n\n\n<p>The last example is <a href=\"https:\/\/www.chime.com\/\" rel=\"nofollow\">Chime<\/a>. Look how simplistic and clear everything looks in here. Every spending category is clearly stated yet super simple to understand.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3.png\" alt=\"Data visualization ux\" class=\"wp-image-33080\" width=\"459\" height=\"375\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3.png 918w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-300x245.png 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-768x627.png 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-80x65.png 80w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-76x62.png 76w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-256x209.png 256w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-305x249.png 305w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-122x100.png 122w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-720x588.png 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-864x706.png 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/12\/3-432x353.png 432w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/figure><\/div>\n\n\n\n<p>The ultimate rule for creating the ultimate FinTech user experience doesn\u2019t exist. With our help, you can create a performing product but as you can see, every case is different.<\/p>\n\n\n\n<section id=\"Take control, the strength is in numbers!\" class=\"hidden-block\"><\/section>\n\n<style type=\"text\/css\">\n  #Take control, the strength is in numbers! {\n    visibility: hidden !important;\n  }\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-take-control-the-strength-is-in-numbers\">Take control, the strength is in numbers!<\/h2>\n\n\n\n<p>Data visualization UX best practices generate better user engagement and decrease churn. The more info your product can give, the more informative decisions out there, made by paying customers. About loans, insurance, etc. FinTech is about serving them. That\u2019s why we believe in <a href=\"https:\/\/codeandpepper.com\/services\/fintech-development-services\">FinTech development<\/a> focused on real use cases and justified business needs. We develop easy-to-scale products that drive user engagement. Take control of your application and add some numbers to your team by hiring FinTech specialists (See more here: <a href=\"https:\/\/codeandpepper.com\/services\/software-team-augmentation\/\">Software Team Augmentation Services<\/a>).<\/p>\n\n\n\n\n\n<section id=\"contact\" class=\"contact-block block common-block \">\n  <div class=\"container\">\n\n\n    \n  <svg class=\"wave\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"280\" height=\"9\" viewBox=\"0 0 280 9\">\n    <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M0 3.6c2.88 0 4.18-.668 5.824-1.515C7.724 1.108 9.879 0 13.998 0c4.12 0 6.274 1.108 8.175 2.085 1.644.847 2.943 1.515 5.823 1.515 2.88 0 4.179-.668 5.824-1.515C35.72 1.108 37.874 0 41.995 0c4.12 0 6.274 1.108 8.174 2.085 1.645.847 2.945 1.515 5.824 1.515 2.88 0 4.18-.668 5.826-1.515C63.719 1.108 65.873 0 69.993 0c4.12 0 6.274 1.108 8.174 2.085 1.645.847 2.945 1.515 5.823 1.515 2.88 0 4.18-.668 5.825-1.515C91.715 1.108 93.87 0 97.99 0c4.12 0 6.273 1.108 8.174 2.085 1.645.847 2.945 1.515 5.823 1.515 2.88 0 4.178-.668 5.824-1.515 1.9-.977 4.054-2.085 8.173-2.085 4.12 0 6.273 1.108 8.174 2.085 1.646.847 2.945 1.515 5.825 1.515 2.88 0 4.18-.668 5.826-1.515 1.9-.977 4.055-2.085 8.175-2.085 4.12 0 6.273 1.108 8.174 2.085 1.646.847 2.945 1.515 5.825 1.515 2.88 0 4.179-.668 5.824-1.515 1.9-.977 4.054-2.085 8.175-2.085 4.12 0 6.274 1.108 8.175 2.085 1.646.847 2.946 1.515 5.826 1.515 2.88 0 4.18-.668 5.826-1.515 1.9-.977 4.054-2.085 8.175-2.085 4.12 0 6.273 1.108 8.174 2.085 1.646.847 2.945 1.515 5.825 1.515 2.881 0 4.18-.668 5.827-1.515 1.9-.977 4.056-2.085 8.176-2.085 4.121 0 6.276 1.108 8.177 2.085 1.646.847 2.946 1.515 5.827 1.515s4.181-.668 5.828-1.515C259.718 1.108 261.873 0 265.995 0c4.121 0 6.275 1.108 8.177 2.084 1.645.848 2.946 1.516 5.828 1.516V9h-.007l-5.252-.793c-1.129-.382-2.056-.848-2.919-1.291-1.646-.847-2.946-1.516-5.827-1.516-2.882 0-4.183.669-5.829 1.516-1.9.977-4.056 2.084-8.177 2.084-4.12 0-6.275-1.107-8.176-2.084-1.647-.847-2.947-1.516-5.828-1.516-2.88 0-4.18.669-5.827 1.516-1.9.977-4.055 2.084-8.176 2.084-4.12 0-6.273-1.107-8.175-2.084-1.645-.847-2.944-1.516-5.824-1.516s-4.18.669-5.826 1.516c-1.9.977-4.055 2.084-8.175 2.084-4.12 0-6.275-1.107-8.176-2.084-1.644-.847-2.945-1.516-5.825-1.516-2.88 0-4.18.669-5.825 1.516-1.9.977-4.054 2.084-8.174 2.084-4.12 0-6.274-1.107-8.176-2.084-1.644-.847-2.943-1.516-5.823-1.516-2.88 0-4.18.669-5.826 1.516-1.9.977-4.054 2.084-8.175 2.084-4.12 0-6.274-1.107-8.174-2.084-1.646-.847-2.946-1.516-5.825-1.516s-4.179.669-5.824 1.516c-1.9.977-4.053 2.084-8.173 2.084s-6.273-1.107-8.173-2.084c-1.645-.847-2.945-1.516-5.824-1.516-2.88 0-4.179.669-5.824 1.516C90.265 7.893 88.11 9 83.99 9c-4.12 0-6.273-1.107-8.173-2.084-1.645-.847-2.944-1.516-5.824-1.516s-4.18.669-5.825 1.516C62.268 7.893 60.113 9 55.993 9c-4.12 0-6.274-1.107-8.174-2.084-1.645-.847-2.945-1.516-5.824-1.516-2.88 0-4.18.669-5.825 1.516C34.27 7.893 32.116 9 27.996 9c-4.12 0-6.273-1.107-8.174-2.084-1.645-.847-2.945-1.516-5.824-1.516s-4.179.669-5.824 1.516C7.311 7.359 1.127 8.618 0 9\"\/>\n<\/svg>\n\n<p class=\"block-title section-title\">\n  We have Senior Node &#038; React engineers <br class=\"desktop-only\">available at the moment.<\/p>\n\n\n  <div class=\"block-description typography-body\">\n    <p>Want to have them working for you? <br class=\"desktop-only\"> Leave your contact details and I\u2019ll get to you back right away.<\/p>\n  <\/div>\n\n    \n          <div class=\"contact-block-person\">\n        <img loading=\"lazy\" decoding=\"async\" width=\"90\" height=\"90\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/09\/Olga_Pogorzelska_online-6-90x90.png\" class=\"contact-block-person-image\" alt=\"\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/09\/Olga_Pogorzelska_online-6-90x90.png 90w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/09\/Olga_Pogorzelska_online-6-150x150.png 150w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/09\/Olga_Pogorzelska_online-6-140x140.png 140w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/09\/Olga_Pogorzelska_online-6-160x160.png 160w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/09\/Olga_Pogorzelska_online-6-136x136.png 136w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/09\/Olga_Pogorzelska_online-6.png 200w\" sizes=\"auto, (max-width: 90px) 100vw, 90px\" \/>        <div class=\"contact-block-person-text\">\n          <div class=\"typography-title-m\">\n            Olga Pogorzelska          <\/div>\n          <div class=\"typography-body-medium\">\n            New Business          <\/div>\n        <\/div>\n      <\/div>\n    \n\n    <form class=\"contact-form\" method=\"POST\" action=\"https:\/\/codeandpepper.com\/wp-admin\/admin-ajax.php\">\n            <amp-recaptcha-input layout=\"nodisplay\" name=\"recaptcha_token\" data-sitekey=\"6LeEo8cqAAAAABpahzrYQeEsO-xoutAjoIkrKpTB\" data-action=\"contact_block\"><\/amp-recaptcha-input>\n            <input type=\"hidden\" name=\"action\" value=\"contact_block_submit\" \/>\n      <input type=\"hidden\" name=\"block\" value=\"smallContactForm\" \/>\n      <input id=\"contact-email\" type=\"email\" name=\"email\" placeholder=\"Email\" class=\"gtm_form_input\" required>\n      <label for=\"contact-email\" class=\"contact-block-hidden-label\">Email<\/label>\n      <input id=\"contact-name\" type=\"text\" name=\"name\" placeholder=\"Full name\" class=\"gtm_form_input\" required>\n      <label for=\"contact-name\" class=\"contact-block-hidden-label\">\n        Full name      <\/label>\n\n      <input type=\"submit\" name=\"submit\" value=\"contact me\" class=\"gtm_form_submit btn-big\">\n\n      <div submitting>\n      <\/div>\n      <div id=\"TYPSmallForm\" class=\"submit-msg submit-success\" submit-success>\n        <template type=\"amp-mustache\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\">\n    <g fill=\"none\" fill-rule=\"evenodd\">\n        <g stroke=\"#FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" transform=\"translate(1 1)\">\n            <path d=\"M17 8.5l-7.5 7L7 13\"\/>\n            <circle cx=\"12\" cy=\"12\" r=\"11.5\"\/>\n        <\/g>\n        <path d=\"M1 1h24v24H1z\"\/>\n    <\/g>\n<\/svg>\n          Your message has been sent. We will get back to you as soon as possible.\n        <\/template>\n      <\/div>\n      <div id=\"ErrorSmallForm\" class=\"submit-msg submit-error\" submit-error>\n        <template type=\"amp-mustache\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\">\n    <g fill=\"none\" fill-rule=\"evenodd\">\n        <g stroke=\"currentColor\" stroke-linejoin=\"round\">\n            <path stroke-linecap=\"round\" stroke-width=\"2\" d=\"M23.498 12.31c.105 6.075-4.923 11.086-10.998 11.192-6.074.104-10.893-4.734-10.998-10.81C1.396 6.619 6.426 1.606 12.5 1.502c6.074-.106 10.893 4.734 10.998 10.808zM12.5 14V7\"\/>\n            <path fill=\"currentColor\" stroke-width=\"1.5\" d=\"M13 17.5a.5.5 0 0 1-1 0 .5.5 0 0 1 1 0z\"\/>\n        <\/g>\n        <path d=\"M1 0h24v24H1z\"\/>\n    <\/g>\n<\/svg>\n          Oops! Something went wrong. Please try again later.\n        <\/template>\n      <\/div>\n    <\/form>\n\n\n  <\/div>\n<\/section>\n<style type=\"text\/css\">\n  #contact {\n    background: #009fe3;\n    color: #FFFFFF;\n  }\n\n  #contactsvg {\n    color: #ffffff;\n  }\n<\/style>\n\n<section id=\"related-posts-block_628f4963b35e8\" class=\"related-posts-block block common-block \">\n  <div class=\"container\">\n\n\n    \n  <svg class=\"wave\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"280\" height=\"9\" viewBox=\"0 0 280 9\">\n    <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M0 3.6c2.88 0 4.18-.668 5.824-1.515C7.724 1.108 9.879 0 13.998 0c4.12 0 6.274 1.108 8.175 2.085 1.644.847 2.943 1.515 5.823 1.515 2.88 0 4.179-.668 5.824-1.515C35.72 1.108 37.874 0 41.995 0c4.12 0 6.274 1.108 8.174 2.085 1.645.847 2.945 1.515 5.824 1.515 2.88 0 4.18-.668 5.826-1.515C63.719 1.108 65.873 0 69.993 0c4.12 0 6.274 1.108 8.174 2.085 1.645.847 2.945 1.515 5.823 1.515 2.88 0 4.18-.668 5.825-1.515C91.715 1.108 93.87 0 97.99 0c4.12 0 6.273 1.108 8.174 2.085 1.645.847 2.945 1.515 5.823 1.515 2.88 0 4.178-.668 5.824-1.515 1.9-.977 4.054-2.085 8.173-2.085 4.12 0 6.273 1.108 8.174 2.085 1.646.847 2.945 1.515 5.825 1.515 2.88 0 4.18-.668 5.826-1.515 1.9-.977 4.055-2.085 8.175-2.085 4.12 0 6.273 1.108 8.174 2.085 1.646.847 2.945 1.515 5.825 1.515 2.88 0 4.179-.668 5.824-1.515 1.9-.977 4.054-2.085 8.175-2.085 4.12 0 6.274 1.108 8.175 2.085 1.646.847 2.946 1.515 5.826 1.515 2.88 0 4.18-.668 5.826-1.515 1.9-.977 4.054-2.085 8.175-2.085 4.12 0 6.273 1.108 8.174 2.085 1.646.847 2.945 1.515 5.825 1.515 2.881 0 4.18-.668 5.827-1.515 1.9-.977 4.056-2.085 8.176-2.085 4.121 0 6.276 1.108 8.177 2.085 1.646.847 2.946 1.515 5.827 1.515s4.181-.668 5.828-1.515C259.718 1.108 261.873 0 265.995 0c4.121 0 6.275 1.108 8.177 2.084 1.645.848 2.946 1.516 5.828 1.516V9h-.007l-5.252-.793c-1.129-.382-2.056-.848-2.919-1.291-1.646-.847-2.946-1.516-5.827-1.516-2.882 0-4.183.669-5.829 1.516-1.9.977-4.056 2.084-8.177 2.084-4.12 0-6.275-1.107-8.176-2.084-1.647-.847-2.947-1.516-5.828-1.516-2.88 0-4.18.669-5.827 1.516-1.9.977-4.055 2.084-8.176 2.084-4.12 0-6.273-1.107-8.175-2.084-1.645-.847-2.944-1.516-5.824-1.516s-4.18.669-5.826 1.516c-1.9.977-4.055 2.084-8.175 2.084-4.12 0-6.275-1.107-8.176-2.084-1.644-.847-2.945-1.516-5.825-1.516-2.88 0-4.18.669-5.825 1.516-1.9.977-4.054 2.084-8.174 2.084-4.12 0-6.274-1.107-8.176-2.084-1.644-.847-2.943-1.516-5.823-1.516-2.88 0-4.18.669-5.826 1.516-1.9.977-4.054 2.084-8.175 2.084-4.12 0-6.274-1.107-8.174-2.084-1.646-.847-2.946-1.516-5.825-1.516s-4.179.669-5.824 1.516c-1.9.977-4.053 2.084-8.173 2.084s-6.273-1.107-8.173-2.084c-1.645-.847-2.945-1.516-5.824-1.516-2.88 0-4.179.669-5.824 1.516C90.265 7.893 88.11 9 83.99 9c-4.12 0-6.273-1.107-8.173-2.084-1.645-.847-2.944-1.516-5.824-1.516s-4.18.669-5.825 1.516C62.268 7.893 60.113 9 55.993 9c-4.12 0-6.274-1.107-8.174-2.084-1.645-.847-2.945-1.516-5.824-1.516-2.88 0-4.18.669-5.825 1.516C34.27 7.893 32.116 9 27.996 9c-4.12 0-6.273-1.107-8.174-2.084-1.645-.847-2.945-1.516-5.824-1.516s-4.179.669-5.824 1.516C7.311 7.359 1.127 8.618 0 9\"\/>\n<\/svg>\n\n<h2 class=\"block-title section-title\">\n  Related posts<\/h2>\n\n\n\n    <div>\n      <div class=\"related-posts\">\n                  <div class=\"related-post\">\n            <h3 class=\"related-post-title typography-title-m\">\n              <a href=\"https:\/\/codeandpepper.com\/what-is-a-design-system-in-ux-and-why-it-is-important-to-have-one\/\" title=\"What is a Design System in UX?\">\n                What is a Design System in UX?              <\/a>\n            <\/h3>\n                          <a class=\"related-post-thumbnail\" aria-label=\"What is a Design System in UX?\" href=\"https:\/\/codeandpepper.com\/what-is-a-design-system-in-ux-and-why-it-is-important-to-have-one\/\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"189\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/01\/Design-System-in-UX-and-Why.jpg\" class=\"attachment-blog-thumbnail size-blog-thumbnail wp-post-image\" alt=\"What is design system in UX and UI\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/01\/Design-System-in-UX-and-Why.jpg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/01\/Design-System-in-UX-and-Why-768x400.jpg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/01\/Design-System-in-UX-and-Why-192x100.jpg 192w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/01\/Design-System-in-UX-and-Why-720x375.jpg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/01\/Design-System-in-UX-and-Why-432x225.jpg 432w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/>              <\/a>\n                        <p class=\"related-post-description typography-body-smaller\">\n              A design systems is a single source of truth for the entire design, development, and marketing teams. Why is it important?            <\/p>\n            <a class=\"plus-link\" href=\"https:\/\/codeandpepper.com\/what-is-a-design-system-in-ux-and-why-it-is-important-to-have-one\/\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"17\" height=\"17\" viewBox=\"0 0 17 17\">\n    <path d=\"M7 0h3v17H7z\"\/>\n    <path d=\"M17 7v3H0V7z\"\/>\n<\/svg>\n              <span>Full Article<\/span>\n            <\/a>\n          <\/div>\n                  <div class=\"related-post\">\n            <h3 class=\"related-post-title typography-title-m\">\n              <a href=\"https:\/\/codeandpepper.com\/transparency-feedback-fintech-apps\/\" title=\"UX design patterns improve Fintech Apps\">\n                UX design patterns improve Fintech Apps              <\/a>\n            <\/h3>\n                          <a class=\"related-post-thumbnail\" aria-label=\"UX design patterns improve Fintech Apps\" href=\"https:\/\/codeandpepper.com\/transparency-feedback-fintech-apps\/\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"189\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/10\/UX-Patterns-to-Improve-Transparency-and-Feedback-in-FinTech-Apps.png\" class=\"attachment-blog-thumbnail size-blog-thumbnail wp-post-image\" alt=\"ux patterns\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/10\/UX-Patterns-to-Improve-Transparency-and-Feedback-in-FinTech-Apps.png 1199w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/10\/UX-Patterns-to-Improve-Transparency-and-Feedback-in-FinTech-Apps-1024x534.png 1024w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/10\/UX-Patterns-to-Improve-Transparency-and-Feedback-in-FinTech-Apps-768x400.png 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/10\/UX-Patterns-to-Improve-Transparency-and-Feedback-in-FinTech-Apps-192x100.png 192w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/10\/UX-Patterns-to-Improve-Transparency-and-Feedback-in-FinTech-Apps-720x375.png 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/10\/UX-Patterns-to-Improve-Transparency-and-Feedback-in-FinTech-Apps-864x450.png 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/10\/UX-Patterns-to-Improve-Transparency-and-Feedback-in-FinTech-Apps-432x225.png 432w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/>              <\/a>\n                        <p class=\"related-post-description typography-body-smaller\">\n              These design patterns will help you tackle the issue of transparency and feedback in UX and take your FinTech product to the next level.            <\/p>\n            <a class=\"plus-link\" href=\"https:\/\/codeandpepper.com\/transparency-feedback-fintech-apps\/\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"17\" height=\"17\" viewBox=\"0 0 17 17\">\n    <path d=\"M7 0h3v17H7z\"\/>\n    <path d=\"M17 7v3H0V7z\"\/>\n<\/svg>\n              <span>Full Article<\/span>\n            <\/a>\n          <\/div>\n                  <div class=\"related-post\">\n            <h3 class=\"related-post-title typography-title-m\">\n              <a href=\"https:\/\/codeandpepper.com\/dark-mode-design-ux-ui\/\" title=\"Benefits of Dark Mode Design\">\n                Benefits of Dark Mode Design              <\/a>\n            <\/h3>\n                          <a class=\"related-post-thumbnail\" aria-label=\"Benefits of Dark Mode Design\" href=\"https:\/\/codeandpepper.com\/dark-mode-design-ux-ui\/\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"189\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode.jpeg\" class=\"attachment-blog-thumbnail size-blog-thumbnail wp-post-image\" alt=\"Benefits of dark mode web design\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode.jpeg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode-768x400.jpeg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode-80x42.jpeg 80w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode-119x62.jpeg 119w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode-433x226.jpeg 433w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode-192x100.jpeg 192w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode-720x375.jpeg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Darkmode-432x225.jpeg 432w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/>              <\/a>\n                        <p class=\"related-post-description typography-body-smaller\">\n              A dark mode web design is increasingly popular among FinTech applications. What it&#8217;s good for? Learn practical tips!            <\/p>\n            <a class=\"plus-link\" href=\"https:\/\/codeandpepper.com\/dark-mode-design-ux-ui\/\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"17\" height=\"17\" viewBox=\"0 0 17 17\">\n    <path d=\"M7 0h3v17H7z\"\/>\n    <path d=\"M17 7v3H0V7z\"\/>\n<\/svg>\n              <span>Full Article<\/span>\n            <\/a>\n          <\/div>\n              <\/div>\n    <\/div>\n\n\n  <\/div>\n<\/section>\n\n<style type=\"text\/css\">\n  #related-posts-block_628f4963b35e8 {\n    background: ;\n    color: ;\n  }\n\n  #related-posts-block_628f4963b35e8 .block-title {\n    color: ;\n  }\n<\/style>","protected":false},"excerpt":{"rendered":"<p>FinTech is for people, not for robots that crawl for data. Apps should be simple, functional and display all information in a way that can be understood by everyone. Tech-savvy Generation Z and seniors. The art of presenting data to a user should involve fun and user involvement, you want people to actively use the<a class=\"moretag\" href=\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":20413,"featured_media":26239,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1648],"tags":[1600,1654,1722],"class_list":["post-26125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux","tag-fintech-app-development","tag-fintech-software-development","tag-fintech-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Data visualization UX best practices &amp; bad patterns | Code &amp; Pepper<\/title>\n<meta name=\"description\" content=\"Data visualization, UX in general, helps grow revenue for FinTech applications. What are best practices and bad patterns in the industry?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Data visualization UX best practices &amp; bad patterns | Code &amp; Pepper\" \/>\n<meta property=\"og:description\" content=\"Data visualization, UX in general, helps grow revenue for FinTech applications. What are best practices and bad patterns in the industry?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Code &amp; Pepper\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codeandpepper\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-14T07:38:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T07:17:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"864\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jaros\u0142aw \u015aci\u015blak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeandpepper\" \/>\n<meta name=\"twitter:site\" content=\"@codeandpepper\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jaros\u0142aw \u015aci\u015blak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/\"},\"author\":{\"name\":\"Jaros\u0142aw \u015aci\u015blak\",\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/person\/4d99a36115b17f10860637a13b3b3885\"},\"headline\":\"Data Visualization UX &#8211; Best Practices &#038; Bad Patterns\",\"datePublished\":\"2021-12-14T07:38:47+00:00\",\"dateModified\":\"2022-07-01T07:17:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/\"},\"wordCount\":1217,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codeandpepper.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg\",\"keywords\":[\"FinTech app development\",\"FinTech software development\",\"FinTech UX\"],\"articleSection\":[\"User Experience\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/\",\"url\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/\",\"name\":\"Data visualization UX best practices & bad patterns | Code & Pepper\",\"isPartOf\":{\"@id\":\"https:\/\/codeandpepper.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg\",\"datePublished\":\"2021-12-14T07:38:47+00:00\",\"dateModified\":\"2022-07-01T07:17:04+00:00\",\"description\":\"Data visualization, UX in general, helps grow revenue for FinTech applications. What are best practices and bad patterns in the industry?\",\"breadcrumb\":{\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#primaryimage\",\"url\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg\",\"contentUrl\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg\",\"width\":864,\"height\":450,\"caption\":\"Data visualization ux best practices & bad patterns\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codeandpepper.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Data Visualization UX &#8211; Best Practices &#038; Bad Patterns\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codeandpepper.com\/#website\",\"url\":\"https:\/\/codeandpepper.com\/\",\"name\":\"Code & Pepper\",\"description\":\"FinTech Developers\",\"publisher\":{\"@id\":\"https:\/\/codeandpepper.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codeandpepper.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codeandpepper.com\/#organization\",\"name\":\"Code & Pepper\",\"url\":\"https:\/\/codeandpepper.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/06\/logo.png\",\"contentUrl\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/06\/logo.png\",\"width\":319,\"height\":144,\"caption\":\"Code & Pepper\"},\"image\":{\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codeandpepper\/\",\"https:\/\/x.com\/codeandpepper\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/person\/4d99a36115b17f10860637a13b3b3885\",\"name\":\"Jaros\u0142aw \u015aci\u015blak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ab028da5fc780b19966f305918b0045520176e8bc7c265540adcce45ab2cd0c9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ab028da5fc780b19966f305918b0045520176e8bc7c265540adcce45ab2cd0c9?s=96&d=mm&r=g\",\"caption\":\"Jaros\u0142aw \u015aci\u015blak\"},\"description\":\"Branding, marketing, business scaling, content &amp; company culture specialist. Over 20 years of experience in marketing, strategy, and writing. Learn more by visiting: scislak.com\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jaroslawscislak\"],\"url\":\"https:\/\/codeandpepper.com\/author\/jarek-scislak\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Data visualization UX best practices & bad patterns | Code & Pepper","description":"Data visualization, UX in general, helps grow revenue for FinTech applications. What are best practices and bad patterns in the industry?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"Data visualization UX best practices & bad patterns | Code & Pepper","og_description":"Data visualization, UX in general, helps grow revenue for FinTech applications. What are best practices and bad patterns in the industry?","og_url":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/","og_site_name":"Code &amp; Pepper","article_publisher":"https:\/\/www.facebook.com\/codeandpepper\/","article_published_time":"2021-12-14T07:38:47+00:00","article_modified_time":"2022-07-01T07:17:04+00:00","og_image":[{"width":864,"height":450,"url":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg","type":"image\/jpeg"}],"author":"Jaros\u0142aw \u015aci\u015blak","twitter_card":"summary_large_image","twitter_creator":"@codeandpepper","twitter_site":"@codeandpepper","twitter_misc":{"Written by":"Jaros\u0142aw \u015aci\u015blak","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#article","isPartOf":{"@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/"},"author":{"name":"Jaros\u0142aw \u015aci\u015blak","@id":"https:\/\/codeandpepper.com\/#\/schema\/person\/4d99a36115b17f10860637a13b3b3885"},"headline":"Data Visualization UX &#8211; Best Practices &#038; Bad Patterns","datePublished":"2021-12-14T07:38:47+00:00","dateModified":"2022-07-01T07:17:04+00:00","mainEntityOfPage":{"@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/"},"wordCount":1217,"commentCount":0,"publisher":{"@id":"https:\/\/codeandpepper.com\/#organization"},"image":{"@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg","keywords":["FinTech app development","FinTech software development","FinTech UX"],"articleSection":["User Experience"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/","url":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/","name":"Data visualization UX best practices & bad patterns | Code & Pepper","isPartOf":{"@id":"https:\/\/codeandpepper.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg","datePublished":"2021-12-14T07:38:47+00:00","dateModified":"2022-07-01T07:17:04+00:00","description":"Data visualization, UX in general, helps grow revenue for FinTech applications. What are best practices and bad patterns in the industry?","breadcrumb":{"@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#primaryimage","url":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg","contentUrl":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2021\/09\/Data-visualisation-UX.jpeg","width":864,"height":450,"caption":"Data visualization ux best practices & bad patterns"},{"@type":"BreadcrumbList","@id":"https:\/\/codeandpepper.com\/data-visualization-ux-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeandpepper.com\/"},{"@type":"ListItem","position":2,"name":"Data Visualization UX &#8211; Best Practices &#038; Bad Patterns"}]},{"@type":"WebSite","@id":"https:\/\/codeandpepper.com\/#website","url":"https:\/\/codeandpepper.com\/","name":"Code & Pepper","description":"FinTech Developers","publisher":{"@id":"https:\/\/codeandpepper.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeandpepper.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeandpepper.com\/#organization","name":"Code & Pepper","url":"https:\/\/codeandpepper.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeandpepper.com\/#\/schema\/logo\/image\/","url":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/06\/logo.png","contentUrl":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/06\/logo.png","width":319,"height":144,"caption":"Code & Pepper"},"image":{"@id":"https:\/\/codeandpepper.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codeandpepper\/","https:\/\/x.com\/codeandpepper"]},{"@type":"Person","@id":"https:\/\/codeandpepper.com\/#\/schema\/person\/4d99a36115b17f10860637a13b3b3885","name":"Jaros\u0142aw \u015aci\u015blak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeandpepper.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ab028da5fc780b19966f305918b0045520176e8bc7c265540adcce45ab2cd0c9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ab028da5fc780b19966f305918b0045520176e8bc7c265540adcce45ab2cd0c9?s=96&d=mm&r=g","caption":"Jaros\u0142aw \u015aci\u015blak"},"description":"Branding, marketing, business scaling, content &amp; company culture specialist. Over 20 years of experience in marketing, strategy, and writing. Learn more by visiting: scislak.com","sameAs":["https:\/\/www.linkedin.com\/in\/jaroslawscislak"],"url":"https:\/\/codeandpepper.com\/author\/jarek-scislak\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/posts\/26125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/users\/20413"}],"replies":[{"embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/comments?post=26125"}],"version-history":[{"count":18,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/posts\/26125\/revisions"}],"predecessor-version":[{"id":37305,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/posts\/26125\/revisions\/37305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/media\/26239"}],"wp:attachment":[{"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/media?parent=26125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/categories?post=26125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/tags?post=26125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}