Edward Tufte on 'Beautiful Evidence'

Tonight I went to see Edward Tufte lecture on 'visual thinking and analytical design' at the Royal Geographic Society tonight. The room was packed, perhaps because lots of people were in town for UX London already. The event was organised by Intelligence Squared, who are apparently 'dedicated to creating knowledge through contest', which is an interesting goal in its own right.

It's been a long week, so I suspect my notes are pretty sketchy, but I'm posting them in case they're useful. Let me know if you spot any corrections. On with the talk…

[His basic thesis:] The method of production interferes with production [of knowledge?].

We do most of our serious visual thinking inside, on unreal flatland [2D] screens, looking at representations of real things, instead of being outside looking at real things. In the real world, most of our thinking would be about way-finding, rather than deep analysis.

Evidence is evidence. Information doesn't care what it is. The intellectual tasks remain constant regardless of the mode of production/consumption – we need evidence to understand and reason about the materials to hand. We might care about mode of production but we shouldn't segregate the information by modes of production. We need content-oriented design.

In manuscripts, the hand directly integrates words and image. When marks all come from same source e.g. hands then material is integrated. When technology has different modes of production e.g. type and drawings, then content is segregated by modes of production.

[He showed a 9th century centaur – the image was made of Latin words, a unification of text and image.] Visual meaning of Latin centaur is still clear despite language. The universality of images, the stupefying locality of languages. Images are cosmopolitan, words are local and parochial. When the language is unknown to the viewer, image and language are separated into comprehensible image and incomprehensible language.

'Content indifference' is the result of teaching that only design matters. The essential test is how well each assists understanding the understanding of the content, not how stylish they are. You must know the meaning of the content to design it.

The point of information display is to assist analytical thinking. One common task is to make comparisons. Take the intellectual task (e.g. 'make smart comparisons') and turn them into design principles. Tasks become instructions to the design. Otherwise it's just based on fashion or latest technology.

[He then had the lights turned up so people could view copies of Minard's map of Napoleon's Russian campaign in 1812. He used this to illustrate his Six Grand Principles of Analytical Design.]

  1. First Grand Principle of Analytical Design: show comparisons, contrasts, differences e.g. difference between those who left and those who returned.  Principles guide the design but also the content. A lot of his work is secretly about analytical thinking.
  2. Second Grand Principle of Analytical Design – show causality, dynamics, mechanisms, explanation. For policy thinking, intervention thinking – to produce an effect, you need to know about and govern the cause – show causality.  Thinking about how these are derived are producer commandments. But as they're derived from fundamental intellectual task they're also consumer tasks – you should be asking, as an audience, what is your task?  Minard's map shows causality with temperature.
  3. Third Grand Principle of Analytical Design – show multivariate data. Three or more factors, variables. i.e. show more than two variables. Reality is inherently multivariable.Minard showed six dimensions – the size of army, direction, temperature, dates, location (lat,long). It's not about the method of display. The design is so good that it's invisible. Good web design has to be enormously self-effacing. The task is for users to understand information, not admire the interface. People should be too busy going about their business to notice the design.
  4. Fourth Grand Principle of Analytical Design – the principle of mode indifference – completely integrate all content. No segregation by mode of content. Videos and tables should be embedded in text, not set aside with captions elsewhere. Information don't care what it is, cognitive tasks don't care what the mode of production is. Minard had paragraphs of text, statistical bits, annotations all over.  Cognitive styles in approaching material – really good analysts are indifferent to the mode of evidence, spirit is 'whatever it takes to explain it'. Driven by explanation. Enormous difference between process driven and content driven explanation. Academics make industry from process driven design but it should be whatever it takes to explain it – not what's lying around, not what I'm good at.
  5. Fifth Grand Principle of Analytical Design – document everything and tell people about it. Document sources, scales, missing data. It's the credibility argument. Two things you need to get across in a presentation – what the story is and why the audience should believe you. Audience has two tasks – trying to figure out the story and whether they can believe the presenter. An important way to have credibility is to have care and craft with respect to the data. Minard's two paragraphs are about documentation – assumptions, scales of measurement. Minard was a great engineer who designed bridges and canals – this has the facticity of an engineer. Minard didn't want quibbles about the facts – he wanted people to appreciate the disaster of war. It was meant as an anti-war poster right from the start. It was meant to show the horrors of war. Precision and accuracy in evidence helps his credibility.  Documentation is part of the fundamental quality control mechanism for preservation of credibility. As a consumer, you should be sceptical if people don't say where the data came from e.g. URLs or full data sets. Very few people look at the original data but making sure it's available is important.  Cherry picking is a big threat to the credibility of presenters – am I seeing the results of evidence, or of evidence selection? Providing source is a way of showing you're not a cherry picker.  Overall, incompetence is more likely to be an explanation than conspiracy. Intimacy with the evidence helps convince of credibility.
  6. Sixth Grand Principle of Analytical Design – serious presentations largely stand or fall on the quality, relevance or integrity of the content. 'Just fancy that.' ' If that's not true of presentations where you work, maybe you want to work somewhere else.'  His great insight into design from his books is that content matters, but 'it's a shame we live in a world where that counts as an insight'.The best way you can improve your presentation is to improve the content.
  7. [Then I think a Seventh Grand Principle of Analytical Design snuck in:] We want to try as much as we can to show information as adjacent in space than flip backwards in time. If information is stacked in time e.g. one slide after another, you have to try and make comparisons between something that's gone away and something you're not seeing. Important comparisons should be try to be made in the eye span. This seventh principle has all kinds of consequences for design. Power users have multiple monitors – trying to get more content real estate adjacent in space.

Digression 'strange word, users', only two industries describe their customers as users, illegal drug industry and computer industry.

