Designing the Article of the Future
Elsevier's User Centered Design specialists show how they worked with users to transform the format of online articles
By Elena Zudilova-Seinstra, PhD Posted on 16 January 2013
The Article of the Future is an ongoing project that explores better ways of presenting online journal articles and enriching their content. The project team worked with more than 150 people in the scientific community to come up with the prototypes for the current design. Since last year, all articles on ScienceDirect have been in this more dynamic format. Dr. Elena Zudilova-Seinstra, who has worked on this project for nearly three years, writes about how they learned from users and presents the findings that led them to develop this new layout.
The Article of the Future initiative aims to revolutionize the traditional linear format of the academic paper to make it more dynamic and user-friendly. Following changes made earlier this year, which improved in-article navigation and readability, the ScienceDirect online article is now entirely transformed into an interactive HTML format.
Through one-to-one user interviews, group discussions. and observations, usability tests and on-site visits, we gathered in-depth knowledge of user needs and workflows for each field. Our main goal was to offer new content and tools that would help researchers in their specific scientific needs, hence avoiding the "one-size-fits-all" solution. After Cell Press demonstrated initial concepts for life sciences and got feedback from the scientific community, 13 new prototypes were created for seven new subject domains.
More than 150 researchers, authors, publishers and editors participated in the project. They suggested various ideas of how articles in their research field could be improved taking full advantage of today's online capabilities. The most interesting ideas were prototyped by our team. Prototypes varied from simple sketches to complete functioning systems. All ideas and prototypes were discussed and evaluated in online user forums set up for each domain.
Guiding principles for design
[note color="#f1f9fc" position="right" width=400 margin=10 align="alignright"]
3 guiding principles
The Article of the Future prototypes were designed to get maximal user value out of the online article. The three guiding principles for the new article format are:
- Readability. Make the article the center of the design, with typography that makes it easier to read from the screen.
- Discoverability. Present content and functionality at the right place on the screen and the right time in the user's workflow.
- Extensibility. Have a generic layout that can accommodate subject-specific content enrichments without sacrificing readability.[/note]
From the very first stages to the end of the project, reliable and structured user feedback was used to drive the direction for the Article of the Future design. Our findings clearly indicated that there is a definite need for discipline-specific improvements, but also that scientists plainly love their traditional PDF format. In fact, scientists use the PDF to store and organize articles, make annotations while reading, quote by referring to a specific page, and mail articles to colleagues. Finally, the PDF article format prints and reads much easier than the current online versions.
Therefore, our starting point in the Article of the Future design was to introduce the discipline-specific content enrichments that only the online format could provide on top of the advantages of a PDF reading experience. In this way we would ensure that the new article format would be used and appreciated, and users would not flee to the basic PDF format for basic readability reasons.
Hence, in close collaboration with STM Journals and domain experts, we formulated three guiding design principles (see sidebar), which helped us in making the day-to-day design decisions, such as:
- The article is the basis. The Article of the Future format supports the 'PDF' look and feel for easy online reading.
- In-place content enrichments. The Article of the Future format integrates new content elements at natural positions in the article.
- Additional content and context presented in the right sidebar. Supplementary content and features, as well as information from external databases, are offered next to the article text.
- Clear navigation. The article outline links to sections and figures in the article
- Clean design. The visual load is minimized to encourage users to explore the article.
- Customized view. The user interface automatically adjusts to available screen size.
Extreme care has been taken to make the article layout as easy to read as possible. By providing a clean, simplified and minimalistic look while adding hierarchy to article elements, we made it easier for users to focus on the article and spend more time reading it on-screen. Emphasis has been placed on the interactive content elements within the article, which take advantage of online capabilities. And since the tablets and smart phones are becoming more popular among scientists, we made sure prototypes could be easily explored by users who prefer mobile devices to the standard computer.
"The Article of the Future project is an excellent example of how design goes much deeper than just a superficial visual layer," said Frans Heeman, Portfolio Manager for User Centered Design. "Design drives how people think about our products, so it has to be based on solid user data. In this project, we really harmonized content enrichments with presentation, layout, typography and functionality."
UCD worked with the S&T Journals group "to create something that will really gratify people and create sustainable business value," said IJsbrand Jan Aalbersberg, Senior VP of Journal and Content Technology and the project owner. "Making the presentation as perfect as this will allow us to move ahead while continuing to build around the core of what we do: publishing great content."
What's special about the new article layout?
All prototypes support the three-pane presentation layout: navigation bar, main content area and right sidebar. Since each pane can be scrolled independently, it is possible to have both the text and an image in view at once, for instance.
The middle content pane displays the original article, giving the reader the ability to interact with the underlying scientific data: for example, via interactive Google Maps, graphs, tables and plates. The left navigation pane displays a table of contents with clickable section headers and thumbnails of images and tables.
The right pane provides access to supplemental information and additional features, which are usually task or content specific. All extra features can be accessed directly from the article or via the dropdown menu. Depending on the specificity of each domain and the article content, different functionality can be offered. For example, electrochemistry articles display structures of chemical compounds, whereas paleontology articles feature 3D fossil models and provide information on spatial distribution of the localities in which they were found.
[caption id="attachment_17100" align="alignnone" width="800"] An example of an Article of the Future prototype showing the three-pane design[/caption]
With the public release of the Article of the Future prototypes, we gave visitors the option to complete an online survey. Of the 800+ people who responded, 75 percent indicated that they thought the Article of the Future design contributes to obtaining a better understanding of the research in the article.Responses to the question: How do the new presentation format and extra features contribute to obtaining a better understanding of the research described in the article?
* Neutral: There is not much difference.
* Negative: They make things slower/more difficult.
* Positive: They make things faster/easier[/caption]
A pie chart of people's responses is shown in the sidebar.
Here is a sample of the comments people left as part of this survey:
- Improved hyperlinks between references, equations, etc. … are very helpful. Also having the side bar to see equations or references without loosing your place is very nice.
- Easy to find way around article. Don't have to scroll through pages and pages. Interactive figures are FANTASTIC!
- Tablet computing with the Article of the Future is going to replace PDF!
- It will encourage more in depth investigation in order to understand the place of the new research. This will prolong the reading time.
- As a reader I get more the feeling that I can really approach the data and check it in order to come to the same conclusion (or not)… As an editor, I'm concerned about the additional work involved in managing the integration of all these neat features…
- Fantastic! A revolutionary and easy way to be up to the minute! I missed a printing version for those who don't have tablets or computer easy to access at any time.
To compare the new Article of the Future presentation layout and the pre-2012 ScienceDirect online articles, we conducted several user tests.
The first pilot study with five subjects on ScienceDirect tasks showed that people can find relevant information in the article up to 40 percent faster using the Article of the Future prototype. The later 32-subject test on ScienceDirect behavior showed that in the new format, 90 percent of users looked at the HTML full-text of the article first (compared to 40% on pre-2012 ScienceDirect) and that the majority of users were much more satisfied with the Article of the Future user interface than with the previous one.
Recording online behavior
Normally, participants perform trial tasks in their usual office settings. However, if possible, we also run user tests in our Usability Lab in Amsterdam. Using software available in the lab, we can make digital video recordings of users interacting with online content to analyze their behavior in much more detail.
Tracking eye movement
To monitor and analyze user behavior optimally, we apply the state-of-the-art evaluation techniques and methods. For instance, we used an eye tracking set-up provided by the Vrije Universiteit (VU) Intertain Labin Amsterdam to identify and analyze patterns of visual attention of people using the Article of the Future prototypes.
The eye tracking data indicated that participants scanned the central area first, then the left pane and then the right sidebar. It is very important that the main focus remain on the middle article pane and users investigate left and right panes mainly when they are looking for additional information.
While the redesigned article format is now available on ScienceDirect, our journey continues. Right now, we are focusing on introducing new domain specific functionalities on ScienceDirect. The following two interactive applications have been developed recently and are part of relevant online articles:
- The interactive phylogenetic tree viewer (for life sciences). Displayed in the middle article pane below the abstract, this application allows the reader to interactively explore phylogenetic trees on ScienceDirect. To support this functionality, authors of relevant articles are invited to submit their tree data in Newick and NexML formats.
- The MATLAB figure viewer enables the reader to explore figures with data interactively and in the context of the article. These interactive figures are based on MATLAB FIG files uploaded by the author and shown next to the article in the right-hand pane on ScienceDirect.
- Article of the Future: articleofthefuture.com
- ScienceDirect: sciencedirect.com
- Interactive phylogenetic trees in online articles: elsevier.com/phylogenetictrees
- MATLAB figures in online articles: elsevier.com/matlab
- The Vrije Universiteit (VU) Intertain Lab
Elsevier Connect Contributor
Dr. Elena Zudilova-Seinstra is a Content Innovation Manager for Journal and Content Technology at Elsevier STM Journals. She has been working on the Article of the Future project since joining Elsevier in 2010 as a Senior User Experience Specialist for the User Centered Design group. She holds a PhD in Computer Science and a MSc degree in technical engineering from the St. Petersburg State Technical University. Before joining Elsevier, she worked at the University of Amsterdam, SARA Computing and Networking Services and Corning Inc.
Also contributing to this story: Frans Heeman (UCD Portfolio Manager), IJsbrand Jan Aalbersberg (SVP Journal and Content Technology), Martijn Klompenhouwer (UX Usability Researcher), Rogier Barendregt (UCD front-end designer), Stefan Kuip (UCD software developer), Beate Specker (Senior User Experience Specialist) and Spencer de Groot (UCD Portfolio Manager).