Sie sind auf Seite 1von 12

B. Sc.

Multimedia, Technology & Page 1 of 12 EE2108S: Information


Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

Information Representation

An Analysis of Six
Information Graphics

By Chris Sainsbury

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 2 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

Contents

Contents.......................................................................................................................................... 2
Selected Images .............................................................................................................................. 3
The Sinking and Raising of the Kursk ............................................................................................. 4
Project Management Graphs ........................................................................................................... 5
Study Into the Effectiveness of Rehabilitation Programmes for Violent Men................................... 6
F.A. Premiership Football Match Preview Graphic.......................................................................... 8
Umax VistaScan Software v3.7.5 .................................................................................................... 9
Scientific Atlanta Cable TV Receiver Instruction Manual ............................................................. 10
Table of Figures ............................................................................................................................ 12
Footnotes ...................................................................................................................................... 12

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 3 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

Selected Images

Fig. Graphic Type Source Binary analysis


1 The Sinking and Raising of the Kursk Verb World Wide Web Good
3 Project Management Number Book Bad
5 Study Into the Effectiveness of Number Journal Good
Rehabilitation Programmes for Violent
Men
6 F.A. Premiership Football Match Noun Newspaper Good
Preview Graphic
7 Umax VistaScan Software v3.7.5 User PC Bad
Interface
9 Scientific Atlanta Cable TV Receiver Control Instruction Bad
Instruction Manual Manual

N.B. Detailed references appear in the Table of Figures.

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 4 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

The Sinking and Raising of the Kursk

Figure 1 shows the Russian Oscar-


class submarine the Kursk, detailing the
vessel’s sinking and subsequent salvage.
Published by the salvage contractors, the
purpose of the graphic was to provide the
media with an accessible graphic
representing this intriguing feat of human
engineering.
The ‘Sinking’ (or upper) graphic uses
numbers to represent the progression of time
in steps, as well as using arrows to ‘guide’
the user through the progress of events.
These conventions are common in
information graphics and the vast majority of
users are familiar with their connotations.
Therefore, the user (almost unknowingly)
follows the numbered steps through the
graphic in chronological order, and ‘follows’
the direction of arrows with their eyes. In
this way the designer of the graphic has
controlled the user’s interpretation of the
information and created a ‘journey’ for them
through the image.
The first three stages of the graphic
use ‘small multiples’ – small copies of a
graphic repeated to encourage comparison –
in order to represent the initial explosion.
The user subconsciously compares each of
the three small submarines and forms a
conceptual model of the sequence of events Figure 1: The Sinking and Raising of the Kursk

in their mind. The conceptual model may


Course Directors: Chris Sainsbury Module Leader:
Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 5 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

take the form of “no explosion, small explosion, big explosion” or similar.
The ‘Sinking’ section also contains a globe graphic indicating the
position of the accident in relation to Northern Europe. This is a
commonly used technique for setting geographic context in information
graphics, on television and in the national press. (For example, see figure
2: a map of Iran that appeared in the Guardian). Map notation carries
with it the benefits of a high level of shared understanding amongst a
majority of people (map reading is taught in schools). The shared
understandings enable the user to associate the events being represented
with a certain area of the world.
The ‘Recovery’ section of the graphic contains a scale on the left
Figure 2: A map of Iran.
hand side, indicating the sea depth in metres. Although the depth guide is
useful, providing the user with some idea of scale; it is misleading as the submarine graphic is not
drawn to scale, and therefore appears much bigger in relation to its depth from the surface than in
reality. (The Kursk was 155 metres long).
The section of the Kursk that was removed is represented in dark grey, which in western
culture connotes negativity or loss; while the salvaged section of the submarine is shown in white,
often used to connote positivity. These colour indicators in addition to the text labels communicate
the required message to the viewer effectively.
I believe The Sinking and Raising of the Kursk is an example of an information graphic that
represents a series of complex events
in way that is likely to be accessible
to a majority of people. This is
achieved through the use of
established conventions and ideas to
facilitate communication.

Project Management Graphs

Figure 3 shows a graph


reproduced from the book Project
Management by Dr. H. Kerzner. The
graph is offered as a possible
representation of the way in which a Figure 3: The distribution of a Project’s funding.

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 6 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

project’s funding is divided.


