http://idi.kennesaw.edu/it7113/


https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout

Dashboard Design
Content and Layout Patterns
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2024
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
Overview
This sub-lecture focuses on patterns. For layout design
principles, please see the main lecture.
• Dashboard UI layout patterns
• Content organization patterns
UI Layout Patterns

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns


http://www.slideshare.net/theresaneil/ria-screen-layouts


http://bi-notes.com/2013/06/bi-dashboards-tips-for-starting-your-dashboard-layout/


http://www.tableausoftware.com/public/blog/2013/10/dashboard-design

Basic Layout Styles Summary
• Most dashboards are typically designed in a rectangular area, abstractly
viewed as a grid (rows and columns). Many styles are based on the
utilization (combination) of rows and columns.
• Styles summary
– Simply stacked (grid or list)
• Plain grid
• Row based – Z-pattern
• Column based
– Mixed
• Side panels
• F or E pattern
– Hero focal section: top, left upper/lower, right, middle
– Whole screen with overlays
• More
– http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
– http://www.slideshare.net/theresaneil/ria-screen-layouts
– http://bi-notes.com/2013/06/bi-dashboards-tips-for-starting-your-dashboard-layout/
– http://www.tableausoftware.com/public/blog/2013/10/dashboard-design
4

https://www.idashboards.com/dashboard-examples/behavioral-health-dashboard-inpatient-admissions/

Plain Grid
• In a plain grid layout, there is
no significant grouping along
rows or columns. Elements
are evenly placed in cells.
• Used for operational or KPI
dashboard often
Originally from https://www.geckoboard.com/learn/dashboard-
examples/adwords-marketing-dashboard-example/
https://www.idashboards.com/dashboard-examples/behavioral-
health-dashboard-inpatient-admissions/

https://www.geckoboard.com/dashboard-examples/marketing-sales/google-ads-campaign-monitoring-dashboard/

Row Based Layout
• Contents are naturally grouped by rows.
• There may be sub-grouping within a row.
• Sub sections can be placed across columns.
Originally from https://www.geckoboard.com/learn/dashboard-
examples/adwords-marketing-dashboard-example/
https://www.geckoboard.com/dashboard-examples/marketing-
sales/google-ads-campaign-monitoring-dashboard/
Rows are defined
Two rows are defined

https://www.blue-granite.com/blog/design-principles-dashboard-layout-is-crucial

Z-Pattern
• Z-Pattern is
frequently
emphasized in row-
based layout.
• We read from top left
to right, then zig-zag
down left and scroll
right again (in a Z-
pattern).
• Understanding where
the audience’s eyes
will start and travel
next allows you to
guide them through
your dashboard.
https://www.blue-granite.com/blog/design-principles-
dashboard-layout-is-crucial

https://www.geckoboard.com/dashboard-examples/marketing-sales/web-analytics-dashboard/

Column Based Layout
• Elements are naturally
grouped by columns.
• There may be sub-
grouping within a column.
• Sub sections sometimes
can be placed across
rows.
https://www.geckoboard.com/dashboard-examples/marketing-
sales/web-analytics-dashboard/
Three columns are defined

https://web.archive.org/web/20180825151532/http:/www.dashboardinsight.com/articles/digital-dashboards/fundamentals/what-is-a-dashboard.aspx

Mixed (usually used with side panel layout)
• Main layout is column based, and then a sub-section can be
row based. Or vice versa.
https://web.archive.org/web/20180825151532/http://www.dashboardinsight.com/articles/digital-
dashboards/fundamentals/what-is-a-dashboard.aspx
Firstly, two columns
are defined.
Then, two rows are
defined in the left column.

http://www.excelcharts.com/blog/excel-dashboard-catchment-area/

Side Panel
• One grouping region is typically much larger, with some
smaller ones on the side. The larger section can have its
own sub-layout.
Side panel
on the left
column.
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/
The right
column is
further divided
by rows.

https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e

F-Pattern (or E-Pattern)
• F-Pattern is frequently emphasized in a mixed grid layout.
• We read from top left to right for summary to details.
• The most important and summarized data are put in the left
column. If needed, details and additional contextual data are
put on the right.
https://towardsdatasci
ence.com/working-on-
your-dashboard-
layout-9b7c38d7b61e

http://www.excelcharts.com/blog/excel-dashboard-catchment-area/

Hero Section
• A hero section is one visualization that
is particularly larger in size and
contains more depth of information
– It is designed to be the focal point of the
dashboard.
• It is usually placed on top or left side.
Or center of the screen (examples on
the next slide)
Originally from https://www.geckoboard.com/learn/dashboard-
examples/adwords-marketing-dashboard-example/
Google Analytics Dashboard
Hero
Section
Hero
Section
Hero
Section
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/

https://www.idashboards.com/dashboard-examples/k12-dashboard-district/

Hero Section
in the Middle
• A hero section can
overpower the
influence of
position
https://www.idashboards.com/
dashboard-examples/k12-
dashboard-district/
Hero
Section
Hero
Section

http://www.healthmap.org/


https://finviz.com/map.ashx


https://www.productchart.com/


https://www.healthmap.org/

Whole Screen + Overlays
• One big visual will occupy the complete screen; other part will pop up and overlay on the big visual for more information.
– Commonly used for data exploration and map-based dashboards
• Examples
– http://www.healthmap.org
– https://finviz.com/map.ashx
– https://www.productchart.com
https://www.healthmap.org
Pop-up
overlay
Pop-up
overlay
Pop-up
overlay
Content Organization Patterns
• Deal some specific content types and relationships

