Do the world’s top restaurant websites have the mobile ingredients right?
All restauranteurs have plenty to learn from a gastronomic tour of top chef’s mobile sites.
All restauranteurs have plenty to learn from a gastronomic tour of top chef’s mobile sites.
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:
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.
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?
Where are they?
What are they looking for?
What do they want to do? (Why + how)
When do they want to do it?
How did they get here?
This study is based on the top 20 restaurants, from the World’s 50 Best Restaurants.
Initial observations:
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:
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.
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:
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.
The utilitarian homepage dispenses with images and clutter to display a list of text links each targeted at particular use cases.
The world’s number two and three restaurants, El Celler de Can Roca (Girona, Spain) and Eleven Madison Park (New York, USA) among others, take this approach (see image below).
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.
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.
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.
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.
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.
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:
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:
One exception
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:
This is Part 31 of the ClickZ ‘DNA of mobile-friendly web’ series.
Here are the recent ones: