Images on the Web

I'm having a bit of a hard time with this week's assignment: find examples of good and bad websites in terms of how they integrate graphics into the website. I'm still stuck on my first two shared websites (tastespotting and irish2000) as fairly archetypal examples of good and bad design--and that holds true for what they have (not) done with integrating visual images. But instead of beating the dead horse by describing these websites, I thought I'd take you on a look through three of the major recipe clearinghouse websites: Food Network, Epicurious, and Food.com (formerly Recipezaar), and briefly discuss the highs, and lows, of each. For each site, I searched for "burger," and selected the first search result to analyze the page.

Of the three, Food.com was the least effective visually for me.

First, the layout is cluttered--the header bar is fairly clean under the advertisement, but as soon as you get to the recipe itself, it's written in the same font as the navigation suggestions to the left and the advertisements, information, and suggestions on the right. For this recipe, there is not image of the finished product, or any of the steps along the way, although other recipes on the site do have more directions. Overall, when I was looking at this website, I did not feel that the visuals--the fonts and images--were helping me find the important information.

I'm torn in ranking my two other websites, but I think Epicurious comes in a close second for me.

Epicurious was significantly cleaner than food.com: first, the layout is a bit simpler: we still have a lot of advertisements and some navigation integrated in the header bar, but when you get down to the "meat" of the page, the recipe takes up 2/3 of the horizontal space, with advertisements and suggested links occupying the right third. Epicurious also uses more variety in font size and emphasis: the title of the burger is larger than anything on the page, making it clear what the important information is. Subheadings, such as ingredients, are larger than the narrative description or their items, making it easy to scan for the section that you need. They also include an image for every recipe (as far as I could tell), and use icons like the blue ribbon to indicate popular recipes. You can also easily tab to user reviews, more photographs, and other information, making the site more interactive and communal.

For me, Food Network just barely beats Epicurious--but just barely.

Food Network has many of the same layout features as Epicurious: the name of the recipe is the largest font on the page, and headings and subheadings are larger than their contents. Each recipe (that I found) has an image of the recipe, and when it's contributed by a Food Network Chef, shows an image of the chef, as well as the title of the show and episode where the recipe was featured. Each recipe also shows a ranking, from 0-5 stars, based on site averages in the header bar. As with Epicurious, the recipe takes about 2/3 of the space, and ancillary content is in the right third. Unlike Epicurious, however, similar recipes are placed on the left under the image--which I find helpful because those are the links I'm most likely to click--and having them isolated next to the recipe helps me find them. What most sways the image use battle for Food Network is the header bar--although there is still an advertisement, I find their header much cleaner and easier to use than the one on Epicurious. It's not a perfect design, but I find the visual layout slightly more appealing.

So, there you go--three quick website reviews on recipe sites. I'll fully admit to using each for different reasons, regardless of their design properties--but in terms of visual layout and ease, Food Network is my favorite.

Here are the specific websites I looked at if you want to see:

Food.com: http://www.food.com/recipe/kevin-garnett-burger-405025

Epicurious: http://www.epicurious.com/recipes/food/reviews/Open-Face-Crab-Burgers-with-Red-Pepper-Dressing-352591

Food Network: http://www.foodnetwork.com/recipes/bobby-flay/tuna-burgers-with-pineapple-mustard-glaze-and-green-chile-pickle-relish-recipe/index.html

What do you think?

Hypermedia: The good, the neutral, and the really ugly

In thinking about sources of hypermedia, I tend to categorize websites into three basic categories:

• The Good: those that are so amazing I wish I knew how to design that well
• The Neutral: those that are ok....but nothing too special
• The Really Ugly: those that make me think they were designed circa 2000 (or earlier)...and not updated since.

While each has the potential for being rich sources of information, I know that I'm much more likely to be able to focus on the information when sites are well designed and, to some degree, predictable, if the information is something that I really need, I can deal with worse design.

One of my favorite websites to use as an example of an "I wish I could do that" is TasteSpotting. For me, I find it extremely clean and easy to use--it's a great way for me to browse recipe ideas and figure out what looks good--and what doesn't. They draw from several great sources in the blogosphere, and just give a nice snapshot of current trends in "home cooking." It's not perfect--the search engine could be a lot more powerful--but I love the combination of images and text that create a wonderful overview--and provide inspiration for what I'm going to have for dinner tonight, as well as what I'll have in the future.

In terms of a really ugly website, and I hate to say this because the organizers really do run a wonderful festival, is Irish 2000. While the green font on a black background might be culturally appropriate, it's too reminiscent of DOS to be particularly effective. Additionally, no matter what browser you open it in, subsequent pages load below the anchor bar on the left hand side rather than in the frame, making it impossible to get information without scrolling down. The layout is cumbersome, and information difficult--if not impossible--to find.

When evaluating a website as "good design" or "bad design," I think these are my high leverage questions:

1) How easy is it to access the information on each page? Is the layout distracting? Too many flashing icons/colors?

2) How easy is it to navigate between pages? Are links clear? Is it easy to travel in both directions? How many clicks to get back to the home page from any given page?

3) How easy is it to find a specific piece of information? Is there a search and/or index function? How many layers do you have to "dig through" to get to any detail?

What questions do you ask?

Kate