Dashboard Content and Layout Design IT 7113 Data Visualization http://idi.kennesaw.edu/it7113/ J.G. Zheng Spring 2023 https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout Overview • Layout design elements and best practices • Layout patterns – dashboard layout patterns – content organization patterns Layout Design • Layout is 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? – Sizing and shape of the complete screen area – Number of elements – Positioning of elements – Sizing of elements – Shaping of elements – Grouping of elements – Content of elements General Best Practices • Clean and Organized – Alignment – Spacing – Sub-regions – Grouping – Attention shaping – focus and priority • Simple and clear • Consistency and balance Alignment • Alignment is the basic requirement to make UI look tidy – Align charts and regions – Misalignment makes dashboard look disorganized Use background color to set the region and attention. Misalignment of the top line chart Spacing • Appropriate spacing makes dashboard look clean • But avoid too much spacing between 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. Sections (sub-regions) • Make a big dashboard into smaller regions will simplify the browsing and seeking for information on the dashboard. • Leave space for header (and footer) and visually different them https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/ 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 • Grouping considered together with sub-regions • Logical grouping (or separation) of content and subsections: by data/content relevance – see patterns summarized in the second part of this lecture notes 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 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 for regions http://www.excelcharts.com/blog/excel-dashboard-catchment-area/ Use background color to set the region and attention. Using Boxes with Background Color https://www.geckoboard.com/blog/9-dashboard-design-principles- see-them-in-action-with-real-examples/#keep-it-uniform Use background colors to box each card/chart. Background Color and box Use background colors to box each card/chart and indicate regions with similar background colors. Attention Shaping in Dashboards • Where to focus, where to start, when facing a full screen of charts and numbers? – Avoid simply stacking up charts and tables; emphasis on important information. • Understand – Information flow: where the audience’s eyes will start and travel next allows you to guide them through your dashboard. – Natural attention focus: https://chandoo.org/wp/2011/04/29/golden-triangle-in- dashboards/ • 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 • Commonly used pre-attentive attributes – Position, spatial location – Size – Color 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 hero chart/section which is larger than other contents • A hero section sometimes can overpower the imporace by position. • See more hero section patterns in the second half of the lecture Hero Section with larger size for attention Simplicity • One page/screen fit; do not scroll for more. • Use common grid-based layout; no fancy magazine cover style design • Don’t clutter – limit number of items on the screens (depending on screen size?) • number of charts/elements <15 – 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 (radiobutton), tabbed, secondary pages Other Considerations and Best Practices • Balance – Symmetry and asymmetry in dashboard • Consistency – Chart size consistency • Common Failures in Dashboard Formatting and Layout – https://www.perceptualedge.com/articles/Whitepapers/Formatting_ and_Layout_Matter.pdf 18 Layout Style Patterns • 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. • 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 20 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 First 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 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 • Master/Index + detail – Index for overview and selection – Summary 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 / 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 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 + Result • 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 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. https://public.tableau.com/profile/adam.e.mccann#!/vizhome/5Ty pesofDashboards/4BottomUpDashboard 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 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 are not covering designing for these types of screens in this class. 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 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 After Layout Design Case Study 2 • https://www.gpug.com/HigherLogic/S ystem/DownloadDocumentFile.ashx? DocumentFileKey=0353499e-a6bc- 1361-1774-98fc310cf369 Before After Good Readings • 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/