An Interactive Transcript by WSJ: Everything You May Want to Know about #SOTU

Original website: WSJ Interactive: 2015 State of the Union Address

Screen Shot 2015-01-23 at 10.49.31 AMAmong all major U.S. news outlets that have offered a “interactive”transcript of President Obama’s State of the Union Address, WSJ stands out by providing the audience everything you may want to see in a single interactive page about the issue. Here’s why:

1. Minimalist layout and organized content.

It’s a textbook example of presenting a large amount of information in a single page.

For long-form articles with a length of over 2000 words, the designer  will decide the structure of the contents. Editors at WSJ.com decide to use a simple but effective 3-column solution to solve the problem: transcript in the middle, video on the left, and a scrollbar on right. No excessive colors, symbols or logos. Less is more. As a result, audience will understand the structure and general function of this webpage at the first sight without confusion.

The content was separated by topics as well as the position in the timeline. Different topics were marked by an icon, and a single click of the icons will prompt the audience to the start of each section.  The entire speech is separated by small paragraphs, and the video clips go long with the text respectively.

2. Easy navigation with multiple ways to access media.

Despite a simplistic layout, it contains all forms of media of the original speech: videos, images, text and summary. The best thing is the fact that videos will automatically start to play, change according to which part of the speech is in the spotlight. The only thing you need to do is to select a topic or scroll. No clicks are required to move along the text.

The scroll bar of the full-length transcript is another smart idea. You can quickly locate to the end of the speech and get a sense of how much of the speech is left.

It should be noticed that the synchronized media contents can be navigated by different ways, which will help users of different Internet habits to engage with the news.

The website is responsive, and so it the interactive project.

3. Well-prepared for social media.

Each paragraph of the speech is followed by a list of sharing buttons of Facebook and Twitter. As is mentioned above, the minimalist design is important, so the editors decide to dim the buttons to light gray unless clicked by users. This detail has enabled a less intrusive reading environment of the readers.

The only thing that, I found, will compromise the usability is the long loading time and some bugs with opening it in Safari. However, the issue is minor compared to what users will get from this website.