Design and its fundamental process have changed with time, growing challenges among the users, devices and different platforms for UI and UX process.
In Design Fundamentals, a day-long thorough workshop, we will try to understand the fundamentals of UI and UX process, and follow the standard process and approaches to create a user-centric design. With basic Design Principles as the the backbone for our design, of course!
Basic Visual Design Principles and UI Design Best PracticesAvijit Chinara
On these slides I have explained visual design principles and UI design best practices. This will help you to improve your visualization and UI Designing skills.
A talk we had at Texity systems.
Topics were
“ Are you really a User Experience Designer ?
The shift from product design to process design”
Contents
- what is user experience ? A bit of historical perspective
- Who coined the term and what did he mean ? ( Don Norman coined this term)
- how does IA, interaction design, usability, user research, relate to user experience ?
- what is product user experience ?
- how is different from user experience design of a service ?
- if this is User Experience, then what exactly is customer experience ?
- Should there be a designation called User Experience designer?
- The CEO, the engineer, the sales manager , product manager ….. are they UX designers or they aren’t ?
- Product design vs Process design
- The notion of a User , and who is the Customer ….. can user and customer be same ?
- A better term : DUX ( designing for user experience )
Design and its fundamental process have changed with time, growing challenges among the users, devices and different platforms for UI and UX process.
In Design Fundamentals, a day-long thorough workshop, we will try to understand the fundamentals of UI and UX process, and follow the standard process and approaches to create a user-centric design. With basic Design Principles as the the backbone for our design, of course!
Basic Visual Design Principles and UI Design Best PracticesAvijit Chinara
On these slides I have explained visual design principles and UI design best practices. This will help you to improve your visualization and UI Designing skills.
A talk we had at Texity systems.
Topics were
“ Are you really a User Experience Designer ?
The shift from product design to process design”
Contents
- what is user experience ? A bit of historical perspective
- Who coined the term and what did he mean ? ( Don Norman coined this term)
- how does IA, interaction design, usability, user research, relate to user experience ?
- what is product user experience ?
- how is different from user experience design of a service ?
- if this is User Experience, then what exactly is customer experience ?
- Should there be a designation called User Experience designer?
- The CEO, the engineer, the sales manager , product manager ….. are they UX designers or they aren’t ?
- Product design vs Process design
- The notion of a User , and who is the Customer ….. can user and customer be same ?
- A better term : DUX ( designing for user experience )
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
It is my try to shed light on two often heard but little understood or confused acronyms and its impact on overall brand experience. The presentation originally designed to address a group of entrepreneurs who have little knowledge in design and it's technical jargons.
https://www.linkedin.com/in/jayan-narayanan/
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
Do you create or provide a mobile app or web solution? Even if you already have the user interface (UI) and user experience (UX) nailed down to a T, you're never quite finished. With different design elements and solutions going in and out of fashion, you constantly have to ensure that your solution doesn't start to feel dated.
Here's our shortlist of the most exciting things going on in UX/UI Design right now and what we can expect to see in this space in a not too distant future!
UX & UI: The differences between two abbreviationsJessica Kainu
The difference is that one has an X and one has an I. I mean, yeah but there's a little more to it. This presentation describes the differences between UX and UI design. This focuses on where overlap with UX and UI happens, why this matters, the UX process, and what it is like to work on an agile team.
UX for start-ups, presented to start-ups in Wayra, LondonKarl Saynor
What is UX? Should start-ups care? How can start-ups get going with UX? Top 10 UX tips for start-ups. A presentation given to a group of funded start-ups participating in Telefonica's incubator programme, Wayra.
Mobile UX Design Best Practices for AdvertisingBrant Nesbitt
As we transition from desktop to mobile devices, our behaviors evolve and we adapt to accomplish tasks quicker than ever before. With such a finite amount of screen space, yet infinite possibilities, it is time to evolve the way we present content, thus ensuring a pleasant user experience.
Good “Fingertip Legibility” is the result of ads that provide concise messaging and beautiful product imagery, thus allowing users to make split second decisions and take action.
The Value of User Experience (from Web 2.0 Expo Berlin 2008)Niko Nyman
Companies and brands should think about (user) experience to find new competitive edge for their business. Better experiences create more value for users, which can be in turn transformed into business value for the company.
Basics in User Experience Design, Information Architecture & UsabilitySebastian Waters
Presentation for my talk about the "Basics in User Experience Design, Information Architecture & Usability" at General Assembly Berlin, January 9th, 2013
Easy UX Process Steps Must follow by every UX Designer Think 360 Studio
User experience (UX) and user interface (UI) designers are essential for any startup business. The ordinary generalization for ux designer is that they are regular graphic or visual designers. UX designers wear numerous caps in a startup. This includes showcasing, arranging, planning, imparting and testing. Every UX designer should follow these simple process.
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
It is my try to shed light on two often heard but little understood or confused acronyms and its impact on overall brand experience. The presentation originally designed to address a group of entrepreneurs who have little knowledge in design and it's technical jargons.
https://www.linkedin.com/in/jayan-narayanan/
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
Do you create or provide a mobile app or web solution? Even if you already have the user interface (UI) and user experience (UX) nailed down to a T, you're never quite finished. With different design elements and solutions going in and out of fashion, you constantly have to ensure that your solution doesn't start to feel dated.
Here's our shortlist of the most exciting things going on in UX/UI Design right now and what we can expect to see in this space in a not too distant future!
UX & UI: The differences between two abbreviationsJessica Kainu
The difference is that one has an X and one has an I. I mean, yeah but there's a little more to it. This presentation describes the differences between UX and UI design. This focuses on where overlap with UX and UI happens, why this matters, the UX process, and what it is like to work on an agile team.
UX for start-ups, presented to start-ups in Wayra, LondonKarl Saynor
What is UX? Should start-ups care? How can start-ups get going with UX? Top 10 UX tips for start-ups. A presentation given to a group of funded start-ups participating in Telefonica's incubator programme, Wayra.
Mobile UX Design Best Practices for AdvertisingBrant Nesbitt
As we transition from desktop to mobile devices, our behaviors evolve and we adapt to accomplish tasks quicker than ever before. With such a finite amount of screen space, yet infinite possibilities, it is time to evolve the way we present content, thus ensuring a pleasant user experience.
Good “Fingertip Legibility” is the result of ads that provide concise messaging and beautiful product imagery, thus allowing users to make split second decisions and take action.
The Value of User Experience (from Web 2.0 Expo Berlin 2008)Niko Nyman
Companies and brands should think about (user) experience to find new competitive edge for their business. Better experiences create more value for users, which can be in turn transformed into business value for the company.
Basics in User Experience Design, Information Architecture & UsabilitySebastian Waters
Presentation for my talk about the "Basics in User Experience Design, Information Architecture & Usability" at General Assembly Berlin, January 9th, 2013
Easy UX Process Steps Must follow by every UX Designer Think 360 Studio
User experience (UX) and user interface (UI) designers are essential for any startup business. The ordinary generalization for ux designer is that they are regular graphic or visual designers. UX designers wear numerous caps in a startup. This includes showcasing, arranging, planning, imparting and testing. Every UX designer should follow these simple process.
An introduction to infographic design written for global health and development professionals, including ideas for storyboarding, design tools, and tips and tricks to create fun, meaningful infographics. Lots of links to free web-based tools and great resources.
Understanding your audience and considering them in your design is essential for building great visualizations. This deck will walk you through the critical steps for identifying and understanding your audience, and developing a complex visualization storyboard to share your message.
Data Visualization Resource Guide (September 2014)Amanda Makulec
A summary guide to data visualization design, including key design principles, great resources, and tools (listed by category with short explanations) that you can use to help design elegant, effective data visualizations that help share your message & promote the use of your information.
Note that the tools & resources highlighted are suggested, and inclusion should not be considered as an endorsement from JSI.
How to foil the three villains of data visualization - Tableau Software EditionLee Feinberg
See how the Tragedy of Tables™, the Tyranny of Pie Charts™, and the Treachery of Averages™ cause confusion and mayhem. Learn practical tactics to defeat them and become a visualization hero. Excelsior!
Do you create data dashboards, but don’t know how best to tell their story? Is there a gap between what you want your users to do with your dashboards and how they currently use them? Does it sometimes feel overwhelming to try to design for multiple audiences at once? In this 90-minute webinar, I shared:
-simple techniques to better understand your data audiences.
-tips on how to embed data storytelling into your dashboards
-ways to frame data to increase user engagement.
-narrative approaches to reach multiple audiences at once
Data Visualization Design Best Practices WorkshopAmanda Makulec
Presentation shared at the #MA4Health Data Visualization workshop cofacilitated with my colleague Tahmid Chowdhury. Our aim was to empower participants with simple principles they can apply to any graph or chart to improve its effectiveness in communicating information, and to share resources on viz design relevant to global health practitioners.
Data Visualization Design Best Practices WorkshopJSI
This introduction was presented as part of a workshop at the Measurement and Accountability for Results in Health Summit at the World Bank (June 2015). The workshop focused on simple ways anyone working with data can improve their presentations, and included visualization redesign activity to put these principles in practice.
Presented on May 7, 2015 by Amanda Makulec from JSI's Center for Health Information, Monitoring, and Evaluation to the TechChange Technology for M&E course.
The aim of the presentation was to highlight key considerations in designing visualizations as part of international development programs, and includes both challenges of visualization in development programs and six things to consider when designing visualizations.
Presented by Lea Synefakis-Pica for Analytics That Excite 2014
Even the most seasoned analyst can make very simple changes to a presentations to make a big impact. If everyone in your audience is catching up on email or sleep, chances are your presentation design and/or data charts are obscuring your valuable insights and hurting you rather than helping you. Lea can help you inspire action and build credibility with a fresh new toolbox of tips and techniques to set your presentations apart and get the results you’re looking for.
A non designeris guide to creating memorable visual slides.
If you’re like most people, you’ve probably created dozens of presentations in your lifetime, and many of these in just under a few hours. But ask yourself: Do you really know how to design a memorable presentation that will stick in your viewers’ minds for months, even years to come?
The answer is probably no. Most of us have never actually learned the design principles necessary to impact audiences through visual storytelling. Perhaps the closest we have ever come to crafting a visual message is a PowerPoint presentation full of bullet points, overused stock photos and bland color schemes.
But these kinds of presentations rarely inspire real change, especially in this new age of visual communication.
[CXL Live 16] How To Present Your Testing Results to Get Results by Lea PicaCXL
Are your executives and clients falling asleep during your testing presentations? Chances are your slide design and data visualizations are obscuring your valuable insights. With her special blend of neuroscience-based visualization principles, practical hands-on design techniques, and entertaining “tough love”, Lea will equip you with a fresh new toolbox that will get you and your data presentations remembered and acted upon.
In a world of exponential information growth, we crave content that is efficient, engaging and easy to synthesize. This guide will show you why visual communication works—and how to make it work for you. In this guide you will find:
- Why our brains love visuals
- How to find the story in your data
- How to design your content
The Best Windows Phone Apps 2013: A Designers CollectionTheresa Neil
Theresa Neil is working on the Second Edition of the Mobile Design Pattern Gallery to be published by O'Reilly Media January, 2014. Enjoy this research material collected from 300+ Windows Apps in 2013.
Earlier this month, I presented an updated talk on Mobile Strategy for Servoy. This one hour talk looks at the 3 options for a mobile strategy: Responsive Web, Mobile Optimized, and/or Native. I also explained why HTML5 is not a strategy; it is merely a technology you can use to implement any and all of these options. And we briefly discussed the three faces of Mobile First and how this methodology helps companies break out of old habits to create better customer experiences.
User experience expert Theresa Neil will guide you through the current mobile strategies: Responsive web, Optimized sites, Native apps, and Hybrids.
Study the most successful mobile implementations in the market today (and some of the worst). Learn the merits and pitfalls of each strategy.
Get to your mobile solution faster by learning the best patterns for Navigation, Forms, Tables, Search, Sort & Filter, Charts, Tools, Invitations, Feedback, and Help.
All The Screens: Cross Platform Design StrategiesTheresa Neil
Mobile sites, responsive web, mobile apps, native, HTML5 or hybrid apps…Which of these solutions and combinations are right for your industry and product? We’ll take a look at examples of each and how companies are leveraging different solutions to meet their customer’s mobile needs. We’ll also explore the pitfalls of designing hybrid apps, and best practices for device neutral design. Finally, we’ll look at a case study from the world’s largest non-profit health organization and the cross platform strategy we are designing.
Navigation Patterns for iOS, Android and MoreTheresa Neil
Designing a mobile application? Look at these design patterns for primary and secondary navigation. All the images from the book are included plus dozens of new examples.
http://www.mobiledesignpatterngallery.com
Designers vs Developers- Coming together to build the best RIAsTheresa Neil
Presented on Nov 3, 2009 at Øredev in Malmo, Sweden.
What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers.
This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs.
Take a look at 5 simple and effective prototyping tools:
Balsamiq Mock-ups + Nakpee
Any wireframes + Protoscript
Prototcasting (using click-throughs and screencasts to convey requirements)
Atlas and other development environments + visual layout editors
This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.
Techniques to optimize the pagerank algorithm usually fall in two categories. One is to try reducing the work per iteration, and the other is to try reducing the number of iterations. These goals are often at odds with one another. Skipping computation on vertices which have already converged has the potential to save iteration time. Skipping in-identical vertices, with the same in-links, helps reduce duplicate computations and thus could help reduce iteration time. Road networks often have chains which can be short-circuited before pagerank computation to improve performance. Final ranks of chain nodes can be easily calculated. This could reduce both the iteration time, and the number of iterations. If a graph has no dangling nodes, pagerank of each strongly connected component can be computed in topological order. This could help reduce the iteration time, no. of iterations, and also enable multi-iteration concurrency in pagerank computation. The combination of all of the above methods is the STICD algorithm. [sticd] For dynamic graphs, unchanged components whose ranks are unaffected can be skipped altogether.
Opendatabay - Open Data Marketplace.pptxOpendatabay
Opendatabay.com unlocks the power of data for everyone. Open Data Marketplace fosters a collaborative hub for data enthusiasts to explore, share, and contribute to a vast collection of datasets.
First ever open hub for data enthusiasts to collaborate and innovate. A platform to explore, share, and contribute to a vast collection of datasets. Through robust quality control and innovative technologies like blockchain verification, opendatabay ensures the authenticity and reliability of datasets, empowering users to make data-driven decisions with confidence. Leverage cutting-edge AI technologies to enhance the data exploration, analysis, and discovery experience.
From intelligent search and recommendations to automated data productisation and quotation, Opendatabay AI-driven features streamline the data workflow. Finding the data you need shouldn't be a complex. Opendatabay simplifies the data acquisition process with an intuitive interface and robust search tools. Effortlessly explore, discover, and access the data you need, allowing you to focus on extracting valuable insights. Opendatabay breaks new ground with a dedicated, AI-generated, synthetic datasets.
Leverage these privacy-preserving datasets for training and testing AI models without compromising sensitive information. Opendatabay prioritizes transparency by providing detailed metadata, provenance information, and usage guidelines for each dataset, ensuring users have a comprehensive understanding of the data they're working with. By leveraging a powerful combination of distributed ledger technology and rigorous third-party audits Opendatabay ensures the authenticity and reliability of every dataset. Security is at the core of Opendatabay. Marketplace implements stringent security measures, including encryption, access controls, and regular vulnerability assessments, to safeguard your data and protect your privacy.
As Europe's leading economic powerhouse and the fourth-largest hashtag#economy globally, Germany stands at the forefront of innovation and industrial might. Renowned for its precision engineering and high-tech sectors, Germany's economic structure is heavily supported by a robust service industry, accounting for approximately 68% of its GDP. This economic clout and strategic geopolitical stance position Germany as a focal point in the global cyber threat landscape.
In the face of escalating global tensions, particularly those emanating from geopolitical disputes with nations like hashtag#Russia and hashtag#China, hashtag#Germany has witnessed a significant uptick in targeted cyber operations. Our analysis indicates a marked increase in hashtag#cyberattack sophistication aimed at critical infrastructure and key industrial sectors. These attacks range from ransomware campaigns to hashtag#AdvancedPersistentThreats (hashtag#APTs), threatening national security and business integrity.
🔑 Key findings include:
🔍 Increased frequency and complexity of cyber threats.
🔍 Escalation of state-sponsored and criminally motivated cyber operations.
🔍 Active dark web exchanges of malicious tools and tactics.
Our comprehensive report delves into these challenges, using a blend of open-source and proprietary data collection techniques. By monitoring activity on critical networks and analyzing attack patterns, our team provides a detailed overview of the threats facing German entities.
This report aims to equip stakeholders across public and private sectors with the knowledge to enhance their defensive strategies, reduce exposure to cyber risks, and reinforce Germany's resilience against cyber threats.
1. 04 . 11 . 2019
JUST MAKE ME A DASHBOARD!
Enterprise UX Monthly Call
2. THE DIRECTIVE
“We need a dashboard that demos well”
“Make it flashy, eye catching”
“Make it pop!”
“It’s got to really look good”
“Executives will have it up on their wall…All…The…Time”
“The sales team needs something to sell the product”
“Oh, what about a dark theme?!?!”
“You know, with some animation”
“It’s got to be sexy!”
“The Dashboard really, really important for our product.
Can you have it ready for tomorrow?
3. DESIGNER ASKS…
“Who will be using this?”
“Is it explanatory or exploratory?”
“What questions will it answer for them?”
4. Silicon Valley Bank | UX RequirementsGUIDEA
Just Make Me a Dashboard | Proprietary & Confidential
4
CHIRP
CHIRP
CHIRP
5. THE DIRECTIVE REVISED—> “JUST MAKE SOMETHING LIKE THIS”
Any random picture of a
dashboard found on Behance
or Dribble here
10. This feels like just another directive that will
require lots of meetings/churn and be based on
totally subjective input…and ultimately result in a
dashboard no one will actually ever use.
See Oatmeal Web Design Comic, How Web Site Design Goes Straight To Hell
11. OPTION 1
YOU CAN ADMIT DEFEAT & GO GET A BOOTSTRAP TEMPLATE
CHAPTER
12. Enteprise UX
OPTION 2
TAKE THIS OPPORTUNITY TO UPLEVEL DATA VIZ IN YOUR ORGANIZATION
CHAPTER Created by my colleague
Jes Reynolds
150 page guide
Based on learnings from
100s of products
Work in progress
13. UPLEVEL DATA VIZ IN YOUR ORG
Start with the basics, then ladder up
14. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
Once we know who are users are and what they need to know or do, we need
to ask ourselves more questions to choose the best way to communicate the
data.
When do users need the information? Provide users with the right
information, at the right time, to inform their decisions or to complete a task
or workflow.
Where will they use this information? Consider the context (a presentation,
in a workflow) they are in and the device (desktop/tablet/mobile) they are
using.
Why should they care about the data? Insights must be useful and relevant.
Tell them and show them. If there is one thing that is really important,
make that one element look different to highlight your story visually.
How do we make the data visualization understandable? Always choose a
chart or visualization type that your users will be familiar with. Validate
your designs with users to make sure they understand and comprehend
your message.
Start with the users, not the data
14Chapter 02 |
CONSIDER YOUR USERS FIRST
Think about who your visualizations are for:
Who are you trying to reach? How do they
understand information? What do they care
about? What do we want them to care about?
Data visualizations and dashboards should
speak the users’ language and compliment
the user’s mental models (their thought
process about how something works in the
real world).
Use words, phrases and concepts that are
familiar to the user, rather than system-
oriented terms.
Validate your designs with users and collect
feedback. You may be surprised by what is
confusing – or enlightening! – to others.
GENERAL GUI DELIN ESIntroduction
Start with the users, not
the data
Tell one story
Explain or explore?
Choose the right
visualization
Be consistent
Simplify, simplify,
simplify
Use color with intention
Describe visual elements
Snippet from Enterprise
Data Viz Guide
15. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
Know the question you’re answering, how it will help the user, and answer
it.
Although it is possible to tell hundreds of stories using a single
visualization, choose one story to focus on. The most successful
visualizations provide an immediate answer to a single, specific question. If
multiple answers to multiple questions are illustrated in one visualization,
it becomes over complicated and hard to understand.
Identify the system data relevant to the question.
Knowing the specific data that will be used to answer the question makes it
much easier to focus on the answer, the specific insight that you want to
share. Choose the best data series to illustrate your point. Filter and simplify
the data to deliver the essence of the data to your intended audience. Always
work with representative data in the design process.
Identify the particular data insights that can help the user answer their
question.
Some questions are answered by a single insight, others require multiple
insights to provide a complete picture. By identifying the specific insight
that answers the question, the design can stay focused and clear.
HIGHLIGHT WHAT’S IMPORTANT
Tell your users why they should care about
your visualization - don’t waste the title line
by just saying what data is shown. Tell them
and show them. If there is one thing that is
really important, make that one element look
different to highlight your story visually.
USE GOOD (VERIFIED) DATA
Bad data + good visualization = bad chart.
This should be obvious. Data forms the
foundation of charts and graphs. If your data
is weak, your chart is weak, so make sure it
makes sense. One wrong data point (or using
biased data to show biased conclusions) can
destroy the credibility of the chart and erode
trust with your users.
Tell one story
15Chapter 02 |
GENERAL GUI DELIN ESIntroduction
Start with the users, not
the data
Tell one story
Explain or explore?
Choose the right
visualization
Be consistent
Simplify, simplify,
simplify
Use color with intention
Describe visual elements
Snippet from Enterprise
Data Viz Guide
16. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
When thinking about the story you need to tell to answer users’ questions -
to help them with what they need to know or do - there is an important
distinction to consider first in data visualizations.
Do users need to explore the data or do they need us to explain with the
data?
When you allow users to explore the data you’re not drawing any
conclusions. You’re not highlighting anything. Exploratory visualizations
are an interpretation of the data without a point of view.
You may present exploratory visualizations as a data table, complex
interactive visualization, or an infographic.
Most of the time, you want to explain using the data. You have some specific
thing that you want to say to some specific person. You want the data
visualization to communicate what’s important or interesting to your users
who may be patients, prescribers, or your colleagues.
Explanatory visualizations are generally charts, graphs, single numbers,
data tables, and sometimes simple illustrations.
EXPLORATORY ANALYSIS VS.
EXPLANATORY ANALYSIS
Cole Nussbaumer Knaflic describes the
difference in Storytelling with Data.
Exploratory analysis is what you do to
understand the data and figure out what
might be noteworthy or interesting. It’s like
hunting for pearls in oysters. You may have
to open 100 oysters (or look at the data in 100
different ways) to find the pearls.
Explanatory analysis is when you’ve found
two pearls and are at the point of
communicating with users. You have a
specific story you want to tell - probably
about those two pearls.
Explanatory or exploratory?
16Chapter 02 |
GENERAL GUI DELIN ESIntroduction
Start with the users, not
the data
Tell one story
Explain or explore?
Choose the right
visualization
Be consistent
Simplify, simplify,
simplify
Use color with intention
Describe visual elements
Snippet from Enterprise
Data Viz Guide
17. design principles and best practices that apply to all
explanatory visualizations and charts
EXPLANATORY VISUALIZATIONS
CHAPTER 5
Snippet from Enterprise
Data Viz Guide
18. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
There is no single best way to present data. It really does depend upon who
you’re trying to reach, what they need to know or do, and what data you
have.
While the process of creating data visualizations begins with a set of data, a
question, and analysis of the data to find the answer, you need to consider
your audience, your users, first.
Is it useful? Is it understandable? Is this what they want or need to know?
Do they have the information they need to take action?
While bar charts and line charts might seem boring, they are very effective.
Pie charts and donut charts should be used with caution, because no matter
how good they look, it turns out our brains are not great at comparing slices
of a circle.
Sometimes the best way to go might be not using a chart at all. It all comes
down to what tells your story and brings the most value to the user, not
what looks better.
Choose the right chart
18
EXPL ANATORY VI SUALIZ ATIO NS
Source: Claudia Love, Data Visualization Advice for UX Designers, Medium Apr 2016
KNOW YOUR USERS
Understand your users and their needs. You
have to know who you are trying to reach and
what they need to know or do before you
decide how to use data that you have to tell a
story. Always validate your designs with
users to make sure they understand the data
presented.
KNOW YOUR DATA
Have a clear question that needs to be
answered. If multiple answers to multiple
questions are illustrated in a visualization, it
will become over complicated and hard to
understand.
CHOOSE WISELY
The story you need to tell with the data you
have should drive the type of visualization
and not the other way around.
Introduction
The data should be the
hero
Declutter your charts
Explain your visuals
Choose the right chart
When a chart may not be
the right choice
Problematic common
charts
Chapter 05 |
Snippet from Enterprise
Data Viz Guide
19. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
19
We sometimes avoid bar charts because they seem
common or boring. That's the wrong approach.
We should use them and use them frequently because
they are common.
The beauty of a bar chart is that our users already know
how to read them and they can instead focus on what the
data actually says.
Elizabeth Ricks, Storytelling with data: Bring on the Bar Charts
Choose a chart that users understand
EXPL ANATORY VI SUALIZ ATIO NSIntroduction
The data should be the
hero
Declutter your charts
Explain your visuals
Choose the right chart
When a chart may not be
the right choice
Problematic common
charts
Chapter 05 |
Snippet from Enterprise
Data Viz Guide
20. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
There are lots of chart types available but your users shouldn’t have to learn
how to read the chart. Always choose a chart type that your users will be
familiar with. Validate your chart designs with users to make sure they
understand and comprehend your message.
In most cases you should use one of the more common Primary Charts: bar
charts, column charts, or line graphs. Pie charts should only be used for
part-to-whole comparisons with limitations.
Choose the right chart
20
EXPL ANATORY VI SUALIZ ATIO NS
CHOOSING CHARTS
There are a number of online resources used
as additional sources for this document that
you can also use to help you choose the right
type of chart.
Note: we do not recommend all of the charts
you will find in these resources. See the
pages that follow for recommendations by
function.
The Data Visualisation Catalogue
Comprehensive resources that includes a
helpful sort by function feature and icons
used in the documentation.
Data Viz Project
Includes multiple sort features as well as
many examples to use as inspiration.
Juice Labs - Chart Chooser
Guidance for choosing the right chart in
Excel and PowerPoint.
Infographic: Selecting the right chart for
your data (FusionCharts)
PDF: Choosing a Good Chart (diagram)
BAR CHART
Use for:
Comparisons, Part-to-whole
COLUMN CHART
Use for:
Comparisons, Part-to-whole, Trends over time
LINE GRAPH
Use for:
Comparisons, Distribution, Relationships, Trends over time
PIE CHART
Use only for:
Part-to-whole
Introduction
The data should be the
hero
Declutter your charts
Explain your visuals
Choose the right chart
When a chart may not be
the right choice
Problematic common
charts
Chapter 05 |
Snippet from Enterprise
Data Viz Guide
21. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
When you need to decide which chart type is the most appropriate to use, you should ask yourself: what do users
need to know or do?
Choose the right chart
21
EXPL ANATORY VI SUALIZ ATIO NS
DO YOU WANT TO COMPARE VALUES?
Comparison charts are perfect for comparing one or many value sets and can easily show differences or similarities between values and
the low and high values in the data sets. The help you find what’s typical and what’s unusual or what’s most significant.
BAR Bubble COLUMN Histogram LINE Scatter PlotChoropleth MapBullet Slope
DO YOU WANT TO SHOW THE COMPOSITION OF SOMETHING?
Use these charts to show proportion comparisons or how individual parts make up the whole (100%) of something.
Bubble Bubble Map Bullet COLUMN PIE/DONUTBAR
Proportion Part-to-Whole
PRIMARY CHARTS - RECOMMENDED Other charts
Introduction
The data should be the
hero
Declutter your charts
Explain your visuals
Choose the right chart
When a chart may not be
the right choice
Problematic common
charts
Chapter 05 |
Snippet from Enterprise
Data Viz Guide
22. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
Choose the right chart
22
EXPL ANATORY VI SUALIZ ATIO NS
DO YOU WANT TO UNDERSTAND THE DISTRIBUTION OF YOUR DATA?
Distribution charts help you to understand outliers, the normal tendency, and the range of information in your values. They can also be
used to display frequency, how data spread out over an interval or is grouped.
Bubble Bubble Map LINE Scatter PlotHistogramDot Map
ARE YOU INTERESTED IN ANALYZING TRENDS IN YOUR DATA SET?
If you want to know more information about how a data set performed during a specific time period, there are specific chart types that do
extremely well.
Bubble COLUMN Sparkline SlopeLINEHistogram
PRIMARY CHARTS - RECOMMENDED Other charts
DO YOU WANT TO UNDERSTAND THE RELATIONSHIP BETWEEN VALUE SETS?
Relationship charts are suited to showing how one variable relates to one or numerous different variables. You could use this to show
how something positively effects, has no effect, or negatively affects another variable.
Bubble LINE Scatter Plot
Introduction
The data should be the
hero
Declutter your charts
Explain your visuals
Choose the right chart
When a chart may not be
the right choice
Problematic common
charts
Chapter 05 |
Snippet from Enterprise
Data Viz Guide
23. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
Sometimes the best options is to forego the chart completely, and instead use a single number or table. It all
comes down to what tells your story and brings the most value to the user, not what looks better..
When a chart may not be the right choice
23
EXPL ANATORY VI SUALIZ ATIO NS
WHEN TO USE A SINGLE NUMBER
Sometimes the most important, or impactful thing to show is a
single data point that summarizes your data. You can use a
single number with a label and short summative sentence. Make
the single number much larger than the surrounding type for
emphasis and maximum impact.
Source: Marisa Krystian, Do You Know When to Use Tables vs. Charts?, Infogram, Jun 2016
WHEN TO USE A TABLE
There are multiple reasons you should choose a table over a
chart as a visualization method.
Are you planning to use the table to look up one or more
particular values? Or maybe the information will be used to
examine a set of quantitative values as a whole. If so, a table
might be right for you.
A table makes the most sense when:
• you need to look up individual values.
• you need to compare individual values but not entire series of
values to one another.
• precise values are required.
• the information involves more than one unit of measure.
• both summary and detail values are included.
• you need to tell more than one story with the data.
Introduction
The data should be the
hero
Declutter your charts
Explain your visuals
Choose the right chart
When a chart may not be
the right choice
Problematic common
charts
Chapter 05 |
Snippet from Enterprise
Data Viz Guide
24. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
Some frequently used charts are difficult for many users to understand
quickly and accurately. For those problematic common charts, we provide
alternatives you should consider using instead.
Problematic common charts
24
EXPL ANATORY VI SUALIZ ATIO NS
LIMIT THE PIES AND DONUTS
Limit pie and donut charts to 2-3 slices and
never more than 5 slices. Always consider
using a bar chart or single number instead. If
you have 4 or more slices, a bar chart is
recommended.
See Chapter 6: Primary Charts for more in-
depth guidelines for using Pie and Donut
Charts.
PIE AND DONUT CHARTS
People aren't very good at comparing the sizes of slices in a circle. They can make faster,
more accurate comparisons looking at the lengths of rectangles instead. Use pie charts and
donut charts very sparingly, and only to show a part to a whole relationship. Really, their
only use is to let people know what a fraction looks like.
Introduction
The data should be the
hero
Declutter your charts
Explain your visuals
Choose the right chart
When a chart may not be
the right choice
Problematic common
charts
Chapter 05 |
Snippet from Enterprise
Data Viz Guide
27. IBM’S CARBON DESIGN SYSTEM
WHAT’S WRONG HERE?
Lots of things are wrong, but look at the
colors. There is a false correlation implied
because of the incorrect and inadequate
color palette pulled from the Brand Style
guide
Are these two
related? They
are both
greens …
And these two
(or 3) related?
These must be
the same
products since
thy are the
same color…
28. use color sparingly, strategically and with clear intention
COLOR FOR DATA VISUALIZATIONS
CHAPTER 4
Snippet from Enterprise
Data Viz Guide
29. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
While you want our data visualizations to look beautiful, pretty isn’t the
primary goal when you’re communicating with data. You don’t want to use
data visualizations just to add color to the page. You use color to convey
information, not for decoration.
You use color to represent data. Every time you change a color, it signifies a
change in information or an added layer of data.
When you use color sparingly and strategically, it is very powerful for
drawing the user’s eye to where you want them to focus.
With a thoughtful use of color, you not only support the brand, but you can
help users understand data more quickly and intuitively. You can
communicate your message faster and more clearly. You can make the data
meaningful.
USING COLOR
This section introduces the data
visualization color palette and provides
guidance for using color in data
visualizations.
For further reading, we recommend two
books that we sourced heavily for this
section:
Wall Street Journal Guide to Information
Graphics by Dona M. Wong
Storytelling with Data by Cole Nussbaumer
Knaflic
As a companion to Storytelling with Data,
there is an excellent 30-minute workshop
available on YouTube: Being clever with
color.
Be intentional with your use of color.
29
COLOR FOR DATA VISUALI ZATI ON S
Chapter 04 |
Introduction
Color choices matter
Color accessibility
Data visualization color
palette
Color palette pairings
Using the color palette
Using color in typography
Snippet from Enterprise
Data Viz Guide
30. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
Where are your eyes drawn in this photo? Everywhere? Nowhere?
When there are too many things competing for your attention it’s
impossible to know where to look.
When you don’t tell the user what’s
important, you leave them guessing. The
more things you make different, the lesser
degree any one of them stand out.
Color tells you where to look.
30
COLOR FOR DATA VISUALI ZATI ON SIntroduction
Color choices matter
Color accessibility
Data visualization color
palette
Color palette pairings
Using the color palette
Using color in typography
Chapter 04 |
Snippet from Enterprise
Data Viz Guide
31. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
Now where are your eyes drawn? Color shows us where to look.
If there is something that is very important you should make that be the one
thing that is different from the rest.
Color tells you where to look.
31
COLOR FOR DATA VISUALI ZATI ON S
You can use color to communicate and draw
the user’s attention to important data points
like a top area of concern or a change.
Introduction
Color choices matter
Color accessibility
Data visualization color
palette
Color palette pairings
Using the color palette
Using color in typography
Chapter 04 |
Snippet from Enterprise
Data Viz Guide
32. GUIDEA
Best Practice Approaches for Data Visualization | Proprietary & Confidential
You’ll need multiple color palettes for data visualizations: Qualitative, Sequential, binary, Diverging.
None of these palettes replace your utility color platte for alerts/errors.
Data visualization color palettes
32
COLOR FOR DATA VISUALI ZATI ON SIntroduction
Color choices matter
Color accessibility
Data visualization color
palette
Color palette pairings
Using the color palette
Using color in typography
Chapter 04 |
Snippet from Enterprise
Data Viz Guide
33. Silicon Valley Bank | UX RequirementsGUIDEA
Just Make Me a Dashboard | Proprietary & Confidential 33
UPDATED COLOR PALET TE FOR CARB ON
Updated palette
We used the
essential brand
blue from
marketing and
built a new
accessible palette
updated color palette
34. Silicon Valley Bank | UX RequirementsGUIDEA
Just Make Me a Dashboard | Proprietary & Confidential 34
UPDATED COLOR PALET TE FOR CARB ON
Enterprise charts
updated charts
35. Silicon Valley Bank | UX RequirementsGUIDEA
Just Make Me a Dashboard | Proprietary & Confidential 35
COLOR PAL E T TE
Tools that can help you build an accessible color palette
https://projects.susielu.com/viz-palette
http://tristen.ca/hcl-picker/#/hlc/6/1/15534C/E2E062
https://projects.susielu.com/viz-palette
https://contrastchecker.com/
37. Preview Chart
ADVANCED DATA VISUALIZATIONS
These preview charts have been around for years, they are well tested in the financial sector and many chart frameworks offer them
https://www.zingchart.com/docs/api/json-configuration/graphset/series/preview/
TESTED
38. Preview Alternative? …Multi-grain Chart
ADVANCED DATA VISUALIZATIONS
Plotting across multiple grains of time (grain being a data modeling term)- alternative to tabbed charts or Preview Chart
TESTED
39. Ring Chart
ADVANCED DATA VISUALIZATIONS
Multiple charts integrated and correlated. Ideal
for depicting cyclical data
https://vizuly.io/vizuly/dist/site/RingChartTest.html?demo
https://vizuly.io/
EXPERIMENT
40. Correlated Charts
ADVANCED DATA VISUALIZATIONS
Troubleshooting, detecting anomalies and trying to find correlations
Anchor chart
Exploration area to
look for correlation
or cause
TESTED
41. Correlated Charts
ADVANCED DATA VISUALIZATIONS
Troubleshooting, detecting anomalies and trying to find correlations
TESTED
Watch the video
showing interaction in
the live product