Dashboard Content and Layout Design
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2021
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
Overview
This lecture summarizes some common
• dashboard layout patterns
• content organization patterns
• attention shaping (setting attention and focus) practices in
dashboard
Layout Design
• Layout is the placement and arrangement of dashboard elements
on the screen.
• Dashboard elements include (this lecture focuses the first two)
– 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
– Number of elements
– Sizing and shape of the complete area
– Positioning of elements
– Sizing of elements
– Shaping of elements
– Grouping of elements
• Layout design
– Generic layout styles
– Layout + content: considering content in layout 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.
• Simply stacked (grid or list)
– Grid layout
– Row based
– Column based
• Mixed
– Side panels + main block area
• 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
Grid Layout
• In a grid layout, there is no
significant grouping along
rows or columns. Elements
are evenly placed in a cell.
• 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-dashboar