‘Clickable Clippings’: everywhere news bookmarks

By Katherine Corner, Jenny Dean, Chad Healy, Matt Hemmendinger – University of Colorado at Boulder: Department of Computer Science, School of Journalism & Mass Communication

(Editor’s note: This mobile-software development project is an outgrowth of the Digital News Test Kitchen’s 2010 research report, “In-depth News for Smartphones.” This document will be followed by software development of Clickable Clippings at a later date.)

Abstract

Reports from the Digital News Test Kitchen suggest providing readers the ability to initiate reading a long article, hold their place through an interruption, and then resume reading it from the same location on another electronic device. “Clickable Clippings” addresses this demand through a unique interface for users to save, access, and share articles between any electronic device with access to the internet – personal computer, smartphone, digital tablet. Both user interfaces (UI) were developed from a set of tasks, following the persona of Greg, a businessman who regularly uses his smartphone and computer to access and read news articles. Based on this task analysis, a preliminary design for both the web and mobile UIs were developed. These designs were refined through testing methods that include cognitive walkthroughs, thinking aloud, and remote testing. The end product emphasizes simplicity of design, while achieving a unified look and organization to their native environment.

Introduction

Smartphones and digital tablet devices have created new opportunities for on-the-go news consumption. Utilizing 3G and wifi connections, these devices are able to access the web and provide the user with an endless selection of choices. While these devices have proven very popular for lighter news and other entertaining diversions, researchers in the Digital Media Test Kitchen, a cross-disciplinary project housed in the School of Journalism and Mass Communication at the University of Colorado, attempts to identify ways to facilitate the consumption of in-depth, investigative journalism.

The Digital News Test Kitchen (2010) report points to a necessity for users to be able to initiate reading a long article on a mobile device, hold their place through an interruption and then resume reading from the same location. Working from this recommendation, our team has created a tool to enable the selection of a location within an article and the transfer of this location across multiple devices. Rather than retain just the article and require the user to skim through to resume reading, we provide a shortcut to directly link the user to the last line read and allow a seamless resumption of reading.

Background

Digital technologies have presented a wealth of opportunities for content creators. The vast majority of users (92%) access news content through multiple portals every day (Pew Research Center, 2010). Half of those people use four to six media platforms in a single day. Smartphone ownership has steadily increased, resulting in 33% of cell phone owners saying they access news content through their phone (Pew Research Center, 2010).

Although the news industry has struggled to keep up with technological innovations, it has slowly began to change to meet the public’s needs. Content creators have accommodated the new expectations of online news consumers. News sites were first enabled for users to quickly email an interesting article to a friend. With the advent of social networks like Myspace, Facebook, and Twitter, and news aggregators like Google Reader and Reddit, news sites created similar tools to facilitate one-click sharing of articles across the networks. Publications that previously worked only in print began providing audio and video content. Not all users had the ability to listen to audio clips or the bandwidth to stream video. Television stations accommodated these users with written accounts of news stories. Comment sections at the end of articles provided a public forum for discussion of the issue. Tools were then created to parse the comments and separate the more passionate views from the better informed.

As smartphone penetration in the U.S. market prepares to break 50% of cell phone users by the end of 2011 (Nielsen, 2010), it is imperative that news publications rethink their presentation to accommodate a mobile audience. News content is no longer presented in one large bundle purchased together at a set price. Consumers now turn to specialized sites for high-quality content. This diaspora of audience attention has led to a dramatic devaluation in the ad space of online news. Providing a tool that encourages readers to return to a half-read news article assists consumers in the reading of longer reports and provides the publisher a larger audience to sell to advertisers. Thus, such a tool is valuable for both the consumer and the publisher.

Figure 1. Smartphone Penetration, U.S. Market

The Project

Requirements and Challenges

Clickable Clippings’ target user group includes any person who regularly uses both a smartphone and computer to read and digest articles of varying lengths. The scope of this project was guided by generating a persona named Greg. The designs address the following five primary tasks.

Task 1. Greg reads news on his mobile phone and computer browser.
Greg takes the daily commuter rail to and from work. He whips out his mobile phone to begin catching up with the rest of the world. He has a host of daily blogs he tends to skim and reads a number of articles from a variety of news sources. As his stop to get off for work approaches, he saves the exact locations he stopped reading. After working the morning, he snags lunch and sits at his computer screen. He opens up a screen showing him the most recent articles he had clipped that morning and is able to easily click and re-open the articles just at the spot he left off. He then continues reading through his lunchbreak.

