Evaluating the Echo

The Northumberland Echo website.
Ever been to it? No? You’re not missing much.

When the page first appeared, I didn’t think I had the right site. It didn’t look like a newspaper company (aside from the nameplate font) until I read the navigation bar links at the top. The page has more ads on it than news. And that isn’t to say the page is cluttered. Actually, the page needs more. There is so much right space to the left and the right of the page. The news occupies the middle of the page, which is an awkward placement to begin with. The column is narrow and long, stretching nearly the whole length of the page. Thank god it’s divided into sections: top stories, local news, sports, etc. or my eye would move away from that long block of text to something more exciting, like… the ads, which offer the ONLY color on the entire page. The white background is so boring that I want to cry.

I shouldn’t want to cry about your website.

The pictures next to the news stories are a great idea, but a poor execution, because they are too small. It’s hard to make out the people in them. With all the extra space next to the column, the designer should have widened the column and enlarged the photos. The bullets work well, also. I think navigation is simple and fluid, and the stories are hierarchically arranged. Great, great work. That said, The headlines need to be larger than the text underneath the bullet, which is the start of the story. They run together, and the headlines don’t scream “read this story.”

If a headline can’t do its job, why is it there?

On the topic of size, again, I just can’t get over the fact that the words in the ads are bigger than any of the words that are actually related to the Echo’s news.

The video irks me. Not the idea of it, because I think having a visual component on the page is necessary, but I hate the placement. It breaks up this great column of textual news. I wish it was next to the news sections. This would be a better place, so that the video doesn’t look randomly placed. Also, since it includes video stories from all news sections, it doesn’t belong to any news category specifically, and shouldn’t look like it does. It needs its own place. Right now, it looks like the video belongs to the top news story of the day (the story about the Bluff Point consultant.) It doesn’t.

Already, readers are confused.

Additionally, I don’t like this layout, because everything is so vertical. It’s divided into three columns and all the columns extend down the page with everything stacked up. I think it’s boring, and I think it causes excess scrolling. I’d prefer a wider, horizontal layout. More could fit on the screen that way, too.

As for the navigation bar, it needs to be bigger, bolder. The gray doesn’t work for me. I want the bar to be the first thing I notice, since it’s the only thing that even told me this was a news site. The search bar would work better at the end of the navigation bar, I believe, too. The search bar goes unnoticed where it is now.

I like the weather box. Nice touch.

So, what to do about this boring page that isn’t maximizing its space or potential?
Revamp.

Here’s my suggestions:

1. The nameplate stays as is, because I have no problems with it. The weather box moves up to be centered with the name, giving more space between it and the nav bar.

2. The navigation bar would be deeper and the links within would stay the same size, but be done in bold font. The tracking would be reduced between words and evened out, since intervals are currently inconsistent. The search bar would move to the right end. Color? I’m thinking white with black words (the bar can be white because the page will not stay white).

3. That online delivery ad and the weekly poll move to the right side of the page. The column with the news moves flush left.

4. The date gets a font size upgrade. It stays in red, for notability.

5. The headlines that follow the bullets would be larger by about three font sizes and bolded. Underline would stay. The size of the stories that start underneath would stay the same size, as would the dates.

6. The news categories (standing heads) get a font size upgrade to account for the new size of the story headlines. Font size scale needs to stay how it is now.

7. The news column would stretch from the start of where the online delivery ad is now to the right edge of the first ad column. Pictures would be enlarged within the column.

8. Ad column moves over to be in line with the Old Dominion business search, which would sit on top of the ad column.

9. The video would move to be at the bottom of the news column, stretching the same width as the stories.

10. The ads at the bottom would be separated from the news, which is more important, by a thin rule across the page.

11. The background color wouldn’t stay white. I’m thinking light blue.

How would you change the Echo?

Speechless

There are no words that can express, or spare, the tragedy of a bad website.
Sometimes, you can only drop your jaw in horrified wonder and say “dear God, what were they thinking?”

Someone at Arngren.net has never heard the phrase less is more. This page is so bad, it pains me.

Take a look: THE TRAVESTY

There is way too much on this page. The eye doesn’t know where to look. No particular item stands out, and there is no fluid movement across the page. It’s equivalent to condensing a department store catalog to one page with no sections.

The boxes seem randomly placed and do not offer a modular feel to the page, as intended. The lines of the boxes are too thick and begin to draw attention to themselves, not to the items they are boxing. The boxes also jut over onto other items or into the index and aren’t properly sized.

It is also impossible for me to tell which product title goes with which image (and that has nothing to do with language). It is such a jumbled mess. The prices and product names are different sizes, which I don’t like. The red is hard to read, too.

