LA Times redesign doesn’t quite click

August 21, 2009 by

The LA Times website used to remind me of an old-fashioned hardware store – things were plopped wherever there seemed to be space. That changed when Meredith Artley took over as editor of the site in early 2007. Under Artley, latimes.com quickly became a leader in design and in featuring content that celebrates the special qualities of its metro area. So why is the site’s new design, despite some welcome improvements, specked with so many user-unfriendly mistakes?

The gray (screened) type is gone, thank goodness, but it has been replaced by type that, because of the limited way it’s used, produces an even grayer look that extends to the entire layout:

LAT website front page

The new typeface is Georgia, a serif version of Verdana, which Microsoft commissioned early on for its online readability. Georgia, which was inspired by Times Roman, is fine, but not when, everywhere, it is uniformly presented in regular font.

“Gutenberg would be proud,” the Times presumptuously brags about its new Web typeface choice. But even Gutenberg used boldface and other typographical devices of contrast in his Bible, the first example of printing with movable type.

To achieve its hyper-cleanness, the redesigned LAT site often eliminates information that would be an important cue to the browsing user. In this strip of three homepage promos (below), the browser is not told that authoritative Hollywood staff writer Claudia Eller was the author of the first promoted piece.

Feature promos

The second promo is for the popular Column One feature, but who’s to know?

High up on the page on Monday, Aug. 17, was this headline:

Alcoholics misread facial expressions, study shows

The linked piece would surely have gotten more hits if browsing users knew it was written by Melissa Healy, the Washington-based Health section writer who specializes in articles on human behavior.

The site’s feature on “our new look” says it “better showcases the world-class journalism our newsroom produces around the clock.”

I wonder if the un-showcased Eller and Healy would agree.

The site has redesigned ads, but it’s not a good idea to format editorial promos in the same size as ads and then juxtapose the two, like here:

Ad on top of Entertainment promo box

Navigation has definitely been improved through dynamic subsection tabbing that changes when the user’s cursor rolls over main headings like LOCAL, NATION, WORLD:

LAT news nav bar

The redesign has earned plaudits from commenting users (“magnificent change! much more readable, and elegant.” “Oooh! Nice, very nice,” “MUCH BETTER”) but there have been dissents too. Stephen wrote on Aug. 12:

“At first glance, i didn’t like it. maybe it will grow on me. maybe what’s ‘under the hood’ is impressive, but the previous design was much more elegant and sophisticated….”

“Our work is not done,” online managing editor Artley and LA Times editor Russ Stanton blog on the site.

Maybe that means they’ll revisit some of work they’ve already done.

A final suggestion: To help users wrap their heads around all the news the LA Times serves up, the site should hire what I would call a “Web maitre d’,” who would, each day, in a one-minute video, summarize what’s featured – from the biggest to the quirkiest stories. Talented would-be presenters – we’re talking LA here – would be lining up at the Times’ Spring Street entrance for auditions. The overview would be delivered with a soupçon of drollery (no Daily Show stuff) – just enough to encourage users to keep coming back for more.

Filed Under: Frontpage Tagged With: ,

Maybe what your news organization needs is a 'spontaneous bashing together of ideas'

March 18, 2009 by

[Editor’s note: The past week roiled the journalism business, as the Seattle Post-Intelligencer went to online-only, the former Rocky Mountain News staff tried to revive the paper as an independent website and Clay Skirky painted a revolutionary picture for what is happening in the industry.

Rather than take a hipshot off those headlines, though, we’re going to be proactive on OJR this week, starting with this piece from Eric Ulken, who offers a roadmap for established news organizations to enliven their online efforts.]

In a nondescript training room in the BBC’s White City building in West London, about 80 people are huddled around tables with placards bearing names like “Dr. Who” and “Top Gear” [BBC TV show titles], engaged in discussions on topics ranging from user-generated content to alternate-reality gaming.

The assembled thinkers and tinkerers represent many different arms of the British media behemoth, from radio news to Web production to technology. About the only things they have in common besides an employer are an interest in innovation and an eye to the future.

They’re taking part in the second BeeBCamp, an “unconference” in the tradition of BarCamp (and partly inspired by the Guardian’s GameCamp) that aims to bring together forward-thinking staffers and a few outsiders to talk about themes loosely related to the future of the BBC. [Disclosure: I was one of those outsiders, and, in the everybody-pitches-in spirit of the unconference, I talked about my work in data journalism at the L.A. Times.]

