Tag Archives: hiDPI displays

Thoughts on nytimes.com redesign

nytimesredesign

The new nytimes.com website is not the kind of design I would give a news website, but it is a big step forward for the news organization.

I’ve waited a few weeks to do a critique of the new nytimes.com design because I wanted to give it some time to sink in and really spend several hours with it. Additional time spent with the new design has made my opinion of the site more favorable. The site is universally better than the one it replaces and is better than most websites from traditional news orgs. 

I’ve come to appreciate some of the design choices more with time, although there are still some things that should be changed. It’s a cleaner, smarter website, but it at times tries to mimic print too much and still doesn’t embrace good design enough.

Below are some of my thoughts on what I like about the new design and some things that I think could be tightened up. I didn’t do a usability study with live users like I’ve done with other news sites, nor did I run tests to check for accessibility (this may come in the future). Below are my impressions based on my expertise, but additional studies and testing would be advisable before making big changes.

What I like

  • Small headers — There is no reason to push your content half way down the page with a huge header and navigation system. I particularly like how article pages get a smaller logo than the homepage. This let’s users get into actual nytimes.com quicker and makes pages feel more about content and less about a corporate brand. One issue with a huge header and navigation system is that it can raise your bounce rate because it takes users longer to figure out what is going on.  Remember, the vast majority of visitors to news websites come in via search engines and social media referrals. These users more likely have less of an idea of what they are about to get into then someone who has navigated to an article from a homepage of a news website. Even a few moments of confusion is enough to cause a user to X out of your webpage.
  • No more side navigation — The main navigation system has been moved to the top of the site from the left-hand side. This allows for the homepage, article pages and section pages to be more dynamic and allows for many more article page template optins. It gives more pixels to what really matters on a website. It also puts the navigation in the same place on desktop, tablet and mobile, which a side navigation cannot do (navigation really needs to be at the top on mobile to be usable for users). The only reason to have a left-hand navigation is if you’re doing a dynamic news river with real stories with compelling headlines. Having a side navigation with links such as news, sports, opinion, etc. is a waste of space and should be immediately redone.
  • Cleaner article pages — For all that is going on on nytimes.com article pages, they are surprisingly clean. There is text, images, video, graphics, related links, additional stories to read, comments, etc. Despite this, the site feels clean and airy. This is good. The New York Times was smart with how it paced different design features on article pages. Some websites try to cram everything below on article page or in a right-hand column. The new nytimes.com starts at the very top and works its way down to the bottom. The much smaller header and navigation on article pages also really helps here too. The pacing of website features and story content feels very natural.
  • More entry points to additional content — Getting a reader onto an article page is not enough; most users will leave your website after reading an article if they aren’t presented with interesting articles to read next. You need to present users with additional stories to read and photos and videos to view. The new nytimes.com does a fantastic job of presenting lots of different entry points for users, while not making article pages feel cluttered and cheap. The top of every article has editor’s picks stories. The bottom has top news, additional stories from the section you’re reading and the most emailed stories.  Sections such as news, sports, health, business and opinion are not entry points. Actual stories with compelling headlines are. The nytimes.com redesign does a good job of presenting lots of additional options without bedazzling the page in cruft that detracts from the user experience. It’s a fine line to walk, but the nytimes.com redesign does it as well as anyone.

