Battle of the Burgers: American Fast Food Sites Compared

by on 10th August 2010 with 20 Comments

screenshot

Today’s post will be an intense battle as we compare the design and usability of nine major American burger joints.

These corporations pull in millions making me obese with their irresistibly tasty grilled double heart attacks with cheese and should have plenty of revenue to invest into solid web designers. Let’s see how they fare against my inscrutable eye for ugly web design.

Carl’s Jr.

I want to start with Carl’s Jr. (aka Hardees) because it’s one of my favorites in the lower echelon of fast food joints (McDonald’s, Jack in the Box, Burger King, etc.). Their burgers are big, messy, and packed with more flavor than most of the others combined.

Let’s see if their designers live up to their burger chefs.

screenshot

When you enter the Carl’s Jr. website you are taken into a sort of faux 3D Flash-driven apartment-themed interface with various clickable items scattered across the room and loud male-drool-inducing commercials playing on the television whether you want them to or not.

My reaction is not a pleasant one. This annoying Flash room idea has been done to death and while marketers think it’s a “richly interactive experience,” we users think it sucks trying to navigate a website while fighting motion sickness because the room jumps every time you move your mouse.

Fortunately there’s a navigation menu up top for those not willing to fight through the jumpy Flash world. Unfortunately, this merely leads to equally ugly pages.

Sorry Carl’s, but you provided us with a seriously weak start. Let’s hope the other sites won’t follow that turn of the century interactive room trend.

Jack in the Box

Jack is the best burger spokesperson on the planet. His witty, sarcastic and even rude demeanor make guys like me actually want to watch his commercials.

When you cruise by Jackinthebox.com there are no shortage of superfluous animations while your page is loading but when everything settles down the overall page design isn’t that bad.

screenshot

There’s a large well-designed graphic slider displaying featured menu items and a vertical navigation menu on the left. Everything is making sense and I immediately know how to find what I want. No interactive room UI in site.

But wait, not ten seconds after the page loads Jack walks out. As I said above, I love Jack so I’m amused but I don’t see a way to stop him from talking.

Experiences like this really ruin a site because it’s frequently the case that users don’t expect or want their computer to start loudly speaking at them. If you’re at work or at school you panic and try to close the window and/or hit the mute button as fast as you can and then try not to look embarrassed. Always provide a clear choice between quiet peaceful browsing and a loud crazy experience (at the very least give users a warning).

It turns out what Jack wants is to invite me into his office where, you guess it, an interactive room interface awaits! Somebody must have these things on sale.

screenshot

At least it’s optional this time but the fact that it’s still there and rudely pops out to invite me in annoys me. Thus far the burger site experiment is turning out a lot like when we looked at rock band websites.

Sonic

Carhops on roller skates, 99¢ large drinks and yummy tots make Sonic a favorite late night spot for my wife and me. Given the cool retro feel of the restaurants I had high hopes for their web design.

screenshot

I confess I didn’t spend a lot of time checking out this site. It was just too painful. Long load times, redundant animations and awkward photography made for an entirely unpleasant experience.

Rather than building a readable web version of their menu they just stuck the print version online, blew it up, zoomed way in, and force you to navigate by moving your mouse around while the words and pictures zoom by in an admirable effort to reproduce the feeling of eating a footlong cheese coney while on a three hour road trip filled with lots of twists and turns.

Take my advice, if you can help it, never visit the Sonic website.

McDonald’s

I must confess that while the mother of all fast food chains undoubtedly has the largest web design budget (and french fries so tasty they defy reason), I expected it to be among the worst from a design perspective.

However, what I found shocked me considerably. It was so… beautiful!

screenshot

Nice typography, amazing photography, clean layouts, intuitive navigation with breadcrumbs to go back, what more could I ask for? Would you believe it even works just fine without Flash and JavaScript enabled!? Cue music and rays from heaven.

It turns out McDonald’s is on the top of the food chain so to speak with restaurant web design. They are lightyears past anything we’ve seen thus far in literally every aspect. In fact, their site looks so good we just might feature it in our design gallery.

Here’s a shot of what it’s like to navigate the menu. Sonic web designers, start taking notes!

screenshot

Burger King

McDonald’s has a long standing rivalry with one particular burger chain: Burger King. Though Ronald might have the best fries in the land, he doesn’t come close to that smokey flavor of burgers cooked the way God intended: over flames.

Here’s what the BK site currently looks like:

screenshot

First of all, style points for being unique. This page definitely doesn’t look like any other burger site out there. The sounds effects are a bit annoying but you can easily turn them off.

The presentation of information and the usability of the interface are interesting to say the least. By default the modular 3D box theme features a seemingly random mix of menu items and promotional gimmicks.

The three sliders at the top control the ratio of fun, food and the famously hilarious King character in these boxes. If all you want is food, just crank up the food slider and turn down everything else.

I have mixed feelings about this site, it’s definitely unorthodox but it’s fairly attractive and almost fun for about ten seconds. However, the longer you spend on the site, the more frustrating the experience becomes.

As you navigate away from the home page, it slides away but remains in a tab at the left of the screen. Hovering over the tab brings it back, but only until you move your mouse to the wrong spot and then it zips away again.

screenshot

Try as you might, there is no way to simply return to the home page as it was without it being contained in this annoying tab that slaps you in the face every time your mouse ventures toward the left side of the screen.

Top Tier Chains

For those with more sophisticated palates, there are a few places that I consider to be premium, but still basically fast food, burger joints (no waitresses or plates).

These restaurants charge more and make you wait a little longer but provide you with a burger that has been freshly grilled just for you from a hunk of meat that has never been frozen.

