Showcase & Discover Creative Work Sign Up For Free
Hiring Talent? Post a Job


Social Annotation Space

  • 1248
  • 9
  • 1
  • Social Annotation Space
  • The following project marks the end of my graduate school experience at North Carolina State University, Master of Graphic Design program. However, when I think of it, I see it more as a starting point to continue to explore what “design” can mean. The learning process has been a way to embrace the complexity and ambiguity of things, and realize that there are no rights or wrongs. It has also been the time to reassess the things that matter in a design process. For this project my primary goal was to demonstrate how I made particular decisions in the proposed design strategy, what I learned from mistakes and what questions arose. It has also been a journey of self-discovery and understanding my strengths and weaknesses. What I consider the major success is that I still want to continue the exploration.
  • Here you will see a synopsis of my working process that led me to the design of the final prototype. You can also find the expanded documentation of my thinking process — information gathering and audit of existing systems, early sketching and diagramming — on the final project blog. Below is my final presentation, which might be useful to look through to have an overall grasp of the project. Further on, I explain some of the steps in my design process in more detail.
  • Abstract
    The interest of the delivered project lies in the ways that design can facilitate the shift from passive consumption of information to active and focused engagement with it. The project addresses annotation as a way to process and personalize the information, as well as to assess the credibility of the content we encounter.

    This project proposes a social annotation system as an alternative to commenting. The annotation system allows readers to change the spatial organization of text based on the reading task and to map their annotations directly to the locations in the original text that they speak to. The design of a social annotation system for an electronic text responds to the capacities of the medium and assists readers in processing information as well as communicating the reading experience to others.
  • Problem statement: research question and subquestions
    Research questions help frame my investigation and address the problem that I explore in focused ways. The main question that I ask through my project is:
  • My system serves electronic text; I synthesized the most significant characteristics of electronic text that are the starting points for my inquiry. I address each of these characteristics through subquestions.
    Electronic text allows for social reading and communication.
    Subquestion 1: How can the design of a reading and annotation space allow for the juxtaposition of differing opinions and support shared authoring spaces?
    Electronic text is topographical and multilinear. 
    Subquestion 2: How can the reading space accommodate various purposes for reading at different times?
    Electronic text exists within a larger context of cross-referencing information. 
    Subquestion 3: 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?]
  • Context of use
    For my prototype I use the online community. My system serves a particular section of it — the blog
  • There are certain reasons for choosing the online community. Members of the work in related fields, are passionate about what they do and I assume are likely to seek communication with each other to stay informed and connected to a large group of professionals. I assume that the readers will critically interpret the original content and make meaningful expanded annotations and that most readers will have established critical positions and will be confident enough to express them. The goals my system seeks to accomplish within this community are:
    Goal 1: to provide an efficient discourse space
    The major problem of popular user feedback systems, such as commenting and appreciation systems is that they initiate the discussion but provide poor opportunities for sustaining it. It is possible to go back and forth with commenting, but it is easy to lose the connection between the comment and the point in the original text that it speaks to. Further, your comment (even if it is worth reading) is likely to be lost in a long thread. The way to make a person concentrate on the content, give it thorough thought and attention, isto internalize and personalize it. Annotation can be seen as a way to hold the reader’s attention.
    Goal 2: to encourage critical interpretation and collaborative criticism 
    With social annotation and back-and-forth online communication the readers receive responses to their annotations and are encouraged to go back and rethink what has already been posted.
    Goal 3: to enhance communication between readers and writers. 
    With the opportunity to annotate particular parts in the text and directly address the ideas expressed by the original author in annotations, I might assume that such a system will also enhance communication between readers and writers. The readers might encourage the writers of the original documents to recon­sider their views.
  • Personas
    To illustrate who the audience of my system might be I created two personas, that represent two different types of users.
  • Mapping comments to their locations
    Before starting to design the annotation system I tried to imagine how comments to the article could turn into annotations. I took several articles that received a lot of comments and mapped the comments to the parts in the text that they speak to. Each color represents a comment from a different person. Mapping revealed that there are specific points in the text that discussions are built around.
  • System infrastructure
    The proposed system consists of three components: an account on, a browser extension, and a Facebook application.

    (1) An account on, which identifies the user as a member of this online community. is an originator of the articles for discussion.

    (2) A browser extension is a mediator between and Facebook. It serves as an indicator that the annotation mode is active and has tools that allow users to create annotation. The extension synchronizes the user’s input with the Facebook application.

    (3) A Facebook application is a synthesizer – it transforms the annotation data into an information visualization that allows users to understand the value of a particular text or an annotation looking at a broader context in which it appeared. Users can read the map of the text rather than the text itself.
  • There are a few steps to start using the annotation system:
  • Interaction 1: the Facebook application, first time use
    This interaction illustrates the Facebook components of the system that help the first-time user orient in the system. The interaction is similar for both personas, Larry and Nick. The assumption is that both users are subscribed to receive updates through the Facebook.

    Larry goes to his Facebook profile to check for updates. In the newsfeed he notices that has introduced a new application called the Annota­tion Space. Larry is intrigued; he clicks on the link to get more information. He reads a short description and software requirements and finds the application interesting and worth trying.
  • Larry takes the steps to set up the system and to start using it. He installs the browser extension and then activates the Facebook application. Larry explores the application features. On the sidebar he can see his profile information with an indicator of his status in the system. He can see who of his friends are using the application and top annotators, those who already have an established reputation in the system. He can also read through the list of most an­notated articles as well as “hot” articles, the ones that readers still actively discuss.
  • The visualization that takes prominence of space shows the most recent articles and highlights the parts in them around which discussions are formed. Each article is represented as a symbol and the most annotated parts in the articles are colored. The intensity of color stands for how recent the discussion is. The numbers beside the colored area show how many people are talking. Larry can filter through the articles if he wants to narrow his choice. Larry finds an article that interests him and proceeds to to read it.
  • Interaction 2:, personal reading space
    On the system is represented through the browser extension tool bar, which users can collapse or expand. The color of the toolbar is the color that will be applied to all the annotations posted by a particular user. Users can change the color in the settings. 

    The toolbar contains information similar to the one on the Facebook. There is an indicator of a user’s reputation, number of points his annotations gained, the top annotators and the feed with recent and most appreciated — “hottest” — annotations for the article. Besides, there are tools that will help users manipulate the text components such as paragraphs and phrases and leave annotations on them.
  • There are three operations that users can perform on text:
    1. Users can compress some parts of the text and thus make other parts of the text stand out —this distinguishes what interests them most from the content they are unlikely to refer back.
  • 2. Users can move the lines and paragraphs to the side and add their own ideas, opinions or alternative points of view and juxtapose them with the ones of the original author.
  • 3. Users can write between the lines in order to add to the content when they can fur­ther advocate for some of the ideas expressed by the author or contribute with the information that they think would better support the argument or just be relevant.
  • When users create annotations they have a choice — to either share the annotation (make it public) or to keep it for personal use such as future reference. When a reader posts an annotation, his name and his stand in the system sit on top of it and let other users know who the author is. Besides, a small indicator appears on the side, showing the number of people talking about that particular point in the text. This indicator will be visible to other readers who will read the article; they will be able to click on it to access the discussion.
  • Interaction 3:, discussions
    When users read the article they can see small indicators on the side that show that there is a discussion in that part of the text and the number of people talking. Users have a number of ways to receive updates through the Facebook. They get Facebook notifications if they: follow certain annotators, bookmark certain articles and sub­scribe to receive updates.
  • The author of the article is likely to subscribe to updates on his article to receive messages of what the readers are saying. When Larry makes the annotation public, author Nick receives a notification through the Facebook. He then goes to the article on and engages in conversation with Larry. He might appreciate Larry’s annotation as well as want to respond to it.
  • When Nick responds, the system works and looks very much like traditional back-and-forth messaging — the annotations appear in a vertical thread. However, if a reader wants to provide an alternative opinion he adds to the discussion by posting his annotation parallel to the existing discussions. The color indicators show the participants in the conversations that emerge.
  • Interaction 4: the Facebook application, an experienced user
    When the user bookmarks articles he can access them on the Facebook under the tab called “My library.” It sorts the bookmarked articles for each month and the color indicates, which are still highly discussed. The experienced and active user will also have the benefit of having suggestions available to him based on what his peers read and annotate.
  • Future directions
    Possible future implications for the system might include:
    • 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.
  • Conclusions
    The design of the annotation system derived from the set of subquestions covered in the previous discussion, and there are components in the system that address each of the questions:

    How can the design of a reading and annotation space allow for the juxtaposition of differing opinions and support shared authoring spaces?
    • reputation system as part of user’s identity within the system.

    How can the reading space accommodate various purposes for reading at different times?
    • personal and public annotation modes.

    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?]
    • information visualization that allows users to read maps of the text and see the articles in relation to each other.
  • With the enormous amount of information available on the web and its accessibility our interactions with it tend to be fragmented and unfocused. Creating new systems that encourage independent thinking and critical interpretation of information that we encounter is a great challenge for designers. Proactive designers undertake a holistic research approach to understand the users and the nature of a complex information environment in order to create efficient multi-platform systems that enhance communication among people.