Context Without Clutter

Unlike literature, articles are scarcely allowed to fully flesh out the worlds that they exist in. Brevity and intentionality are often required to keep audiences interested as well as to keep the article focused. Due to this however, readers are often unable to understand articles without some prior knowledge.

For example, the prospect of reading an article about the politics of another country would be difficult without information on the players that are involved in the story and the events that have transpired before it. Because of the nature of world news, where the background of the story is not something that many readers have extensive knowledge of, we decided that this would be the initial focus area. Providing this kind of contextual information would be extremely useful.

Most often, authors simply provide this context to their audience with a hyperlink. But for the reader, the content at the end of the link is often chosen for convenience, rather than for its suitability for providing the missing context. This method asks a lot of the reader, who may have preferred something more concise. Alternatively, curious readers who do follow hyperlinks can often find themselves going down a rabbit hole of new tabs and never finish the original piece.

For three months, the Knight Lab Sidebar team sought to create a reading experience for articles that would be effective and efficient for both the knowledgeable and the uninformed.

Existing Solutions

We started our exploration by analyzing analogous tools that have attempted to provide context in their articles while also ensuring that their audience doesn’t become distracted by searching for information elsewhere.

The first existing solution that we, as a group, found to most effectively solve our proposed problem was the Bloomberg Sidebar.

Bloomberg article with contextual sidebar

We were especially interested in this specific tool because the type of article that their sidebar gave context to was very much aligned with our use case of world news. The specific article explained the structure and organization of the Islamic State.

The Bloomberg Sidebar gives context to specific underlined words in the article and provides all of their information in a navigable sidebar. As well as this, the sidebar is split into subtopics such as “Dramatis Personae”, “Places” and “Glossary”.

In order to understand how well the Bloomberg Sidebar gives context and the user experience of the tool, we presented the article to multiple avid world news readers and asked them qualifying questions.

What we found was, despite our own personal predisposition towards the tool, our test subjects found several problems with the Bloomberg Sidebar and the tool was negatively received.

The main complaints that we fielded about the tool was that because all the context was shown at once, the sidebar became distracting to the article and not relevant to the part of the article which they were reading. Users also found that clicking on other context cards in the sidebar would move the article to the corresponding term. They did not appreciate this feature because it would often make readers lose their spot in the article. Finally, users also had trouble learning how to use the sidebar and felt that it would have taken them a considerable amount of time, to familiarize themselves with it.

Through this user testing, we found that we needed to go beyond solving the problem of showing context and keeping readers in the article; the tool that we made would have to be unobtrusive, intuitive and relevant to the sections the user is reading.

The other existing solution that we found and felt solved our proposed problem was Wikipedia’s popup feature, which can be found on all their articles.

Wikipedia contextual information on mouse hover

Wikipedia gives context on certain words through a popup that opens when a user hovers their cursor on a word that is attached to a hyperlink. The popup shows the first paragraph of the Wikipedia article,which is linked in the hyperlink, as well as an image.

To test the effectiveness of this tool and understand how readers experienced it, we created a Figma prototype that mimicked this feature for users to test.

From our testing, we found that users didn’t find the tool intuitive because the signifier to call up contextual information was a fully functioning hyperlink. Some users clicked on the link, opening the attached pages, instead of hovering over it to wait for the context to open. Furthermore, users didn’t like that the popup blocked the section of the article that the user was reading and could not be kept open after moving the cursor away from the word.

We learned, through this feedback that we would have to more closely think about signifiers for calling up contextual information. The signifiers have to be clear enough that users will click on the word while also making it so users won’t confuse them with hyperlinks. In addition to this, we would also have to consider a way to give users the choice of when they want certain contexts to open.

Through our observations and further probing, we discovered that the reader’s goal is to  understand the news story as quickly and efficiently as possible in order to become conversational in it.

User Testing

From our observations regarding existing solutions, we sought to create the ideal experience for readers to meet their goal of understanding in the most efficient manner possible. Our questions pertained to both the content itself as well as the way it would be presented. The approach we took was to create prototypes of various fidelities, ranging from paper prototypes to fully interactive mockups, and test them with 5 to 6 users each cycle. In each test we sought to understand users’ expectations and behaviours, categorizing them into the following themes: freedom of choice; the essentials; and, revisiting information. We also observed general usability features.

Paper prototypes for user testing: Scrollable sidebar with menu to dscan through different types of terms (top left), Embedded expandable context (top right), Chatbot sidebar (bottom left), Embedded static context with varied length based on reader preferences (bottom right).

Freedom of Choice