The iconic representations of the words at the left of the graphic serve no purpose in terms
of communicating useful information to the user.
• They offer no help to the user when reading the graphic,
• Are not aesthetically pleasing,
• Convey only redundant information to the user,
• Only serve to confuse the user through possible mistaken inference,
• Fail to precisely and intuitively communicate the meaning of their associated word,
For example, the ‘Profits’ icon broadly connotes the concept of money, economics or
finances, but fails to indicate the specific meaning of the word ‘profit’.
The unnecessary use of icons is one reason why the graph has a very low percentage of data-
ink. Just 0.3765% of the graphic is data ink, a very low amount indicating that there is a lot of
redundant or unnecessary information in the graphic.1
The statistics represented in the bar graph are
percentage data. Through poor design the layout of the graph
does not make it obvious to the user that this is the case. Bar
charts can represent any type of value, not just percentages; and
the fact that a bar format has been chosen fails to directly
indicate to the user that the values are percentages. A format
such as a pie chart connotes the ‘slicing-up’ of a whole figure
and, therefore represents percentage values more intuitively.
Thankfully, the author of the book also recommends a
pie chart format for the data, shown in figure 4. By contrast, the
Figure 4: The distribution of a Project’s funding
as a pie chart.
pie chat has almost 100% data ink, with no redundant data.
(Except possibly the percentage figures in the white boxes).

Study Into the Effectiveness of Rehabilitation Programmes for Violent Men

The graphs shown in figure 5 represent the results of a lengthy study into the rate of
reoffence among men who are violent towards their wife or partner; subsequent to them being
arrested, dealt with by appropriate authorities and then released. The dashed line represents
offenders who were dealt with by conventional means (primarily taking the form of an appearance
before a judge followed by a fine or community service). The solid line represents offenders who
went through a rehabilitation programme designed to reduce their chances of reoffending. The
Course Directors: Chris Sainsbury Module Leader:
Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 7 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

horizontal axis represents time, specifically three significant points in time (as defined in the study).
The first point is the occurrence of reoffending taken at the time of arrest, the second three months
later and the third after one year. The study was based on primary data sources, due to the
unreliable nature of legal records, using victims’ testimonies to determine whether reoffence had
taken place in each case.
To a student or academic who had read the accompanying article, the graphs shown in
figure 5 represent the following points clearly and convincingly:
• The rehabilitation programme is effective in reducing reoffending,
• That reoffending is significantly less likely subsequent to arrest and release
(regardless of treatment),
• That the rate of reoffending increases after a year (relative to after three months)
regardless of treatment.
These points indicate that the graph is effective in helping to determine causality. For
example, that the rehabilitation programme causes the rate of reoffending to decrease. The data ink
level of the graphics is very close to 100%, indicating that the graphics are relatively free of
redundant or irrelevant data.
Despite these positive points, some improvements could be made to the graphic in order to
increase its effectiveness:
• The vertical axis of the left-hand graph in figure 5 begins at 20 rather than 0.
 This makes comparison prone to difficulty.

Figure 5: Results of a study into the effectiveness of rehabilitation programmes for violent men. The left graphic represents single occurrences of
an offence, and the other represents ‘frequent’ offences. An offender must offend 5 times to be considered a ‘frequent’ offender.

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 8 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

• The horizontal axes show just the three time points with an apparently arbitrary
scale.
 A scale divided into 12 or 18 months would be more intuitive.
However, the graph is a good example of a relatively simple graphic that communicates the
desired message quickly and with an efficient use of ink.

F.A. Premiership Football Match Preview Graphic

Figure 6: An F.A. Premiership Football match preview graphic, as printed in the Guardian newspaper.

Figure 6 shows a preview graphic that appeared in The Guardian representing the Premier
League match between Leeds United and Blackburn Rovers. The information graphic is designed to
communicate relevant information regarding the match to the user.
Within the national press (and communication) as a whole, shared understandings are used
to facilitate communication. Once an understanding is shared, the related information becomes
redundant and it is therefore unnecessary to include it (at least in full). Within sport, shared
understandings are often defined and regulated by supervisory bodies, and the result of this is our
ability to communicate a great deal of information in a relatively concise fashion, within the context
of sport (‘one-nil’ is an example). This is directly due to the ordered nature of sporting conventions
creating a high level of shared understanding between the sender and the receiver.

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 9 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

In this context, the designer has used a number of accepted conventions within football
reporting to communicate match information to the user.
• The pitch graphic with players is topological – the players will never actually be in
the positions indicated.
 The use of conventions mean that the user accepts the graphic.
 The convention (of representing members of a team as pieces on a
representation of a pitch) causes the users’ mind to accept the triadic
elements of the representation.
 The users’ mind accepts that the sign of a rectangle with markings and pieces
on it represents the object that is a football pitch with players on it and that
the inferred meaning is an indication of team formation and tactics.
 The convention means that a ‘map’ between each triadic element is created in
the users’ mind without them realising it.
• They understand the graphic if they understand the conventions used
in its creation. (If the required shared knowledge is present).
The graphic make use of journalistic conventions in order to facilitate efficient
communication in an aesthetically pleasing way. Similar use of conventions is evident throughout
the media. However, this graphic is a particularly good example of shared understandings being
used to facilitate efficient communication in a populist information graphic.

