Data Visualization

“Perfection is achieved, not when there is  nothing more to add, but when there is nothing left to take away”

Elegance is dashboard design is a macro example of managing the data to ink ratio for the whole screen combined with great IA. Then highlight the most important pixels. Choose chart types that work in small spaces.

Dashboard UX Definition
A dashboard is a visual display of the most important information (not all information) needed to achieve one or more objectives that has been consolidated to a single screen so it can be monitored at a glance.

A chart tells a data relationship single story.
A dashboard provides an aggregate battlefield overview.

The battlefield requires Situational Awareness
Level 1: Perception of elements in the environment (what’s changing and going on)
Level 2: Comprehension of the current state
Level 3: Projection of future status

HFE Performance Monitoring Process (~24 minutes of DataVis2 Pt1)
1. Update high-level situational awareness
2. Identify and focus on particular items that need attention
• Update awareness of this item in greater detail
• Determine whether action is required
3. If action is required:
• Access additional information to understand side effects
• Access tools to take action on objects (embedded case)
4. Return to monitoring the process

Fundamental Design Considerations
• Update frequency (not real-time design) (daily updates?)
• User expertise (experts could interpret very dense analytics)
• Audience size (one person vs. entire company)
• Tech platform (desktop, browser or mobile)
• Screen size
• Data types (quantitative, non- quantitative)
• IA tends to have 3 styles:
– Hierarchy (frequently used; decomposition of dimensions/measures going down the page)
– Process flow (tells story as you move from one side to another)
– Portal aggregation levels

A dashboard is just a UX style of information presentation.
It is NOT a technology as many vendors would like to claim. Dashboards need their own
UCD process and cycle.

Reminder – Interaction with visual info
• Comparing (over time or to a reference value)
• Sorting
• Filtering
• Highlighting (“brushing” – synchronized color selection in dashboards)
• Re-visualizing (change chart type)
• Re-expressing (change units, e.g. dollars to euros)
• Re-scaling (time, days vs. months)
• Zooming and panning
• Detail on demand (hover over point)
• Drill to detail
• Annotate
• Bookmark
• Aggregating (e.g. sales by product by region by year, pivot)
• Adding measures (raw or summarized, statistics & forecasts)

Bar charts are effective show differences or rank.

Typical Defects in Dashboards
• Exceeding the boundaries of a single screen
• Supplying inadequate context for the data
• Displaying excessive detail or precision
• Expressing measures indirectly
• Choosing inappropriate media of display
• Introducing meaningless variety
• Using poorly designed display media
• Encoding quantitative data inaccurately
• Arranging the data poorly
• Ineffectively highlighting what’s important
• Cluttering the screen with useless decoration
• Misusing or overusing color
• Designing an unappealing visual display


Data Visualization

The Visualization Continuum

Charts & Dashboards (communicate changes in measure)
Finding Relationships (Explore dimension relationships for meaning)
Physical Map

Goal: facilitate compensation of data in a quick way. User needs to understand it AND make decisions.

Data Visualization Definition

•Thedisplay of abstract information (S. Few) (For Sense-making, For Communication)
•Presentation of quantitative data to:
–Facilitate consumption and comprehension
–Illuminate difference and trends
–Support decision making

Data is useful, matters, and deserves a response.

Why is data visualization effective?

“Data visualization shifts the balance between perception and cognition to take fuller advantage of the brains abilities”
We process visual information faster than verbal information.
The human visual system is optimized to see differences (size, shape, contrast) DMD

Data Visualization in Practice

“Data visualization is only successful to the degree that it encodes information in a manner that our eyes can discern and our brains can understand”And we can make decisionsbased on it!
Useful= Informs + matters + deserves a response

Success Criteria for Visualization

•Clearly indicates the nature of relationships
•Represents the quantities accurately
•Makes it easy to compare the quantities
•Makes it easy to see ranked order in the values
•Makes obvious how people should use the information to make decisions
–Aka it has “Meaning”

Operational Principles

