Self Directed Project

Visualising Conversation
Oliver Tomlinson - Summer term 2010
Contents

Discovery phase
Introduction  4
Instant messaging  5
Micro blogging  8
Forums  10
Data visualisation  11
Transformation phase
The data set  16
Visualisation concepts  19
Word clouds  24
Making phase
Final visualisation  26
Potential interface  27
Forum growth  28

2 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

DISCOVERY TRANSFORMA

Self Directed Project: Visualising Conversation 3

Introduction

This report aims to understand the elements of digitally based

conversation between a number of users, discovering current
methods, and applying a style to an existing chat thread
found on Mac Forums (www.mac-forums.com).

Real-time web conversation via instant messaging and

chat forums is a method of collaboration used by people
throughout the world. It can be used for collaboration and
knowledge share, providing instant feedback to users via a
Graphical User Interface (GUI).

As technologies develop, so does the power of digital

messaging, therefore GUIs need to become more advanced
to enable the users to understand all the information available
to them.

For this assignment, digital conversation and its graphical

representation has been organised into the following groups:

• Instant messaging
• Micro blogging
• Forums
• Data visualisation

4 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

Instant messaging

Messages sent in real time, often between just two

individuals, and can be accompanied by live video.
Depending on the platform, users can send files to each
other and personalise messages with ‘emoticons’ - small
pictograms to add an emotion or feeling to text.

A screenshot of Skype used on a Mac

Chat history is shown in a linear format
with oldest at the top, and previous
conversations greyed out. The users
are defined by two colours and their
name in a bar. The next sentence is
typed in the lowest panel, made visible
by a slightly larger type size.
The video call can be used
instead of typing messages.
A red button shows it’s
active, and also represents
the ‘hang up’ button.

The main Skype interface illustrates

which friends are online using colour and
pictograms. Users may also personalise
Panel showing current live their ID photo and add a ‘mood’ message.
chats, one in this case

Self Directed Project: Visualising Conversation 5

 Google Wave; this one is for the Book Designers
at Reading University.
Google claim that Wave is a revolutionised email
tool. It’s been added to the instant messaging
section of this report as that is one of functions
designed into its interface.

In addition to the standard emails the user

can receive, the user can start a Wave. A
Wave is a more interactive email chat thread,
allowing participants to engage at any stage
of the conversation.
Instead of the linear, top-down approach
to illustrating a conversation, a user can
comment at any point and their message is
posted there.
The Reading University Book designers are
currently using the interface as a message
board, rather than a chat tool.
An interesting feature that is not found in
Skype, is the ability to see someone typing
in real time. In most instant messaging
situations the user will type the message
and press send, this interupts the flow of
conversation if it’s a long message.

6 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

Facebook has an instant messaging function,

allowing the user to see which friends are logged
into chat. Friends are shown with their individual
picture and a status icon, e.g. away.

Conversation is between two people, defined

by their name in differing colours. GUI is
very similar to Skype, using a linear format,
text area at the bottom, and an icon to
show when each person is typing. Instead
of a coloured bar separating each entry,
Facebook chat uses a thin line.

Self Directed Project: Visualising Conversation 7

Micro blogging

For this project, mico blogging is defined as messages sent

to a larger community, either completely ‘public’ or to a
smaller group. The messages are often published to a group
rather than individuals, and contain thoughts, news or links of
the originator.
Within Twitter the user follows others and, in
turn, can also be followed. When the user posts
a message it is displayed on all their followers
pages.
Messages are limited to 140 characters with
links shown in blue (as do all clickable elements).

Like chat interfaces, users

personalise their profile with
pictures - this helps define them
in long lists. A big difference is
the flow of messages; blogging
seems to flow bottom-up with
new messages and posting space
at the top.

Tweetie is a desk-top application for using

Twitter without opening a web browser. The
GUI is quite different, with Tweetie using more
icons to illustrate functions. The text flow is still
bottom-up as with Twitter, but user messages
are aligned right to define them more from the
list . Tweetie also separates messages in speech
bubbles, a strong visual cue of conversation.

8 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

Facebook News Feed for Oliver Tomlinson

The Facebook News Feed is bottom-up

