Nadya Rodionenko, Social Annotation Space North Carolina State University, College of Design Department of Graphic and Industrial Design Master in Graphic Design Program Spring 2011, Final Project Research

1. North Carolina State University, College of Design Nadya Rodionenko | April 30, 2012
Department of Graphic and Industrial Design
Master in Graphic Design Program
Meredith Davis (Committee Chair)
Spring 2011, Final Project Research Denise Gonzales Crisp, Kermit Bailey
Social Annotation Space
1/44

2. Research question
How can the design of a digital annotation system
use spatial principles to support users' interpretation
of electronic text?
2/44

3. Research question
How can the design of a digital annotation system
use spatial principles to support users' interpretation
of electronic text?
Annotation system 1. A layer of user-generated content on top of the existing resource;
2. An application that allows users to create an annotation system.
3/44

4. Research question
How can the design of a digital annotation system
use spatial principles to support users' interpretation
of electronic text?
The system allows users to manipulate the elements of text — such as
words, phrases, paragraphs and text blocks — in space in order to better
process the information.
4/44

5. Characteristics of e-text
Electronic text allows for social reading and communication
is topographical and multilinear
exists within a larger context of cross-referencing information
5/44

6. Subquestions
Electronic text allows for social reading and communication
How can the design of a reading and annotation space allow for the
juxtaposition of differing opinions and support shared authoring spaces?
is topographical and multilinear
How can the reading space accomodate various purposes for reading
at different times?
exists within a larger context of cross-referencing information
What can the spatial organization of annotation tell the readers about the time
and context in which it appeared? [How can information visualization make
patterns in annotation behavior explicit?]
6/44

7. Commenting
• Initiates the discussion but does not sustain it
• The connection between the comment and the point in the text
that it speaks to is not transparent
• Comments are likely to be lost in a long thread
• Comments appear below the original text suggesting an uneven relationship
between the author and the reader, with the author's post sitting on top
7/44

8. Project goals
• Provide an efficient discourse space
• Encourage critical interpretation and collaborative criticism
• Enhance communication between readers and writers
8/44

9. Context of use
designobserver.com – the whole online community
designobserver.com/observatory – the blog the annotation system will serve
Assumptions
The readers will critically interpret the original content and make
meaningful expanded annotations.
Most readers will have established critical positions and will be confident
enough to express them.
9/44

10. Persona 1: Nick Hall
Nick Hall is a 40-year old professional. He is a recognized writer and a visiting
professor at a design school. Nick is an established member on designobserver.com.
He participates frequently, raises topical issues, publishes the articles of his own,
and contributes to ongoing discussions.
10/44

11. Persona 2: Larry Adams
Larry Adams is a 27-year old recent graduate from a design school. Larry is trying
to find a niche for his career development and seeks for advice from those in the
field. He occasionally visits designobserver.com to stay informed and connected to
a larger community.
11/44

12. System infrastructure
DO FF FB
BROWSER
DESIGNOBSERVER.COM THE FACEBOOK APP
PLUG-IN
ORIGINATOR MEDIATOR SYNTHESIZER
source of the original content tool to create annotations reveals patterns in the data
12/44

13. Reasons for using a SNS
• Makes the process of starting to use the system easier
• Represents a "wholer" person and eliminates multiple identities
• Provides an integrated way to follow updates
13/44

14. Steps to start using the system
FACEBOOK PROFILE ABOUT THE APP
STEP 1 STEP 2 STEP 3 STEP 4
CREATE AN ACCOUNT INSTALL THE PLUG-IN AUTHORIZE THE APP SYNC ACCOUNTS
designobserver.com browser the Facebook designobserver.com, the FB
14/44

15. Existing social annotation systems
uTok (Orit Zuckerman, 1999)
a rating function
a separate place for the synthesis
of users' activities
Webbed Footnotes (Scott Andrew Golder, 2003)
filtering the ongoing discussions from outdated ones
Lines (The CafeSociety, 2011)
different modes of preview based on zooming
15/44

16. Interactions
Interaction 1: the Facebook application, first time use
Interaction 2: designobserver.com, personal reading space
Interaction 3: designobserver.com, discussions
Interaction 4: the Facebook application, an experienced user
16/44

17. 17/44

18. 18/44

19. Reputation system:
• named levels of expertise (beginner, solid, expert)
• number of "respects" collected (that help an annotator
progress through levels)
19/44

20. 20/44

21. each bar represents the article's preview
most annotated parts in the article
21/44

22. 22/44

23. Interactions
Interaction 1: the Facebook application, first time use
Interaction 2: designobserver.com, personal reading space
Interaction 3: designobserver.com, discussions
Interaction 4: the Facebook application, an experienced user
23/44

24. 24/44

25. collapse/expand the extension Profile
settings Larry Adams
Beginner 49
bookmark the article
Member since: March 2012
go to the Facebook
Followers (3) Following (18)
personal editing mode Top annotators
compress parts of the text
See all
Annotations
write between the lines
Recent Hottest
move the lines and paragraphs to the side Joe McDonald solid
follow 1 hour ago
This would make an interesting do-
cumentary. (Mr. Hustwit, listening?)
The color of the toolbar is the color that is applied But you should include Steven Heller
to all the annotations posted by a particular user. and Alice Rawsthorn in the discus-
sion, too. I mean ― what an idea?
Users can change the color in the settings.
Right?
Read more
Place in text 5
25/44

26. Users can compress some parts of the text
26/44

27. Users can write between the lines
27/44

28. Users can move the lines and paragraphs to the side
28/44

29. 29/44

30. Interactions
Interaction 1: the Facebook application, first time use
Interaction 2: designobserver.com, personal reading space
Interaction 3: designobserver.com, discussions
Interaction 4: the Facebook application, an experienced user
30/44

31. 31/44

32. 32/44

33. respond to the annotator directly
33/44

34. 34/44

35. 35/44

36. provide an alternative opinion
36/44

37. 37/44

38. color indicators show the participants
38/44

39. Interactions
Interaction 1: the Facebook application, first time use
Interaction 2: designobserver.com, personal reading space
Interaction 3: designobserver.com, discussions
Interaction 4: the Facebook application, an experienced user
39/44

40. 40/44

41. 41/44

42. Conclusions
System components reputation system as part of a user's identity within the system
How can the design of a reading and annotation space allow for the juxtaposition
of differing opinions and support shared authoring spaces?
personal and public annotation modes
How can the reading space accomodate various purposes for reading
at different times?
information visualization that allows users to read maps of the text
and see the articles in relation to each other
What can the spatial organization of annotation tell the readers about the time
and context in which it appeared? [How can information visualization make
patterns in annotation behavior explicit?]
42/44

43. Future directions
• Integration with various blog systems
• Gestural interface for e-readers that allow for manipulating
the text through touch screen
• Different ways in which authors compose hypertext narratives
43/44

44. Thank you!
44/44