Put your address on the landing page: design, usability and interaction for restaurants

Restaurants, I’ve got a serious beef with you. (That’s the last pun.) (I’m probably lying.)

Your websites are awful. Just terrible.

Not all of them, of course. They’re getting better with every passing year, which is encouraging from both a design and an eating standpoint. But comparatively, bar and restaurant websites across the board take the cake for most embarrassingly bad decisions. I get it. New restaurants, especially in a town where 500 sq. ft. spaces are now renting for $30,000 a month, are often already operating on a shoestring budget. It’s just one more thing in the way of making and sharing food.

I’m far from the first person to have made the observation that restaurant websites are terrible, but instead of complaining, I’d like to help. Without further ado, here is all of the advice I have for you, even though I may have never been in your restaurant and know nothing about your food. It is long, it is detailed, and it is basic.

(A note: I point out a couple of specific problems in the paragraphs below, but this is not a “can you believe they did this” article. This stuff isn’t easy, and I’m not here to be catty or criticize anyone for trying.)

Put your address on the landing page. This is not optional.

The question your users are asking if they go to your website is “How can I find you?” They should always be able to know where you are. If you have multiple locations, provided you don’t have thirty of them, you should put all of them on your landing page. (I don’t know where exactly the break is between one and thirty; I suspect that it’s much lower than I imagine. I feel very confident about four being okay.) Realize that people will be coming to your website from a desktop, a tablet, or a phone. Put nothing behind an animated intro. (We’ll talk more about that soon.) Don’t require people to shuffle awkwardly to a contact page.

And while you’re at it, consider adding cross streets, a map, and transit directions. If your location is somewhere really strange, tell people that. I specify transit because the chances of someone using their GPS to drive to your restaurant are relatively high (if they don’t know how to get there by cross streets alone), and if you’re serving alcohol, you should be much more concerned about non-drivers being able to find you. Exact transit directions aren’t necessary, but nearby Muni lines or BART stations (or your local equivalent) are always helpful. Local’s Corner does a beautiful job of getting people in the doors.

There are other lines you could take, but they keep it simple: six lines is already a lot of options. The map is at a legible scale, zoomed out just enough to provide adequate context.

A phone number is necessary, too. If someone’s on their way to a reservation and needs to contact you, they may not know which 415 number you are from their past few days of calls. Also, you can save yourself a lot of time by listing your hours by the phone number.

A daily updated menu is great, but at least a sample menu is required.

With the rise of restaurants across the country focusing their efforts on local, sustainable agriculture, it’s not uncommon for a restaurant’s menu to be different every day. Whether it’s a fear of potential customers complaining that such-and-such dish isn’t on the menu or a lack of desire to regularly change website content as the seasons shift, it’s become a major crutch for restaurants to simply describe their cuisine and say that it’s different every day and that’s the end of it.

Beyond your address, a sample menu is the most significant reason a user will visit your website. At least thirty restaurants in my neighborhood alone could be described as “New American” or “Californian”, and using an “About” page to write your personal dining philosophy is just not going to cut it. Even if a menu changes daily, you can likely admit that there’s a theme – there’s always a pasta dish in the $18-20 region with some sort of braised meat, or you always have a $20-24 vegetarian main, a seafood dish, and so on. You have a specific focus that makes you unique, or you experiment with many different techniques and your menu represents that. Whatever your concept, diners can handle the idea that this might not be 100% accurate, and sample menus for seasonal restaurants are common enough that there’s no longer a reason to not open up about your food. With the line between casual and fine dining blurring more every day, “pizza joint” can mean $3 slices or $35 pies. (Not to speak ill of either, but expectation and how it meets reality are important.) Your 30 taps could be 26 taps of Bud-Miller-Coors macrobrew or it could be exclusively beers brewed within a 50 mile radius of your barstools. Make sure your customer knows what to expect and everyone comes out happier.

ETA (1/9/13) – From Jesse Friedman on Twitter – “the only addition i have to your rest website rant is including prices on the menu. drives me nuts when they are left off.” He makes an excellent point. In a town where eggs benedict could cost you $8 or $22, please, please let your customers know what they’re in for. 

If you’re absolutely concerned with keeping your menu up to date, your designer and developer can set up a system that allows you to update easily (even from your phone at the farmer’s market) and quickly. Make it a pre-opening duty for a tech-savvy line cook and give them the ten minutes they need to get it right. Monk’s Kettle updates their extensive beer list constantly; Pal’s Take Away and Kitchenette keep both their websites and their Twitter feeds updated every day.

Speaking of, social media gives you a free, opt-in way to get in front of potential customers every single day.