Task  2. Greg begins reading news on his computer in the morning, and continues reading later on his work computer.
Greg wakes up and makes some coffee. He sleepily settles down at his desktop and begins browsing the morning news on his computer. He gets half way through a long investigative piece, but must head to work. Before he gets in his car to go to work, he saves his exact spot where he stopped reading so that he can finish when he gets time at the office. After a long drive to work, Greg grabs a cup of coffee and sits down at his work computer. He has arrived 15 minutes before starting time and decides to open up a screen showing the most recent articles he has clipped and easily clicks and re-opens the article to just the spot he left off. Before his work day begins, he has time to complete the article.

Task 3. Greg travels and reads bits and pieces of news on and off throughout the day on his mobile phone.
Greg works in the field all day on Tuesdays. He has limited access to his laptop and relies heavily on the features of his smartphone. He is very busy running from place to place all day and has short 5 minute breaks. He tends to skim, as well as read complete articles, but rarely has the opportunity to read a complete story. When he reaches his next location, he must save the exact location he stopped reading at so that he doesn’t waste any time getting to that article. This process continues throughout the morning and into the afternoon with Greg marking different stories that he continues to read during his next short break.

Task #4. Greg finishes up a few articles on his mobile phone that he began reading at work on his computer.
Throughout the day Greg receives various news alerts. He has set up alerts on Google for his company, competitors, his favorite sports team and his family’s name. His friends and coworkers send him even more clippings to read. While he tries to wade through all of the information, he has only so much time to do so and often he finds great interest in the news he receives, but no time to consume it. After his hectic work day, he can finish up some articles on his mobile phone during his commute. Greg saves some longer articles for when he gets home, but knocks out a good portion of his queue while en route.

Task #5. Greg digs through his archives to show a friend an article he read last week.
After a meeting, Greg asks his colleague, Jennifer, if she’s read the news about a new technology development from a rival company.  After a brief discussion, they have to continue with their day at work. Jennifer asks if she can read the specific article in more depth when she has time.  Greg uses the clippings software on his mobile to find the relevant spot in the article, and forwards it to Jennifer.

This design project incorporates three major challenges inherent to the scope. The first challenge is to create a set of both mobile and web designs that have similar human-computer interaction models. While the primary web input device is a mouse, the  primary input method of a smartphone is a touchscreen. The flow of completing the various tasks (e.g. saving a clipping at a specific spot in the article) should match on both platforms. A second related challenge presents an opposing trade-off: each design must be understood in its native context. That is to say that iPhone users have certain interaction expectations and learned patterns of behavior related to how iPhone buttons look and function. It is important to provide both a new functionality to the iPhone platform, while leveraging previous user-learned habits in the native space. The third and final major challenge is to explicitly design for a new “clip an article at a specific spot and add it to one’s clippings list,” which is mutually exclusive and different from “bookmarking a link and adding it to one’s favorites list.” The similarity and chance for confusion is inevitable. Thus, the designs must use clearly differentiated graphics and feedback to provide an experience that feels different.

The Designs
This project incorporated two sets of designs: the mobile UI and the web UI. The final set of designs was iteratively generated using a variety of methods including, but not limited to, Cognitive Walkthroughs, Thinking Aloud experiments with a wide range of users, and CogTool testing.

The Smartphone
The UI looks and feels very similar to a classic iPhone experience, browsing news and other articles on the web. However, the menu bar at the bottom has been modified to include two additional buttons. Two paperclip buttons exist. One is annotated with a plus sign. These icons were placed to reinforce the “Clickable Clippings” branding, in addition to provide a clear visual difference from classic bookmarking in the iPhone. However, the user-interaction that power-users are familiar with in the iPhone translate nicely to the “Clippings” space, in that the “+” mimics behavior seen in bookmarking. Clicking the single paperclip icon opens a sub-menu of options to navigate through clipping options such as opening the clippings manager (which we call “My Clips”) or sending the current clip to a friend. The paperclip option, annotated with a small plus sign, leverages iPhone user’s existing knowledge of “adding” a bookmark to their list.

Figure 2. Browser is open with an article displayed on iPhone. (Click image for enlarged view.)

An entirely new UI was designed and built for “My Clips,” which stores the current list of clips stored by the user. As with the previous designs, the look and style of the buttons and menu options are highly leveraged to encourage easy adoption on the platform (e.g. “Done” button coloring and placement). Furthermore, the UI supports single-selection highlighting of each clips in the same way previews work in other text-dense areas of UI on the iPhone; a single selection begins the remaining hidden text to scroll and reveal some information about where the clips was made. Notice that only minimal buttons are incorporated, to keep the interaction simple and straightforward.

Figure 3. “My Clips,” the clippings manager. (Click image for enlarged view.)