I adore the delectable death served up by each of these chains and had hopes that their higher food standards would be reflected in their website designs as well. I was of course, quite wrong.

Culver’s and In-N-Out aren’t really that bad, but they aren’t great either. Fatburger and Five Guys however, are just horrible.

Culver’s

screenshot

In-N-Out

screenshot

Fatburger

screenshot

Five Guys

screenshot

What Have We Learned Today?

For starters, we learned that burger websites suck. The important question here though is “why do they suck?”

Obviously, usability was a huge factor. In an attempt to be hip and appeal to young audiences, the burger marketers overshot their target demographic. Flash-driven game-like sites are far more likely to be appreciated by young children and immediately discarded by serious teenagers and adults who don’t want to waste fifteen minutes trying to figure out how many calories are in a Whopper.

However, beyond usability, there is an important aesthetic lesson to be learned, and McDonald’s is teaching it. So what’s so great about their site that the others just don’t seem to get? To demonstrate, the power of this lesson, I made a little graphic.

screenshot

There’s the answer, plain and simple. You’re selling food, so make the food the hero. Skip the games, gimmicks, Flash, and sound effects and make people hungry. Show them what you have with enough style and their stomachs will rumble.

I’ve said again and again on Design Shack that great photography takes the work out of good design and I’ll continue with my mantra. It’s not the only solution, but in many cases, especially with food, it’s the perfect way to sell your product.

A word of caution to those with little photography experience and no budget for a professional photographer, do not try this at home. Food photography is a tricky beast and if you don’t know what you’re doing, you’ll end up with something nasty that is more likely to make potential customers sick than hungry.

Conclusion

Despite being married to a woman who tragically suffers from the disease of vegetarianism, I fancy myself a connoisseur of finely grilled cow parts. Though I’m not surprised, I’m definitely disappointed by the lack of stylish web design in the fast food world.

Let’s hope McDonalds’ foray into admirably good design sets a trend that other burger joints will follow. Maybe in the future all fast food websites will be that pretty. Probably not.

Leave a comment below with a link to your favorite restaurant’s website. Let us know what you think of the design and how it stacks up to the examples above.

Comments & Discussion

20 Comments

Comments & Discussion

20 Comments

  1. Robert says:

    Wow, the McDonald’s website is very clean especially the food page although a little line-height would be appreciated.

    And I agree with the food photography you want to sell food, not make the audience wait for the website to load for fancy flash animations and sound effects.

  2. Mary says:

    Looks like the McDonald’s site went through a redesign. It sure didn’t look like that a few months ago! Good job on them; clean, easy to use, and I can actually find what I’m looking for.

    I just checked out my personal favorite in the fast-food world (Whataburger, mmmm) to see how their site looked, but it just made me sad.

  3. JamesVec says:

    I would kill for a Whataburger. I relocated to the east coast from Dallas and realized that there is no Whataburger or Chick-Fila.. Ultimate SADFASE :(

  4. Joshua Johnson says:

    James/Mary I’m in Phoenix and enjoy both frequently!

  5. blago says:

    Great post to start Ramadan with :-)

  6. Nathan Carr says:

    There is an interesting take with food photography. Dominos is running the new campaign that encourages their customers to take “real” pictures of Dominos pizza and send it in. The winning pictures get some sort of prize. Thought this was an interesting take.

  7. The McDonalds website is really neat. Shame the UK version is so poor! http://www.mcdonalds.co.uk/

  8. Laura Meider says:

    I agree that the McDonalds site is clean, simple and not over designed. All the emphasis is on the food images which is what should be expected on the site. Considering it is a fast food restaurant it is completely the opposite to what I expected and I thought it would be really busy and packed full of advertisements so I am pleasantly surprised by this.

    Jack’s website is not really designed around food nor is it selling it to me to go and get a burger from them! Unlike some of the other sites McDonalds offers a clean layout showing their whole selection of food available. You don’t have to go searching for anything and it is all there for the user to view. Hurry up lunch time – this is making me hungry!

  9. MHA says:

    Aha! I was wondering where all the traffic to my Juicy Lucy cheeseburger photo was coming from. Yeah, not pretty food no matter how you look at it, but Aaron seemed to enjoy it.

    Restaurants in general could learn a lot from the clean, straightforward web design McDonald’s is using. They incorporate lots of Flash animation, but it doesn’t get in the way of the message.

  10. Great post to start Ramadan with :-)

  11. Mike Swartz says:

    You mention photography as the #1 component. I agree. I’d like to add that color branding doesn’t appear to be. The majority of the fast food chains use the same combination of red & yellow, two colors that represent hunger.

  12. Siddharth says:

    i dont know how on earth did everyone misss out on cheeseandburger. Its a splendid website with a splendid USP – premium burger means delicious burger. oh and its funny too.
    http://www.cheeseandburger.com

  13. food says:

    http://www.123foodscience.com is a one of the food science and technology site

  14. Mohammad says:

    I like to order a poster 48″ high by 22″wide .the text:Any XL-Slice + med (a cup picture or can picture)
    I have both pictur I will send to you

    $2.22 (enough big)

    on the top of poster pleas ,write Tues day special and on the bottom of poster write limited time offer

  15. Mohammad says:

    I like to order a designed poster 48″ high by 22″wide .the text:Any XL-Slice + med (a cup picture or can picture)
    I have both pictures I will send to you

    $2.22 (enough big)

    on the top of poster pleas ,write Tues day special and on the bottom of poster write limited time offer

Leave a Comment

Subscribe
Membership
About the Author