A Day with ET John Jannotti UXISP March 16, 2011 John Jannotti - - PowerPoint PPT Presentation

▶

Dec 16, 2022 114 likes •393 views

A Day with ET John Jannotti UXISP March 16, 2011 John Jannotti (uxisp) A Day with ET March 16, 2011 1 / 26 The World According to Tufte Edward Tufte Writes, designs, and self-publishes his books on analytical design. The Visual

SLIDE 1

A Day with ET

John Jannotti

UXISP

March 16, 2011

John Jannotti (uxisp) A Day with ET March 16, 2011 1 / 26

SLIDE 2

The World According to Tufte

Edward Tufte

◮ Writes, designs, and self-publishes his books on analytical design. ◮ “The Visual Display of Quantitative Information” ◮ More than 40 awards for content and design. ◮ Professor Emeritus at Yale.

Notes from a one day class, Mar 6th

◮ The class was entirely academics. ◮ Focus was on presenting research/data. ◮ I’ll adapt some of his points to user interaction. John Jannotti (uxisp) A Day with ET March 16, 2011 2 / 26

SLIDE 3

Key Points

Your job is to facilitate comparison and to illustrate causality. “Do whatever it takes” Use “Supergraphics”

◮ Add information to clarify. ◮ Implicit — trust in the information consumer.

(Tufte would hate this slide.)

John Jannotti (uxisp) A Day with ET March 16, 2011 3 / 26

SLIDE 4

Sparklines: Intense, Simple, Word-Sized Graphics

A typical data display is a noun and a value, usually the current value: Often, the current value is better understood the context. Is it rising? falling? steady? A “sparkline” address that need, in very little space: Tying the current reading to the graph with color makes the connection more apparent: Added embellishments specific to the data (in this case, a “normal range”)

ffer a great deal of information in a word-sized space:

John Jannotti (uxisp) A Day with ET March 16, 2011 4 / 26

SLIDE 5

Scales & Aspect Ratio

Highs and lows help with Y-axis scaling. Tradeoff – consistent scaling, human perception

John Jannotti (uxisp) A Day with ET March 16, 2011 5 / 26

SLIDE 6

Baseball Sparklines — Seasons at a glance?

John Jannotti (uxisp) A Day with ET March 16, 2011 6 / 26

SLIDE 7

Cancer Mortality, as Reported

John Jannotti (uxisp) A Day with ET March 16, 2011 7 / 26

SLIDE 8

Cancer Mortality, improved

John Jannotti (uxisp) A Day with ET March 16, 2011 8 / 26

SLIDE 9

Cancer Mortality, “Do whatever it takes.”

John Jannotti (uxisp) A Day with ET March 16, 2011 9 / 26

SLIDE 10

Which fund should you buy?

Looks like a tough decision.

John Jannotti (uxisp) A Day with ET March 16, 2011 10 / 26

SLIDE 11

Small Multiples allow comparison

They’re all pretty much the same.

John Jannotti (uxisp) A Day with ET March 16, 2011 11 / 26

SLIDE 12

Micro / Macro

“If we’re going to make a mark, it might as well be a meaningful one.” – John Tukey

John Jannotti (uxisp) A Day with ET March 16, 2011 12 / 26

SLIDE 13

Stem & Leaf Plots

5 8 6 34 7 2337 8 33679 9 344 Digits take the place of an empty bar. You get a histogram to show distributions, the exact data, and you’ve saved 15 characters compared to a table.

John Jannotti (uxisp) A Day with ET March 16, 2011 13 / 26

SLIDE 14

Shouldn’t we simplify?

“Clutter and confusion are failures of design, not attributes of information.” Words (information) become easier to read when individual characters (data elements) are distinguished, not simplified. THIS TEXT IS DIFFICULT TO READ. This text can be read more easily.

John Jannotti (uxisp) A Day with ET March 16, 2011 14 / 26

SLIDE 15

Laying & Separation

How can we present more information without confusion. Layering – but beware the interaction of layers Use color subtly. Use gridlines sparingly (if at all). Beware of “1 + 1 = 3” effects.

John Jannotti (uxisp) A Day with ET March 16, 2011 15 / 26

SLIDE 16

Annotation

Annotation is a powerful way to indicate causality. In presentations

◮ Add labeled arrows. ◮ Circle anomalies. ◮ Put explanations near the data.

In interfaces

◮ Hover text explanations. ◮ Overlay help information. ⋆ Separate help text is so much easier. ⋆ Do whatever it takes. John Jannotti (uxisp) A Day with ET March 16, 2011 16 / 26

SLIDE 17

Cursed Treasue Tutorial

John Jannotti (uxisp) A Day with ET March 16, 2011 17 / 26

SLIDE 18

Find your “Supergraphic”

Applies equally well to GUI design. Applications convey information to facilitate understanding and choice. How can you present your applications’s core information in an understandable way? An interesting way?

John Jannotti (uxisp) A Day with ET March 16, 2011 18 / 26

SLIDE 19

Napolean’s Disastrous Retreat

John Jannotti (uxisp) A Day with ET March 16, 2011 19 / 26

SLIDE 20

Delicious Library

John Jannotti (uxisp) A Day with ET March 16, 2011 20 / 26

SLIDE 21

Expedia’s list is not a supergraphic.

Monotonous, uncomparable.

John Jannotti (uxisp) A Day with ET March 16, 2011 21 / 26

SLIDE 22

The chart is a bit better. . .

But it presumes price and airline are all that matters.

John Jannotti (uxisp) A Day with ET March 16, 2011 22 / 26

SLIDE 23

Hipmunk has a supergraphic.

Conveys more information. Sorts by “Agony.”

John Jannotti (uxisp) A Day with ET March 16, 2011 23 / 26

SLIDE 24

Advice on input

Use your resolution. Use wide/flat hierarchy.

John Jannotti (uxisp) A Day with ET March 16, 2011 24 / 26

SLIDE 25

Eliminate the interface

John Jannotti (uxisp) A Day with ET March 16, 2011 25 / 26

SLIDE 26

For more. . .

http://www.edwardtufte.com Strongly moderated forums — lots of useful ideas/information A few that seem pertinent to HCI

◮ iPhone interface design ◮ Windows phone interface design ◮ Sparklines: Theory and Practice ◮ Election Data Displays ◮ Links, Causal Arrows, Networks ◮ Analog gauges and the user interface ◮ Interface Hall of Fame/Shame John Jannotti (uxisp) A Day with ET March 16, 2011 26 / 26