Battle of the Burgers: American Fast Food Sites Compared

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.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Digital Assets

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.