Can I See The Menu, Please?
Updated: Jul 7
Imagine this scenario... You walk through the front doors to a new restaurant and are warmly greeted by the host behind their podium mounted with a list of reservations and mapped out seating.
"Welcome to Such 'n Such! How many are we serving today?" You gladly respond with the number in your party as they begin to scan for available seating.
With a smile, the host says, "Follow me." You follow behind as you are guided through the industrial brick-sided space, vast yet comfortably cozy, with concrete flooring and floor-to-ceiling window panes that wrap around the side of the building, filling the space with natural lighting accompanied by decorative pipe fixtures from the ceiling above.
You're brought to a large distressed table surrounded by metal chairs with wood seating. Making yourself comfortable at the table, the host tells you, "Your server will be right with you."
As you await to be greeted by the person to take your order, you begin to wonder to yourself..."Where's the menu?"
You may have experienced this before, but if not, it might be easy to comprehend how impatient one might feel as they wait for the server to arrive with the food choices for the evening.
After all, what is a restaurant without the menu?
To get to the point of this article, I was looking through some local businesses in the Charleston area. One fan favorite of tourists and locals alike is Lewis Barbecue.
Upon arriving to their website, I could instantly verify that I arrived at the correct destination with their logo proudly displayed in the upper right hand side of the page. However, one thing completely threw me off.
The page is very busy, with the background competing with the content in the foreground, my eyes are having a hard time reading the menu obscurely displayed on the left-hand side.
My attention immediately gravitates towards the center of the screen, magnifying the sensuous basket of pulled pork that makes your stomach start to rumble.
I give a hand to Marketing for their display of the main attraction, but the site is lacking when it comes to navigational pursuit for obtaining such a feast.
Hovering over the items, won't do you any better as the gradient letters are filled with a light orange, though in line with their branding, makes it even harder to read as you move through each item.
The highlighted menu item gets lost in the background and doesn't help the user in making an easy association between the words and image that’s being displayed.
Now, I have nothing against Lewis Barbecue nor the company who designed their site. I'm simply doing my due diligence as a designer in an ever evolving digital age by giving my professional critique.
The overall theme of this design isn't terrible, it's actually quite appealing and very modern for a local business. The only thing I would suggest is we adjust the Menu.
Using the same font family, dressing down the color to a blank slate with a slight raise off the page and giving the background a darkened overlay, the menu becomes much clearer and easily visible at a glance. It sticks out as it's own separate component on the page, distinguishable from the background imagery and given a distinct look and feel to insinuate a call-to-action from the user visiting the site. Upon hovering over a link, the text will also expand to 120%, giving the user a bigger impression that they are now viewing a different element on the page.
Also, you'll notice the Sombrero that was more largely portrayed in the original design was cropped and given a smaller appearance on the page with a heavier shadow to lift it further off the page. I went with this design look to more closely match a design that many sites in 2020 are utilizing, the Chatbot.
Although, clicking on the Sombrero won't open up a chat box for you to ask questions to a virtual assistant, it does however redirect you to another page that I believe the owners intended to drive traffic and attention to, Juan Luis (also found in the main menu), a new restaurant the owners are planning to open this Summer in 2020.
The original design was much larger with a flatter appearance on the page, which may not be so clearly visible right away until the flashing neon letters appear to light up on the Sombrero. The animated GIF will most certainly grab your attention, which leads me to question the need for such a large utilization of screen real estate.
Might I recommend a dancing Sombrero, where it rocks back and forth to add more animated movement on the page? According to an article from Nick Babich on UX Planet, by injecting subtle motion into design, you can make users feel like they are interacting with something that has a personality. It brings life to the page, giving the users something they can resonate with as it more closely resembles the real world.
Don't be afraid to breathe life into the design!
I'd be curious to do A/B testing on both the Main menu and Sombrero design to see how users interact with this new design. Would it improve the rate in which someone orders takeout? Would more users click the fun little sombrero?
No one knows, even I don't know the answer to those questions.
But, if we put the design to the test, our users actions will be the ones to guide us in the right direction. Hopefully what the data will show is that there will be no more, "Can I see the menu, please?"
Babich, Nick. (2016). Motion in UX Design. https://uxplanet.org/motion-in-ux-design-90f6da5c32fe