Tasting Success: Five design tips for an irresistible restaurant website

Online ordering

Whether taking orders or making reservations, websites and apps now occupy a central role in the life and livelihood of most restaurants. If you're a restaurateur, you know you're in the business of selling delightful experiences — striking the right mix of food and drink, ambience, service and amenities.

Ideally, your website — one of the first encounters with you for many customers — wraps all of these elements into an online experience that leaves users hungry for more. The reality is that all too many restaurant websites come up short. Amateur photos, scanned images of menus, confusing navigation,and mobile-unfriendly sites abound (not yours, of course).

In the interest of a more delicious web experience for all, here are five tips from user experience (UX) design and behavioral psychology to stimulate appetites and orders on your restaurant's site.

Maono homepage

Seattle's Ma'Ono goes for appetite stimulation on their home page.

1 . Splurge on great photos, but use carefully

The importance of crisp, professional photos of the food you serve can't be overstated. Research has demonstrated what we've long known: just looking at a picture of delicious food stimulates our appetite. The richer, the better, too. The Endocrine Society reports that images of high-calorie food in particular make us hungry.

As they whet the appetite, they stimulate spending: An appealing photo alongside a menu item can increase sales by 30%.

A mouth-watering image above the fold (what appears on your user's screen before they scroll down) is a great way to inspire visitors to explore further down the page.

Altura homepage

Altura uses more dramatic imagery to whet your appetite.

Once you've entered the menu area, though, be cautious with photos. Use them to highlight a featured item or two, then let the menu speak with words. As with print design, too many photos cheapen the perception of your food's quality.

Interior shots of your restaurant capture the ambience for first-time visitors and can be incorporated any number of ways in the layout.

Canlis homepage

Canlis gives guests a peek behind the scenes on their site.

2 . Bring your sales technology in line with customer expectations.

Online ordering and reservations are essential, and often make the difference in diners' restaurant choices. As consumers, we've come to expect a certain level of technology from the businesses we frequent. Those without it tend to be forgotten, owing to losses in visibility, credibility and relevance.

In their 2017 Restaurant Technology Industry Report, Toast reports that customers say online reservations, free wifi and online ordering are the most important technology features a restaurant can offer. If one or all of these technologies is appropriate to your restaurant and you don't offer them, it's time to start doing so.

Online ordering can be in-house or through a third-party vendor. Customers are more likely to order from a restaurant's website than a third-party site, according to the Toast report. Having an in-house online ordering system in addition to third-party services is optimal in many ways. You can cast a wider net for new customers on third-party platforms, then offer incentives for ordering directly from your site next time.

3. Make Your Menu Clear, Easy & Accessible

A native menu is required for a happy user experience. Images or embedded scans of your physical menu should never beused.

A native menu is critical for many reasons, the most obvious being easy navigation. It’s a pain to expand an image of the menu on your phone, then have to swipe back and forth deciphering broken lines of type.

If you’re still okay with a scanned menu for your able-bodied customers, then consider the difficulty it poses for someone with poor eyesight or dexterity. Screen readers (used by many with vision problems) can’t interpret scans, and the awkward navigation can be beyond frustrating for someone with, say, an arthritis flare-up. It’s not just an irritating experience caused by careless design, either. Ignoring accessibility in your website is seen as a kind of digital discrimination (but more on that in another article).

Once you have a native menu, make sure it’s on one page. Besides the easy navigation for customers, having everything in the same place can drive sales. Eat24’s chief marketing officer Amir Eisenstein told Fast Company: “For example, if you order a pizza over the phone you’ll just tell them to bring an XL pizza and a Coke. But when you go online, you see the whole menu. All of a sudden, people order appetizers, ribs, salads, and stuff they don’t normally order over the phone. They have more time on the menu, they spend more time on the menu, and they order slightly more items than over the phone.”

4. Make Your Menu Descriptive

When it comes to menu descriptions, rich verbiage has its rewards, in both the online and offline versions. In his article “How to Write Powerful Menu Descriptions That Increase Profits,” menu engineer Gregg Rapp writes, “When tempting language makes three entrees seem irresistible, customers will order one of them and possibly return two more times to try the other two on future visits.”

To illustrate his point, Rapp suggests using local origins of food in the names of dishes to add value:

Midwest Pork Chops >> Iowa Pork Chops >> Muscatine, Iowa, Pork Chops

You can feel the value difference as we move left to right.

A Cornell study cited by Mental Floss found that detailed descriptions could increase sales by 30%.

Sitka and Spruce website

Colors at work on the Sitka & Spruce site.

5 . Use color psychology wisely

While this is officially the domain of the designer not the restaurateur, it’s important to keep in mind for your brand. Like photos, your site’s color scheme can encourage or discourage orders. Here’s a quick review of colors and their meaning as relates to food:

Yellow: Inviting, optimistic and youthful. Used to draw customers in.

Red: Stimulates hunger, increases heart rate and blood pressure. Also the color of passion and secret desires. Fast food restaurants famously use the combination of red and yellow to grab your attention and fuel your appetite.

Blue: Trust and security. This cool tone can be an appetite suppressant, so use very cautiously with food.

Green: Health, abundance, relaxation and the easiest color for our eyes to process. However, its overuse with food can become unappetizing.

Orange: Health, increases mental activity, leads to feelings of comfort. This color can be very effective, depending on your market and your menu.

White: Cleanliness, purity. A great color for many restaurants, particularly higher-end establishments.

Black: Color of mystery and creation, but it decreases the appetite. Dark brown may be a better choice than black.

Brown: Earthy, warm, traditional, wholesome. Widely used.

Is the color scheme on your site consistent with your brand? Is it stimulating appetites and orders, or turning customers off?

Of course, there are many other factors in the design of a successful restaurant website. But focusing on these areas of emotional engagement and usability can help make your site sizzle.