BeeBCamp, according to the BBC blog’s write-up of the event, “is designed as a collective, spontaneous bashing together of ideas, with no set structure to the day.” A whiteboard goes up first thing in the morning, and anybody who has an idea for a discussion or presentation claims a spot on the schedule. For example, one participant wrote: “We own twitter.com/bbc. What should we do with it?” (Some ideas here.)


On the whiteboard with the morning schedule, each show title corresponds to a table. Here’s a shot of the afternoon schedule.

I’m a little late with this post, as it’s been almost a month since the Feb. 18 gathering. There’s already ample coverage of the discussions and presentations (plus tags on Twitter and Flickr), so I won’t rehash all that. Instead I’d like to consider the broader idea of BeeBCamp and similar gatherings as they relate to the need to foster innovation in traditional media organizations. BeeBCamp and events like it are great examples of how “big media” — often seen as bureaucratic and impenetrable — can break down walls, open themselves up and facilitate the development of new ideas.

Why might a media company want to host an event like this? Some reasons:

  • Silo-busting: BeeBCamp brings together staffers from disparate parts of a huge institution — folks who might never have a business reason to talk to one another but whose goals and interests mesh, often in unexpected ways. (I got the feeling a number of the BeeBCamp participants had never met before.) The interdisciplinary nature of the gathering is what makes it so useful, as experts apply their unique perspectives and skills to common problems.
  • Openness: Everything at BeeBCamp is on the record, unless somebody holds up a sign that says “unbloggable”. This means a lot of what is said will get rebroadcast and commented on by people outside the organization, which is, at the least, a way of showing the world that the BBC is thinking and talking about the future, and at best a way to engage in an informal dialogue with the audience.
  • Innovation: Sometimes it’s useful to get away from the desk for a while and talk informally with colleagues. Not the ones you sit next to, but the folks across the building (or across town, or across the country) whom you wouldn’t ordinarily interact with. Crazy, silly ideas flow, which beget less silly ideas, which occasionally lead to completely sane and doable ideas. And because people are free to blog the discussions, there’s a good record of what’s said, which can be a useful starting point for follow-up discussion and action.

BeeBCamp is just one example of how media organizations are opening up the process of innovation. Here are some formats that have been used:

  • Hack day: This concept, which originated at Yahoo, typically calls for giving techies (often working in concert with product and content folks) 24 hours to build an idea into a functional prototype. After trying out the format internally in 2005, Yahoo conducted the first open hack day in 2006 and continues to do both internal and public hack days. Matt McAlister, one of the instigators of hack day at Yahoo, is now at the Guardian, which did its own internal hack day (with a few outside guests) last year. McAlister has a round-up of the results, complete with video highlight reel, on his blog. (I’d be interested in hearing if other media have hosted hack days.)
  • Meetup: The Chicago Tribune has been making good use of meetups (or tweetups, i.e., meetups organized via Twitter) to engage in informal dialogue with readers. It works like this: The Trib (in the persona of Colonel Tribune) invites local bloggers, twitterers and interested readers of all stripes to meet – no agenda — usually at a local bar. The result: Ideas direct from readers, kudos in the blogosphere and good karma all around. Last year the Trib also invited local bloggers to tour the paper.
  • Unconference: BeeBCamp, BarCamp and the recent regional NewsInnovation BarCamps fall into this category. Here’s how you might organize an unconference in your organization: Find interested colleagues. Bring in some clever outsiders. Get them talking about the future and see what happens. Make it clear to people that what’s said is on the record. You want folks to feel free to blog and comment about what they see and hear, for reasons mentioned above.

So, what’s the result of all this interaction? I asked Philip Trippenbach, the BeeBCamp organizer and the BBC’s “serious games” guru, if he had examples of products that have come out of BeeBCamp discussions. His response:

Sorry, but I can’t give you any examples of where this has happened at the BBC — yet.

There is one good concrete idea that came out of BeeBCamp: setting up a BBC-wide innovation database. Prototyping this is trivial, and that’s happening, but the tough thing is going to be overcoming the institutional/bureacuratic hurdles to implementation.

However, this isn’t to say that BeeBCamp has had no impact — far from it. I can’t count the number of interdepartmental contacts and discussions that arose as a result of it. This is the sort of interaction that leads to better cooperation and information-sharing across the company. It’s not to be underestimated. Many, many projects coming out of different departments will be informed by this kind of information-sharing through the company. What’s more, I know of two other events that are being planned in the wake of BeeBCamp, and with the same aim: get more New Media people from across the corp sharing and getting to know each other.

