If you’re trying to sell food, nothing’s more important than the menu.
Recently I was looking back through some older Econsultancy posts (because I live a fun-filled, rock ‘n’ roll life), and came across this post on mobile hamburger menus.
At the time, we had a few tweets from people wishing it was about *actual* hamburger menus, which got me thinking about how restaurants should best display their wares to online audiences.
Browsing a menu in advance is an important step in the customer journey, particularly as you get into Michelin star territory.
If you’re going to buy an expensive meal, you want to know in advance that you’ll be able to get something you actually like.
I’ve taken a look at a few sites here, ranging from 5-star hotels to giant franchises, and it seems this is still a surprisingly user-unfriendly corner of the internet.
To be clear, I haven’t ranked them according to strict criteria, as I thought it would be better to check out each site and see which elements cause frustration or elation.
Let’s start with a big boy (or, technically, a Ronald). McDonald’s invest plenty online, so they should be able to come up with a decent user journey.
We’re off to a good start. While most of the homepage is taken up by a video ad, there’s a clear menu nav, and a rollout that allows you to filter by category.
When you hover over an item, there’s a clear pop-up displaying nutritional values.
There’s also a neat ‘meal-builder’ option, here’s a 2,000 calorie monster that I would heartily suggest you avoid.
Useful for answering FAQs, something McDonald’s has been particularly keen to communicate recently.
Not fancy, but we’re off to a good start, this approach concentrates on user intent and provides clear, useful information.
Next up, let’s look at McDonald’s UK equivalent, the ever-reliable Wimpy.
Again, a good start, menu links are displayed at the top, and again as a large, clear CTA at the bottom of the page.
Oddly though, these drop-downs lead to different information.
Both are important to the user, so it seems strange to split them up like this.
Let’s check out the nutritional information pages.
It’s a nice enough animated menu, with pop-ups displaying information by meal, but it’s hosted at the less-than-sexy http://18.104.22.168/nutriuk/ URL, and none of this works on mobile, not ideal for a franchise that regularly bases itself next to major motorways.
On to the menu itself.
This is… a thing of terrifying beauty.
It’s an Issuu-like interface that allows you to manually flip through the pages of the menu. It’s a bit fiddly, doesn’t work on mobile and is hardly the clearest way to display information.
That said, I did find it oddly endearing.
There’s quite a bit of work to be done here, the user-journey isn’t always clear and it would be hard to find pages in isolation. Design-wise it’s outdated, although it does a curiously fine job of recreating the feel of the actual restaurant.
Let’s move up the food chain a little bit, and check out London-based Mexican chain Wahaca.
It’s a regular haunt of Econsultancy at lunchtime, so we’re keen to see how the online presence is handled.
Wahaca has a fun, Tumblr-style homepage with lots going on, but it doesn’t obscure the menu links.
On mobile, it’s even better; the menu is front and centre with some enticing images, but this falls over on click-through.
While the desktop version has a clean, sensible approach, with drop-downs separated by course and links to specific location offers, the mobile version has a generic PDF, hosted on a separate page.
It’s fiddly to zoom in, and takes up extra time to load.
On the plus side, a little more thought has been put into the layout of the takeaway menu, but it’s still not ideal if you’re on the hunt for a quick lunch.
Olive Garden takes a super-localised approach, pointing you at your local branch (that’s an Olive joke by the way. I’m not proud) via a location tool.
Unfortunately I’m writing this from London, so I’ve picked a random address in Provo, Utah and used the zip code finder to locate a restaurant.
Once we’ve located a restaurant we’re taken to a fairly generic menu with clear online ordering buttons.
The order seems to make little sense though, with an overly-busy layout and no division by course.
There’s also a confusing array of hamburger menus:
Once I do click to order, I’m made to jump through several hoops, with pop-ups asking me to become a member before I order.
I understand the value of this for the restaurant, but my experience of Olive Garden is usually a last-minute decision made on the drive home, not a situation that makes you want to fill out forms.
Working our way slightly higher up the burger ladder, Honest has a very clean, user friendly homepage, with large, clear links positioned at the top of the page.
Clicking through, the clean design remains, with a plain menu plan that’s updated regularly to feature the special of the month.
This menu also pops out into a larger format for easier reading.
On mobile things aren’t quite so pleasing. The clean layout is a little too small to read easily, and pop-outs open in a separate pdf (likewise allergen information and children’s menu options).
Again, this really needs to be avoided on mobile.
Pinch-and-zoom is annoying at the best of times, and opening new tabs only slows the user down.
Contact information is given for each branch, but the map is troublesome on a small screen, and this may be something the chain struggles with if it expands much further in future.
It’s neat enough, but there’s more thought needed about where and why the user is viewing this.
Next, let’s jump to the very top.
Unfortunately The Ivy is closed for refurbishment at the moment, so I swing onto the Strand and check into Simpsons.
This is confusing. Reaching the site itself involves clicking through several links from the Savoy’s main website (I avoided using the Savoy itself here as it’s primarily a hotel, with different accompanying priorities).
There seems to be a rule at more upscale restaurants that forbids having clear links. Even the word ‘menu’ is conspicuous by its absence.
I do finally locate the menu, and it’s a shame that it’s hidden because its sensibly laid out with clear pricing information and no frills.
It may not be cutting-edge design but it doesn’t need to be.
Never over-complicate what you can do simply.
Finally, a look at a similar quality dining experience, this time in NYC.
Bernardin has a serious reputation, and as I’m not quite on the rich list yet, it’s an experience that I’ll want to research in advance.
The site itself is as clean and sparse as the elegant dishes served, but again there’s no ‘menu’ link, forcing me to take a guess and hit ‘dining room’.
Again, no ‘menu’, just a list of courses.
While this approach may convey a sense of exclusivity, it’s poison from a search perspective.
Have you ever searched ‘dining room’ for any reason other than buying a table?
Once located, the menu is similarly sparse.
It’s good to celebrate the fine chefs, but a lack of pricing information makes no sense.
Assuming that ‘if you have to ask you can’t afford it’ attitude is both snobbish and will be off-putting to a huge audience who may choose a high-end restaurant for a special occasion.
Improvements and best practice
Overall it seems that price is not an indicator of web design quality in the restaurant world.
Fast food joints have a better approach than the top-end establishments, but there is still lots of room for improvement.
Clear layout, pricing and mobile friendly approach would work wonders here.
While it provides a different service, online delivery outlet Deliverance provides some worthwhile guidance.
A clear link to the menu, separated by cuisine, with clear pricing and availability options.
It even works well on mobile (Although not perfect, I’ve had several frustrating experiences with the log-in function).
It’s a simple, direct approach that focuses on information, rather than ‘character’, and is all the better for it.
Restaurants clearly need to stop thinking about their reputation and look more closely at local search factors and UX, particularly user intent.
Without changes, there’s a real risk that smaller competition will be able to usurp established businesses.