Restaurant Web Design: The Perfect Online Menu
Brendan Binger
Founder & Design Director

The importance of offering an online menu

With this post, we’ll look at the importance of online menus in a restaurant website. Specifically, their placement and accessibility on the site.

The menu is a crucial element of the consumer’s decision journey. It provides several key pieces of information: selectiondiet options, and price.

In the current mobile-connected world, consumers want, and moreover expect, to see a menu before arriving at an establishment in order to form expectations. (if you are not currently providing your menu online at all, you may want to consider changing that)

These connected consumers most likely want to know one or more of the following:

  1. What their dining options will be (selection)
  2. What they can expect to pay (price)
  3. Whether or not your establishment can cater to their specific diet needs

If your establishment fails to pass one or more of these checks, you may be out of the running. But that’s ok. Don’t allow the fear of disqualification to prevent you from providing this critical information to the consumer.

Pre-qualification (or disqualification) through expectations is a better experience for both you and the consumer.

It can be argued that it is better to pre-qualify at this stage than to have foot traffic that does not purchase because you don’t serve vegan options. (just for example)

Or worse yet, a consumer who does dine with you yet has a negative experience due to not knowing that you don’t provide a diet option that they were looking for. Or maybe your prices were higher than they were expecting to pay.

However, the far greater mistake is failing to provide any of this information to the consumer by not offering an online menu at all.

80 percent of consumers want to see a menu before they eat at a restaurant, and 70 percent want to be able to read the menu on a mobile device.

Constant Contact/Single Platform Survey

If a consumer is not able to find any of this information for your establishment, you may be disqualified on the basis that the consumer is not able to form expectations.

With immediate access to information granted by mobile connectivity, as consumers, we tend to avoid the unknown.

[bctt tweet=”By not offering an online menu, you are disqualifying yourself to 80 percent of consumers.” username=”QuarryDesignGrp”]

Don’t do this

Too often, we see restaurants offering their menus online as PDF files. Or worse still, they link directly to these PDF file menus in their Google or Yelp listings.

PDF menus are a poor practice for several reasons:

  • PDF menus are a user-journey dead end.
    This means that once a user has clicked through to your pdf menu there is nowhere for them to go next. They cannot check your hours, grab your address, make a reservation, call to see if you have an available table, or anything else. All of this was because they were never on your website. If your menu was available on your website, the user could easily move on to the next step in their journey, whatever it may be.
  • PDF menus load slowly.
    As we learned in lesson one, it is safe to assume that the consumer is famished, as they are searching for a place to dine. This hungry consumer is searching from their mobile device and wants to make a quick decision on where they will be satisfying their hunger. They are ready to hit navigate on the destination they choose and get that food asap. Before they choose, they want to see the menu to make sure that the establishment they select serves free-range chicken. They click through to the menu, only to open a PDF file which is taking a lifetime to load all 34 megabytes of twelve, glorious, full-color pages. Twenty seconds in, they’ve hit the back button and are already moving on to the next establishment.
  • PDF menus are a poor user experience on mobile.
    PDFs are designed for print. Your PDF menu is more than likely designed to be viewed in print in a 11×17 format. When this is displayed on a mobile device, the text will appear very small. Thus, the user will be required to zoom, pinch, and slide around the file in order to clearly read the items that are listed.

Do this

Offer your menu(s) directly on your website.

Your online menu(s) should be readily available and easily accessible from any type of device.

Bonus points: Link directly to your menu(s) as either a page or an anchor. (if you use a single page website)
This way, you can link to your menu from your Google or Yelp listings and your users can continue on their decision journey even after landing on your menu.

Have a look at Boqueria DC for an example of a great online menu. Notice how I was able to link directly to their menus?

Boqueria offers a variety of different menus, all clearly labeled so the user can easily find exactly what they were looking for.

Their menus are delivered on-page via AJAX which means that the user can instantly switch between the menus without the need for an additional page load each time.
This is especially beneficial for mobile user experience.

To price or not to price?

As we mentioned earlier, part of the consumer’s dining decision process will include qualifying your establishment as a possible option. Often, one of the most important qualifiers to the consumer is price point.

Many restaurants choose not to provide pricing in their online menu thinking that it would be better to get that foot traffic through the door, instead of turning them away right on the website. However, this may not be the best approach, for either you or that potential customer.

Consider this scenario

A potential customer already has a price range that they are willing to spend in mind. They jump onto your website (from their mobile device) and can find your menu, but prices are withheld. They were in the mood for your cuisine but are uncertain if your prices will fit their budget. They know that there are two to three other viable options within five minutes of your establishment, so they opt to stop in and request a menu from the host staff. Upon arrival, they find that your prices are indeed higher than they were looking for, so they thank the host staff, and head to one of the other dining options within five minutes of your establishment.

This scenario may not apply to you and your operation exactly, but it serves to paint a picture of wasted time and poor customer experience.

The potential customer’s time was wasted, which is a negative experience. Whether conscious or unconscious, this potential customer now has a negative impression of your establishment without having ever dined with you.

Additionally, your host staff’s time was wasted. This was time that could have been spent attending to the experiences of other guests.

We suggest that it is more beneficial to pre-qualify potential customers who are checking you out online by listing your prices in your online menu. The reality is that if you own a more upscale establishment with prices that are on the high side, then not every consumer will want to dine with you at every occasionBut that’s ok.

You probably already know this anyway, and you are aware of who your ideal or target customer is. Why not strive for every person walking through your door to be that ideal customer and have a terrific dining experience with you?

Summing it up

A menu on your website which is mobile optimized is a must-have in today’s market. You should not be using a PDF file as your online menu, and pricing should be an important consideration when building your online menu.

Making it happen

Follow the steps outlined below to put this restaurant marketing tip to work on your establishment’s website today!

  1. Reach out to your web developer with a copy of your menu to have them create an online mobile responsive version

  2. Make sure that they create a new page for the menu(s) or create an anchor link to them if adding them to an existing page. This way, you can link directly to your menu(s) for cases like your Google and Yelp listings.

Bonus points: If you have multiple menus, place them all on the same page with tabs to jump between each using AJAX, like Boqueria has done.

Have a look at the sites below for online menu design inspiration.

  • Madoi Sushi
    Simple & effective. (They also offer online ordering ???)
  • Chicago Bagel Authority
    Clean and impressive menu design with AJAX tab functionality.
  • Licéas
    This is a much more advanced implementation which creates an engaging and interactive user experience. (This site is an awwwards winner. Impressive ?)

We hope that this post has shed some light on the best design practices and consumer expectations surrounding online menus.

Make the connection

Discover how Quarry's unique blend of design, technology, strategy, service, and economy can grow your digital product.

Learn More