The “My Clips” can also be easily edited, allowing users to remove articles from the list after they are done reading. When clicking the edit option in the figure above, the following UI changes. In the first version release of the Clickable Clippings extension, the Clippings Manager supports two actions: delete old clippings or open a saved clipping. The following UI reflects the option to easily delete a clipping from the Clippings Manager.

Figure 4. “My Clips” in Edit Mode. (Click image for enlarged view.)

The Computer
The web UI supports the same set of tasks, but offers a more Safari native integration style.

Just like with the iPhone design, the UI look and feel for the the computer, using the browser Safari, is very subtle. A paperclip has been added to the far left-hand side of the toolbar. Once again the paperclip button was used to reinforce the “Clickable Clippings” branding. It also offers a clear reference point for accessing the tool. Clicking the single paperclip icon opens a sub-menu of options to navigate some clipping options including: Save Clip, Send Clip, My Clips, and Preferences. These same options can also be accessed through a right-click anywhere on the page.

Figure 5. Safari Browser is open with an article displayed, with save clip option selected. (Click image for enlarged view.)

As the user scrolls through an article and decides to save that particular spot, “Clickable Clippings” will automatically save the spot as the first line in view the browser window. The user must either right-click and select “Save Clip,” or use the paperclip in the toolbar and left-click, selecting the “Save Clip” option.

Figure 6. Using the Safari browser, the user scrolls to the middle of a story and decides to save his or her place. (Click image for enlarged view.)

The UI for the Safari browser was built as a downloadable plug-in. For the Clippings Manager (which we call “My Clips”), a system similar to the Apple “History” page is used. It lists each clipping and offers a picture of the article and web address. The “My Clips” page can be accessed by using the toolbar on the top left-hand side of the Safari browser or using the right-click option anywhere within the browser window. The user is presented with a standard set of options to click, allowing for straightforward and simple interaction with this new tool.

Figure 7. The ‘My Clips’ window is displayed allowing the user to select which story he or she would like to read next. (Click image for enlarged view.)

The “My Clips” listings can be edited by either selecting and pressing the “Delete” or “Backspace” key on the keyboard, or selecting “Delete…” from a right-click menu. This allows the user to remove articles from the list once they have completed reading them. From“My Clips” manager can access all other features through the toolbar in the upper left-hand corner of the toolbar. An additional step that is available in the tool menu is the option to send the article to a friend or oneself. This function is available from when viewing any article or from the ‘My Clips’ screen.

Figure 8. The send feature is demonstrated. It allows articles to be sent to yourself and/or others. (Click image for enlarged view.)

Conclusion

The final designs address the five tasks identified earlier, encompassing reading, storing, and sending locations of individual articles on either a smartphone device or a web browser. The strengths of designs include their focus on simplicity, their unified look and feel (graphics, menu naming, etc.), and their compliance with the native environment. For example, in the iPhone designs, schema that iPhone power users are familiar with are leveraged for ease of understanding “Clickable Clippings.” In the web designs, “My Clips” uses a combination of text and graphic evidence to display the clipping at hand, mimicking other popular listing features seen in Operating Systems such as Windows Explorer or the iTunes Store.

The weakest area of the designs is perhaps the clear differentiation, from a user-perspective, of saving Favorite links for whole websites from saving a specific location within a website. While different graphics are used, and the ability to click in-line and save a Clipping is clearly a new functionality which reinforces the concept, the inability to provide a good marking mechanism that renders correctly on all form-factors was a difficult challenge to overcome. In truth, the nature of Bookmarks and clippings are very similar and not all users may need both options to accomplish their tasks. Nevertheless, the designs mark a first attempt at introducing a new concept that could be enjoyed by millions of readers across the globe.

Acknowledgements

A special thank you to all of those who helped work on the Digital News Test Kitchen project over the past year. For information on this project and others go to: http://testkitchen.colorado.edu/projects/reports/smartphone/. Also, thank you to the Professor Clayton Lewis, Department of Computer Science; Steve Outing, Digital News Test Kitchen director; and Dean Paul Voakes, School of Journalism and Mass Communication.

References

• Digital News Test Kitchen (2010). In-depth news for smartphones. Retrieved from Digital Media News Kitchen website: http://testkitchen.colorado.edu/projects/reports/smartphone/smartphone-recommendations/
• Nielsen (2010, Mar. 26). Smartphones to overtake feature phones in U.S. by 2011. Retrieved from Nielsen website: http://blog.nielsen.com/nielsenwire/consumer/smartphones-to-overtake-feature-phones-in-u-s-by-2011/
• Pew Research Center (2010, Mar. 15). Project for Excellence in Journalism: State of the News Media 2010. Retrieved from the Pew Research Center website: http://www.stateofthemedia.org/2010/

Print PDF