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
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/
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/