What an event like BeeBCamp and its successors does is wake up the community. It takes a community to raise a child, it takes a community to find a phone, and it takes a vibrant, active, connected community to break new ground in media. That’s what we’re doing with BeeBCamp: stoking the flames, so the embers can forge steel.

If you’ve held events like these to promote innovation in your organization, please share your experience here. And if your company hasn’t started bashing together ideas this way, why not be the catalyst? If the BBC can do it, so can you.

Filed Under: Frontpage Tagged With: ,

Taking a ride with carousels

February 4, 2009 by

Are rotating displays of Web content an effective way to promote news stories? This is the second in a series of articles about findings from the studies conducted for the member of the DiSEL’s Eyetracking Research Consortium.

One challenge that faces all of us who have a wealth of content on our Web sites is how to best promote it. Unlike a print magazine or newspaper there is no big stack of paper to provide a clear physical indicator that there is much to read and experience beyond the front page.

Although we can debate the effectiveness of using a Web site’s front page when it comes to promoting content1, our industry is trying a variety of methods to tackle this challenge. One method is the “carousel” – or a rotating display of a site’s content that appears in a dominant spot on the front of the page.

You can see a variety of carousel styles on sites such as MarthaStewart.com, aol.com, msn.com and even the newly redesigned whitehouse.gov. This past October, the Yahoo! Developer network launched the “carousel control” in their user interface library. They describe it as a widget that provides a means for “browsing among a set of like objects arrayed vertically or horizontally in an overloaded page region.”

So, the obvious question from the DiSEL research consortium was: Do carousels work on news sites?  Also, is there is a preferred design style that is most effective? With the help of page prototypes created by USAToday.com2 we put some carousels to the test. Here’s an overview of some of our findings.

What we did

In July of 2008 we tested 54 people with a mean age of 31. About three-fourths of the participants were women and one-fourth were men. Most had some college education.

This study was conducted in conjunction with two others that explored the ideal number of links and images on home pages. (More on these studies in future columns.) Test subjects were solicited via Craigslist, local newspaper sites and blogs. Each participant was given a $20 Target gift card for participating. The entire test took about 40 minutes per participant.

The third test conducted was the carousel test. Users were directed to one of three home pages and asked to “browse the site as you normally would” and to “tell the experimenter when you have seen what you would like of the site.”  If test subjects browsed beyond five minutes, they were asked to stop.

While users browsed the site, we tracked their eye movements using the Tobii eyetracker.  

After the browse time, users completed a questionnaire that assessed their thoughts about the site’s effectiveness and collected demographic information.

Here are the three different home pages viewed, with links to the actual test sites.

Arrow version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on navigational arrows in the upper right of the carousel element. Seventeen of the 54 people tested saw this version of the carousel.

Dot version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on navigational dots in the upper left of the carousel element. Nineteen of the 54 people tested saw this version of the carousel.

Thumbnail version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on thumbnail images to the left of the main image in the carousel element. Eighteen of the 54 people tested saw this version of the carousel.

What we found

To make these results useful to those thinking about carousel use as a promotional tool, we examined the users’ eyetracking and also asked them survey questions to provide us with some of their overall impressions.

Survey says….

As the chart below indicates, we found that the type of carousel used did not seem affect how engaging users found the home page. Interestingly, though, we did see that users who viewed the home page with the Thumbnail version of the carousel, felt more strongly that the Web site was easier to navigate.

Those viewing the Arrows version also had a stronger desire for more stories on the home page. This could be due to the fact that the arrows navigation did not clearly indicated the number of stories available in the carousel.

Another result worth noting is that users viewing the Thumbnail version of the carousel seemed to indicate more than the other two groups that the overall site was easy to navigate.

All three groups were fairly neutral when it came determining which stories were most important.   The carousel style did not seem to provide them with a clear indication of story hierarchy.

In light of that, we also wanted to know how did users would respond to this question:  What was the headline for the main news story on the site?

As the chart above indicates, is seems that users who viewed the Arrow version of the carousel were more apt to say the first story appearing in the carousel was the “main” story. Those with the other two versions were more apt to say that it either all or some of the stories that appeared in the carousel element.

