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


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

Dashboard Design
Layout and Content Organization
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2024
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout

https://www.edocr.com/v/1ndorko2/jgzheng/dashboard-layout-patterns

Overview
• This lecture notes
– Dashboard layout design elements, principles and best practices
• Pattern sub lecture
– Dashboard layout patterns
– Content organization patterns
– edocr - dashboard layout 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
1. Clean and organized
a. Alignment of elements
b. Spacing between elements
c. Sub-regions and grouping
d. Attention shaping: focus and priority
2. Simple and clear
3. Consistent and balanced
1a. 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
1b. 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

https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/

1c. 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

https://www.geckoboard.com/best-practice/dashboard-design/

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.

https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-your-data-visualization-design/

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

https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-your-data-visualization-design/

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/

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


https://www.geckoboard.com/blog/9-dashboard-design-principles-see-them-in-action-with-real-examples/#keep-it-uniform

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

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

1d. 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

https://www.geckoboard.com/blog/9-dashboard-design-principles-see-them-in-action-with-real-examples/#keep-it-uniform

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
2. 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.
3. 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

https://www.edocr.com/v/1ndorko2/jgzheng/dashboard-layout-patterns

Layout Styles/Patterns
Content Organization Patterns
• Please see the sub-lecture on patterns
https://www.edocr.com/v/1ndorko2/jgzheng/dashboard-layout-patterns

http://www.finereport.com/en/features/tv-dashboard

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.

https://www.pinterest.com/ruth77rn/ui-patterns-dashboards/


http://logianalytics.com/dashboarddesignguide/dashboard-design-fundamentals/

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?

https://www.gpug.com/HigherLogic/System/DownloadDocumentFile.ashx?DocumentFileKey=0353499e-a6bc-1361-1774-98fc310cf369

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?

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