69% of internet users participate in social media. Many of them are college-educated, many of them are in middle- to high-income brackets, many of them in San Francisco are likely to live in smaller spaces and be more accustomed dining out. Increasing numbers of them are conscious of their decisions and willing to pay for them, many are in the much-desired “double income, no kids” demographic. It’s likely that users check Twitter either while they’re eating breakfast, on the train or bus heading to work, or at their desk as they start their day, giving you an opportunity to invite them in for your lunch special. If someone is on their way home and checking Facebook as they kill time thinking about where to eat dinner, you can remind them that you’re on the way and show them a photo of what they could eat for dinner. You can grab them before they leave the office and have even had a chance to think about dinner. Incanto updates their specials, including their odds-and-ends board, every day. Pi Bar updates their Facebook (and cross-posts to Twitter) just before opening time. The Sycamore reminds you that they have a patio when the sun comes out and that they serve bottomless mimosas right as you’re getting drunk with your friends the night before and think drinking again in 12 hours is the best idea. And for that constant, one-on-one interaction, you pay exactly nothing. Hapa Ramen posts to Tumblr with not only photos of their daily menu before their 10-2 shifts but when they’ve perfected something new in the kitchen for a pop-up. Nopa posts to Tumblr when they’re inspired by something and they write with such an infectiously excited voice from such a straightforward educational perspective that you can’t help but want to share it with them.

Users retweet and reblog and respond and email and share. You have an opportunity to excite a potential customer and have them try to excite other potential customers for you, for free. Never has it been more possible for a customer to maintain a relationship with you and your food.

Your voice matters. Know how to interact. 

The restaurant/bar+Twitter conversation I have most often with friends is about just how badly incompetent some people are at connecting. (We’re fun at parties.) It’s really, really hard to gauge tone on the internet. Customers will react strangely to things you’d never imagine. I’m not here to tell you how to act and speak, but do make sure you’re comfortable with the face you’re putting on. If you wouldn’t be an asshole to someone if they were in your restaurant, don’t be an asshole to them on the internet. (If you would absolutely be an asshole to someone in your restaurant if they started it, feel free. I cannot tell you how proud I am every time I see a chef standing up for themselves and their restaurant. Realize that even when you’re right, someone is going to refer to it as “Twitter drama” and be okay with that.)

Tone aside, there are some really annoying things you can do to alienate followers, so please don’t do those. Don’t beg people to follow you on Twitter on Twitter. Chances are you’re preaching at the choir of people already following you. If you can make the time, try to engage when someone asks you a question. But don’t feel obligated.

Don’t retweet every single thing someone says to or about you. If someone had a great meal or took a beautiful photo or said something insightful, great. But don’t get into the habit of doing it for everything. There are probably a lot of “Went to X tonight, good food” tweets you can just let go.

Don’t let your Twitter feed just be a cross-posting machine. Facebook and Twitter share a considerable amount of overlap, but they have unique features – encourage people to keep up with you in multiple places by using them in interesting ways. Exclusively cross-posting is a quick way to make sure they follow you in one spot only. (And I don’t mean to discourage you from ALL cross-posting – letting them know you have a new Tumblr post is great and encouraged. But use multiple accounts for multiple reasons.)

If you’re advertising an event, fit everything into one tweet. You’re hoping that people will retweet it; recognize that people are probably just going to retweet one if you use multiple, meaning second-hand readers are only getting part of the story.

What are the technical requirements for this whole thing?

Well, that’s ultimately up to you.

At bare minimum, you need to purchase a URL. It’ll run you about $10 a year. Preferably, your URL leads to your actual website, but you can always use it to redirect to Twitter in the meantime. A placeholder page with at least an address, phone number and connection to social media can do wonders in the interim while you figure everything out.

If you want your own website, you’ll end up paying a monthly fee for hosting. Discuss this process with your designer. Having a web presence shouldn’t run you more than $10 a month, unless you’re paying someone to keep your content updated for you, in which case it defers to their hourly or flat rates and whatever you agree on before they begin the job.

Your restaurant will have a Yelp page; make sure that your URL and additional contact information are correct. (Say what you will about Yelp, but it continues to be the superior app and website for finding nearby spots and has standardized contact information for businesses. It’s going to be toward the top of your Google results no matter what, so lean the slightest bit into it and check every once in awhile to make sure everything is accurate.)

When it’s time to change content on your website, your designer can set up an update system – or at the very least can show you the basic editing steps to change code on your own. Much of this will have to do with the content management system you choose, and much more technical designers than I am can cover those options in many other blog posts. Have that conversation with the person or people designing your website on Day 1. If they’re qualified to take on your gig, they’ll be able to come up with a strategy that works for you.

