Visualization one picture beats a 1000 words - User Experience Event AMIS

62
Lucas Jellema 18th March 2014 UX day Visualization Because One Picture beats a Thousand Words

description

End users don't really care about data. They want information from data that helps them answer questions, make decisions and take actions. A good way of turning data into information is through visualization - a picture after all says more than a 1000 words. This presentation shows some striking examples of that statement – both in the real world as well as in the world of IT. Some keywords: info graphics, dashboards, charts, traffic lights, maps, icons, emoticons. The story will convince you to look beyond traditional ways of presenting data – in order to make the user experience more intuitive, productive and with less opportunity for misinterpretation. Leverage the power of the IT systems to pre-process, pre-interpret and present information extracted from data in a meaningful way, poised for action.

Transcript of Visualization one picture beats a 1000 words - User Experience Event AMIS

Page 1: Visualization one picture beats a 1000 words - User Experience Event AMIS

Lucas Jellema

18th March 2014

UX day

Visualization – Because One Picture

beats a Thousand Words

Page 2: Visualization one picture beats a 1000 words - User Experience Event AMIS

2

Summary

Page 3: Visualization one picture beats a 1000 words - User Experience Event AMIS

3

User Oriented Objective of Information Systems

• To Enable a User

• To Perform his or her Responsibilities

• Correctly and Completely

• In a Timely, Efficient,

Convenient Manner

Page 4: Visualization one picture beats a 1000 words - User Experience Event AMIS

4

Page 5: Visualization one picture beats a 1000 words - User Experience Event AMIS

5

Page 6: Visualization one picture beats a 1000 words - User Experience Event AMIS

6

Page 7: Visualization one picture beats a 1000 words - User Experience Event AMIS

7

Page 8: Visualization one picture beats a 1000 words - User Experience Event AMIS

8

Request for information…

So, what is the

situation in the

Premier League

right now?

Page 9: Visualization one picture beats a 1000 words - User Experience Event AMIS

9

All the [raw] data made available

Page 10: Visualization one picture beats a 1000 words - User Experience Event AMIS

What was intended

0 50 100Gained Max to win

Page 11: Visualization one picture beats a 1000 words - User Experience Event AMIS

11

What we should be capable of

Data

Processing

Business &

Task Analysis

Graphical

Capabilities

Page 12: Visualization one picture beats a 1000 words - User Experience Event AMIS

12

Visualization

• Starting from Data

• Create a Presentation

• Of Relevant, Correct, Complete, Timely Information

• That allows

– Interpretation => Understanding

=> Insight => Wisdom/Vision

– Re-action

– Pro-action

• To ensure the User carries out his or her Responsibilities

Page 13: Visualization one picture beats a 1000 words - User Experience Event AMIS

13

Page 14: Visualization one picture beats a 1000 words - User Experience Event AMIS

14

Page 15: Visualization one picture beats a 1000 words - User Experience Event AMIS

15

Page 16: Visualization one picture beats a 1000 words - User Experience Event AMIS

16

Visualization Design

• What are the User’s responsibilities?

• What actions/decisions may have to be taken?

• What information is required to perform an action?

• Which information determines if an action should be taken?

• How should the user be informed about an action that needs taking?

– What shape does the call-to-action take?

• How should be the information required to start an action or make decision be presented?

• What data is the information derived from [and how]?

Page 17: Visualization one picture beats a 1000 words - User Experience Event AMIS

17

Data => Information => Insight => Action

Page 18: Visualization one picture beats a 1000 words - User Experience Event AMIS

18

Audience Challenge – 1/2

Page 19: Visualization one picture beats a 1000 words - User Experience Event AMIS

19

Audience Challenge – 2/2

Page 20: Visualization one picture beats a 1000 words - User Experience Event AMIS

20

From Data to Information

• Filter

• Structure & Sort

• Abstract [away irrelevant details]

• Aggregate

• Associate/Interpret

• Predict

Page 21: Visualization one picture beats a 1000 words - User Experience Event AMIS

21

Page 22: Visualization one picture beats a 1000 words - User Experience Event AMIS

22

Pre-processed: Filter, Enrich, Sort & Focus

Page 23: Visualization one picture beats a 1000 words - User Experience Event AMIS

23

Challenge

• Create an instruction for re-adjusting the clock

when the switch is made to Summer Time

Page 24: Visualization one picture beats a 1000 words - User Experience Event AMIS

24

Summer time clock adjustment

Page 25: Visualization one picture beats a 1000 words - User Experience Event AMIS

25

Page 26: Visualization one picture beats a 1000 words - User Experience Event AMIS

26

Power of Graphical Visualization

• Activates our Associative Brain

– Connections

– Memories

– Unconscious/background processing

• Multi-dimensional

– Color

– Size

– Shapes/ Font

– Story/Atmosphere

– Icons

– Sound

– Animation

– 3D presentation

– Interact (drill down, roll up, pivot)