1.Define/research users goals (HF analysis)
2.Fix the data first!
3. Highlight the important stuff
• Use pre-attentive attributes like bold and color
• No more than 10% of the content
4. Eliminate distractions
• Tufte’s data to ink ratio applies!
5. Provide clear information hierarchy
6. Provide filters for manipulation (questions)

The critical Human Factors Challenge

  1. Assess information users really need
  2. Understand their goals
  3. Select and aggregate the data properly

Anatomy of Quantitative Data

•Measures(the raw metrics)–Sales, Profit, Search Views, User count, Votes
–Not all numbers are measures (Emp. ID, SSN, etc)
•Dimensions (organize the data)
–Hierarchical •Time •Geography
–Categorical •Divisions of  Comp
•Relationship/Filters (hide & show the data meaning)
–Sorting (male versus female consumers)
–Cluster data (Mobile versus Web product usage)

What is the story to be told? (by design to the user when they look at data)

1) Variations within Measures
–Normal, non-normal distributions
–Homogeneity or heterogeneity of data
–Means and medians
2) Relationships between Measures
–Co-variance, etc.
–Correlation & causality (statistics)
3) Variations within Dimensions(Categories)
–Part to whole
–Count, sum & average
4) Variations across Time
5) Variations across Space (geography)

Measures can be raw, normalized (units per sq ft), or summarized (statistics like median or subtotals). What determines how the measures are designed to be displayed? Goals.


Dimensions Organize the data

• Hierarchical or Categorical
• Exact Schema (IA)  –Time & Geography
• Natural dimensions (given scalar values like Money, Headcount)
•Synthetic dimensions (designed, dynamic)
–Corporation, Line of Business, Sales regions, Distribution method (Rail, Ship, etc)
*don’t compare to business goals because those change all the time

The big three data design tasks are COMPARISON, CATEGORIZATION, and NORMALIZATION.

Critical for UX design:

1)Always compare to something!
2)Always show the trend direction and magnitude!
3)Sometime up is good, sometimes it is bad
4)90% of all information consumption uses case can be solved with this pattern

How to slice up data? Clustering, Conversions, Normalization (to a comparison or baseline)

Visualization -relationships within charts

Dimension relationships:
•Nominal (East, West)
•Ordinal (Best, Worst)
•Interval (days, months)
•Hierarchical (States > counties)
Measure relationships:

Always ask first: can you show just the data or do you need a chart?

The power of charts
The visual objects in chart can encode both Measures (height = sales) and Dimensions (color =region). A table can’t.


Visual Design

  1. No Gradient background
  2. No meaningless use of color
  3. Data to ink ratio
  4. Aspect ratio matters (max slope of 45 degrees)
  5. Variable order matters


Interaction with visual info

• Comparing (time series, reference value, rate of change)
• Sorting
• Filtering
• Highlighting (“brushing” –synchronized color selection in dashboards)
• Re-visualizing (change chart type)
• Re-expressing (change units, e.g. dollars to euros)
• Re-scaling (time, days vs. months)
• Zooming and panning
• Detail on demand (hover over point)
• Drill to detail
• Annotate
• Bookmark
• Aggregating (e.g. sales by product by region by year, pivot)
• Adding measures (raw or summarized, statistics & forecasts)


Information Architecture

220 – 8/28/17

IA is a part of Content & Navigation

Definition – the design and organization of the content. The structural design of shared information environments. The combination of organization, labeling, search and navigation within websites and intranets. Create findability. It is NOT: content management, graphic design; data visualization.

Over a product life, IxD will change very slowly, IA changes slow/moderate, and content constantly changes (inventory, news articles, etc.).

IA breaks down operationally into the user’s browse experience and search experience (or if these two get combined mentally).

Why does this matter? User not finding information is high cost (product failure). Even the most attractive and engaging design can  be undone by a badly defined IA.

Deliverables by the architect: wire frames, site maps, taxonomy, metadata

Taxonomy – scheme of classification, naming of things. “class” or “course”?
Ontology – scheme of relationships (biology)

