designing dashboards

An lecture of dashboard design in IT 7113 Data Visualization at Kennesaw State University - updated in 2023.
About Jack Zheng

Faculty of IT at Kennesaw.edu
dashboard data dashboard dashboard development dashboard design dashboard design principles Dashboard Design http www Data visual Dashboard Design chart tool objects goal Layout User http www geckoboard north star metric screen wireframe practice Mockup Dashboard Layout interact feature
Dashboard
Design and Development
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 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
Wireframe/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
– 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)
Try Figma
• Figma is an online UI design service 
featuring collaborative development
• You can a free star plan
– https://www.figma.com/pricing/
• Also good for designing dashboard layout
– https://playfairdata.com/how-to-create-better-
dashboard-layout-designs-with-figma/
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
34
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
•
Professionalism
– Dashboard title: concise and meaningful
– Header and footer
– Chart/visual titles and legends
• Concise and meaningful
• Style consistency across all charts
•
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
– Keep visuals well spaced, unclutter, number of charts/elements <15
– Don’t clutter: limit number of items on the screens (depending on screen size?)
– What if more?
• Details/extra on demand: selections/switch settings (radiobutton), tabbed, secondary pages,
– 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
– Chart size consistency, card design consistency, alignment
– 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/
More Throughts
• Variety vs. consistency
– Consistency does not mean all the same.
– Vary the chart type for logical grouping and 
attention shaping.
• Elegance vs. simplicity
– Simplicity does not sacrifice beauty.
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/