If I may, allow me to caution you against using a PDF for your menu. PDF, or Portable Document Format, is a file type that was created to standardize documents independently of platform or software. In the earlier days of the web, visual design options were limited by a lack of built-in code options, leading to clunky workarounds. PDFs were used as a way to ensure consistency in viewing.

It’s an attractive option because PDFs can be exported from all word processing and visual design software, so a folder can be synced to upload new content at regular intervals, and when someone makes a change to a menu, they simply save over the existing file and the links update automatically. It’s a hassle-free solution. But from a user perspective, and being considerate of the ever-increasing number of mobile users, it’s not the best idea. Some users may have their browser set to download PDFs by default. Particularly if they’re not warned that the link leads to a PDF, they now have to take another step to read your menu, leading to frustrated users waiting to find the file and open their software of choice. Mobile users may not have a preview option and may not have a system in place on their phone to handle downloaded documents. Since we’re no longer typographically or otherwise layout-limited, there is little need to add in an additional hard-to-regulate step.

Do not use Flash.

I’m very careful in this whole thing to not tell any of my fellow designers how to do their jobs, because a) everyone has their own process and there are thousands of ways to go about things, and b) I just hate when people tell me how to do my job. But there is one thing you need to know, and that is Do Not Use Flash. If your designer tells you that you have to use Flash, call me and give me their phone numbers and I will come over and slap the Photoshop right out of their mouths.

That was perhaps a little dramatic.

But don’t use Flash. It’s solution that has little place in a 2013 web design. For a long time, it was the easiest way to integrate motion into a website. Adding the dimension of time changed basic information into “interactive content” and heavily influenced the way the current web behaves. Three years ago, Steve Jobs wrote why Apple will not have a relationship with Flash; last year Adobe agreed that it was no longer an effective solution. It is ineffective on mobile and there are few compelling reasons to use it even on a desktop.

And while we’re at it, your website does not need music. I don’t care that you want people to really feel like they’re in Italy.

What should my website look like?

That’s between you and your designer and the experience you’d like to create. You know which restaurants you’re trying to compete with in this city – take a look at what they’re doing. Don’t copy them, don’t assume that you should do the same things they’re doing, but do consider how you want to posture yourself. Look at what’s working and what isn’t. If you’re friendly with them, talk to them about why they’ve made the decisions they’ve made and what they like and dislike about their current strategy.

Everyone has their own aesthetic, and what works for one place may not be appropriate for another. Everything I’ve linked to thus far is something I like specifically for the reason I’ve included it here. There are other options I could have chosen for many of the points I was trying to illustrate, but I’m particularly partial to the examples I’ve chosen as an overall experience.

Beast and the Hare is probably my favorite restaurant website in this city. Hours, phone number, address that links to Google map, sample menus for everything, single scrollable page that has the address again on the bottom, as well as links to social media engagement (which they update with decent regularity).

Public House has made it incredibly clear that they are committed to you having all the information you could possibly want without having to pick up the phone and try to have a conversation with someone in an echoey, packed mega-beer-bar. Food menu to beer menu to which games they’ll be showing, and delivering that information via a well-designed desktop site, mobile site and iPhone app. I’d ultimately prefer if they had one design that addressed all three simultaneously, but they’ve clearly put a lot of care into giving you the information you need as quickly as they can.

Consider making mobile access your #1 priority.

If you can make the time, please flip through a copy of Mobile First by Luke Wroblewski. It’s geared toward designers, but if you’re really serious about your web presence it makes a very compelling argument for designing with mobile in mind. The idea is that if you begin with a mobile mindset, it’ll force you to make tough decisions about what content is really important and how we can get the user to their destination as quickly as possible. It urges designers to make visual decisions that are simple and direct. No matter whether someone looks up your website from a phone or laptop, chances are that they’ve looked you up to get answers to a question, and you want to make those answers available.

Does that mean I need an app?

You wouldn’t be the first one to do it, but the short answer is no, you do not need an app. There are restaurants out there that have done it, and some of them even happen to have really beautiful ones, but a few problems arise:

  1. Are you designing for iPhone, Android, and Blackberry, or picking one? You cannot design native apps for all of them at the same time – they’re built on different rules, and it doesn’t work that way. The wireframe of the user experience can transfer over, but visual elements and code will have to be completely created from scratch each time. The reason companies often design for just one (with the second or third coming soon) is because it’s costly. It requires maintenance on multiple pieces when you want to make a change. It’s rare to find someone who independently develops for more than just one or maybe two platforms. Magnolia Pub and Brewery, one of my favorite brunch spots, has an app – a beautiful one. And while that’s great, they don’t have a mobile site, meaning they’re only reaching 13% of smartphone users. (I do suspect that number is dramatically low; I’m willing to believe that a much larger chunk of Magnolia customers have iPhones. That said, even if the number is closer to “half”, it’s still an unsatisfied market.)
  2. People have to know you have an app. You can tell them at their desktop, but if you want them to download it you’re going to need to tell them on their mobile device. By that point, they’re already at your mobile site. No one is going to start their search for you in the app store.
  3. People have to be willing to wait for your app to download and install. Many customers will – if I had an iPhone, I would absolutely use Magnolia’s app. But you should consider an app to be most useful to your regulars, who will probably keep coming even if you don’t have an app.
  4. The reason people design apps is to access pieces of the device’s hardware that browsers aren’t allowed to access, and you do not need those pieces. Maps and the dialer are accessible from the browser – anything else you need from the hardware of a mobile device might be overdoing it.