messaging. Like Twitter, users can aim a
message at a particular person in the public
domain, but it’s mostly used for writing news or
thoughts of the user.
Where Twitter replies to a blog/message are
always shown at the top, making it difficult to
follow a thread, Facebook will align replies under
the original.

Self Directed Project: Visualising Conversation 9

Forums

Forums cross over the features found in micro blogging

and instant messaging; they are a specialised conversation
focussing around a particular topic, whilst allowing a direct,
real-time response to individuals.
www.mac-forums.com, is a forum for Apple
enthusiasts. This is where the data will be found
for the visual designed in this project.

Users drill down into forum topics

which are displayed most recent
at the top, after overall notices or
‘stickies’ in this case.

Once within a topic, a subscribing member can

post comments, which now flow top down.
When quoting an individual, messages
incorporate the quoted text within the new
message, unlike the Facebook micro blogging
method of placing the new message under the
original quote.
Layout is hindered by the excess user profile
information and various icons and logos.

10 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

Data visualisation

Data visualisation of actual person to person conversation is

now used as a tool to label, categorise, link and find trends in
speech or debate.

Capitol Words assess word frequency in the US

congressional record to produce ‘word clouds’
or ‘tag clouds’. These data graphics use type
size and colour to differentiate and highlight
commonly used words. The list view compares
frequency using a bar graph method.
When the user clicks a particular word they are
taken to a page illustrating trends of usage in a
line graph, and history on an interactive map.
Word clouds are a useful overview of large
amounts of conversation data or text, giving the
reader a summary of key topics and the ability to
drill down into the information.

Self Directed Project: Visualising Conversation 11

 Visuals of the ‘Conversation Clock’ taken from
a paper entitled, Seeing More: Visualizing Audio
Cues, by Tony Bergstrom and Karrie Karahalios.
As conversation around a table is recorded, a
visualisation is produced to illustrate levels of
input over time, with individuals colour coded.
However, as the conversation develops the lines
move away from the centre, increasing in size
12
and line weight due to perspective and therefore
not providing comparable data.
Another problem would be assessing which
conversation promoted a direct response,
as no links are shown. As a tool for overall
conversation dominance it may succeed by
showing a wash of one particular colour.
Oliver Tomlinson - Summer term 2010
 DISCOVERY TRANSFORMATION MAKING

Revisit is designed to show recent Twitter

messages around specific topics. Profile
images illustrate the Tweets and how they are
‘re-tweeted’ or linked to others. It is a visually
stimulating concept but is difficult to follow a
thread in its entirety.

This visualisation differs from the

others investigated by showing
the time line on a left to right axis.

Data around the search topic is

shown on the top bar, but it gives
little comparison to other topics or
how this one might be connected
to other threads of discussion.

It is unclear what the

transparency, size, or
distribution of the profile
images represents.

Self Directed Project: Visualising Conversation 13

 The Worm is best described by Wikipedia:
The “worm” is a market research analysis
tool developed by Roy Morgan Research
(who called it The Reactor), with the
purpose of gauging an audience’s reaction
to some visual stimuli over some time
period. The name “worm” describes its
visual appearance - as a line graph snaking
up or down.

The Worm portrays a continuous opinion

of the viewers. It would be interesting to
compare it with the actual text dialogue,
highlighting who is talking at the time.

Obama and McCain average opinions during a

televised debate. This graphic would need to
be seen along-side more data to make a true
comparison, in its current format it is of little use.

14 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

ISCOVERY TRANSFORMATION MAKING

Self Directed Project: Visualising Conversation 15

The data set

The data set used for this report was found on the Mac
Forums website (www.mac-forums.com); it is a thread
relating to ‘Apple rumours and reports’, with the topic name
‘iPhone Leak: Police Seize Gizmodo Computers’.

The following pages show the key text and information

provided by this online conversation thread. By analysing
the information given, it should be possible to produce
a visualisation that highlights themes and particular
interactions between the users.

Web link

Web links

The actual thread is shown in a linear format,

with each message being posted under the
previous in time order. This spread shows web
links (red arrows) and quote links in blue.

The current format makes it difficult to see how