Overall IA Goal: Make the content semantics clear and compelling. Must be interesting to explore and relate to their needs or else users leave. Help people see the invisible.

Design Goals

Common Information Seeking Patterns

1) The perfect catch
–I generally know what I want (e.g. a portable HD projector)

2) Seen it before
–The exact item is known to exist in some location, but I can’t describe it precisely.

3) Pearl Growing
–“Show me more like this one”. seeing references in papers.

4) Indiscriminant drifting
–Complete search for 100% coverage (thesis literature review articles)

5) Lobster trapping
–More than a single answer acceptable (Chinese restaurant)

IA Organization Systems

  • Exact schemes – alphabetical, chronological, geographical, for ex
  • Ambiguous schemes – topic, task, audience, metaphor
  • Social schemes – folksonomy, like rank, ratings, tags
  • Network schemes – hypertext


Types of Labeling Systems

You need to figure out how you will label:

• Contextual links
• Headings for the pages, tables, field names
• Navigation system choices
• Index terms
• Call to Action
• Process markers (e.g. wizard steps) “Enter here” “Confirm” “Apply” “Go”


Label Design
Labels have:
• Syntax (text, icon, or both)
• Granularity
– Wine Region = France or Bordeaux?
• Comprehensiveness
– Department store that does not sell shoes?
• Intended Audience
– Professional or consumer?

• Controls sets of consistent words to use
– “shopper” versus “customer” versus “guest” in Nordstrom
• How we represent information
– Scientific/industry insider or layman’s language
• Metadata designs
– Media type: text, video, photos, audio

Voice of the Point of View should be a conscious design decision.

Voice POV matters
• All user experiences express a point of view
• Tone of voice plays an important part
– silly, serious, direct, formal, etc., etc.
• Make a conscious design decision
• Then hire a professional writer
• Poor selection of “voice” can  kill a good UX framework

“Browse” Provides the Navigation System

Visualization of Navigation Elements:
– Global
– Local (to page or task)
– Contextual
– Embedded (roll overs, pop ups)
– Supplemental
• Index, sitemap, guides or a filter panel

Info Seek Patterns – questions to ask – What goals do they support? What scheme? What labeling? Any notes on the label design? Voice, Vocabulary

The Search Experience Design Contains:
• Zones within the data
• Requires many design decisions related to:
– What are you going to return? (explicit and implicit content)
– How are you going to display it? (grouping, default sort, results/page, etc)
• Results…..user experience types
– Destination page (many facets to navigate from). leads to a URL
– Object in place (within current page or table)
– Semantic (find and replace text in Word)
– Automated (products you might like)

Navigation versus Destination
• Browse pages are used to navigate
• Search results pages list potential destinations
• Facetted Search often puts both on the same


Search UX Guidelines
• Repeat search criteria in results page (top)
• Explain where the results come from
• Make the default sort order obvious
• Easy way to revise the search criteria (in
context of the result)
• Integrate searching with browsing
– Make the search box a global UX element


Final Point
What makes IA into a really Wicked Problem is supporting multiple form
factors with different interaction models and different functional scopes

Data Gathering

Five Key Issues

  1. Setting goals – how to analyze the data after collection
  2. Identifying participants – who?
  3. Relationship with participants – professional, ICF
  4. Triangulation – look at data at 1+ perspectives
  5. Pilot studies

You have to have a significant number of participants to find a conclusion. They also have to be compatible with the actual users.


Avoid free judgments.

Agile Software Development

Welcome changes, even if late. Customer’s competitive advantage.

Deliver working software frequently.

Business people and developers work together daily.

Face-to-face conversation

Continuous attention to technical excellence and good design

Keep it simple. Maximize the amount of work not done. customer “might” want this..?

At regular intervals, team reflects on how to become more effective. Tunes and adjusts behavior accordingly.




Backlog grooming

Sprint planning


Daily Standup




Agreement on “Done”

Product Alaways sippable

End to end functionality

no changes mid-sprint

No status meetings

Data Visualization & Dashboard Design