All these survey results – while purely observational – may suggest that editors ask themselves what their goals are with one type of carousel-style presentation over another. Obvious navigation – such as thumbnails – seems to encourage users to view the site navigation as easy. It also may be an indicator to users that all stories within the carousel are of equal importance.

But, this is what users SAID. Let’s take a look at the hotspots to see what they DID.

 Eyetracking shows…

Eyetracking offers researchers valuable information about where users actually look on a site. It is accomplished by calibrating a user’s pupils with a small camera hidden in the base of the computer monitor. Calibration takes only a few seconds, but the tracking results allow researchers to know where users’ eyes went within a centimeter of accuracy. (For more on how eyetracking works, click here.)

We can get a variety of data forms from eyetracking. An aggregate view of what viewers saw is displayed in a “hotspot” or “heatmap” of the Web page studied. The chart to the left details how to read this data.

We generated hotspots for users’ fixations on each version of the carousel. Here are hotspots from the top portions of the page, which seemed to show us the most interesting data about the pages. See the actual hotspots from the pages below.

Past results ring true

As eyetracking researchers, we always will spend some time observing what trends are similar to results we found in past studies. In this case, we found two things worth mentioning:

  • The areas of the photos that got the most fixations were faces.
  • Top navigation gets the most use.

    Past studies have shown that faces in photos are the areas where eyes tend to fixate. From observation during this study (and the heatmaps below) you can see that this is true again. No matter what carousel navigation style was used – and regardless of the size of the photo or the size of the person in the photo – users tended to look for and find that human element to relate to. (Stay tuned: In a future column, we will go results of a study conducted with prototype pages from the DesMoinesRegister.com that experimented with size and quantity of images on a home page.)

    We also saw that the carousels that employed top navigation elements (Arrows version and Dots version) got more clicks than the Thumbnail version. Other factors (discussed below) contributed to this observation, but it is interesting we consistently find users viewing and using navigation more if it runs along the top of a page or page element.

    Attention to change

    One clear observation is that the Dots version had a higher percentage of user fixations on all elements on the top part of the page than the other two versions (Arrows and Thumbnails).

    Why? Well, one clear difference here is that the navigational dots changed color when story changed. The change had high color contrast as well – from a blue dot to a white dot. The moving dots seemed to draw attention to the page overall.

    The Arrows version had no visible change in when stories changed in the carousel. In the Thumbnail version the box around the image changed when the story changed, but the movement and the change in color contrast was not as marked or clear as the dot changes.

    So it seems that the moving navigational dots in the Dots version encouraged a higher percentage of users to view all aspects of the top portion of the page. For example, only about half of the users looked at the page headlines on the arrows and thumbnail pages, but closer to 70 percent looked at this list when the dot navigation existed.

    Interestingly, though, even though there was a higher percentage of eyes on the headlines in the Dots version, there were less total clicks in this area of the page than on the other two. In addition there were more “dead” areas – or areas with zero eye fixations – on the tops of the pages with the Arrows version and the Thumbnail version than on the page with the Dots version.

    The type of carousel used did not seem to affect the number of clicks on the carousel photo and the corresponding headline and blurb.

    These observations seem to suggest that if you are going to use a carousel element it may be best to place navigational elements above the display elements and to utilize a navigational design that clearly indicates the change from one story to the next.

    But – what do you think?  Below are the hotspots from each carousel version. We look forward to your thoughts and comments about what you see – and why.   Post your questions here. We’ll respond.

    Arrows version 

    Automatically changing carousel that allows the user to control the rotation of the stories with navigational arrows in the upper right of the carousel element.

    Dots version

    Automatically changing carousel that allows the user to control the rotation of the stories with navigational dots in the upper left of the carousel element.

    Thumbnails version

    Automatically changing carousel that allows the user to control the rotation of the stories with the use of thumbnail images to the left of the main image in the carousel element.

    1 Some news sites editors have mentioned “off-the-record” that less than 20 percent of their story traffic comes from people linking to pieces from the home page. The rest comes from blog posts, Google searches, Delicious links and other forms of online promotion.

    2 Many thanks to DiSEL Research Consortium members Josh Hatch and Kristin Novak at USAToday.com for creating the testing materials. Also, thanks to UNC-CH Ph.D. candidate Bart Wojdynski for his assistance with designing this study and running test subjects.

    • Filed Under: Frontpage Tagged With: , ,
    «Previous Page
    Next Page»