< Back to Design Stream

Case Study: Restaurant Websites

I was browsing through the restaurant websites on Design melt down. Uggh! Most of them are awful.

Common problems:

Problem 1: The website doesn't look like a restaurant website.

Land on the front pages of Brand's Vistro and it isn't immediately clear that you are on a restaurant website.

The site does have photos of the restaurant on the secondary pages of the website:

However, a restaurant website should really place such photos at the font. The experience of eating is a key part of going to a restaurant, and the representation of this experience should be at the forefront of a website.

Problem 2: Poor layout

Many restaurant websites have terrible layouts, which is surprising, as ease of navigation is often crucial to a restaurant menus (and by menus, I mean the ones you find inside a restaurant).

A visitor to a restaurant would most likely want to know about the experience the restaurant offers, the food available and location/opening information, with an online booking service being a secondary point of information. However, most restaurant websites often fail to correctly prioritise information.

Greystone does a much better job of conveying the restaurant experience than Brand's Visitor, but the navigation is far too cluttered. Visitors to the site will probably spend a couple of seconds trying to find the information that they want, which will distract their attention away from the images that convey the restaurant experience:

Slocum house has the same problem:

It's confusing where to look at first when you first visit the website. This confusion lowers the impact of the videos that showcase the restaurant.

ChinChin Chin Chin places way too much focus on PR and restaurant locations on the front page:

Click on the location and you'll get access to all the important links:

But then the user is presented with a further set of links before they can get access to the information they want:

Problem 3: The menus are awkward to browse.

It's not uncommon for restaurants to display PDF versions of their printed menus, which disrupts the flow of user experience.

Even when PDFs are not used, many online menus are awkward to browse:

Lone star Lone star uses JPEGs to display its menus (presumably taken straight from the printed menu) which creates obvious problems:

Paperplate Paperplate uses HTML for its menu. However, it is laid out like it would be in a paper based menu which results in unnecessary vertical scrolling.

Duffys Duffys menu also uses HTML but is formatted very poorly, making it difficult to pick out information.

The best of bad bunch

I didn't find a single restaurant website that was close to being good, but I did find a number of interesting elements that could be utilised in the creation of a well designed restaurant website.

Ruby Tuesday

Ruby Tuesday has an excellent video on its front page that pans around the food, allowing all the texture to be shown in an eye catching and dramatic way. Unfortunately, the video is of a low quality and so pixelated, which slightly detracts from the effect.

Vinsanto Vinsanto has a nice mix of old and new:

The rough paper adds a sense of traditionalism, while the shiny surface brings a modern and elegant touch.

Bergmann Bergmann uses a circles transition in its header flash banner. It's pretty gimmiky, but using circles could be developed (for example to reflect the circular shape of a plate).

When the flash movie finishes the logo appears. Swirly patterns are overlayed the content, which creates a sense of character (or would do if the rest of the layout was better).

Duffys's Duffy's contains a interesting shot of the restaurant.

Lonestar

Lonestar tries to sell the experience of the restaurant metaphorically. It's in an interesting approach and allows the website to stand out and leave a lasting impression.

Nature's Table Cafe

Nature's table cafe has an interesting feature called meet me at the table - it's essentially a glorified email to a friend link, but its presented in a more useful way.

Pizza Inn

Pizza Inn has a flash front page that scrolls to display the whole restaurant. Its a good way of showing the restaurant, although it questionable if the end user will make the effort to view the whole scroll, even though its only a short scroll (although in this case, its not an actual restaurant that is show as Pizza inn is a franchised chain)

Red Lobster

Rob Lobsters uses subtle flash smoke and fire effects to bring the static photos alive. A sizzling sound effect soundtrack plays which helps to instantly envoke the atmosphere of being in a stake house. The sound track would probably work better if it wasn't so loud and repetitive.

San Diego

San Diego makes uses of cutouts to display food. It's an effective way to draw attention to the food photos and make them stand out.

National Mechanics

National Mechanics displays in menu in a two column magazine style, which makes it easy to read. The sue of different weights to seperate the meal names from description aids the browsability.

Return to Design Stream

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.