An detailed summary of dashboard layout design in IT 7113 Data Visualization at Kennesaw State University - updated in 2023.
About Jack Zheng
Faculty of IT at Kennesaw.edu
Dashboard
Content and Layout Design
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2023
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
Overview
• Dashboard layout design elements and best practices
• Dashboard layout patterns
• Content organization patterns
Dashboard Layout Design
• Layout is about the placement and arrangement of
dashboard elements on the screen.
• Dashboard elements include
– Visual elements like charts, styled numbers, maps, tables
– Other data and informational elements like updates, texts
– UI elements like header, footer, logo, title, menu, etc.
• Components of layout – what to consider?
– Size and shape of the complete screen area
– Number of elements
– Positioning of elements
– Sizing/shaping of elements
– Grouping of elements
– Content features of elements
General Principles and Best Practices
• Clean and organized
– Alignment of elements
– Spacing between elements
– Sub-regions and grouping
– Attention shaping: focus and priority
• Simple and clear
• Consistent and balanced
Alignment
• Alignment is the
basic
requirement to
make UI look tidy
– Align charts and
regions
– Misalignment
makes
dashboard look
disorganized
Misalignment of the
line chart on the top
row
Spacing
• Appropriate spacing
makes dashboard look
clean
• But avoid too much
spacing between elements
or large white spaces
White space; the map
can be enlarged to fill
the white space.
White space; adjust
gauge size and line
chart position to fill the
white space.
Better alignment
and spacing
Sections (sub-regions)
• Organize the content into sections and subsections that reflect users’ needs.
• Make a big dashboard into smaller sub-regions, with similar content logically grouped together
– Having the information logically organized makes browsing easier and helps to understand the content quickly.
– People like well-organized sites that make important information easy to find.
• Leave space for header (and footer) and visually different them
https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/
A sub region may
contain multiple closely
relevant elements
Grouping based on Logical Relationship
• Logical relationship between sections and elements.
– Sibling: belongs to the same set or serials
– Hierarchy: serves the same purpose, but at different levels
• Use size and position to show hierarchy
– Purposeful related: comparisons
• Some good practices and patterns - see patterns summarized in the second and third part of this
lecture notes
– Decide is it important to show everything on the same page or would it be better to divide the content into
several pages.
– Give each section a short, descriptive title.
– Visually differentiate each content group from each other. Apply Gestalt principles: use white space, lines,
light borders, and/or background colors for content groups.
https://www.geckoboard.com/best-practice/dashboard-design/
Measures and charts
serving the same
objective should be
grouped together.
Gestalt Principles Applied in Grouping
• Use Gestalt principles and visual properties to imply
grouping and relationships
– Refer to module 2 about these principles
– More applied to dashboard layout
• https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-
your-data-visualization-design/
• Best practices: use visual containers to logically group or
visualize sub-sections
– separators and borders
– background color
– box
– effective use of spacing (sparsity and density): margin, padding,
and blank space
– alignment and distance
Using Border
Explicitly using border
to group contents
Explicitly using border
to group contents
https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-
improve-your-data-visualization-design/
Using Background Color
http://www.excelcharts.com/b
log/excel-dashboard-
catchment-area/
Use background color
to set the region and
attention.
https://www.geckoboard.com/blog/9-
dashboard-design-principles-see-them-in-
action-with-real-examples/#keep-it-
uniform
Use background color
to box each group.
Using Common Background Color
Use a common or similar background
color for related elements to indicate
regions and groups
Attention Shaping in Dashboards
• Where to focus and where to start, when facing a full screen of charts and
numbers?
– Avoid simply stacking up charts and tables; emphasis on important information.
• Understand the concepts
– Information flow: where the audience’s eyes will start and travel next allows you to
guide them through your dashboard.
– Natural attention focus
– Patterns and anti-patterns: Z-pattern, F-pattern, gold triangle - 3 Design Layouts:
Gutenberg Diagram, Z-Pattern, And F-Pattern - Vanseo Design
• Best practices
– Use preattentive properties to shape attention that breaks the normal information flow
and fixed attention
– Prioritize dashboard elements - display a focal point that prioritizes information
– Place the most important information towards the top of the page
• Commonly used pre-attentive attributes
– Position, or spatial location
– Size and Color can alter the importance of position
Position Priority: Top and Left
https://www.geckoboard.com/blog/9-dashboard-design-principles-
see-them-in-action-with-real-examples/#keep-it-uniform
Size
• Use a hero chart/section which is larger than other contents
• A hero section sometimes can overpower the importance by
position.
• See more hero section patterns in the second half of the
lecture
Hero Section
with larger size
for attention
Simple and Clear
• Use common grid-based layout; avoid fancy magazine cover style
design
• One page/screen fit; avoid scrolling, especially horizontal
scrolling.
• Don’t clutter
– Limit number of items on the screens (depending on screen size?)
– Don’t cram and jam, dense but not cluttered
– Keep visuals well spaced and separated
• What if there are more elements?
– Prioritize and let go the less important
– Utilize interactivity for more info (see module 10)
– Details/extra on demand: selections/switch settings (radio button),
tabbed, secondary dashboards/pages
– If needed, design multiple related dashboards, each with a clear goal.
Consistent and Balanced
• Balance
– Symmetry and asymmetry in dashboard: use effectively for
attention shaping
– Balance of simplicity and beauty
– Balance of visualization and text/number
– Balance of interactivity and direct views
• Consistency
– Style consistency across dashboards
– Color scheme consistency across charts
– Chart type consistency for a group/set
17
Layout Styles/Patterns
• Generic layout styles
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
19
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/
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
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
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
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.
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.
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
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/
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
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
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
31
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
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
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
Key Data on the Side (Left)
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/
KPIs
KPIs
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.
36
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
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
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.
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.
Screen Size Considerations in Layout Design
• Design the layout to fit one screen?
• What about smaller screens?
– Screen adaptation: responsive?
– Use sub dashboards?
– Add interactivity?
• Extra on demand?
• Panning
• Overview + detail
• Scrolling
• Paging
• Bigger wall screens? http://www.finereport.com/en/features/tv-
dashboard
• Touch screens?
• 3D VR/AR screens/spaces?
We do not cover the
designing for these types
of screens in this class.
Layout Design Case Study 1
• Look for examples here
– https://www.pinterest.com/ruth77rn/ui-patterns-dashboards/
http://logianalytics.com/dashboarddesignguide/dashboard-design-fundamentals/
Before – what
are the issues?
After – what are changed?
What patterns or best
practices are applied?
Layout Design Case Study 2
• https://www.gpug.com/HigherLogic/S
ystem/DownloadDocumentFile.ashx?
DocumentFileKey=0353499e-a6bc-
1361-1774-98fc310cf369
Before –
what are the
issues?
After – what are
changed? What patterns
or best practices are
applied?
Layout Sketch, Wireframes, and Mockups
• Sketch: use pen and
paper to quickly
brainstorm ideas
• After sketching, use a
software tool for
better design,
communication, and
changes.
• Eventually finalize
the design with a
mockup.
https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e
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
Content and Layout Design
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2023
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
Overview
• Dashboard layout design elements and best practices
• Dashboard layout patterns
• Content organization patterns
Dashboard Layout Design
• Layout is about the placement and arrangement of
dashboard elements on the screen.
• Dashboard elements include
– Visual elements like charts, styled numbers, maps, tables
– Other data and informational elements like updates, texts
– UI elements like header, footer, logo, title, menu, etc.
• Components of layout – what to consider?
– Size and shape of the complete screen area
– Number of elements
– Positioning of elements
– Sizing/shaping of elements
– Grouping of elements
– Content features of elements
General Principles and Best Practices
• Clean and organized
– Alignment of elements
– Spacing between elements
– Sub-regions and grouping
– Attention shaping: focus and priority
• Simple and clear
• Consistent and balanced
Alignment
• Alignment is the
basic
requirement to
make UI look tidy
– Align charts and
regions
– Misalignment
makes
dashboard look
disorganized
Misalignment of the
line chart on the top
row
Spacing
• Appropriate spacing
makes dashboard look
clean
• But avoid too much
spacing between elements
or large white spaces
White space; the map
can be enlarged to fill
the white space.
White space; adjust
gauge size and line
chart position to fill the
white space.
Better alignment
and spacing
Sections (sub-regions)
• Organize the content into sections and subsections that reflect users’ needs.
• Make a big dashboard into smaller sub-regions, with similar content logically grouped together
– Having the information logically organized makes browsing easier and helps to understand the content quickly.
– People like well-organized sites that make important information easy to find.
• Leave space for header (and footer) and visually different them
https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/
A sub region may
contain multiple closely
relevant elements
Grouping based on Logical Relationship
• Logical relationship between sections and elements.
– Sibling: belongs to the same set or serials
– Hierarchy: serves the same purpose, but at different levels
• Use size and position to show hierarchy
– Purposeful related: comparisons
• Some good practices and patterns - see patterns summarized in the second and third part of this
lecture notes
– Decide is it important to show everything on the same page or would it be better to divide the content into
several pages.
– Give each section a short, descriptive title.
– Visually differentiate each content group from each other. Apply Gestalt principles: use white space, lines,
light borders, and/or background colors for content groups.
https://www.geckoboard.com/best-practice/dashboard-design/
Measures and charts
serving the same
objective should be
grouped together.
Gestalt Principles Applied in Grouping
• Use Gestalt principles and visual properties to imply
grouping and relationships
– Refer to module 2 about these principles
– More applied to dashboard layout
• https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-
your-data-visualization-design/
• Best practices: use visual containers to logically group or
visualize sub-sections
– separators and borders
– background color
– box
– effective use of spacing (sparsity and density): margin, padding,
and blank space
– alignment and distance
Using Border
Explicitly using border
to group contents
Explicitly using border
to group contents
https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-
improve-your-data-visualization-design/
Using Background Color
http://www.excelcharts.com/b
log/excel-dashboard-
catchment-area/
Use background color
to set the region and
attention.
https://www.geckoboard.com/blog/9-
dashboard-design-principles-see-them-in-
action-with-real-examples/#keep-it-
uniform
Use background color
to box each group.
Using Common Background Color
Use a common or similar background
color for related elements to indicate
regions and groups
Attention Shaping in Dashboards
• Where to focus and where to start, when facing a full screen of charts and
numbers?
– Avoid simply stacking up charts and tables; emphasis on important information.
• Understand the concepts
– Information flow: where the audience’s eyes will start and travel next allows you to
guide them through your dashboard.
– Natural attention focus
– Patterns and anti-patterns: Z-pattern, F-pattern, gold triangle - 3 Design Layouts:
Gutenberg Diagram, Z-Pattern, And F-Pattern - Vanseo Design
• Best practices
– Use preattentive properties to shape attention that breaks the normal information flow
and fixed attention
– Prioritize dashboard elements - display a focal point that prioritizes information
– Place the most important information towards the top of the page
• Commonly used pre-attentive attributes
– Position, or spatial location
– Size and Color can alter the importance of position
Position Priority: Top and Left
https://www.geckoboard.com/blog/9-dashboard-design-principles-
see-them-in-action-with-real-examples/#keep-it-uniform
Size
• Use a hero chart/section which is larger than other contents
• A hero section sometimes can overpower the importance by
position.
• See more hero section patterns in the second half of the
lecture
Hero Section
with larger size
for attention
Simple and Clear
• Use common grid-based layout; avoid fancy magazine cover style
design
• One page/screen fit; avoid scrolling, especially horizontal
scrolling.
• Don’t clutter
– Limit number of items on the screens (depending on screen size?)
– Don’t cram and jam, dense but not cluttered
– Keep visuals well spaced and separated
• What if there are more elements?
– Prioritize and let go the less important
– Utilize interactivity for more info (see module 10)
– Details/extra on demand: selections/switch settings (radio button),
tabbed, secondary dashboards/pages
– If needed, design multiple related dashboards, each with a clear goal.
Consistent and Balanced
• Balance
– Symmetry and asymmetry in dashboard: use effectively for
attention shaping
– Balance of simplicity and beauty
– Balance of visualization and text/number
– Balance of interactivity and direct views
• Consistency
– Style consistency across dashboards
– Color scheme consistency across charts
– Chart type consistency for a group/set
17
Layout Styles/Patterns
• Generic layout styles
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
19
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/
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
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
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
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.
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.
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
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/
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
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
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
31
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
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
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
Key Data on the Side (Left)
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/
KPIs
KPIs
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.
36
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
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
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.
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.
Screen Size Considerations in Layout Design
• Design the layout to fit one screen?
• What about smaller screens?
– Screen adaptation: responsive?
– Use sub dashboards?
– Add interactivity?
• Extra on demand?
• Panning
• Overview + detail
• Scrolling
• Paging
• Bigger wall screens? http://www.finereport.com/en/features/tv-
dashboard
• Touch screens?
• 3D VR/AR screens/spaces?
We do not cover the
designing for these types
of screens in this class.
Layout Design Case Study 1
• Look for examples here
– https://www.pinterest.com/ruth77rn/ui-patterns-dashboards/
http://logianalytics.com/dashboarddesignguide/dashboard-design-fundamentals/
Before – what
are the issues?
After – what are changed?
What patterns or best
practices are applied?
Layout Design Case Study 2
• https://www.gpug.com/HigherLogic/S
ystem/DownloadDocumentFile.ashx?
DocumentFileKey=0353499e-a6bc-
1361-1774-98fc310cf369
Before –
what are the
issues?
After – what are
changed? What patterns
or best practices are
applied?
Layout Sketch, Wireframes, and Mockups
• Sketch: use pen and
paper to quickly
brainstorm ideas
• After sketching, use a
software tool for
better design,
communication, and
changes.
• Eventually finalize
the design with a
mockup.
https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e
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