Dashboard Design and Development IT 7113 Data Visualization http://idi.kennesaw.edu/it7113/ J.G. Zheng Spring 2023 https://www.edocr.com/v/9oqqrzoo/jgzheng/designing-dashboards Overview • Six elements of dashboard design • Other design topics (briefly covered) – Design process and methodology – Development tools – Prototyping and wireframing • Dashboard design principles and overarching guidelines • Dashboard design patterns and best practices. We will focus on the following areas in this course: – Layout (separate lecture notes in this module https://www.edocr.com/v/pb9delzd/jgzheng/dashboard- layout) – Interactivity (as part of module 10) How to Develop Dashboards? 1. Structural aspect (the focus of this lecture notes) – Six major elements in dashboard design – How are they related? 2. Procedural/engineering aspect - process – What are the tasks and steps in development? What are the activities and how they are sequenced? – How to manage development projects? [+1] In addition: technology and tool aspect – What tools to choose? • Overall, the development knowledge is summarized in a set of principles, patterns, best practices, and tools. This is a broad question that can be thought from two (+1) aspects of development. Six Elements of Dashboard Design Goals and objectives Data/information design Visualization design UI design Interaction design Application feature design Six Elements of Dashboard Design Element Description 1 Goals and objectives Setting the context, goals and objectives 2 Data/information design Selection of data and metrics 3 Visualization design Selection of data presentation/visualization forms and styles 4 UI design How contents and objects are arranged on the screen for utility and usability 5 Interaction design Interactions and actions that supports exploration and analytical behaviors 6 Application feature design Design as part of a larger system, and support utility features like print, export, share, etc. 1. Goals and Objectives • Goals and objectives are the starting point of dashboard development. It is critical to design an effective dashboard. – A goal is a high-level overview, and it usually can be expressed in one or two sentences. – Objectives are more specific and detailed. They directly support the goal. They are usually associated with key questions needed to be answered. – The definition of goals impact the following designs on data, visual, and UI. – Prioritize objectives based on the goal. • Mostly, this is based requirement analysis, especially: – Why do we have this dashboard?  goals – What key questions should the dashboard answer?  objectives – Users: who are the major users of the dashboard? • An example on the right  – Compare goals and objectives This dashboard is for college administrators to check faculty workloads and performance to assist with resource allocation. Show faculty teaching work loads for the most recent semester. Show faculty publications for the last year and past 5 years. List most productive faculty members. Explore faculty online teaching interests and loads. Compare potential departmental differences. Grand Goal Objectives Consider using a design methodology, for example, use a purpose map. Extended reading: Andy Kirk book chapter 3 https://www.visualisingdata.com/book/ Examples of Problematic Goals • “The primary goal and objective are to understand the consequences of available data and to communicate experience exactly, coherently, and successfully.” – Too general … what is exactly this project? • “The goal of my dashboard was to create a simple view that displayed important super store data.” – Better, still very general – but at least we know this is a dashboard project. • “The goal of the dashboard is to make a simple Executive Summary of Sales.” – Much better, but can be more specific and provide some context or relevancy in the “executive summary” • “This dashboard will show growth using line charts” – Describing what it will show is not a goal. – Growth is not clear here – growth of what? – A bit too narrow on using line charts – does the dashboard only include line charts? Acceptable improved version: “This dashboard will provide an executive summary of in-store sales growth for the past five years and highlight growth factors.” Context and Scope • Defining the context and scope of a solution is directly related to goals and objectives. This can serve the guiding principle when determining development details. This includes consideration of stakeholders, level and type of dashboard, and other capabilities and constraints. • Stakeholders – User types: infrequent vs. regular user, grand view vs. detailed view user, power user vs average user, etc. – Use the language that users are familiar with – Choose the right level and type of dashboards. Different user groups may require a different type of dashboard. For example, the marketing manager may need both a Strategic and Operational view of their data. • Level of dashboards (see module 8 dashboard overview) – Operational, tactical, and strategy views • Type of dashboards: what kind of activity does it mainly support? – Data exploration, analytical, or decision making – Focus on individual details vs. overall aggregate – for example, in a faculty workload dashboard, is it focusing on all faculty, or key faculty members? • Focus on individual: larger space allocated to individual, with listing of all, minimize interactive switching. • Focus on overall: overall is the focus, and individual details may use a selection to choose, but not listing all together. – Free style exploration or guided/focused analytic (answering questions) • Others: understand the capabilities and constraints – Tech environment and resources – Development/sustain skills How to design each of these types of dashboards? Consider a research project. Users • Personal preferences: some people may prefer more condense visual format while other prefer guided story style with narratives. – A dashboard may not the solution for some people. https://www.storytellingwithdata.com/blog/from-dashboard-to-story This is a traditional performance dashboard good for data exploration and KPI displaying, used repeatedly. This is a narrative-driven presentation or report, maybe good for a one-time use. It is more focused delivery. 2. Data/Info Design • The major work in this part is to determine what data and metrics should be presented. • Select metrics and KPIs – Normally this is based on objectives, but the limited space may not satisfy all requirements. – Prioritization may be necessary to determine the importance of metrics. – How? See an example “north star metrics” methodology (see slide #27) https://medium.com/@finereport_en/using-north-star-metrics-to-display- your-key-information-on-a-large-screen-fa434c492245 • Examine data/metric features and profiles, such as: – KPI data vs. contextual data/information – Measure data vs. dimensional data – Snapshot data vs. history data – Aggregate data vs. detailed data – Single number data vs. serials of data • Consider putting metrics in a context – See next slide Data in a Context (Comparisons) • Determine supporting contexts for key metrics; this provides critical comparison and benchmarking – These comparisons provide more details and context to understand the key metric. – Comparisons can be integrated into one chart, or in several closely related sub charts. • Comparison Examples • The inclusion of the comparison data is determined by the goals and objectives – The comparison may be of critical importance as it directly supports the goal or answers the question – Or they can be secondary details that can be requested on demand. https://www.perceptualedge.com/articles/Whitepapers/Rich_Data_Poor_Data.pdf Context Example KPI card Compared to the forecast. Provide a historic perspective Compared to the last period. Compared to the last period. 3. Visualization Design • Visualization design particularly focuses on the selection of visual forms and visual variables for data or metric sets. 1. Design at the individual element level (see prior learning modules) – Basic visual forms (module 1) – Choose the right type of chart or maps (module 4, 5, 6, 7) – Choose the proper visual variables for coding (module 2) – Chart style including size, color, legend, etc. 2. Design at the dashboard level – The choice of chart types and styles may need to consider the fit and consistency to other objects on the same dashboard – For example • use similar chart types for similar or related measures • vary the chart type for different measures • the color coding should be consistent (for same data) across charts – Use dashboard-specific visual components – next a few slides Dashboard-Specific Visuals • Some visual components are commonly used in dashboards but not used independently – Performance charts used for a set of related measures: gauge charts, waffle charts, bullet graph, scorecards, etc. https://datavizproject.com/input/g/ – Styled number (KPI card) https://www.geckoboard.com/blog/ designing-and-building- dashboards-the-ultimate-guide-to- data-visualizations-part-2/ – Leader board https://www.geckoboard.com/blog/ designing-and-building- dashboards-the-ultimate-guide-to- data-visualizations-part-1/ Use KPI Card 15 • KPI card features a standalone styled numeric value – Commonly used for presenting important values like KPI (key performance indicator) • Styles and examples – Single number without much visual (maybe with some icon or title) https://datavizproject.com/data-type/number/ – Added context data https://www.geckoboard.com/blog/designing-and-building- dashboards-the-ultimate-guide-to-data-visualizations-part-2/ • KPI can also be presented using KPI performance charts or chart good for individual numbers like – Gauge chart https://datavizproject.com/data-type/angular-gauge-chart/ – Waffle chart https://datavizproject.com/data-type/percentage-grid/ – Bullet graph https://datavizproject.com/data-type/bullet-graph/ – Pie/donut chart – Progress bar https://datavizproject.com/data-type/progress-bar/ https://investor.bankofamerica.com/fixed-income Fixed Income Investor Materials 2022Q3 Card is Google’s term to describe a way to display multiple piece of data/information as a visually cohesive unit • A card is like a small space with more complex layout within. • A popular concept to design information presentation for web and mobile applications. • Reference: https://material.io/compo nents/cards/ Tables with Detailed Data • Normally a visual intensive dashboard avoids details presented in a table, but sometimes such a table may be necessary to serve some specific objectives • Other best practices – Embed conditional formatting and sparklines into table if needed. – Use a pop-up for even a second screen for bigger tables. – Provide filter and sorting functions for tables with many records. https://www.slideshare.net/markginnebaugh/busin ess-intelligence-dashboard-design-best-practices (slide #17 “Grids”) Screenshot from https://www.youtube.com/watch?v=Zy8TlxDeSlw Table can handle a lot of comparison data in a tight space Use conditional formatting and sparklines. 4. User Interface Design • UI is the essential piece to any software, including the visual intensive dashboard applications – Share many principles and practice in UI design: layout, navigation, content organization, interaction, etc. – Apply general UI design principles and best practices – UI convention (familiarity), standard, branding • Key elements in dashboard user interface design – Layout: the placement and arrangement of dashboard elements on the screen – Navigation (menu) system: this includes in-page navigation and cross-page navigation – Styles and themes: font, color, design style, image, logo, icons, background, etc. Layout Design • Layout is the placement and arrangement of dashboard elements on the screen, including – Positioning, sizing, grouping, visual distinction • Apply Gestalt principles and pre-attentive attributes in dashboard layout design. 18 See a specialized lecture on layout design https://www.edocr.com/v/pb9d elzd/jgzheng/dashboard-layout Image from https://bi-notes.com/bi- dashboards-tips-for-starting-your- dashboard-layout/ Navigation Design • Multiple-part (screen) dashboards – A more complex dashboard application may contain more than one dashboard – In this case, dashboard can be designed more like a software application or a website – Need a navigation system for the flow and logical linking of these multiple pages • A navigation system provides users a way to visit different parts of the application. – Navigation needs to be clear and intuitive. At any time, users need to know where they are, where they come from, and where is the next. • Navigation design choices – A sequential listing of pages/sheets (like the Excel sheets or Tableau sheets); either at the bottom or at the top row (Tableau Public) – A dedicated menu displayed in the header (accessible in all dashboards) – A homepage, cover page, or a leading summary dashboard that provides an overview, and can leads to individual dashboard that provides more specific and detail information (such as drill down details, history, a bigger table, or more customized comparison) – Cover page menu (table of content, or index) – example https://www.theinformationlab.co.uk/2014/10/29/tableau-layout-containers-part-2-tableau- menu-interface/ – Built-in navigation: linking to secondary dashboards from the main dashboard through a drill down/through action or details on demand action – no menu We do not focus on navigation design in this class. Navigation Pattern - Tabbed • Use sub-dashboards for details or lower-level details – Link them or tab them • Example: ResearchGate.com stats dashboard Three additional tabs for detailed data from different perspectives. The first tab is the summary/overview dashbaord Design for Multi-Screen Experience • People use data and information in many types of screen these days • We mainly focus on desktop screen experience, but do consider designing for screens of various sizes and interaction capabilities – Small screen, mobile devices – Big screen (TV size) – Large/super size screens (video wall) – VR/AR environments – Touch screen, remote controlled screen, sensor controls, etc. • We do not cover these topics, but they are very good research topics for your project. 5. Interactivity and Functional Design • Interactivity mainly supports exploration and analytical operations and functionalities • Interactivity vs. direct presentation in presenting more data/charts – It is a design consideration based on design objectives and needs. – Direct presentation design requires no user selections and is more direct to perception, but it occupies more screen space. It is used for equally important data and charts. – Interactive selection/choice saves screen space but needs user actions, and sometimes it does not show certain visualizations at the same time. It is mainly used for more secondary data/charts and user preferences. • Design elements – Using charts as a filter should be very intuitive. – Multi-dashboard/page design – Navigation: navigation is an important UI component to any software application – functional interactivity • Select and compare • Filter data • Drill-down • Zooming • Get extras and more details We will see more details in module 10. Extended reading: Understand human information and analytic behaviors http://www.cc.gatech.edu/~stasko/papers/infovis05.pdf 6. App Feature Design • Dashboard can be treated as an application itself, thus provide additional functions besides basic UI and interaction features. – Or like a web app if published on the web. • An application also provides the following features – App title/logo – Navigational controls (with icons): menu, tab, button – Supporting actions: share, print, export, etc. • A dashboard may be integrated into the organization system or a larger BI system or transactional system. – consider consistency with the complete application and organizational theme and style. Dashboard Header: Title, User, Action Buttons, etc. Main menu with links to other contents. Action buttons for general app functionalities https://searchbusinessanalytics.techtarget.com/definition/business-intelligence-dashboard App name: the app embodies the dashboard +1 Dashboard Systems and Tools • Dashboard systems and tools may impact the design as their features are different. A more conceptual and logical design may be implemented differently on different tools. • On the other hand, the design of the dashboard may also impact the choice of the tool. – It is important to know these tool features and select the best-fit tool. • Functional features that may impact the design – Data features: data preparation, transformation, modeling – Visual features: chart types, mapping, visual settings, – UI features: layout, interaction actions • Non-functional features that may impact the design – Performance • Number of data items it can handle – Delivery methods: web vs. file based, export, printing, etc. – Extensibility: ability to work with external tools and libraries, like R. – Data storage, security, access control, etc. • In many other cases when a tool can be predetermined or a tool is the only choice, then the design can go with more detailed specifics and work within the tool capability. • Common tool types – Spreadsheet tools, like Excel – Programming tools – BI or analytics tools – Dedicated dashboard software Extended reading: https://www.datapine.com/ articles/best-dashboard- software-features https://www.geckoboard.c om/blog/how-to-build-a- dashboard/ Dashboard Design Process/Methodology • A design process involves a defined set of design considerations and tasks. – A process consists of steps arranged in an order. – A repeatable and defined design process embodies maturity in design capability and experience. • Benefits: – serves as a guide and a checklist to plan and manage the whole project – reduces the randomness and improves efficiency • A simple example process 1. Conducting a requirement analysis • Requirements of major dashboard elements. • Also gather non-functional requirements especially dashboard development, delivery, and maintenance approaches • Know tool (software application) features, capability or complexity of certain types of dashboard features • Evaluate and select the tool if needed 2. Designing elements mentioned earlier • In a more agile process, the design of these elements can proceed at the same time; but it is recommended to set the goals and objective up front. • The design should consider implementation tool capability • Mockup and prototyping are good practices 3. Developing and implementing using a chosen tool 4. Testing • Other exemplar processes – User experience driven design - “Dashboards That Get a Double Take”, by Randy Chan, GPUG presentation, https://www.gpug.com/HigherLogic/System/DownloadDocumentFile.ashx?DocumentFileKey=0353499e-a6bc-1361-1774- 98fc310cf369 – “North Star Metrics” Methodology https://medium.com/@finereport_en/using-north-star-metrics-to-display-your-key- information-on-a-large-screen-fa434c492245 – https://visualbi.com/blogs/business-intelligence/dashboards/effective-8-step-process-creating-advanced-dashboards/ We are focusing on dashboard design process in this class. You may refer to the chart design process we discussed in module 4. An Example Design Methodology • “North Star Metrics” Methodology – Refer to https://medium.com/@finereport_en/using-north-star- metrics-to-display-your-key-information-on-a-large-screen- fa434c492245 • This methodology describes how to design and arrange metrics on a dashboard based on the most important metric called “North Star Metric”. • “North Star Metric” also known as “OMTM” (One Metric That Matters). • The key is to set the grand “north star” KPI. This metric will set the theme and direction of the whole dashboard. All other components of the dashboard will serve this KPI. • The north start KPI directly corresponds to the grand goal of the dashboard. Wireframes and Mockups • Wireframes/mockups are useful in brainstorming the initial ideas on layouts • Focuses on What the interface would resemble • Objective is to brainstorm and so wireframe need not be an exact match to end product • Contains one or more static, rough cut screenshots. Wireframe can even be an image. Look and feel is not important • It focuses more on screen layout than on functionality and navigation • The sketch and the wireframe belong to low-fidelity mockup representation. The mockup, gives medium-fidelity representation. The prototype, provides high-fidelity representation and functional proof of concept. – Comparing wireframes and prototypes https://designmodo.com/wireframing-prototyping-mockuping/ – https://www.mockuptiger.com Sketch This is the most basic representation. It is actually just a freehand drawing of what you want to produce, and this is also the quickest way you can visualize your website’s student. Even the simplest sketch can depict your ideas more clearly than words. Wireframe The goal in this step is to provide your app’s structure. This is just a simple layout where the functionality of the product and the interconnectivity among views/pages are shown. Here, you also describe the features and content you want to include and where they will be located in the final setup. Wireframes can also be used to make secondary and global navigations and ensure that the structure and terminology used for a website will be able to meet user expectations. Mockup This is the stage where the static map of the product is created. It’s time to put in colors, placement text, logos, images, etc. It will look similar to the finished product, but it is not yet clickable and interactive. Rather, it is just a graphical representation, but one that you can use for providing a more defined visual to your investors to help them visualize how the finished product will look like. You can create mockups using free online mockup generator tool. Prototype This is like the mockup stage with additional animation, interaction, UX pieces, and everything that you would like your users to experience when clicking the site’s buttons. Key functional features are provided to prove it works (proof of concept, MVP minimum viable product) Level of details growing Wireframe/Mockup Examples Images from: “Dashboards That Get a Double Take”, by Randy Chan, GPUG presentation, https://www.gpug.co m/HigherLogic/Syste m/DownloadDocume ntFile.ashx?Documen tFileKey=0353499e- a6bc-1361-1774- 98fc310cf369 Sketch Wireframe Mockup Mockup Mockup Prototyping • Designing a good dashboard is not easy, no matter the experience you have. It is not possible to get it right the first time, so you have to build prototypes and quick developments to validate it with end users. • Prototypes are actually working applications, although incomplete, imperfect, and with a lot of bugs. But they demonstrate the concepts applied with hands- on experience. • Prototype features – Focuses on What the end product would look and feel like – Objective is to get a sign-off prior to development – Must be built on the dashboard tool/technology of choice and so it needs technical competence – It may have data that is static and simulated; it need not be connected to a data source – The look-and-feel more or less resembles a final product than a wireframe – It should respond to user interactions • Users have to validate navigations, graphs, colors, fonts, data and all the important functions. • Building prototypes is one of the best ways to manage expectations. It has to be clear how users will interact with the dashboard. – http://blog.itcentralstation.com/how-to-successfully-manage-bi-dashboard-projects/ Dashboard Mockup/Prototype Tools • Design Tools for Data Visualization https://medium.com/sketch-app-sources/design-tools-for- data-visualization-f7d040f82497 • Other tools recommended – Excel (great mockup/prototype tool) – Figma: https://www.figma.com/pricing/ free and https://playfairdata.com/how-to-create-better-dashboard- layout-designs-with-figma/ – Moqups: https://moqups.com/templates/wireframes-mockups/admin-dashboard-wireframe/ (2 projects free) – https://www.mockuptiger.com free through https://www.wireframes.org – https://nicksight.com/dashboard-wireframe-kit/ (interesting physical tool) – More: https://www.dashtech.org/the-ultimate-guide-to-data-visualization-wireframing-and-mockup-tools- on-the-web/ Start with PowerPoint • PowerPoint – PowerPoint is a common piece of office utility software. So, this is the most convenient way to mock dashboards. It is easier for anyone to edit the dashboard as well. – It is also very powerful because you can import excel data into the tool to create exact visualizations. – You can also add interactions by using the transition and timing features. Plus, since its a presentation tool, it is great if you have to present your mockup and prototype to someone. • Video tutorials on using PowerPoint – https://www.youtube.com/watch?v=vxPXnsEak6c – https://www.youtube.com/watch?v=qCBumWcVFp4 • PowerPoint mockup resources – Templates https://slidemodel.com/templates/tag/dashboard/ (requires login) – https://www.free-power-point-templates.com/articles/best-dashboard-templates-for-powerpoint- presentations/ – https://www.powermockup.com (paid) Dashboard Design Principles and Best Practices The design of dashboard applications share many principles and practice in general UI design (usability): clarity, efficiency, simplicity, consistency 4 Dashboard Design Principles 1. Meeting goals and objectives – Guided by goals and objectives; the dashboard serves a purpose. – All visuals and data needs to be relevant and directly support the objectives of the dashboard 2. Clarity and effectiveness – Use effective visuals that clearly reveal the insight and deliver the message 3. Simplicity and efficiency – Simple and clear: use the simple design to meet the objectives and deliver messages – Easy to understand, explore, and interact 4. Consistency – Design as a whole: dashboard level design beyond single chart – Be consistent for the complete application, and consistent with the other organization applications and cultures. multiple charts, pages – Follow conventions, norms, and standards 33 Meeting Goals and Objectives • All dashboard elements need to be relevant and directly support the goals and objectives of the dashboard • Relevancy – Irrelevant objectives and charts get users distracted – wonder why are two things shown together? • It is important to set the goals and objectives right. – Charts serves the purpose of showing data and measures. – Do not talk about charts before setting objectives and measures. – Analyze and plan the logical relationships of the goal and objectives. Clarity • Clarity means effective visuals that clearly reveal the insight and deliver the message to the audience – For each individual visual (chart), refer to the clarity principles for charts as well (module 5) • At the dashboard levels – Focus on data, instead of visual – “Dashboards are not an appropriate venue for artistic impression.” - Stephen Few • Relevancy – Visuals should be grouped (with visual context) logically. Refer to Gestalt principles (module 2) • Readability – Avoid clutterness; do not put too many charts in the dashboard; size the chart so they can be read clearly. – Effectively using alignment, spacing, and background to organize charts – Reduce distractions, such as overuse of colors – Refer to preattentive design practices to highlight the important chart. • Limit artistic expression in dashboard – use more memorable, less abstract, real world iconic representations • Clarity is not the same as simplicity, but simplicity does contribute a lot to clarity. Simplicity • Simplicity means – Findable: easy to locate the information/data – Scannable: get what users want with a quick scan • Minimal design – “The world of data visualization is changing rapidly, with the trend to use complex graphs and infographic techniques to visualize information in an impactful way. Also the concept of big data is changing our relationship with the world of information. That’s perfect for powerful presentation, but not always for a dashboard.” - http://blog.itcentralstation.com/how-to-successfully-manage-bi-dashboard-projects/ • Example practices – Beautiful (but not necessarily colorful) with a theme or style – Layout • Don’t cram and jam, dense but not cluttered • Keep visuals well spaced, unclutter, number of charts/elements <15 • One page/screen fit • Clean and organized layout with clear logical groupings • Crowdedness / spacing of elements • Guide user focus and attention using pre-attentive and Gestalt principles – More: https://searchbusinessanalytics.techtarget.com/tip/Strategies-for-de-cluttering- business-intelligence-dashboard-designs https://www.geckoboard.com/best-practice/dashboard-design/ Consistency • Consistency is the accordance or similarity in look and feel, operations, and meanings. – Consistency does not mean charts should look exactly the same • Consistency at various levels – Across blocks of/sections of a dashboard – Across screens or pages of a dashboard application – Across multiple screens/devices: design for multi-screen experience – Across multiple software applications in an organization: the dashboard needs to be integrated into the organization, so it is important to consider corporative branding aspects: logos, colors, fonts, menu, etc. – Across all software apps: apply general UI/visual design principles and best practices • Example best practices – Design as a whole / design at the dashboard level • The choice of chart types and styles may need to consider the fit and consistency to other visual forms on the same dashboard • For example, vary the chart type for different measures; or use similar chart types for similar related measures; the color coding should be consistent (for same data) across charts as well; but different if they are not the same. – Define themes that will apply the style in as a whole set: fonts, borders, background, shades, etc. – Define the meaning of colors consistently • Use green and red for performance related measures • Use the same color for certain categories in comparison: e.g., use brown to represent UPS, etc. https://www.geckoboard.com/best-practice/dashboard-design/ Best Practices and Patterns • Best practices are the lessons and design references at a very detailed level for specific design elements (such as color, layout, slicers, etc.). Some of them are expressed in the form of patterns. • In this module we are mainly covering some best practices and patterns for dashboard layout design – See the lecture notes https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout • In module 10 we will discuss best practices for interactivity – https://www.edocr.com/v/l0pp3ral/jgzheng/visual-interactivity • Selected best practices – https://www.tableau.com/blog/7-tips-and-tricks-dashboard-experts – https://www.geckoboard.com/best-practice/dashboard-design/ • Other best practices can be found in the resources slide at the end; and you can start your own research. Essential Readings and Resources • Deep Dive Dashboard Design: https://interworks.com/blog/rcurtis/2017/05/09/tableau-deep-dive-dashboard- design-planning/ (note there are 7 parts) - This article is just getting you to start thinking about the design elements and activities; it is very helpful, but I don’t think it is a definitive guide.) • Dashboards formatting and layout – these articles provide some aspects of layout, but not complete picture yet. – http://vizcandy.blogspot.com/2013/11/tableau-designs.html – https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e – https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/ – https://www.phdata.io/blog/dashboard-design-essentials-dashboard-layout-formatting/ • Selected best practices – https://www.tableau.com/blog/7-tips-and-tricks-dashboard-experts – https://www.geckoboard.com/best-practice/dashboard-design/ • Wireframing, Prototyping, Mockuping – What’s the Difference? https://designmodo.com/wireframing-prototyping-mockuping/ Additional Good Resources • “Dashboards That Get a Double Take”, by Randy Chan, GPUG presentation, https://www.gpug.com/HigherLogic/System/DownloadDocumentFile.ashx?DocumentFileKey=0353499e-a6bc-1361-1774-98fc310cf369 • Design process – https://medium.com/@finereport_en/using-north-star-metrics-to-display-your-key-information-on-a-large-screen-fa434c492245 – https://visualbi.com/blogs/business-intelligence/dashboards/effective-8-step-process-creating-advanced-dashboards/ – https://www.interaction-design.org/literature/article/how-to-design-an-information-visualization • Dashboard layout design – https://www.phdata.io/blog/dashboard-design-essentials-dashboard-layout-formatting/ – https://www.perceptualedge.com/articles/Whitepapers/Formatting_and_Layout_Matter.pdf • Some more best practices collection for your information and research – https://static1.squarespace.com/static/52f42657e4b0b3416ff6b831/t/5310292ce4b08d35a87c9426/1393568044420/Guide_to_Dashboard_Design.pdf – https://www.geckoboard.com/blog/9-dashboard-design-principles-see-them-in-action-with-real-examples/ – https://www.logianalytics.com/dashboarddesignguide/ – https://www.logianalytics.com/ebook/dashboard-design-best-practices/ – http://www.uxforthemasses.com/dashboard-design/ – https://www.sisense.com/blog/4-design-principles-creating-better-dashboards/ – https://www.designyourway.net/blog/inspiration/showcase-of-beautiful-dashboard-ui-designs/ – https://www.tableau.com/good-to-great – https://www.tableau.com/learn/whitepapers/dos-and-donts-dashboards – https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c – https://www.perceptualedge.com/articles/Whitepapers/Common_Pitfalls.pdf • Wireframes/mockups – The Ultimate Guide To Data Visualization Wireframing And Mockup Tools On The Web https://medium.com/sketch-app-sources/design-tools-for-data- visualization-f7d040f82497 – Comparing wireframes and prototypes https://visualbi.com/blogs/business-intelligence/dashboards/storyboards-wireframes-and-prototypes/ – https://designmodo.com/wireframing-prototyping-mockuping/