I suggest you speak with your designer about the benefits and limitations of multiple approaches and see what they recommend based on your needs, but if you’re going to go mobile, you’re probably best off starting with a cross-platform mobile site.

How do I do all this?

I promise I haven’t been writing all of this as an elaborate buildup to a sales pitch, but the truth is that you need to hire somebody. (I’ve been writing all of this because I am frankly so sick of seeing terrible restaurant websites in 2013, and because I really love any excuse to nerd out about food.)

This is not be a guide on how much money you should spend, because I have no right to set an expectation for someone else’s hourly rate. But consider the idea that hiring an experienced professional may cost less (percentage-wise) than you think, because experience in our industry often directly correlates to efficiency. Don’t immediately balk at hourly rates. The types of designers that you’ll be encountering fall somewhere on a sliding continuum from User Interface (UI) and User Experience (UX) design. A UI designer spends their time creating a visual story (how your website looks). A UX designer spends their time creating wireframes and developing the idea of how users will move through your website. A UX designer decides what you’ll want to see and learn, and a UI designer makes sure you can see and learn it effectively. Many people fall somewhere between the two, and if they happen to be all the way at either end of the spectrum, they’ll likely have someone on deck that complements their skillset.

The thing you should do now, today, is start a Twitter feed and/or a Facebook account, and give consideration to how you will want them to integrate with the content on your eventual website. It is possible to get away with just a social media account for quite some time. If you already have one, take a second to consider how you’re engaging potential customers. Decide what you are and aren’t comfortable with – if you don’t think you can effectively use Twitter for reservations, make a habit of responding to such mentions with your phone number or an OpenTable link. If you post content that’s interesting, people will happily redistribute your information to all of their followers, giving you access to a wide audience with minimal effort.

As for visual design, if you’re hesitant to hire somone, there are many great free Tumblr and WordPress themes. If you’re willing to shell out a couple bucks, there are even more great paid themes. Within an hour you can piece together an acceptable “website”. There are also paid DIY options like Squarespace. I can’t recommend any of them from personal use (I in fact know Squarespace through their advertising on the Earwolf podcast network), but they appear to be increasing in popularity and quality.

And that’s it. That’s all. I know it’s really silly to say “that’s all” after 3800 words about what you should and shouldn’t do, but it comes down to this: don’t hide information from your customers. Remind them that you’re there. Ever wonder how some restaurants are getting their Kickstarters funded and have lines down the block upon opening? Those are the restaurants that reached out. They’re food trucks or pop-ups who tweeted every couple of days about what’s going on. They’ve already made their customers feel like a part of the process. And you can do that, too. Just keep in touch, make good food and put your address on your landing page.

(Fellow diners or designers, what did I miss? What did I get wrong? What’s a particularly effective feature you’ve seen from one of your local restaurants? Get in touch and let me know, and I’ll update this as necessary.)

4 thoughts on “Put your address on the landing page: design, usability and interaction for restaurants

  1. Rick

    While you make good points, your post fails at the most basic level: easy reading for your users. All I am scolling thru is a bunch of paragraphs with no pictures on a very boring, mundane background. Snooze button please.

    Reply
  2. John Swanda

    You seem to take it for granted that restaurant web sites will list the hours of operation somewhere. It isn’t necessarily true. Granted, I do eat at a lot of ethnic/mom and pop restaurants, some of which don’t even have a web site, but I usually already know where they are and just need to know when I can eat there.

    Another tip for restaurants: regularly check outside sites such as Yelp to see if they have your current correct information. I have relied on these sites for hours information, only to find out when I went that they were wrong.

    Reply
  3. Pingback: A Menu of Good Ideas | SMB DigitalSCAPE

  4. Andrew

    Between Flash, the lack of social media use , and what I find most irritating a nonfunctional (or a lack there of) menu the majority of restaurant websites are poorly executed. There is no need and no excuse for a restaurant to have a bad website. People more often than not go to a restaurants website before they go out and eat there and if the site is poor (or doesn’t function) it is a big turn off.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>