In finding that many of our users reacted negatively to the Bloomberg’s Sidebar presenting all the context at once, we wanted to gain a better understanding on how and when users want context to appear.

We felt that the best way to tackle this uncertainty was to conduct A/B tests on certain features of our context tool.We first started with testing the reception of a sidebar that shows all context cards at the opening of an article versus a sidebar that has no open cards until the user clicks on a word that has context attached to it.

Testing with interactive prototypes: on the left, having all the contextual information opened up upon reading the article vs having contextual information hidden away initially

Congruent with the sentiments of the Bloomberg Sidebar users, most reacted negatively to the sidebar that showed all of the context when the article was first opened. Along with the criticism that showing all the context upon opening can be jarring to the reader and distracting from the article, users also maintained that they would like some agency in which context appears. Users felt that having all the context open gave the impression that they needed to read all of the context. Users who were knowledgeable about the article especially didn’t want to feel like they had to read context for terms that they were already aware of.

In contrast to this, the article with closed context cards largely received a better reaction. Users liked that they could choose which cards to open during their reading and that they could choose to read the article without the context cards, if they didn’t need further context. Despite this however, some users did not realize that there was a sidebar when all the context cards were closed. Based on this observation, we decided that if we were going to choose to have the context cards hidden during the opening of the article, we would have to make clearer signifiers for context.

After debriefing the feedback from the A/B testing we looked to address and make design decisions to alleviate some of the concerns of the users, namely the desire of users to choose when context appears in the article.

We decided that it would be best for our proposed sidebar to have the context cards hidden until the corresponding term is selected by the user. Through this design choice, we eliminate the possibility of people being overwhelmed when they first open the article.

We also chose to deconstruct our sidebar: only context cards for the chosen term will appear as opposed to having all the terms appear at once. In this way, users can decide on which context cards that they want open and not have to navigate through all the context cards for the information that they want.

As a result, to give readers more control, our sidebar is intentionally designed so that they have the choice to open and/or close each context card as they read.

The Essentials

While we previously considered how context should be presented, we also felt that it was important to consider the optimal length, detail and timing of the context cards for users. .

In order to gain a better understanding of how much context readers wanted on a term, we conducted a test where we gave users different lengths of context for the same term and asked them to give us insight on which length was preferable to them.

Aligned with the intentions of previously tested users, many readers prefaced their selection by explaining that their main goal of reading an article was to comprehend the information as quickly as possible. Given this predisposition to time efficiency, most users preferred the shortest context length for any given term. Users also stressed that they want only information in the context cards that was essential to the story for comprehension. They explained that they were not looking to become experts on an issue when reading an article but to have a better understanding on the event or story that was being covered.

To better understand where users wanted context, we conducted testing where we gave users an article and asked them to highlight where they needed more information.

In this test, red highlights denotes “need more context” and green highlights denotes “want more context”.

To meet readers needs and wants, our sidebar incorporated only the information most relevant to them.

The first decision we made to ensure that our context was essential was to only allow selected and relevant context to appear on the page. The way we did this was to have context appear aligned with the corresponding term that is selected. We felt that by making this design choice, readers would never have to read context that is not immediately relevant to the section that they are reading.

Cards will only open up when the correlating term is selected

Another design choice that we made to cater to the user’s desire to be time-efficient was to limit the length of the context in the card. Through our tests we had two different lengths of context, one with 35 words and another with 65 words. People felt that 65 words was too long, but  35 words was a good amount. Based on this finding, we decided to keep our contextual information to a 60 word maximum.

Ability to Revisit Information

In higher fidelity tests, we often found that users would scroll back to see previously open context when reading an article. When asked about why, some users explained that the corresponding term reappeared in the latter part of the article. Others revisited the context card because they wanted to re-read the previous paragraph and needed the context for it.

For most of our prototypes, we were not affected by the user’s desire to revisit context cards. However for one of our higher fidelity prototypes, we explored the possibility of having the context cards disappear as users scrolled past the corresponding paragraphs. We experimented with this feature to ensure that our context was always relevant to the part the user was reading.

Unfortunately, however, users didn’t like this feature because they wanted the ability to revisit information as well as decide when context would open and close. Therefore to accommodate this desire, we made the design choice of having the cards open when selected and remain open until the user actively clicks an “X” button to close the context card.

Mobile Considerations

One of the biggest problems we found with the Wikipedia Popup is that it doesn’t provide a mobile equivalent. Given that a lot of reading now takes place through phones, we wanted to create a competitive advantage by ensuring that our sidebar can be used on mobile.