the conversation breaks into ‘micro threads’
under the start topic, and also which members
are talking to each other. Even though some
messages quote others, there are also links
made without direct quotes.

16 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

End of thread

Self Directed Project: Visualising Conversation 17

Thread participants

The participants of this particular thread are shown below;

their input varies and is often aimed at particular people,
geographic location may have an impact on the time of day
they make comments.

1 Name: -FlyAuburn- 8 Name: dtravis7

Joined: Feb 25, 2010 Joined: Jan 04, 2005
Location: Unknown Location: Modesto, Ca.
Posts: 12 Posts: 17,142

2 Name: bargsbeer 9 Name: Horness

Joined: Oct 22, 2007 Joined: Jan 23, 2008
Location: Tampa , FL Location: Great Britain
Posts: 1,177 Posts: 41

3 Name: lifeisabeach 10 Name: Village Idiot

Joined: Sep 30, 2007 Joined: Apr 04, 2007
Location: Unknown Location: Durtburg, WV
Posts: 2,030 Posts: 2,283

4 Name: MacEnVy 11 Name: cwa107

Joined: Nov 30, 2009 Joined: Dec 21, 2006
Location: Unknown Location: Middletown, PA
Posts: 7 Posts: 16,558

5 Name: the8thark 12 Name: Zoolook

Joined: Jan 27, 2007 Joined: Sep 24, 2006
Location: Brisbane Location: Brooklyn, NY
Posts: 2,774 Posts: 2,398

6 Name: DriftNismo 13 Name: NumberSix

Joined: Dec 26, 2008 Joined: May 01, 2008
Location: London, UK Location: New York
Posts: 211 Posts: 148

7 Name: Doug b
Joined: Jun 22, 2008
Location: Unknown
Posts: 851

18 Oliver Tomlinson - Summer term 2010

 02:00

DISCOVERY TRANSFORMATION MAKING

01 -FlyAuburn- 02:46

Visualisation concepts 02 bargsbeer 03:04

03:00

03 lifeisabeach 03:30

04 MacEnvy 03:49

This diagram shows a timescale for 04:00the thread, starting

from the top, and how threads are linked to each other and
back to the start. Participant input is shown on the left of
the timescale. Even though links are shown, the linear form
does not clearly illustrate tangents from the original thread;
05:00
however, increased participation can be seen along the Arcs on the right show links, either quoted or
timeline towards the bottom. back to the original topic. As the comments all
02:00
originate from the original topic, the large arcs
may not be required, or could be shown in a
different way.
05 the8thark 05:54
06:00 01 -FlyAuburn- 02:46

03:00
02 bargsbeer 03:04

03 lifeisabeach 03:30

04 MacEnvy 03:49

04:00

07:00
06 DriftNismo 07:03
05 the8thark 07:12

05:00
06 DriftNismo 07:25

05 the8thark 05:54
08:00 06:00

07 Doug b 08:24

05 the8thark 08:34
07:00
06 DriftNismo 07:03
05 the8thark 07:12

06 DriftNismo 07:25

09:00

08 dtravis7 09:14 08:00

07 Doug b 08:24

05 the8thark 08:34

09:00

10:00
08 dtravis7 09:14

10:00

11:00
11:00

09 Horness 11:25
09 Horness 11:25

12:00

12:00
10 Village Idiot 12:31

13:00

10 Village Idiot 12:31

11 cwa107 13:42
02 bargsbeer 13:46
Zoolock 13:48
13 12 NumberSix 13:50
12 Zoolock 13:52

13 13:00 NumberSix 14:02 14:00

02 bargsbeer 14:08

03 lifeisabeach 14:29
03 02 bargsbeer14:35
lifeisabeach 14:36
12 03 lifeisabeach 14:38
Zoolock 14:39
08 dtravis7 14:42

15:00

11 cwa107 13:42
02 bargsbeer 13:46
Zoolock 13:48
13 12 NumberSix 13:50
12 Zoolock 13:52

13 Self Directed Project: Visualising Conversation

NumberSix 14:02 14:00 19
02 bargsbeer 14:08