Page 27: Visualization one picture beats a 1000 words - User Experience Event AMIS

27

The visualization that prevents feuds and fights

Page 28: Visualization one picture beats a 1000 words - User Experience Event AMIS

28

Page 29: Visualization one picture beats a 1000 words - User Experience Event AMIS

29

Page 30: Visualization one picture beats a 1000 words - User Experience Event AMIS

30

Page 31: Visualization one picture beats a 1000 words - User Experience Event AMIS

31

A biology lesson

• […] our visual system is extremely well built for visual analysis. There's a huge amount of data coming into your brain through your eyes; the optic nerve is a very big pipe, and it sends data to your brain very quickly (one study estimates the transmission speed of the optic nerve at around 9Mb/sec). Once that data arrives at the brain it's rapidly processed by sophisticated software that's extremely good at tasks such as edge detection, shape recognition, and pattern matching.

• […] pattern matching, is the key when it comes to discussing the benefits of presenting information visually. Typically, the important messages in data are represented in the patterns and pattern violations: trends, gaps, and outliers. This is the interesting stuff. This is meaning. This is what we go to the data hoping to find.

• Visualizations are so capable and powerful at conveying knowledge that they can be more effective than words at changing people's minds. ( "Graphical corrections are also found to successfully reduce incorrect beliefs among potentially resistant subjects and to perform better than an equivalent textual correction.")

Page 32: Visualization one picture beats a 1000 words - User Experience Event AMIS

32

Traffic signs

Page 33: Visualization one picture beats a 1000 words - User Experience Event AMIS

33

The Elephant in the Room

Page 34: Visualization one picture beats a 1000 words - User Experience Event AMIS

34

Power of Graphical Visualization (2)

Very good for

• Highlighting: focus on exceptions, urgent matters

• Providing context: time, location, connections

• Comparisons & Aggregations

& Summaries

• Extrapolation & Prediction

Page 35: Visualization one picture beats a 1000 words - User Experience Event AMIS

35

What was the speech about?

• Violence

• God

• Protest

• Vision(s)

• Politics/Politicians

• Poverty

• Georgia

• Slavery

• Murder

• Washington (George, State, D.C.)

• ???

Page 36: Visualization one picture beats a 1000 words - User Experience Event AMIS

36

Showing inter-human relationships and roles

Page 37: Visualization one picture beats a 1000 words - User Experience Event AMIS

37

Absolute numbers of child death by Diarrheal Diseases

Page 38: Visualization one picture beats a 1000 words - User Experience Event AMIS

38

Page 39: Visualization one picture beats a 1000 words - User Experience Event AMIS

39

Page 40: Visualization one picture beats a 1000 words - User Experience Event AMIS

40

Oracle Sales Cloud R8

Page 41: Visualization one picture beats a 1000 words - User Experience Event AMIS

41

APPLE: A TIMELINE

Page 42: Visualization one picture beats a 1000 words - User Experience Event AMIS

42

Page 43: Visualization one picture beats a 1000 words - User Experience Event AMIS

43

Another important timeline

Page 44: Visualization one picture beats a 1000 words - User Experience Event AMIS

44

Finding pictures

Page 45: Visualization one picture beats a 1000 words - User Experience Event AMIS

45

Page 46: Visualization one picture beats a 1000 words - User Experience Event AMIS

46

Page 47: Visualization one picture beats a 1000 words - User Experience Event AMIS

47

Page 48: Visualization one picture beats a 1000 words - User Experience Event AMIS

48

Page 49: Visualization one picture beats a 1000 words - User Experience Event AMIS

49

Gauging population sizes per region, country and city

Page 50: Visualization one picture beats a 1000 words - User Experience Event AMIS

50

At a glance: compare population regions & countries

Page 51: Visualization one picture beats a 1000 words - User Experience Event AMIS

51

Explore relative city size

Page 52: Visualization one picture beats a 1000 words - User Experience Event AMIS

52

Relative City Size in Japan

Japan

Page 53: Visualization one picture beats a 1000 words - User Experience Event AMIS

53

Multi-level comparison

Really Big

Big

Medium

Smallish

Page 54: Visualization one picture beats a 1000 words - User Experience Event AMIS

54

Traffic prediction

Page 55: Visualization one picture beats a 1000 words - User Experience Event AMIS

55

Weather Forecast in a glance

Page 56: Visualization one picture beats a 1000 words - User Experience Event AMIS

56

Data – hardly information

Page 57: Visualization one picture beats a 1000 words - User Experience Event AMIS

57

Page 58: Visualization one picture beats a 1000 words - User Experience Event AMIS

58

Page 59: Visualization one picture beats a 1000 words - User Experience Event AMIS

59

Page 60: Visualization one picture beats a 1000 words - User Experience Event AMIS

60

Page 61: Visualization one picture beats a 1000 words - User Experience Event AMIS

61

Most densely populated capitals in the world

Page 62: Visualization one picture beats a 1000 words - User Experience Event AMIS