The principles makes you think about how you display information to viewers – put the data in front of the user, show the comparison. The human eye is really good at comparing things, so having content rich screens and use just about every pixel that you can to carry content.

Trust the users optical capacity. New York Times has 400 links on its homepage. When working on a model for site for site reporting transparency, he suggested news sites.

User testing is not 'having some temps come in and look your screen over' but rather how your website performs in the wild. Know New York Times and Google News work because of the sheer number of visitors. Websites that are very successful in the wild provide models. Look at people who report – first rate news websites.

[He then turned to the sparklines handout.]

Bonus real live 'Powerpoint sucks' comment.
Sparklines – intense, high resolution display.
Graphics should have resolution of typography [not thickness of pencil]. 'Graphics are no longer a special occasion.' They can be anywhere that a word, image or number can be.

Grey band [in the handout ] is based on the types of tasks that clinicians want to do – they don't care about normal values, only exceptions. [The whole visualisation is based on the task, the user and the context]

'We want to be approximately right rather than accurately wrong'. An approximate answer to the right question is better than an accurate answer to the wrong question. [I think I misheard 'accurately' for 'exactly', judging by people's tweets]

We're subject to the recency effect – sparklines show most recent change but put it in context – patterns in change, other similarly shaped changes.

Data analytical design is about showing reality in flatland.

In response to questions: a lot of websites get corrupted because they're pitching, bringing the ethics of the marketplace into the design – important alongside the intensity of a good news website is its spirit – reporting spirit, not pitching.

Qu re current trend for data visualisation e.g. artists animating visualisations
'I think they can do exactly what they please' One reason it's alright is they're not making other claims about the content, just using it as a found object.

[Finally, out of interest – you could compare these written notes to this sketched version of his talk by @lucyjspence.]

What do you mean by 'wireframe'?

This post on 'The future of wireframes?' chimed a few bells, not only because I'm revising for a Requirements Engineering exam but because I've been in the start-up phase for projects of all sizes lately and have been thinking hard about the best way to understand and communicate requirements. In doing so, I've realised that 'wireframes' has become one of those terms that mean different things to different people – and that of course, it's an entirely new term to people who haven't worked on a design phase of a digital project before. This summed up past and current definitions neatly:

For many years the primary role of wireframes was to specify software. We now use wireframes to investigate and explore how people will interact with a site. Using a ‘just enough’ approach, we often create a series of simple interactive prototypes to try out a variety of approaches to solving a problem. These prototypes can be made in HTML or they can be as simple as a series of Keynote slide for someone to click through.

This is a very different approach to wireframing. Rather than simply documenting where a link goes, the goal is to model and start experiencing what moving around a site feels like as quickly as possible. The prototype can then be tested and the results used to iteratively improve the end solution.

Of course, sites still need to be specified, but wireframes aren’t always the right tool for doing this.

Here's a list of wireframe and prototype tools – do you have any favourites?

A rare post from me – I've been completely caught up in work and my MSc for the past few months. Normal service will be resumed soon – I've still got to report on UKMW09 and a trip to Oslo to give a lecture on social media and museums, libraries and archives.

WCAG 2.0 is coming!

That'd be the 'Web Content Accessibility Guidelines 2.0' – a 'wide range of recommendations for making Web content more accessible' with success criteria 'written as testable statements that are not technology-specific' (i.e. possibly including JavaScript or Flash as well as HTML and CSS, but the criteria are still sorted into A, AA and AAA).

Putting that in context, a blog post on webstandards.org, 'WCAG 2 and mobileOK Basic Tests specs are proposed recommendations', says:

It's possible that WCAG 2 could be the new accessibility standard by Christmas. What does that mean for you? The answer: it depends. If your approach to accessibility has been one of guidelines and ticking against checkpoints, you'll need some reworking your test plans as the priorities, checkpoints and surrounding structures have changed from WCAG 1. But if your site was developed with an eye to real accessibility for real people rather than as a compliance issue, you should find that there is little difference.

How to Meet WCAG 2.0 (currently a draft) provides a 'customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques', and there are useful guidelines on Accessible Forms using WCAG 2.0, with practical advice on e.g., associating labels with form inputs. More resources are listed at WCAG 2.0 resources.

I'm impressed with the range and quality of documentation – they are working hard to make it easy to produce accessible sites.

What would you create with public (UK) information?

Show Us a Better Way want to know, and if your idea is good they might give you £20,000 to develop it to the next level.

Do you think that better use of public information could improve health, education, justice or society at large?

The UK Government wants to hear your ideas for new products that could improve the way public information is communicated.

Importantly, you don't need to be a geek:

You don't have to have any technical knowledge, nor any money, just a good idea, and 5 minutes spare to enter the competition.

And they've made "gigabytes of new or previously invisible public information" available for the project, including health, crime and education data (but no personal information).

Nice information design/visualisation pattern browser

infodesignpatterns.com is a Flash-based site that presents over 50 design patterns 'that describe the functional aspects of graphic components for the display, behaviour and user interaction of complex infographics'.

The development of a design pattern taxonomy for data visualisation and information design is a work in progress, but the site already has a useful pattern search, based on order principle, user goal, graphic class and number of dimensions.

Museum technology project repository launched

MCN have announced the launch of MuseTech Central, a project registry where museum technologies can 'share information about technology-related museum projects'. It sounds like a fabulous way to connect people and share the knowledge gained during project planning and implementations processes, hopefully saving other museum geeks some resources (and grey hairs) along the way.

I'd love to see something like that for user evaluation reports, so that institutions with similar audiences or collections could compare the results of different approaches, or organisations with limited resources could learn from previous projects.