03 lifeisabeach 14:29
Following from the previous diagram, this one starts from IDEA: Conversation may not need to follow
a strict time frame. The user only requires
the centre and works out using circles to define the time. It to know if a message came before or after
is easy to see how threads emerge from the original posting, a point, and how it fits with the rest of the
and then turn into separate threads. Even though web conversation. Further concepts should remove
relative time scale and focus on what the user
viewing would allow a zoom capability, the sparse layout wants to achieve from the visualisation, i.e. an
would still cause legibility issues when trying to gain an understanding of a chat thread, it’s key themes,
key participants, and chat ‘micro threads’.
overall perspective of the conversation.

13
12
13
12

3
32
3

11

12
2 10

12
02:46

03:00

04:00

05:00

06:00

07:00

08:00

09:00

10:00

11:00

12:00

13:00

14:00

14:42

2
13 9 1 3

6
5
6

7
5 5

20 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

3
32
3

11

12
2 10

12
02:46

03:00

04:00

05:00

2
1 3

Self Directed Project: Visualising Conversation 21

To reduce the diagram sprawl over time, this concept uses
equal length joins between the thread entries, but to illustrate
the time, different thicknesses are used - the thicker the join
the less time between the entries, as if the link has been
squashed closer.
12

Halos around the comments indicate the length of

the entry based on its word count. Adding this factor
enables the reader to assess which entries are just
2 8

short comments, and which ones may contain a little

more information.

12

3
3

2
11 2

13

13 12

10 12

9 13

2 8 1 2

7 3

5 4

5
IDEA: The joins are a little too strong and
do not show when the latest comment was
made, it may be worth fading old ones using a
transparency based on the time from the initial
comment. Links to external websites also need
6
to be highlighted.

A word cloud at the end of each long thread

may provide the user with quick reference to
where the conversation is headed.

22 Oliver Tomlinson - Summer term 2010

 DISCOVERY TRANSFORMATION MAKING

Colour and transparency variations to illustrate

time and to highlight various elements of the
conversation threads.

12 12

2 8 2 8

12 12

3 3
3 3

8 8

2 2
11 2 11 2

13 13

3 3

13 12 13 12

10 12 10 12

9 13 9 13

2 8 1 2 2 8 1 2

7 3 7 3

5 4 5 4

5 5

6 6

5 5

6 6

5 5

12 12

2 8 2 8

12 12

3 3
3 3

8 8

2 2
11 2 11 2

13 13

3 3

13 12 13 12

10 12 10 12

9 13 9 13

2 8 1 2 2 8 1 2

7 3 7 3

5 4 5 4

5 5

6 6

5 5

6 6

5 5

Self Directed Project: Visualising Conversation 23

Word clouds

Word clouds are currently a popular method of illustrating key

words found in text extracts or conversation on the internet.
These clouds have been produced from a stripped-down
version of the thread, excluding quoted sections, using www.
wordle.net (settings: black and white colour, 50 word max,
Telephoto font, rounder edges and horizontal layout).

The top cloud uses all the text in the thread

excluding names, times, and quotations. The
lower cloud uses all mentions of names.

24 Oliver
Oliver
Tomlinson
Tomlinson
- Summer
- Spring term 2010
 DISCOVERY TRANSFORMATION MAKING

NSFORMATION MAKING

Self Directed Project: Visualising Conversation 25

 12

Final 2 8

visualisation
12

3
3

2
11 2

13

13 12

10 12

9 13

2 8 1 2

NOTE: Circles represent individual

7 3
comments, with numbers relevant to
participants. The orange circle area
dimension is directly proportional to
5 4
the word count within the posting.
5
Age of post

< ½ hour

6
½ - 2 hours

2 - 4 hours

5
4 - 8 hours

> 8 hours

Time delay from previous post

< ½ hour
6

½ - 2 hours

2 - 4 hours
4 - 8 hours
> 8 hours

5
26 Oliver Tomlinson - Summer term 2010
 DISCOVERY TRANSFORMATION MAKING

Potential interface

Mac-Forums.com > General Discussions > Apple Rumors and Reports

iPhone Leak: Police seize  Gizmodo like

Apple
prototype
now
Gizmodo computers think
iPhone something
  Started today at 02:46 know
  51 replies | 781 views | 13 participants