Umax VistaScan Software v3.7.5

Figure 7: The user interface for Umax VistaScan Software (advanced mode).

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 10 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

Umax, one of the leading scanner manufacturers in the consumer and so-ho (small office-
home office) markets offers only one piece of scanning software for use across their hardware
range: VistaScan.
The user interface deviates from the Macintosh user interface standards in a number of key
areas. These include the design of the title bar and the implementation of interface elements such as
menus, tabbed palettes and scroll bars. The colours also deviate from the Macintosh standard
‘platinum’ look, instead including garish blue and red colours.
The VistaScan developers’ repeated deviation from the recommended guidelines has
resulted in the creation of an interface that is far from intuitive to the user. Standards facilitate a
greater level of shared understanding between the developer and the user, and by failing to adhere
to Macintosh guidelines the developers of VistaScan have missed an opportunity to create a
software product that encourages ease of use.
The Apple Macintosh human interface guidelines state:
Figure 8:
“Macintosh programmers have painfully learned that Mac users reject programs that
violate the expected user interface standards. Mac users expect consistent behaviour,
including menu placements, document behaviour, scrolling, and so forth. Some
publishers have successfully survived delivering un-Mac-like user interfaces,
because their applications were seen as either indispensable, awesomely innovative,
or a game … you will increase your acceptance
in the Mac market by making your application
look and feel like a standard application.”
Unfortunately it is apparent that the developers
at Umax failed to read the guidelines offered by
Apple. I feel that VistaScan is far from ‘awesomely
innovative’ and has survived solely due to the fact that
the use of Umax hardware dictates its use.

Scientific Atlanta Cable TV Receiver


Instruction Manual

The purpose of the graphic shown in figure 8


is to aid the user in their task of attaching the Cable
TV receiver to their television. Figure 9: Scientific Atlanta Cable TV Receiver Instruction
Manual (back page).
While the representation of the rear view of

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 11 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

the system is accurate and, within the given context, intuitive, the rest of the graphic fails to
communicate clearly the way in which the user must manipulate the system in order to result in a
working receiver unit. The bold text labels indicating (presumably) the wire and connector types
use notation which is likely to be unfamiliar to typical users. The RG-59U cable for example, is
likely to look very similar to the ‘System Cable’, although no distinguishing features are
immediately apparent. The ohms and voltage ratings are also notation typical users may be
confused by.
These problems could be elleviated through the use of coloured cables, say red for ‘output’
and yellow for ‘input’. The addition of clearer on-box notation, for example ‘to TV’ instead of
‘output’, may even remove the need for an instruction manual to be consulted in a majority of cases.

2015 words.
Chris Sainsbury, 2002.

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk
B. Sc. Multimedia, Technology & Page 12 of 12 EE2108S: Information
Design Level 2. www.sainsbury.uk.com Representation and Visual HCI

Table of Figures

Fig. Author(s) Title Publisher Date URL


1 The Crash and Recovery of the Kursk Mammoet 2001 http://www.lostline
Heavy rs.com/Peril/kursk.
Lifting and html
Transport
2 Map of Iran The Sat.
Guardian. 16th
March
2002
3 Kerzner, H. Project Management: A systems John Wiley 2001
approach to planning, scheduling and & Sons Inc.
controlling, 7th edition
4 Kerzner, H. Project Management: A systems John Wiley 2001
approach to planning, scheduling and & Sons Inc.
controlling, 7th edition
5 Dobash, R.; Journal of Social Policy Vol. 28 Pt. 2. A Cambridge 1999
Dobash, E.; Research Evaluation of British University
Cavanagh, Programmes for Violent Men Press
K. and
Lewis, R.
6 Leeds United A.F.C. vs. Blackburn The Sat.
Rovers F.C. match information Guardian, 16th
sports March
section, p8 2002
7 VistaScan v3.7.5 Umax Data 2000
Systems,
Inc.
8 Apple Human Interface Guidelines Apple 1984- http://developer.ap
Computer 2002 ple.com/macos/ma
Inc. coverview/prog09.
html#sect9.1
9 Model 8602 Cable TV Set-Top Terminal Scientific 1995
Instruction Manual Atlanta

Footnotes

1. The data ink level in figure 3 was calculated as follows (figures are in pixels, and result is to
5 decimal places):

Total area of data ink (including axes, description and 5 pixel wide bars) 5510
= 0.03765
Total area of ink (excluding only white areas of the graphic) 146334

Course Directors: Chris Sainsbury Module Leader:


Mr. D. K. Milligan & Mr. L Cruickshank. 0102323 Mr. Steven Cockett
ee01cps@brunel.ac.uk

Das könnte Ihnen auch gefallen