What needs improvement

  • Why aren’t photos and graphics bigger? — In general, I don’t get why news orgs insist on putting small photos and graphics into article pages. There is no real use case for this, and this seems like a print anachronism that page designers insist on bringing over to the Web. Big photos and graphics look better and are easier to understand. The worst is when an image is placed into a story at a small size and can’t be enlarged and because of that you have no idea what’s going on. There is no use case for that. There will never be a use case for a news organization showing photos and graphics that are indecipherable. The nytimes.com redesign usually lets you make photos and graphics bigger but not always. I don’t know why the behavior isn’t consistent, but it should be. This is particularly and issue for charts that have small type and keys on them.
  • Text needs to be bigger —  News orgs have a big issue with small text. I have to assume that designers think it looks better, but it’s hard to read, and if you make something hard to read, people often won’t read it. Reading is a fundamental thing that users do on news websites. Text should be big, feature a high quality font (particularly for HiDPI displays) and have a good contrast. The new nytimes.com has bigger text, but it could still be 25-50 percent bigger. There are two reasons for this: A) bigger text is easier on older and tired eyes and B) bigger text is more enjoable for everyone to read, making it more likely that people stay on your text-heavy site longer. People used to claim that people don’t like to read as much on the Web, and because of this, writing on the Web should be shorter. This is false. The issue is that Web text is often small, poor contrast, with low-quality fonts. Of course people don’t enjoy reading that. Part of this had to do with display technology and we had to make certain affordances for poor, low resolution display technology, but HiDPI displays (what Apple calls Retina) are taking over the market. They make text look as good as printed text. A good display will certainly encourage users to read more, but Web designers still have to do their part with high quality typography. Last year I wrote how Retina/HiDPI displays will reduce eyestrain and should lead to more reading. It lays out why this new display technology, which most mobile devices have and increasingly laptops have, is making Web reading easier (my phone, tablet and laptop all feature a HiDPI display, and I love reading on them). This is also allowing for higher quality, print-caliber fonts, which also make reading more enjoyable. Medium does the best job I’ve seen of using typography for Web writing. It’s just an enjoyable reading experience for years. That’s what all news orgs should want. Traditional news orgs are some of the best producers of the written word in the world. They need to start making the written word more enjoyable to consume on the Web.
  • Not enough nods to what users like — One of my favorite new navigation features is trending topics, where underneath the main navigation is a set of topics that are getting the most traffic on the website. I’m not surprised The New York Times wouldn’t hand over navigational control to the crowd, but it’s still a missed opportunity. Users like to know what other users find compelling. Topics, as opposed to stories, are a good way to let people delve into bigger issues too (there isn’t just one New Jersey bridge scandal story, for instance).
  • The homepage is bland and forgettable — It is true that design time should be spent on article pages and not on homepages and section fronts, as the majority of traffic comes to individual article pages, but the cluttered and boring homepage design for the new nytimes.com is still disappointing. It still features small photos. It still features small headlines. It still has trouble driving a users eye to a main story or any story for that matter. The New York Times can get away with this for tradition’s sake, but almost every other news organization can’t. It’s not just that it looks too print-like, it’s also that it doesn’t even function well. Frankly, everything kind of just blends together on the NYT homepage, making it hard to pick out anything to read. I rarely find myself going to the nytimes.com homepage anymore, partly because it’s such a frustrating user interface for discovery. Instead, I find almost every nytimes.com story from social referrals.
  • Having trouble viewing mobile website — On my laptop, I can view mobile.nytimes.com and see the new homepage on mobile. On my phone it takes me to the desktop homepage. This is a bug that should be easy enough to fix, but it does need to be fixed. The desktop homepage is virtually unusable on mobile.

Retina/HiDPI displays will reduce eyestrain and should lead to more reading

9-stunning-examples-of-the-new-ipad-s-retina-display-629e9b2ec4

Text on a non-Retina iPad versus a Retina iPad. Sharper text is much easier on the eye and much more pleasurable for reading.

The Retina iPad doesn’t just look aesthetically better — it works better.

The ultimate expression of design is how something works, and by that measure the Retina iPad is much better designed than older ones, despite looking identical when turned off. Usability expert Jakob Nielsen said in an interview that the Retina iPad’s display will cause people to use the device more because it’s a more enjoyable user experience, particularly for reading text.

Nielsen highlighted the crispness of typography on the Retina iPad. He said the higher resolution display really impacts both reading speed and eyestrain, two issues that plague other consumer-grade computer monitors. Two issues that also have caused people to shy away from reading longer-form content on computers.

“All commercially available computer screens have all had bad typography,” he said. “For the entire history of computers we’ve always suffered under reduced reading speed and increased eyestrain compared to print.”

Retina Displays are Apple’s term for hiDPI displays (dots per inch). These are displays with significantly more pixels per inch than displays had just  a few years ago. First smartphones received more pixels and more than 300 DPI is fairly common in flagship smartphones. In 2012 we saw tablets get significantly more pixels, sometimes four times or more pixels than models from just a year earlier. We’re beginning to see hiDPI displays make it up into laptop computers, and we’re not far away from desktop displays getting hiDPI displays.

Gary Heiting, OD, and associate editor of AllAboutVision.com said in an email that eyestrain is a primary component of computer vision syndrome. Heiting said eyestrain and computer vision syndrome symptoms include burning, stinging eyes; red eyes; dry eyes and/or watery eyes; increased sensitivity to light; intermittent or constant blurred vision or double vision (that resolves after resting the eyes); difficulty changing focus (from your computer screen to across the room, or even from the computer to printed material or other objects on your desk); seeing “afterimages” or color fringes around objects when looking away from your computer screen; and (frequently) headache.

Nielsen explained that traditional computer displays don’t have enough pixels per inch to properly display text, resulting in coarser typography where character shapes and forms don’t differentiate and stand out enough. Serifs and curves are not as clean as they are supposed to be (or how print typography looks). Because the shapes and forms of the individual letters are harder to make out than printed text, this causes us to spend more time on each letter and word, slowing us down and causing eye fatigue.

