Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Top 10 Glasstable Design Principles to Boost Your Career and Your Business

173 views

Published on

Turn Data into Doing, Everywhere in IT. Deliver data and insights to every business and IT function.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

The Top 10 Glasstable Design Principles to Boost Your Career and Your Business

  1. 1. © 2 0 2 0 S P L U N K I N C . © 2 0 2 0 S P L U N K I N C . The Top 10 Glasstable Design Principles to Boost Your Career and Your Business In order to avoid this Stephane Estevez Product Marketing Director EMEA, IT Markets | Splunk
  2. 2. During the course of this presentation, we may make forward‐looking statements regarding future events or plans of the company. We caution you that such statements reflect our current expectations and estimates based on factors currently known to us and that actual events or results may differ materially. The forward-looking statements made in the this presentation are being made as of the time and date of its live presentation. If reviewed after its live presentation, it may not contain current or accurate information. We do not assume any obligation to update any forward‐looking statements made herein. In addition, any information about our roadmap outlines our general product direction and is subject to change at any time without notice. It is for informational purposes only, and shall not be incorporated into any contract or other commitment. Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality in a future release. Splunk, Splunk>, Data-to-Everything, D2E, and Turn Data Into Doing are trademarks and registered trademarks of Splunk Inc. in the United States and other countries. All other brand names, product names, or trademarks belong to their respective owners. © 2020 Splunk Inc. All rights reserved. Forward- Looking Statements © 2 0 2 0 S P L U N K I N C .
  3. 3. © 2 0 2 0 S P L U N K I N C . TBD Product Marketing Director EMEA, IT Markets | Splunk Wine addict, guitar addict, product marketing addict Stephane Estevez Senior Sales Engineer | Splunk xx addict, xx addict, xxxaddict TBD
  4. 4. © 2 0 2 0 S P L U N K I N C . Today’s Scope
  5. 5. © 2 0 2 0 S P L U N K I N C . Deliver data and insights to every business and IT function Turn Data into Doing, Everywhere in IT
  6. 6. © 2 0 2 0 S P L U N K I N C . Turn Data into Doing, Everywhere in IT See the Bigger Picture with a unified experience for all of your teams across all of your services, applications, and infrastructure. Create Insights Across Silos when you bring together data from every team and tool to drive real-time visualizations of the metrics and KPIs that matter most. Empower Teams with Powerful Tools that provide productive and efficient workspaces, automation, and alerts, so your teams can deliver the experiences customers demand. Deliver data and insights to every business and IT function
  7. 7. © 2 0 2 0 S P L U N K I N C . Make the Shift to Predictive IT Find Problems Even Faster with machine learning-powered Service Analyzer tree to leverage the right data and determine root cause. Solve Problems in Record Time with Event Management to cluster events, reduce noise, and helping the right teams focus on only what is most important. Predict Problems in Advance with KPI Predictions and Predictive Cause Analysis, trending data across services, apps, and infrastructure so you can prevent outages before they have impact. With Splunk ITSI, you can predict and prevent problems before they have impact
  8. 8. © 2 0 2 0 S P L U N K I N C . Lack of design Applying basic design principles If you want your career to take off, demonstrate that you don’t need to be a data scientist to be effective. Embracing data visualization and predictive analytics to communicate imaginative business intelligence can propel your career. —PwC Glass Table Design Can Have the Same Effect on Your Boss as on Phoebe. “
  9. 9. © 2 0 2 0 S P L U N K I N C . Data Visualization Definition & History
  10. 10. © 2 0 2 0 S P L U N K I N C . Data visualization is the practice of converting data from raw figures into a graphical representation such as maps, graphs, charts, and complex dashboards.” Definition “
  11. 11. © 2 0 2 0 S P L U N K I N C . A Little Bit of History 2nd Cent CE People start arranging data into tables (columns and rows) 1160 BC First documented data visualization Turin Papyrus Map illustrates the distribution of geological resources and provides information about quarrying of those resources. 14,500 BC First Star Map Lascaux painted caves 17th Century The idea of representing quantitative information graphically arise Thank you Mr. René Descartes, for the two- dimensional coordinate system for displaying values 18th Century Charts created Thank you William Playfair for exploiting the potential of graphics for the communication of quantitative data. He create a line moving up and down from left to right to show how values changed through time (and the bar and pie charts…) ©W.Playfair1786 2020+ Data Journalism, ‘Citizen Data Scientists’… Words meets numbers. Complex things are explained using simple and engaging stories. ©Gartner
  12. 12. © 2 0 2 0 S P L U N K I N C . Data Viz Becomes Mainstream We are creating new ways of converting data into graphical representations Source : http://datavis.ca/milestones/
  13. 13. © 2 0 2 0 S P L U N K I N C . How Meaningful is Data Visualization?
  14. 14. © 2 0 2 0 S P L U N K I N C . Human Cognition and Data Visualization Data visualization has been created for human consumption, so understanding human perception and cognition is key. Human brains have a much harder time understanding complex data when it is encoded in numbers and text compared to graphics. But human vision can “understand” an image in 13 ms and process hit while the next image is displayed (source: M.Potter-MIT). Visually displayed (using graphs, shapes, color, orientation…), data is easier to grasp and analyze, making it faster for decision makers to find patterns, including new and hidden, and to understand even difficult concepts.
  15. 15. © 2 0 2 0 S P L U N K I N C . Time for the Top 10 Principles
  16. 16. © 2 0 2 0 S P L U N K I N C . Principle #1 Glass Tables & dashboards are not reports
  17. 17. © 2 0 2 0 S P L U N K I N C . Glass Tables and Dashboards are NOT Reports Reports Glass Tables Type of data As much as you can Most important data Realtime No Yes Presentation Detailed Consolidated Format Static Dynamic Allows quick action No Yes Ease of use Complex Simple and easy 1
  18. 18. © 2 0 2 0 S P L U N K I N C . Principle #2 Start with paper!
  19. 19. © 2 0 2 0 S P L U N K I N C . Define your audience and understand user requirements • What information do you need from me? • What form do you need it in? • What do you need or want to understand about this data? Content • Keep it relevant. Less really is more. • Avoid overdesigning. • Use iconography. Content isn’t limited to text and charts. 2 Start with Paper
  20. 20. © 2 0 2 0 S P L U N K I N C . Principle #3 Colors and fonts matter
  21. 21. © 2 0 2 0 S P L U N K I N C . • Stick to 1 font • No more than 3 sizes • Need to create visual hierarchy? Bold it or add an accent color (if everything’s bold, nothing is) • Use Serif fonts for body text (easier to read for longer text) • Use sans-serif for headlines, short blocks of text Fonts matterColors matter• Choose few and stick to them (but play with gradients) • Leverage contrast (use the Adobe Color wheel http://color.adobe.com) • Use color sparingly (each color serve a particular communication goal) • Pay attention to meaning – bad kind of bad good • Adapt colors to your audience culture (death=black in western countries, death=white in asia) • If using colors, make sure the background color is consistent (make color changes more obvious) Colors and Fonts Matter3
  22. 22. © 2 0 2 0 S P L U N K I N C . Principle #4 Choose the right visualization for the right data
  23. 23. © 2 0 2 0 S P L U N K I N C . Data Visualization Not all charts are created equal. Looking good ≠ ease of understanding. Effective visualizations enables the audience to easily comprehend more data in less time. (choose the right representation of data) 4
  24. 24. © 2 0 2 0 S P L U N K I N C . Visualizations 0 2 4 6 47% 29% 13% 11% GaugesPie chartLine chart / Sparkline (condensed) 4.3 2.4 2 Bar chart 0 20 40 60 Stacked area chart Title 1 Title 2 Title 3 Item 1 Item 3 Item 5 Item 2 Item 4 Item 6 Tabular format + - Best used when exact quantities of numbers must be known Not conducive to finding trends and comparing sets of data Best used when trying to visualize continuous data over time Best used when showing comparisons between categories or items in the same category Best used to compare parts to the whole Makes comparison of pie slice size difficult. Not great if less than 3 or more than 6 categories Best used for showing cumulated totals over time via numbers or percentages Best used to show a range ideal when you have an absolute floor// ceiling value Takes valuable space with limited information (single dimension) Less effective then line chart when trying to show trends over time If consistent scales on the axis aren’t used, it might lead to the data of a line graph appearing inaccurate. Users yes tend to focus on the tops of each line, leading to misinterpreting the patterns. 0 1 2 3 4 0 1 2 3 Scatter chart Best for showing the overall relationship in a large amount of data Limited to two variables, they are unable to give the exact extent of correlation
  25. 25. © 2 0 2 0 S P L U N K I N C . Visualization Tips 2.4 4.3 2 0 2 4 6 Category 1 Chart Title Series 1 Series 2 Series 3 5.2, 16% 3.2, 10% 1.4, 4% 1.2, 4% 5, 16%4.1, 13% 0.5, 1% 8, 25% 3.4, 11% Sales year 1 year 2 year 3 year 4 year 5 year 6 year 7 year 8 year 9 X X Reduce Chart-junk and Increase Data-to-ink Ratio Comparison Static Over Time 4.3 2.4 2 Category 1 0 2 4 6 Line chartLine chart (several items) Bar chartColumn chart 0 2 4 6 4.3 2.4 2 Pie chart Composition Static Over Time year 1 year 2 year 3 year 4 Stacked column chart Staked area chart 47% 29% 13% 11% 0 20 40 60
  26. 26. © 2 0 2 0 S P L U N K I N C . Principle #5 Follow the eyes
  27. 27. © 2 0 2 0 S P L U N K I N C . Follow the Eyes But remember principle #2: Know your audience • Some languages uses right to left scripts (Arabic, Hebrew, Kurdish…) • Some are even more complex (flexible) like ideographic languages (Chinese, Japanese and Korean) : they can be written left to right or vertically top to bottom (with vertical lines proceeding from right to left), sometimes both directions can even be combined on one page. kindle newspaper Hardcover book mobile • They are meant to be read from left to right and top to bottom 5 What do they have in common?
  28. 28. © 2 0 2 0 S P L U N K I N C . Principle #6 Organize content blocks
  29. 29. © 2 0 2 0 S P L U N K I N C . Organize Content Blocks Hierarchy Proximity Balance ContrastPositionSize Shape Color Orientation White Space 6
  30. 30. © 2 0 2 0 S P L U N K I N C . Organize Content Blocks Hierarchy Proximity Balance ContrastPositionSize Shape Color Orientation
  31. 31. © 2 0 2 0 S P L U N K I N C . Principle #7 The power of diagrams and flows
  32. 32. © 2 0 2 0 S P L U N K I N C . Need to emphasize a new process? Do not underestimate the power of the glass table • Glass tables can be a good way to “push” for a new process • Draw you process as a glass table background and add KPIs to it • A great way to get your teams look at the process every day ! The Power of Diagrams and Flows (Let’s do some basic internal politics  ) 7
  33. 33. © 2 0 2 0 S P L U N K I N C . Principle #8 Use the dramatic approach when needed
  34. 34. © 2 0 2 0 S P L U N K I N C . Alerts and Dashboard (Sometimes clean isn’t enough; a more dramatic approach is needed) Shift the focus from the full data to changes in the most critical data points. By pulling out the important exceptions, you can make it easier for your audience to digest what matters and take action. Alerts are one mechanism to turn the focus to the exceptions, outliers and data highlights. 4 C’s: Context: Users need to understand how an alert is defined and how it fits into the larger picture. Cogency: An alerting system needs to avoid causing unnecessary alarm while delivering easy-to- understand information that can be acted upon. Communication: Alerts must be designed to effectively capture attention and inform. Control: Advanced alert system should give users the ability to customize and manage alerts. 8
  35. 35. © 2 0 2 0 S P L U N K I N C . Principle #9 Use simple tools like PowerPoint (or equivalent) and an image search engine (Google, Qwant…)
  36. 36. © 2 0 2 0 S P L U N K I N C . How to Create a Background Image for Your Glass Table Step 1: Design it in PowerPoint using Google/Qwant… or any other image search engine Shapes and icons Search for PNGs — transparent images (labeled for re use or ask your marketing team) 9
  37. 37. © 2 0 2 0 S P L U N K I N C . Right click on shape How to Create a Background Image for Your Glass Table Step 1: Design it in PowerPoint using Google/Qwant… or any other image search engine
  38. 38. © 2 0 2 0 S P L U N K I N C . How to Create a Background Image for Your Glass Table Delete the widgets (will be added later on ITSI) Export as PNG (will be added later on ITSI as background)
  39. 39. © 2 0 2 0 S P L U N K I N C . Principle #10 Be trendy
  40. 40. © 2 0 2 0 S P L U N K I N C . Flat Design Minimalist Influenced by the International Typographic Style and Bauhaus Uses sans-serif typography ;) Examples: Microsoft Metro design language (Xbox, Office…), iOS
  41. 41. © 2 0 2 0 S P L U N K I N C . “We see a growing problem with the use of color on dashboards/glasstables these days. There’s often either too much of it, making the dashboard visually overwhelming, or too little of it, producing a boring dashboard. The best way to engage users is through “colorblocking”: balancing monochromatic background colors against bright colors to highlight important insights or anomalies in the data.” The exploration of taking colors that are opposites on the color wheel and pairing them together to make interesting and complementary color combinations. —Wikipedia Color-Blocking Thank you Mr Piet Mondrian “
  42. 42. © 2 0 2 0 S P L U N K I N C . A technique likely to become more popular in the near future The overlapping effect consists of colors, text or image Overlaps can create a sense of space and a more structured interface Gradients add realism and depth to the platform (feels more natural) Landing page by Saepul Rohman Overlapping
  43. 43. © 2 0 2 0 S P L U N K I N C . 99/100 12/121/1 0/52 21/21 354 1324 2546 12546 Trans/site Paris Los Angeles Sidney Cape Town New York 0 100 200 300 400 500 600 1pm 2pm 3pm 4pm Response time 834.3 320% Avg response time APIGateway $9.5 5126% $4.23% -7% 128-12% New York Paris Revenue Support tickets Enterprise Service Bus Batch Micro-srv B Micro-srv A Legacy Storage Cloud API SAP Storage Mainframe
  44. 44. © 2 0 2 0 S P L U N K I N C . You! Thank
  45. 45. © 2 0 2 0 S P L U N K I N C . Q&A

×