In the middle of this collage of products is what appears to be a group of links, similar to those on the left-hand side. I do not know whose face that is, but it keeps reappearing. It’s silly to have this cartoon face surrounded by real images.

The scrolling is entirely illogical. You have to scroll horizontally and vertically to see the entire web page, but the scroll also goes too far and you get a large expanse of white space on the right side. I don’t understand why the page is too large for its content.

What appears to be a third index in the strangely colored yellow box is adding to the confusion with links. Are these indexes all the same, or are there multiple indexes? And why is there one in the middle of the page? It seems that the left-hand index has all the links and the other indexes only some of the longer list.

The navigation is absolutely terrible. I haven’t got any idea how these items were arranged or what the colors are supposed to mean. Are the products in the colored boxes supposed to draw my eye? Are they special somewhow? The buttons don’t fit in the yellow column, either (the ones that say sign/view my guest book).

If we continue on our horrific tour, we find a lot of flash animation at the bottom of the page. Christmas flash. I’m sorry… Christmas was 4 months ago. I don’t understand. It might have been cheery in December, but now it’s just evidence that the web page isn’t routinely updated. The waving Santa is now off-putting, rather than jolly. Holidays are not year-round. Also, the holly by the site name (which should be larger) is competing with the flash helicopter. What do these two things have in common, besides starting with h? Oh yeah, nothing.

And wow, to top it all, there is an inappropriate flash on this page! This site appeared to be a technologically oriented business page, but now, there are playboy models. I don’t see the connection. This must not be a family company.

Speaking of, what is this business anyways? I see no link related to what this company is about, what it’s selling, or how to contact the staff. Who even works there? Anyone? Is it a scam?

All they have going for them is the nice search bar capability. Too bad typing in a product name leads you to a drab, blue and white page of links. Confusing? Yes. Obnoxious? If you want to look at multiple objects at a time, yes. You’d have to pull up three or four windows. However, this page is more organized than the homepage and a nice break on the eyes.

Arngren, I worry about your future…

Suggestion? Gut the whole thing and start over.

Sidebar-worthy Story

This story, “Search for an Identity,” about a new Clay County highschool is screaming for a public poll:

Where do you stand on the issue?

Infographics That Cause Reactions

Here are two newspapers that published infographics on the damaged reactors of the Japanese nuclear plant:

I believe that this is an in-depth and informative infographic that really gives the reader a sense of how these machines are supposed to work and how they were affected by the earthquake. However, it’s very scientific and not eye-catching. There’s a lot of text here. Also, as interesting as learning about the parts of a nuclear plant is, I’m more interested in how the fires and leaking radiation have affected the region and the people.

This infographic does a better job of drawing me in immediately. I like getting an image in my mind about where this plant is and the distance between reactors. This paper allows me to see the size of the region thats been affected. That’s a large space. I also like the day by day approach, also in the graphic from the WSJ. I feel more emotionally from this graphic than I do from the WSJ graphic. The WSJ infographic is so technical that the impact for me is lost.

There are parts I like about both of these. If one could combine the technical information from the Wall Street Journal with the image from the Bakersfield, I think that’d make the perfect infographic. (Maybe without the dry cleaning ad).

Powerful Photos

Pictures hold memories, share experiences, and capture moments. But most importantly, pictures tell stories.
Some photos say more than words ever could.

This photo is no exception:

Firemen raise the American flag at Ground Zero in NY

The graphic invokes raw emotion and really captures the feelings, positive and negative, that resulted from the Sept. 11th tragedy. Taking the memorable painting from Iwo Jima and recreating it, likening it to this experience, made the story impactful. Among all the photos of fire, destruction and death, this photo captured the strength and the patriotism of all Americans, and provided an inspiring, positive image against a background of suffering. It shows ordinary people rising to an extraordinary challenge. The use of gray around the men and flag allows the colors (mostly red, white, and blue) to pop, and emphasizes the historical symbolism. The eye is drawn to the flag first and then naturally follows the pole line to the men. It works perfectly.
This picture is icnonic and will be remembered, as September 11th will, for a long time.

Back in Black and White

A newspaper without art or pictures is a rare sight in 2011, but even rarer is a front page with no color at all.

How does a gray block of columns interest readers? Well, it’s not easy.

Here’s a look at two papers that made it work:

The headlines are eye-catching, and the font types are similar across the page, working together as a cohesive unit. The decks draw readers in step by step and make the stories easier to follow. They also break up the monotony of the long, vertical columns of text. The thin rules down the page are not distracting and are just thick enough to provide the necessary divisions without drawing attention to themselves. The large, italic headline across the top indicates the main idea and gives the reader an overview of the page. Everything below is a specific peice of this larger story, so the reader can pick and choose what to read based on interest. I do think the headline would have worked better sans-serif, though. Or at least not both serifed and italicized. This newspaper also fit more text on the page than the other two, without being overwhelming.

