I have a dream that one day the web will be filled with easy-to-use, attractive restaurant web sites, that provide an outstanding user experience. That is a lot to ask for. I know. There are many awful restaurant websites out there today. They aren’t just limited to a single category. They cross a variety of types of restaurants, whether it’s a diner, bar, cafe, pizza, or Mexican restaurant. They share a variety of usability problems such as
- cannot find address and hours
- cannot find phone number
- menu is in PDF
- useless and annoying animated flash Intro videos
Every restaurant website is a combination of common elements like addresses, hours, and phone number, and unique attributes such as style, number of menu items, types of menu items, branding, and use of coupons/discounts. It’d be great if I could design a single template that every restaurant could download and install. However, even though there are some common elements, it’s impossible to build one website to serve every type of restaurant equally well.
That being said, I’ll be crafting a few different sets of wireframe templates – one set for a few different types of restaurants. Part of why so many restaurants have terrible websites, is because there are so few good examples. I want to help restaurants and their designers by showing how their site could be designed. It’s my hope that restaurant owners and their web designers will make use of them on their next project. Here’s the first one – The burger joint.
The Burger Joint
The Burger joint is a classic American tradition. They serve their customers well by providing quality food from a focused menu. They are the classic American small business. The Burger Joint starts with a single location. The best burger joints don’t just have customers. They have loyal fans! It doesn’t happen overnight though. They may have a single location for several years.
The restaurant owner wants and needs to focus on their building their business. The website is part of it, but not the focus. The burger joint would be best served by a well-designed one page website with static content. Surely, if Dick’s Drive In or In-N-Out Burger were starting their businesses today, they would use this design.
The Wireframe Template
For the web designers amongst you, this template is designed using the 12-column version 960.gs layout grid. One of the typical problems customer website user experience, is it’s difficult to locate the address, hours, and phone number. This template displays the information twice – once at the top, again at the bottom. In the footer, space is allocated for a Google map photo.
The first thing after the header is a paragraph or two talking about the vision of Burger Joint, and how they want to serve their customers. To entice the customers, there’s a simple auto-rotating gallery that shows appetizing photos of the food and drinks. The majority of the page is the menu, divided into 3 sections – Burgers, Sides, and Drinks. The Burgers and Sides sections provides a small photo, name, price, and a description of each item. The Drinks section provides a group photo of the drinks, as well as the name, sizes, and prices of each beverage.
This one page is the homepage. Because of this, there is no place for a flash intro. To put another page in front of this, is only to put a barrier between the potential customers and Burger Joint. This wireframe, when coded correctly, provides a positive experience for customers and the restaurant.