http://duelingdata.blogspot.com/2019/01/5-types-of-dashboards.html


http://gallery.idashboards.com/preview/?guestuser=webedu

Content Organization Patterns
• Master/Index + detail
– Index for overview and selection
– Summary/overview chart + detail data table: Side by side, top and bottom
• Top down: key summarized metrics followed by detailed data
– Key set of KPIs (single measures) on top row or side panel, + secondary measures
– Key summary + contextual/dimensional comparison
• Current snapshot + trending/history (half half): Key measures for one period (current or most recent) +
history/timeline/trend charts
• Period aggregate overview + key dimension drill down
– Aggregate level (top) + drill down levels (bottom)
– Google analytics: Primary measure + secondary (sliced)
• Current selection profile info + comparison with peers or context
• Bottom up: detail data first, then summarized
– Listing of detailed individual items + key summary at the high level
– http://duelingdata.blogspot.com/2019/01/5-types-of-dashboards.html
– Scorecard details + aggregate
• Centralized settings (slicer/filter) + result (used for analytical)
– Setting on top/side
– http://gallery.idashboards.com/preview/?guestuser=webedu
• Equally distributed
– Each subregion is of equal size, particularly used in leaderboards
16

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns


https://www.nytimes.com/elections/2016/results/president

Master+Details or Index+Content
• Master/detail (or index/content) is pattern to arrange content
– Master/index: the overview of items for selection
– Detail/content: more details presented upon selection from an item in the
master/index
– Often used with the hero section and the side panel layout.
– Master can be on the side or the top -
http://designingwebinterfaces.com/designing-web-interfaces-12-screen-
patterns
https://www.nytimes.com/elections/2016/results/president
Master/
Index
Master/
Index
Details/
Content
Details/
Content

https://census.looker.com/embed/explore/census/cps_with_groups?qid=KvNUdiYmIRLSkyJsXjNmxS&toggle=vis

Overview Chart + Details Data Table
• Big overview chart on top
• Then a table provides data details
https://census.looker.com/embed/explore/c
ensus/cps_with_groups?qid=KvNUdiYmIR
LSkyJsXjNmxS&toggle=vis
Data table with
details at the
bottom
Big overview
chart on the top

https://www.patternfly.org/v3/pattern-library/dashboard/dashboard-layout/index.html


http://www.crazybikes.com/mrc/CRAZYBIKES.I00100s

KPIs on Top
https://www.patternfly
.org/v3/pattern-
library/dashboard/da
shboard-
layout/index.html
http://www.crazybikes.com/mrc/CRAZYBIKES.I00100s
KPIs
KPIs

http://www.excelcharts.com/blog/excel-dashboard-catchment-area/

Key Data on the Side (Left)
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/
KPIs
KPIs

https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e

Trend + One Time Snapshot
• Many times, we are working with
historical data and one period data at
the same time.
• Use a bigger chart for the trend data;
and snapshot data for more details as
smaller charts at the bottom.
21
Google Analytics Dashboard
The top hero chart
provides history view of
view counts; the second
row displays KPIs.
Bottom charts/tables
provide details on key
aspects, with each leading
to additional
report/dashboard.
https://towardsdatascience.com/working-on-your-dashboard-
layout-9b7c38d7b61e

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

Settings + Results
• This pattern applies to more analytical dashboards where
there are many options and settings.
• Filter dataset http://designingwebinterfaces.com/designing-
web-interfaces-12-screen-patterns
Filters/Options
Filters/Options
directly on the chart

https://public.tableau.com/app/profile/datavizard/viz/EnergyinAmerica/Energy

Map in the Layout
• Maps are usually larger in
size to accommodate more
information
• Major patterns
– Map as primary visual on top,
and details on the bottom –
the places on map can also
be used as selectors or filters
for the data below.
– Map occupies the whole
dashboard, and details pop
up as needed (see prior slide
on whole screen+overlay
pattern)
https://public.tableau.com/app/profile/datavizard/viz/EnergyinA
merica/Energy
The map at the top is
also used as a selector.

http://duelingdata.blogspot.com/2019/01/5-types-of-dashboards.html

Bottom-Up
• Bottom-up design emphasize the details. It is usually used in
operations monitoring, where users’ attention is on details but less
on summary.
http://duelingdata.blogspot.com/2019/01/
5-types-of-dashboards.html
Detailed data set on
the left (big section)
Summary on
the right
More Bottom-Up Examples
Market index (summary) at
bottom; stock details on top.
Student details on
top.

https://public.tableau.com/app/profile/p.padham/viz/SuperstoreDashboard_16709573699130/SuperstoreDashboard

Side bar for navigation/actions
• Superstore Dashboard | Tableau Public

https://vanseodesign.com/web-design/3-design-layouts/


https://www.phdata.io/blog/dashboard-design-essentials-dashboard-layout-formatting/


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.perceptualedge.com/articles/Whitepapers/Formatting_and_Layout_Matter.pdf

Good Readings
• 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern -
Vanseo Design
– https://vanseodesign.com/web-design/3-design-layouts/
• Dashboard Design Essentials: Dashboard Layout & Formatting
– https://www.phdata.io/blog/dashboard-design-essentials-dashboard-
layout-formatting/
• 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/
• Common Failures in Dashboard Formatting and Layout
– https://www.perceptualedge.com/articles/Whitepapers/Formatting_and_L
ayout_Matter.pdf