house
A bit far considering Gizmodo 
returned the device to Apple as soon 
14:42 as they found out it was a real 
12
prototype.
Today, 07:12
Participant 8: the8thark

yes they returned it only after pulling 
2 8 it apart and posting pics of it all over 
the internet.

Today, 07:25 
Participant 6: DriftNismo
12
Quote:
Originally Posted by the8thark
3
“yes they returned it only after pulling 
3
it apart and posting pics of it all over 
8
the internet.”
Yes, but they can easily argue they 
2
11 2
weren't sure whether it really was an 
Apple prototype, seeing as there's so 
13

3 many knock-offs around.

Today, 08:24 
13 12
Participant 7: Doug b
10 12
Let's assume for a moment that it's 
not a hoax, that they really had 
9 13
nothing to do with the phone other 
than looking it over for a proper 
evaluation. Ya know where they'd be 
2 8 1 2
absolutely wrong in all of this ? 
Exactly. To post pics of it all over the 
net, if it was indeed a real prototype 
of a new iPhone. I mean, who would 
7 3 be STUPID enough not to know what 
repercussions would befall them after 
5 4
tinkering with something which has 
5
07:25 6
an incredible amount of NDA's put 
upon it ? 
5

Everybody, especially those in the 
tech industry, knows to what extent 
Apple gets their corporate legal 
5

4 1 2

system involved in where their NDA's 
3
and such are concerned. And no one 
would be fool enough to try and 
violate their restrictions or rules. So if 
05:00 06:00 07:00 08:00 09:00 this was indeed 'real', then that guy 
10:00 11:00 12:00
5 should fall under the strictest

An interactive touch screen allows the user to drag along

a timescale and watch the forum thread developments as
a graphic representation. Touching a post in the visual will
highlight the text on the right, and visa versa. The word cloud
could be linked to the whole text or up to a user defined spot.

Self Directed Project: Visualising Conversation 27

 Forum growth

Time: 03:30
Two comments are added to the original
posting, the first starting 90 degrees to
the right - it will remain in this position 3 1 2

throughout the thread growth.

5

Time: 06:30
5 6 5 6

4 1 2

New comments added are initially 3 1 2

placed counter-clockwise from the first 5

comment; as more are added they will 3

move around the centre in this direction,

maintaining an even spacing. 5 6 5

4 1 2

12

3
2 8

12

12

3
3

Time: 09:30
2
11 2

More comments added to the original

2 8
5
13

entry are causing the shape to move

3

3 1 2

counter-clockwise, with older ones 7

13

8
12
12

10 12

fading in colour.
5

3
3
9 13
8

At this stage there 5 6 5 6 5

2
2
1

8
11 2

1
2
2
13

is a stream of
4 1 2

conversation originating from 13

7 3
12

one particular comment; also note

4 3

10 12
5 4

the two text-heavy comments added

3

5
9 13

recently (indicated by the large orange

‘halos’ and dark colouring). 2 8
6
1 2

12

7 3 5

5 4
5
2 8
5

6
12
6

3
3

5
2
11 2 5

13 6

28
5

13 12
Oliver Tomlinson - Summer term 2010
6
10 12

9 13
 8

2
11 2

13

13 12

10 12

9 13

DISCOVERY TRANSFORMATION MAKING

2 8 1 2

7 3

5 4

Time: 12:30 6

More text-heavy comments have been 8

added, pushing the long stream around.

5

7
5
3 1 2

1 2

3
6
4

5 6 5 6

5 4 1 2

5
6

Time: 14:42
A rush of comments are added between
12

12:30 and 14:42 causing fast growth of

quoted/linked chat. Fast growth can be 2 8

seen from the thick green joiners and

amount of dark colouring.
12

The long stream is continuing to fade,

3
3

this would indicate that particular

2

branch is no longer a hot topic.

11 2

13

13 12

10 12

9 13

2 8 1 2

NOTE: The counter-clockwise motion of

7

the threads causes difficulties in following a

3

particular thread when shown in this static 5 4

way. It is presumed that if the user is sliding a 5

virtual timer on an interactive platform, that the

motion would be smoothed, thus allowing easy
readability and understanding. 6

5
6

Self Directed Project: Visualising Conversation 29