Join us for a gastronomic tour of the world’s greatest restaurants viewed from the mobile web – as we ask: who are the target users for a restaurant site, what are they hungering for, and how best can the site satisfy their needs.
In last week’s column, we discussed the fascinating (no kidding) world of mobile takeaway order and delivery. This week we go to the other extreme of the market to demonstrate that mobile has the potential to transform the rest of the restaurant business as significantly as we have seen in takeaway.
Here’s our point: if the world’s Top 20 chefs/restaurants – with all their fame, credibility and an endless line of wealthy foodies queuing up to dine – take mobile web seriously, then all restaurants should.
And they do: 80% of the world’s Top 20 have mobile-friendly sites (See three examples below). Some of these sites are as classy as the food itself.
On the menu today:
- The user test checklist – who, where, what, why, when and how?
- What do we mean by mobile-friendly restaurant site?
- How different websites meet the expectations of their mobile visitors.
- Reservations – why do so many restaurants make such a dog’s dinner of this?
Use cases and user research
Mobile visitors and reasons for their visit will vary considerably by the type of restaurant. This makes it imperative to conduct user research and monitor user behavior to help determine the appropriate mobile strategy.
No restaurant would introduce a new menu without testing the dishes on real people, nor should they introduce a mobile-friendly website (or any other digital project) without testing it on real mobile people.
If you’re new to user testing, see this column on user testing methods for mobile projects.
The do-you-know-your-visitor checklist
Here is a checklist of questions, to help restaurants identify the various mobile visitors to their site, consider their context, and anticipate and meet their requirements.
A helpful approach is to ask: who, where, what, why, when and how?
Who is the mobile user/visitor?
- Consumer/business customer? Regular/new? Omnivore/vegetarian/foodie?
- Party organizer?
- Potential employee? (Potential) supplier/partner? Peer/competitor?
- Press? Investor?
Where are they?
- Same city/state/country?
- Different country?
What are they looking for?
- A restaurant? Menu, prices, opening times?
- Contact details? Address? Map?
- Availability of table, takeaway, delivery?
- Information about restaurant, chef, food
- Events listing? Promotions?
What do they want to do? (Why + how)
- Eat? Reserve a table? Pre-order to eat in/take away? Book a home/office delivery;
- Book a party/business meeting?
- Buy gift voucher, book? Find coupon, check/redeem rewards?
- Navigate to restaurant? Contact restaurant?
- Pay bill? Leave review/make complaint?
When do they want to do it?
- When are they making enquiry i.e. time of day/during opening times?
- Do they want to eat now/later today/tomorrow/future date?
How did they get here?
- Web search? Directory?
- Web referral? Social media referral?
- Ad/promotion online/offline? CRM/email/SMS?
Does mobile matter to the world’s best restaurants?
This study is based on the top 20 restaurants, from the World’s 50 Best Restaurants.
- 16 of Top 20 have mobile-friendly websites – which is impressive for small businesses, albeit famous ones.
- These sites are either responsive (website reformats for different devices) or adaptive (different version of site is served to various device types), rather than a separate mobile site on alternative URL (e.g. m.site.com).
- Not one restaurant interrupted the mobile web experience to push a native app.
Four of the restaurants do not have mobile friendly sites, including the number one (see below). What do we mean by that?
Typical characteristics of a mobile unfriendly site:
- Text that is difficult to read without pinch and zooming.
- Content that doesn’t fit the screen or ‘viewport’, so requires horizontal scrolling to view.
- Links that are too small to identify/read and difficult to tap or tap accurately without hitting a different link (e.g. an ad.).
- Large images or other design flaws that make the page slow to load.
- Lacks tap-to-call; tap-to-email and other mobile-friendly techniques.
- Content that does tend to work on mobile e.g. Flash.
The image below demonstrates this well. This is how these pages look on a mobile device.
These are screenshots from a Samsung Galaxy S6 rendered using Mobilizer (a useful service that shows how webpages look on a selection of real devices). The fold line shows where the screen ends.
Left, is the mobile version of the homepage of 50 Best Restaurants – it is unclear why this page should be mobile friendly when all the profiles it taps through to are not.
Centre is the profile page for the top restaurant Osteria Francescana, Modena, Italy. Note the tiny link to the restaurant is just visible above the picture of eggs. Miss tap and the eggs takes you to different content entirely.
The image on the right shows how osteriafrancescana.it appears on a mobile device. The text is difficult to read without magnification, but the images are tappable (if you can guess to where they link).
If you’re new to mobile-friendliness, see this column on: how to test the mobile usability of your site.
Mobile usability vs user experience
There is a distinction between usability – the site works on a mobile device – and user experience – the site is designed with the mobile user in mind.
To use a restaurant analogy, any meal can fill me up, but only a few meals will deliver a gastronomic experience that leaves me buzzing with contentment.
A mobile experience lives (and arguably dies) on the effectiveness of the homepage
It should be immediately clear from a restaurant homepage if the site is designed with its mobile users in mind. A good mobile homepage:
- Makes the visitor welcome/in the right place.
- Is tailored towards it target users.
- Anticipates what each user type wants (known as a use case).
- Provides intuitive options that efficiently guide the user towards their goal (and conversion).
As we saw in the previous column the Takeaway giants take this to the Nth degree with a single call to action: “Order Online Now”.
The Top 20, on the other hand, like most restaurants have more user types and use cases to deal with. What is interesting is how they use their homepages to address and filter these visitors to the appropriate part of their sites.
There lots of common elements – e.g. menus (of the food variety), reservations, gallery, history and contacts, to the Top 20 sites, but these are presented in different ways.
Five homepage approaches:
1. The utilitarian approach
The utilitarian homepage dispenses with images and clutter to display a list of text links each targeted at particular use cases.
Of all, Eleven Madison Park is the most to-the-point. The list of options addresses the key users: diners, cooks, press, the curious; with key use cases all visible above the fold (visible on the screen without scrolling): menus (including price) – reservations – people – accolades – private dining – cookbooks (links to Amazon) – collaborations – contacts. The wisdom of using of grey text for links on a black background could be questioned, however.
For all non-English restaurants the first priority is to identify the language, before serving up the options. El Celler de Can Roca offers four different language versions.
El Celler offers similar options to Eleven, i.e. anticipating similar user requirements, but places more importance on sharing the personality of the restaurant and owners through the site. Of particular note: books (various languages) and perfume (!) are sold directly from the site.
2. Visual appeal
One variation on this approach is to use a scene-setting image, followed by a static menu, which is often replicated by a drop-down menu in the header. Mirazur (Menton, France; sixth place) is an example of this approach.
The menu items again well anticipate likely visitors – restaurant – chef – newsletter – press – news – history – reservations – we’re hiring. The latter button, not included in the two sites above, is a sensible inclusion.
A second variation is to use image and/or icon links. Piazza Duomo (Alba, Italy; 17th place) adopts this style of navigation.
This gives the visitor the option to scroll through the attractive image links or the drop down menu in the header.
Again the use cases have been well-thought through, two of note: the vegetable garden adds a personal touch, while gifts (meal vouchers) is an interesting proposition, but the lengthy form could be a turn off.
The trade off with images is the page load speed – however, good web design reduces the impact – and page length.
3. The drop-down menu
Some restaurants prioritize visual content over navigational options, which are hidden behind a pull-down or slide-out menu and/or placed in inconspicuous links in the footer of the page.
Noma(Copenhagen, Denmark; fifth place) devotes its homepage to a video – this is an excellent video, but a video isn’t always going to everyone’s cup of tea, especially tourists paying overseas rates for data.
To fulfil other intentions, including making a reservation, people need to recognize and tap on the drop-down menu, which is donated with a three-line icon, commonly referred to as the hamburger menu.
Asador Etxebarri (Axpe, Spain; tenth place) also uses a drop down menu, along with language options, but has gone to considerable effort to ensure it won’t be missed.
There is a menu ‘box’ front and center, over scene-setting images (which appear to load in the background, which helps page speed), which is clearly labelled ‘MENU’ – no hamburger icon here.
This menu box remains in position about one third down the screen on every page, with a label changing to show which section the visitor is in – booking – FAQ – gifts – contact – map – how to find us – gallery. The downside of the feature is that the content on each page is pushed down/off screen, requiring scrolling.
4.The fixed or sticky menu
One of the issues of mobile pages is can be quite long, which requires much scrolling to the top or bottom to access the navigation. A good way to avoid this is to use a fixed or sticky navigational bar that floats at the top and/or bottom of the screen as the page scrolls.
Several restaurants use this feature. Mirazur uses a floating navigational bar at the top of each screen, with the restaurant name and a hamburger menu. Asador Etxebarri makes the interesting choice of having a floating weather forecast at the bottom on the homepage.
But the site of particular note is Maido (Lima, Peru; 13th place). There is a floating navigational bar at the top and bottom of the homepage screen. The top one activates a slide-out menu and is common on all pages.
The bottom navigational bar has three useful and labelled icon tabs/buttons: reservations – call us – find us – three of the most obvious use cases. This is great, it should be on all key pages, not just the homepage.
Consulting Mobilizer, it is unclear if Maido’s slick bottom navigational feature works on iOS devices.
5. Continuous scroll
The most sophisticated of all the top 20 mobile sites is White Rabbit (Moscow, Russia, 18th place). N.B. this site doesn’t work properly on a PC.
As the visitor scrolls down the homepage, each section is loaded underneath, with more information available with a tap or a horizontal scroll. As this happens the page section title – events, gastrobar, laboratory, menu, contacts and map (but no online reservations) – changes in the floating navigational header at the top of the screen and dots at the side show where the visitor is on the site.
The screenshots in the image below gives an idea, but this site needs to be experienced on a mobile device.
Reservations: user experience in action.
OK, to this point we’ve seen good examples of mobile friendliness (works on a mobile device); good anticipation of the user types, intentions and context; and both functional, attractive and funky designs.
With all sites featured it is fairly straightforward to complete basic tasks e.g. find contact details, get information on the food, chef or restaurant.
But the real test comes when we need to complete a core task.
Reservations is arguably this is the most important aspect of the mobile-friendly sites of any restaurant (or hotel, attractions etc.). There are three big reasons for getting it right:
- It generates revenue.
- Saves time and effort associated with telephone/email booking.
- Delivers good or bad customer experience.
So why do so many restaurants (and their third-party partners) – big and small – do it so badly?
The top 20 restaurants exemplify three major frustrations with mobile reservations:
- Online reservations not possible e.g. El Celler de Can Roca.
- Booking calendar does not distinguish between available and unavailable dates (presumably the majority of top restaurants?), requiring tapping each day to check. Most restaurants are guilty of this crime, but for example see e.g. Osteria Francescana; The Ledbury (London, UK, 14th place).
- Lengthy forms to fill out (with no indication of availability) e.g. Mugaritz
The reservations of Eleven Madison Park are handled by Tock. This system eases the visitor through the meal options and number of visitors, then shows what dates and then what times are available.
Every restaurant that takes bookings should emulate this user-friendly experience.
The downside to Eleven/Tock reservations is that this is clearly an external provider, the look and feel is different to the restaurant site.
To make a reservation requires a sign in or sign up to Tock (presumably, not the restaurant) and the obligatory adding of credit card details, which could be a hurdle with some customers.
Read the reports:
- DNA of a Great M-Commerce Site Part 1: Planning
- DNA of a Great M-Commerce Site Part 2: The 12 Pillars of Mobile Design
This is Part 31 of the ClickZ ‘DNA of mobile-friendly web’ series.
Here are the recent ones:
- Which is the king of mobile: China or US? Where is the biggest opportunity?
- Mobile menu UI: bold buttons and intuitive types of navigation
- Should the hamburger icon be on your mobile menu?
- M-commerce: has the mobile web finally won?
- Why do big US companies take mobile less seriously than Chinese companies?
- How mobile is transforming the restaurant order and delivery business
When measuring the effectiveness of discount codes, retailers often get it wrong. In this article, we'll look at how data-driven attribution can help businesses better understand where discount codes produce the best ROI.
In 2015, Verizon purchased AOL for $4.4 billion. Now, the mega wireless carrier is leveraging its wireless network as part of a new ad offering called BrandBuilder by AOL.
Easily spotted on the mobile web: holiday ad next to plane crash story; Muslim dating ad next to KKK story; beauty ad next to domestic violence story; car ad next to emissions scandal story.
There will be an estimated 20.8 billion connected devices in the world (up from the current figure of 6.4 billion), the advent of 5G represents an enormous opportunity within the world of mobile.