The performance of a website on mobile phones has become increasingly important, with increasing numbers of people opting to browse and shop online using their smartphones over a traditional desktop. This is a trend we’re seeing within DigitalBeans too, with some clients receiving over 80% of their traffic from mobile.
The topic of usability to some may appear to be somewhat trivial and subjective, however, research has shown that usability issues can significantly impact the bottom line of a business. Ultimately, the more difficult the site is to use, the more likely it is the user will give up and go somewhere else.
In this case study, we take a look at a popular (and lovely) local restaurant – Deeson’s, based in Canterbury. We’ve conducted a basic analysis of their mobile site and decided to share our findings to (hopefully) help Deeson’s improve their site but also help others learn more about factors that could be frustrating their visitors.
1) Menu Positioning
Although the Hamburger menu and its effectiveness in usability is a hot topic for debate.
One study has found that on average around 70% of single hand smartphone users – operate the phone with their right hand, consequently, having the menu on the top left results in the majority of these people having to either switch to two hands or attempt a very challenging stretch with their right hand. Taking into account the nature of the business – it’s very likely that mobile users make up a large proportion of site visits with people looking to view the food menus as well as making a reservation. For this reason, any improvement to the mobile usability of the site is likely to provide a better overall experience for the user.
Move the hamburger menu to the top-right corner.
Image source: UXStackExchange
2) List Of Menus
After selecting the menu, the user is able to select a link on the navigation titled ‘Menus’ – on clicking the user is shown 12 options, unfortunately, on smaller smart phone, they may see only 4-5 selections and it’s not possible to scroll down the menu options – this can be particularly frustrating for a user.
Rather than show a hover menu – send the user straight to the list of menus page, allowing them to see and select all the menus clearly.
3) Opening Times Button
On the homepage, there is a button that is in a very unusual position, being placed over the image of the restaurant on the right-hand side. We would typically expect this to be made more prominent and also kept in line with the introductory content. The contrast at the moment is not very clear so it’s very likely many users miss this upon first glance. By placing the button in a clearer position, we are likely to serve the users request for opening times much quicker and with less frustration.
Move ‘Opening Times’ button placement so it is placed above the image and made more visible as a button option.
4) Opening Times Page
After landing on the opening times page, something quite interesting happens.
The user is told “Deeson’s Restaurant is open seven days a week at varying times so please check the table below” – however, upon inspecting the table, no opening times appear visible. It’s only when scrolling to the right you are able to see the rest of the table, unfortunately, I fear many users do not realise this and consequently, leave the page not knowing the opening times.
Ensure table is aligned with the centre of the page – ensuring the user does not have to scroll to the right to see the times.
5. Reservations Page
Allowing users to make a reservation is naturally going to be a key conversion for Deeson’s and one of the main goals of the mobile site, for this reason then, we are looking for this process to be as frictionless as possible.
After selecting the ‘Reservations’ link in the navigation the user is shown a page which doesn’t make it immediately clear to the user how to make a booking, in fact, the user has to read through a fairly large paragraph of text to understand what to do, there are three links in the paragraph, all of which send the user to the same place.
Once the user does click one of the links, they are sent off to the ‘Open Table’ website to make the reservation in a new tab. This isn’t necessarily the worse idea in the world. However, Open Table has a free HTML widget that can be installed on the Deeson’s website, allowing the user to stay on the same website, this means the user doesn’t have to leave the site to make a booking, it’s also likely to reduce a number of people dropping off while they wait for the external page to load, fortunately, in the example below we were using very fast internet, however, on 3G the site load would be much slower.
Improve clarity of how to make a booking by implementing Open Table HTML widget.
6. Deeson’s Logo Header
As the internet has developed, certain user behaviors have become instilled in us and as a result, when a website doesn’t respond to our basic expectations it can be particularly frustrating.
One commonly held practices across the internet is that a logo/header of a site, should include a direct link back to the homepage, this has been true even for Yahoo.com back in 1996, therefore users expect to be able to click the header to head back to the homepage from any page they are on.
Unfortunately, in Deeson’s case, there is no link so if we were to run session recording for users, we will probably find that many users have tapped that header more than once in frustration.
Include a link to the homepage in the logo/header image.
7. Phone Number
As discussed earlier, the ability to make a reservation is a key goal of the mobile site. With this in mind, there are two main ways in which a user books with Deeson’s – by booking online or by calling directly. Consequently, the ability to call Deeson’s should be made as easy possible for the user on mobile.
However, there is no direct way to call throughout the site or on the ‘reservations’ page, therefore, the only way for the user to find the phone number to call is to visit the Contact page on the navigation menu.
There are two issues, first is that another unnecessary hover menu is displayed with two options ‘Contact Us’ & ‘Links’ – the user is expecting to be sent to a contact page, so having this hover menu is confusing to the user and not a smooth experience.
Secondly and more importantly, after selecting the ‘Contact Us’ link the user is shown contact details including the telephone, however, the telephone is not clickable, so a user will be unable to call directly no doubt causing frustration as they then have to carefully copy and paste the phone number in order to be able to call – a real usability nightmare!
- Remove unnecessary hover menu
- Make the telephone number clickable allowing easy calls to be made.
- Allow the user to call from the ‘reservations’ page.
Another method to encourage phone calls is to place a phone call icon in the top left of the site – replacing the hamburger menu discussed previously. This will then allow the user to call Deeson’s from any page of the site.
8. Address Directions / Sat Nav
An important part of any bricks & mortar business – is to inform the user where they can find you and what’s the best way to get there.
For a restaurant, this is even more crucial. Consequently, it’s vital that the user is able to get accurate address details when looking to travel to the restaurant.
Unfortunately, on the contact page of the website the only address detail that is clickable is the postcode, upon clicking, the user is sent to Google Maps – this would typically be a good thing, however, the postcode is the only detail sent to Google Maps and with the restaurant being situated in the centre of town in a built up area, someone travelling from afar who is unfamiliar with the restaurants location is going to have a torrid time trying to find it just from the postcode – as a postcode will cover a fairly large area.
It’s also important to provide the user with more answers to questions such as “where is best to park?” “how much will they have to pay for parking?” “can you direct me to the car park?” “will I have to walk far from there?”. Currently, there is no information on the site which answers these questions, this causes friction for the user because what if he/she worries they can’t find it? They may end up opting not to risk making a booking, by giving the user more information, the restaurant is able to answer any question the user may have about the location, travel & parking.
- Have the address link provide the full address details within Google Maps – not just the postcode.
- Provide more information about parking & travel options as well as a restaurant location.
This is just a brief version of the type of usability audits we do at DigitalBeans, so it is by no means meant to be an exhaustive list of usability recommendations. Hopefully, this brief review of Deeson’s Restaurant has given you an insight into the world of mobile usability and helped highlight improvements that you may also be able to make to your own site’s usability.