This paper's headlines are the most easily visible, and the fonts work well together with more variety in typeface than the New York Times. The gutters are wide enough that the paper has breathing room. In the Baltimore American and New York Times, the columns nearly ran together, creating a chaotic look, especially with the skinnier columns in the Baltimor paper. The headlines are all at the top (except one) here, so it is easy to see the divides between stories. One simply reads down and back up until the story ends and the next headline begins. The one headline further down in the page has the illusion of a pull-out quote and works the same way, breaking up the columns of text and the strict modular feel of the paper. The headline at the top is a great size and the sans-serif font is easily readable. Again, I wish the nameplate was bigger, but I feel the nameplate's larger size makes it more visible than that of the Baltimore American. The white space works best in this paper. Though the Baltimore American had more white space, the white space was uneven and looked awkward, whereas here it is used consistently and sparingly. This paper is the most organized, and I think it works well. The subheads are a great size, and all the text is the same size below. This paper makes scanning the news easy.

And here’s one that didn’t:

This newspaper's set-up is confusing. The wide middle column of text under the main headline goes up to where the deck starts, creating confusion. At first I thought I was supposed to start reading here, and then I thought each of the three columns was a separate story. In fact, the middle column continues from the bottom of the first and then ends with a table. The third wide column begins another part of the Titanic story. The skinny columns to the left look funny next to the larger columns across the center and right of the paper. They look like they contain ads, but it's hard to tell. If that is the case, the column should contain a mix of stories and ads to break up those small boxes. These columns also use smaller text, which I don't like. The text (aside from heads and decks) should be the same size across the page. The main headline is also larger than the nameplate, which is lost in the background. I also think the second part of the two main decks is too large. The text should decrease in size as it goes down, but the second phrases are in bold and the same size as the subhead before it, so it stands out more, which is backwards to me.

The Inclusion of Infographics

From the Desk of Rachel Bevels

Design Editor, The News Daily

Charles,

I have a few suggestions to run by you. In considering the layout of the paper, I concluded that infographics would brighten the page and add visual depth to the news. I believe an infographic could give the reader the gist of the story quickly and entice them to read the rest. Infographics also highlight main stories, allowing the reader to see clearly which stories are most important. Infographics would also open up the possibility of running a series (3 days or so) on a developing story. I think this visual component would allow for variety and could even disrupt the modular layout of the page without causing confusion or chaos. I think it could be good for our loyal readers who see the same paper design day after day.

In addition to infographics, I want to suggest adding typography over the photos. I believe this would eliminate dead space in the pictures and allow us to add energy to the paper. The typography is one of the most important aspects of the front page, and I think doing something visually arresting could really pay off. The picture and typography could build off one another, making each of them stand out more than otherwise and, again, it would emphasize the importance of a story. Also, it eliminates confusion about which story the pictures belong to. Finally, the space we save by imposing letters on images would allow us to add more news to the front page or add white space for a less cluttered look. It opens up a world of design opportunities.

I also advise that some stories be boxed, as they define boundaries for the reader and eliminate confusion. They make the paper look more organized with clean-cut lines and definition. Boxed stories could also indicate importance, as only special stories are usually set off in boxes. They also free up space, because two stories can butt against one another without being mistaken as one story. Pictures can then be positioned in more ways, because the box prevents the picture from being confused with another story. Boxes also allow for background colors, which would brighten the page and further emphasize importance/boundaries. With a wide audience, we need to incorporate a wide range of designs to appeal to the most people. With so many dailies in circulation, we need to offer something atypical, something more innovative to keep our readers coming back.

I hope you will consider these design suggestions. I know they would enhance the page. I have included examples of papers that I feel employed these tactics successfully.

Rachel

I like the way the words wrap around the cutout of Reagan here. I also think the arrangement of the text and headline within the picture allows the image of the former president to be bigger.

I like the infographic here because it adds color to the page and emphasizes that particular story. The design works well, because the large story/infographics of the lightbulb are on the left, allowing for pieces of stories inside to be featured on the right, where the reader would flip the page.

I like these pictures here because they add depth to the story of the treasure trove by revealing the treasures through multiple photos, which unless done in this manner would be too many photos for the front page. I feel like these pictures are a narrative of their own. The photos really draw in a reader and make this story stand out among the others.

Legibility = Likeability

The Tuscaloosa News staff has an eye for design…

When writing works well:

The fonts used on this page are similar, with the main variation being heaviness of type (the main headline is boldest). The most important headline is sans serif, so it is distinguishable from the nameplate and highlights the heirarchy of the news. The other headlines are all done with serifs, but the font is similar to the sans serif font, so it isn’t distracting. The tracking is perfect, and I have no trouble reading the words. I also enjoy the typographical symmetry of the left and right. The INSIDE stories stand out well in all caps, using those extra stories to draw in more readers. The red words at the top of the page are a little big, especially since the color makes these words stand out already, but I like that the red in the headline is pulled from the red of the player’s jersey. The main headline needs to be bigger, something more like a 48 point font, but the type family works well, I think. It’s simple. And this is the only paper that used typography with a natural flow, decreasing down the page.

But these papers missed the bull’s-eye…

For fool-proof font flubs:

I don’t know who let this print. Letters are overlapping other letters all across the page (even in the nameplate)! The kerning has clearly been altered too much, sacrificing legibility. Also, I think the swimming headline is a good size, but it looks strange because every other headline on the page appears to be the exact same size. All fonts are serifed (is this a word?), which creates a dull look and only makes the problem with kerning worse. They are also all bold. If the news staff wanted to use that font so badly, they should have used various forms, like condensed, (though they have enough of that going on), italic, bold, light, etc. The subhead is also too small for my taste. Being the only one, it needs to shine on the page, not fade into the woodwork. If you want a paper to crash and burn, use typography like this.

Testament to terrible typography:

The typography here may not be as bad as that of the Rockdale Citizen, but it’s worth mentioning in the same category. The headline about Beshear looks ridiculous with that much leading. The white space is just awkward while reading. As we saw with the others, this paper hasn’t chosen headline sizes well. I assume the main story is the board discussing nutrition, but honestly, do I know? No, because every story has a similarly sized headline. Where is the heirarchy? And where is the variety? Every headline is in that same sans serif font. Sure, it’s legible, but if the headlines can’t interest me, I’m not going to read them. The caption also might have been better in an italic font, not bold, like everything else on the page. Or maybe not in the same size font as the stories. It is too similar to the font on the rest of the page. I like captions to assert themselves as such — same with headlines. While on the topic of obnoxious fonts, I also dislike the nameplate. From far away, I wouldn’t be able to read the name with all those fancy, curling letters. If I were walking down the street in a hurry, I would buy the most quickly recognizable paper (not this one).

State of the Union 2011

We all know the economy is suffering. But, Obama remained optimistic about innovation and reform in his State of the Union Adress.

For those of you who missed the speech, here’s the Reader’s Digest version

In my words…

“This is our generation’s Sputnik moment.”

Obama calls for innovation through education reform, energy conservation and national deficit reduction.

And in theirs…

“State of the Union is better; state of Obama is strong.”

—The Atlanta Journal Constitution

“Forward together, or not at all.”

—The Richmond Times-Dispatch

“Obama Ushers in Era of Divided Government With Appeal”

—The San Francisco Chronicle

The Times-Dispatch has the best headline in my opinion, because it expresses the message of the address, not just a vague opinion about how it went (*cough AJC *cough). The direct quote is always a nice, effective way to draw in the reader, offering context without specificity, which makes the reader curious. The Chronicle’s nonsense about an era of divided government only appeals to people truly interested in the politics of Obama’s speech, not his emotion, not his desire to regain the trust of the people and move forward as a country. Plus, when has the government not been divided? Also, the AJC article was an editorial, and reflected one reporter’s opinion on the story, which may be interesting, but only in conjunction with an objective article of the speech. I couldn’t find a full text of the address on the site.

Want more than the RD version? Check out “the scoop” for Obama’s main points or click on the blue links above.

 

The Good, The Bad and The Ugly

THE GOOD
El Economista (Madrid)

A tri-color design with character and variety. The nameplate is at the top and easily visible. The skyboxes are interesting teasers, but not distracting. Excellent use of white space and large typography. The infographic serves the function of text with the appeal of picture. The 5-column-design provides room to say a lot without getting too narrow or text heavy.

THE BAD
The Wall Street Journal (NY)

Too much black text. A boxy, vertical design, particularly with the mile-long columns on the left. All stories are given equal importance with size and typography. Without reading context, I dont know to which story the picture belongs (the one on the left? Below?) The nameplate is dull, though the serifs make it easy to read.

THE UGLY
The New York Post Online (NY)

A hot mess of colorful ads with little text. There are no bits of stories, only links to news (right next to gossip). Undies is the first word I see, which doesn't bode well for the reputation of the paper. My eyes keep wandering, distracted. The page is not informative. I find myself unable to take the NY Post seriously.

What do you think?