Our eyes have to work harder to read text on a computer monitor than they do a newspaper. Even if we don’t perceive it while we are reading, we feel it in fatigue eyes and a lack of desire to read long text on computer monitors.

Many people print out long articles rather than read them on a computer monitor, Nielsen said. The Retina iPad and some of the other hiDPI tablets that have been released are finally changing that.

“This is the first time in history we’ve had a computer that actually provides the same word-for-word readability as print,” Nielsen said. “That’s unprecedented.”

Heiting said the focusing demands on the eyes are lessened by the Retina iPad, more closely approximating the experience of reading a printed book.

“Because of its high resolution display, the iPad reduces or eliminates the eye’s perception of light/dark borders between pixels, which is the cause of focusing (accommodative) fatigue — a major (arguable the major) cause of computer eye strain,” Heiting said.

The Retina iPad features 264 pixels per inch (list of display PPIs here). The first two iPads were 132 PPI. Apple’s best-selling laptop, the 13-inch Macbook Air, is 128 PPI. The standard 15-inch Macbook Pro is 110 PPI, and the 27-inch iMac is 109 PPI. The new 15-inch Retina MacBook Pro is 220 PPI.

It’s important to note that the farther away you sit from a device, the less PPI that is required. Your HDTV most likely has a PPI well under 100, but it looks great from 10 feet away on your couch (here is a PPI calculator to figure out what the PPI is of your computer monitors and TVs). The mark of whether or not a display is “Retina” quality is whether or not you can make out individual pixels from a normal operating distance.

Apple considers both the Retina iPad and the iPhone 4/4S/5 Retina Displays, despite the fact that the iPhones have a higher PPI at 326. While a 27-inch monitor that you sit two feet or so away from doesn’t need the same PPI as a tablet or a smartphone to look good, it does need significantly better than 109 PPI to come close to the crispness of typography on the Retina iPad or the kind of crispness that is easier on the eyes. A 27-inch monitor would most likely need more than 200 DPI to be Retina class, which would require a considerable amount of computing power to run — beyond what even most higher-end laptops and desktops ship with.

Heiting mentioned the work of Bryan Jones, Ph.D and retinal neuroscientist at the University of Utah. He investigated and evaluated Apple’s claim that the new iPhones and iPad are Retina Displays and found those claims to be accurate. At a viewing distance of approximately 15-18 inches, which is the recommended distance for use of a tablet computer, around 240 PPI would hit the resolution limit for someone with 20/20 vision.

Up to 50 percent of computer workers experience eye strain during or after work, Heiting said. With smartphones, tablets and computers at home and at the office, we’re staring at computer screens more than ever.

“Increased screen resolutions — not just for smart phones and tablets — could have a very significant impact,” he said.

Nielsen expects that one day all consumer computer monitors will have higher pixel densities. Smartphones and now tablets are leading that charge because of their smaller displays, but Apple has begun shipping hiDPI monitors in their MacBook Pro line. In the next few years, we’ll see hiDPI monitors at larger, desktop resolutions.

Nielsen doesn’t expect big monitors to get high pixel densities for a few years, perhaps up to five more. Not only is it more expensive to ship larger displays with lots of pixels, it takes more CPU and GPU computing power to power the displays.

It’s not just reading that is affected by having a better display. Anything that is done on a computer would be affected.

“With a high resolution screen you can get more work done,” Nielsen said. “It’s not just for reading, it’s also for analyzing spreadsheets and any office work. For any kind of knowledge work it really pays off in increased productivity for employers by giving their employees better tools.”

The Retina iPad and future higher resolution displays offer exciting possibilities for news producers. People will be reading more.

“Better hardware leads to simply more words being consumed, which means more engagement with the content,” Nielsen said.

Chris Mueller, art director for Vanity Fair, said that the Retina Display really improves text and images on the Vanity Fair iPad app.

“The type is much more crisp, which helps legibility for smaller elements and improves the reading experience greatly,” he said. “Photos now have an HD quality with incredible detail and radiant color. The overall difference is notable and it really enhances the way the magazine looks on a device.”

The display on the Retina iPad has been compared to glossy magazine print. Journalism can look really good on it, in a way that journalism doesn’t look in other tablets and computers.

“The Retina Display means everything is sharper and easier to read,” said Greg Clayman, publisher of The Daily. “The overall high-quality of the display looks more like crisp paper – it’s a pleasure to look at for long periods of time.”