WRA 210 MODULE 09 WayBackMachine Redesign

Size: px

Start display at page:

Download "WRA 210 MODULE 09 WayBackMachine Redesign"

Josephine Curtis
6 years ago
Views:

1 WRA 210 MODULE 09 WayBackMachine Redesign By: Sarah Knupfer, Kelci Henson-Forslund, & Sammi Nani The New York Times New York Times the problems Looking at the above screenshot from 2000, we see a

1 1 WRA 210 MODULE 09 WayBackMachine Redesign By: Sarah Knupfer, Kelci Henson-Forslund, & Sammi Nani The New York Times New York Times the problems Looking at the above screenshot from 2000, we see a few usability issues. First, the amount of text and how it is organized is overwhelming. Although the layout is clearly meant to resemble an actual newspaper, we find it ineffective in terms of convenience. Physical newspaper readers are more likely to take their time, in contrast to online readers who want to benefit from a quick glance. In the process of trying to mimic the physical paper, developers organized articles in columns. This was more acceptable in 2000 as readers were still switching from the physical paper to online news, and it s helpful in that aspect to have a consistency in layouts. However, a 2017 NYT layout does not need to prove itself anymore. In other words, their online news no longer needs to resemble a newspaper to be trusted. With the column-aligned text comes the issue of one sentence

2 2 beginning and another one starting very close to each other, but for two different stories. An example of this is the headlining article text next to the photo caption. At a glance, one cannot automatically tell that the photo caption is a caption and not part of the article. Yes, we can read the text and figure out its purpose, but the point of online news is convenience. A reader should not have to read the text to understand its function it should be obvious. Additionally, with blending sentences come blending headlines. With a quick glance, top headlines should immediately pop out but they are blending in. A second usability issue is the left-aligned menu navigation bar. This menu features links to the top news topics and is high priority, yet tucked to the side with less important links prioritized above it (i.e. Jobs, Real Estate, and Shopping). This navigation bar is how visitors move around the page and it should be front and center. Furthermore, on the right side of the screenshot, we see a matching container with Inside and Readers Opinions. Why do these containers match? We assume it is to be more aesthetically pleasing and balanced, but it hurts the site s usability because it takes attention away from where it should be: on the top news topic links. Also, the less-important Inside and Readers Opinions section is larger than the left-aligned menu nav. If asked the question, Which do you want visitors to see first: the top news links OR the readers opinions? we assume NYT would answer top news links but this layout does not support that. 2

3 New York Times updated design The two changes we made priority: 1. Making the menu navigation bar easier to find and use. 2. Making top stories easier to find and read at a glance.

3 3 New York Times updated design The two changes we made priority: 1. Making the menu navigation bar easier to find and use. 2. Making top stories easier to find and read at a glance. To improve the navigation bar, we moved it to the top and center of the page, making it immediately visible to visitors. For the sake of organization and space, we included only the top news topics in this navigation bar, followed by a more link to the rest. At the top right of the page we included a search bar; if a reader cannot immediately find what they are looking for, they can skip the hunt and search for it here. 3

4 4 In the 2000 screenshot, we see a link called Personalize Your Weather. Viewing this as an extra step for users, we changed it to weather information that is already personalized by location. As you can see, our layout does not still look like a newspaper. However, we understand some readers still want the traditional experience so we added a link to today s print version paper. Above the navigation bar is a large New York Times logo, similar to how it is presented online in 2000 and also on the physical newspaper itself. Although we have moved away from the customary newspaper layout, it is important for branding purposes to stay consistent with the headline logo. This lead us to adding an interactive T logo at the top left of the page. Why? Scrolling. As a user scrolls down the page, we ve designed the navigation bar to move with it - but not all of it. We only want the news topic links (World, US Politics, NY Business, etc.) to move so it is accessible at all times. There is no need for the weather/date information or for the large NYT logo to move too so we wanted those to remain static. Including them in the scrolling feature would be more complicated and crowded and would go against the simple/convenient function we are going for. Solution? We added the T logo at the top left, as a clickable link to the landing page. This logo will move with the navigation bar as users scroll, making it easy to get to the top of the landing page at all times. With our updated navigation bar, users should never be lost. Next up, we wanted top headlining stories to be easier to find and read at a glance. To make this possible, we switched the article organization to rows instead of columns and added contrast via containers with colored backgrounds and photos. As time moves forward, photos have become an increasingly popular method of rhetoric. These photos 4

5 help act as headlines in that they pull attention and are laid out to obviously matched their paired text in the same row. 5 If we try to fit every headlining story on the front page, we will never free ourselves of clutter; but all need to be easily found. Our solution: dropdown menus from the navigation bar. The landing page space is reserved for the highest priority articles and the rest are accessed by hovering the mouse over their fitting topic. To put it simply, hovering the mouse over the Tech link in the navigation bar will open a dropdown menu with the top tech stories. This saves space while maintaining findability. 5

6 6 Summary of High-Fidelity Wireframe: A) NYT logo w/ anchor to top of page. It remains at top of page with nav bar as user scrolls. B) Scrolls away when user looks farther down on the page. C) Quick pieces of information (based on location) for users. D) A search bar that scrolls away when the user looks farther down the page. Gives users a faster way to find specific material on the website (for example, an article a user found earlier in the week). 6

7 E) Nav bar with sub categories when a user hovers over the header-topic.

F) A headliner story sits at the top of the homepage.

7 7 E) Nav bar with sub categories when a user hovers over the header-topic. When the user scrolls, the nav bar remains at the top of the page for ease of access. F) A headliner story sits at the top of the homepage. It is displayed with a photo, a large header, and a snippet of the article itself. G) Top stories are listed. The beginning of each article is written, and the user can click on the box to read more. H) Images of the major stories are shown. Provides visual interest, but also helps users grasp the topic of an article without reading the paragraph to the right. 7

8 8 8

9 9 NY Times Sitemap World o Africa o Americas o Asia o Australia o Europe o Middle East Politics o Election Results o Trump s Cabinet o The Run-Up Podcast o Video o The Upshot Business o Dealbook o Markets o Economy o Energy o Media o Technology o Personal Tech o Entrepreneurship o Your Money Opinion Tech Science o Environment o Space & Cosmos o Health o Trilobites o Sciencetake o Out There Health o Well o Health Guide Sports o Baseball o NFL o College Football o Hockey o Soccer o Golf o Tennis Arts 9

10 o Art & Design o Books o Dance o Movies o Music o Television o Theater o Events Style o Men s Style o T Magazine o Weddings o Fashion Week Food o Cooking o Restaurant Search More o Today s Paper 10 10

Module 9: WayBackMachine Redesign

Module 9: WayBackMachine Redesign Written by Sydney Landon, Bernie Belcher, and Deron Ferrell Reflection When recreating MSU Writing Department's home page we wanted to make specific elements stand out.