In order to gauge user preferences on how they wanted the mobile feature to work, we tested two prototypes for our sidebar: one with a sidebar on the bottom of the screen, and one that works as a popup.

A/B testing of different mobile interfaces

We found that users felt that the sidebar coming from the bottom was unnatural. They also felt that while the bottom gave some room for the article to be shown while the context was open, they didn’t feel that they had enough space to read either that clearly. Users were more inclined to give the context the whole screen in the form of a popup rather than make both the context and the article hard to read.

In order to accommodate the user preferences, we decided to settle on having the mobile context appear as popups. Despite limiting the ability to open multiple contexts and the ability to see the article and the context at the same time, we decided that this was a better option than the bottom sidebar tool.

General Usability Guidelines

Outside of key design features and requirements, sidebar adoption is dependent on the use of largely accepted UX principles in order to meet reader mental models. These include:

  • Ability to close contextual information: readers should be given control over the context cards and the ability to open and close them as they wish. In this way, readers who would like multiple cards open at once are able to do so as well as readers who want to keep individual cards open while reading. This will be accomplished with exit buttons in the corner of the context cards similar to exit or close button that can be found on browsers, pop ups, or other applications
  • Unique and Connected Signifiers: Like hyperlinks, highlighted terms must be signified in a standardized way to prime readers to understand when context is available. Similarly, when clicked, a context card must be clearly associated with the term it references though an additional signifier. Readers must be able to quickly and easily understand which terms are associated with a sidebar in the article.
  • Spatial location: context cards must be in line with the highlighted terms for optimal association by the reader as well as not to distract the reader or deviate their attention.
Testing various signifiers to link selected term with contextual information.

Final Design

Ultimately, these design considerations and learning manifested in the following design.  We implemented this high fidelity prototype using React and built custom card components that linked the underlined text of the article to cards that provided context.

Future Considerations

In the future we would like to further explore: the way authors will import contextual information; more clear guidelines for contextual information as it applies to various types of articles; and, how to scale this solution so that it can be widely used by others. After addressing the reader’s experience, it would be valuable to better understand the annotation experience from the author’s point of view in order to design an intuitive process.

In addition to this, there are ethical implications on how authors will use the tool. We would like to explore whether authors would write differently and if they would leave out more clarifying information in their articles. We would have to consider if authors would over-rely on the sidebar and cause the reading in the context cards to be essential instead of supplementary to the article.

We would also explore different types of articles where sidebar contextual information could be useful, such as general news, sports, or even fiction. By better understanding specifics that each of these types of articles need, more structured guidelines could be created for authors to efficiently provide valuable contextual information in an efficient manner. Lastly, we would like to see how our sidebar can be scaled and made available for use to the general public. Making the sidebar easily integrated into online articles, would give authors the ability to create a reading experience that improves the understanding and efficiency for their readers.

Conclusion

We initially started the project with the goal of making contextual information more easily available for readers as they scrolled through articles. Research started with seeking a better understanding of how users read as well as their reactions to existing tools that provide context. From this, we developed hypotheses and tested them using prototypes.

We learned how important it was for users to be as efficient as possible in their reading, while feeling in control of what additional information should be presented. As we better understood the expectations of the readers, our sidebar evolved through the quarter to better meet their needs.

Though we made progress in creating an experience which facilitates a greater understanding of articles for both experts and novices, there are still some areas that need to be explored. Sidebar is only the first iteration and was created with, primarily, readers of world news in mind, and further exploration of different considerations for various types of content, how to best guide the author in creating context, and improved usability would be the next step.

We believe that the creation of a sidebar can help reduce the barrier of entry that articles present for readers who are unfamiliar, while still catering to those more knowledgeable in the subject. We hope that through achieving this ideal, the sidebar can streamline the process of comprehension for readers as well as encourage them to engage with articles that have topics unfamiliar to them.

About the project

SidebarContext without Clutter

Publishing a story requires a constant balancing act: you have to get to your point, but you don’t always know whether your audience is fully up-to-speed on the content. Or maybe in your research you found some really fascinating information, but you have to admit it’s kind of a distraction from your main point. The web was developed on the promise of linking between documents, but too often a simple link fails -- it doesn’t give the reader much sense of what sort of information is at the end of the link, and it runs the risk of sending your audience off down a rabbit hole, never to return to your work.

About the authors

Abriel Siregar

Byron Pang

David Jacob

MS Engineering Design Innovation student at Northwestern interested in UX, Service Design, and Design Research. I believe in efficient and empowering design that improves our quality of life.

Patricia Song