Ideal dashboard has nothing you need to remove or clean up.

“Small” is the “new black” – you have to have charts that can work in very small spaces because you end up gridding the terrain. minimalism is key.

Dashboard should never scroll below the fold.

Dashboard should show only the most important info (not all the info) to achieve some objective that can consolidated into a single screen and consumed at a glance (10-15 sec to understand if something is wrong).

Situational Awareness

  • Level 1 – Perceive environment’s elements (what’s changing, increasing/decreasing).
  • Level 2 – Comprehend current state
  • Level 3 – Deduce the future state

Performance Monitoring (click on item of concern to get more info) (make sure the tools to perform actions is available in the dashboard, or at least the link to where you can change something)

Flow to result – what’s in and what’s out

Hierarchy – decomposition that flows across or down the page

Portal aggregation – grids

Look at user’s goal to determine what the comparative measures should be.

HCI – Interfaces

New visual design doesn’t necessarily change the value of the interface.

What is the user’s goal? Their goal should be plain right in front of the screen.

Users don’t remember the pathway to their solutions the first time.

A lot of design changes are observable but not necessarily quantifiable.

Deductive reasoning is the logical process of inferring the particular from the general. In deductive reasoning, we drive particular conclusions from general truths we know or believe to be true. People might not perform logically so their judgment is wrong. Cause and effect is logic. Inductive reasoning is generalizing from cases seen to cases unseen. “every bird we’ve seen has feathers, so all birds have feathers”.

If users should not use something or is not useful, hide it. Don’t show every possible element in front of them. Otherwise, users will try it (clicking on something that isn’t clickable).

WIMP Interface (windows, icons, menus, pointers)

Affordances of windows – close, minimize, stack, resize

Buttons should be action verbs.

Labelling – has to be concise

Query interfaces – ask question, program delivers’

Wizards – progress bars, number of steps, summary, preview

Basic Data Visualization

Humans process visual info with pre-attentive perception and Gestalt principles.
– White spaces create groupings (group into rows? columns? separate? bunch similar?). Anything that moves together is also grouped as a unit.

Definition – making sense data, facilitate consummation in an easy way; display abstract info; shift the balance between perception and cognition.

How to make successful – quantities need to be selected accurately, clear, allow comparison, “this number is ___ compared to what?”. Support decisions.

Operational Principles

  1. Define goals.
  2. Fix the data. (overlap on what the data represents?)
  3. Highlight the important stuff
  4. Eliminate distractions
  5. Provide clear information hierarchy
  6. Provide filters


  1. Assess info users really need
  2. Understand their goals
  3. Select and aggregate the data properly

Anatomy of Quantitative Data

  • Measures – raw data
  • Dimensions – organize the data
  • Categorical – divisions
  • Relationship/Filters – sorting, cluster data

What is the story?

  • Variations within measures (SD, mean, normal distribution)
    • Relationship between measures (correlation, i.e.)
  • Variations in time matter
  • Variations within dimensions
  • Variations across Time
  • Variations across Space

Line and bar charts – show the zero point


  • Raw measures – typically money and time
  • Normalized measures (designed) (like sales per sales person, sales per advertising dollar spent, sales per square foot of store, etc._
  • Summarized measures (statistics like subtotals, averages, etc)

Dimensions Organize the Data

  • Hierarchical or Categorical
  • Exact schema (IA)
  • Natural dimensions (scalar values)
  • Synthetic dimensions (designed, dynamic)

Ways to slice up the data

  • Clustering
  • Conversions
  • Normalization (comparison or baseline)


  • reduce noise
  • focus
  • compare
  • filter on measures or dimensions
  • sort

Big three Data Design tasks

  • comparison
  • categorization
  • normalization

Note that comparison to business goals (subjective target) is not a signal.

Visualization -relationships within charts (slide 42)
-Dimension relationships (nominal, ordinal, interval, hierarchical).
You show the measure relationships:

  • rank
  • ratio
  • correlation

Bar Charts – tell a story about differences. good to show rank
Lines – for trends