User experience lessons taught to me by a menu
User experience (UX) is the study and optimisation of how a user interacts with a digital interface like a website or app. UX is a huge field that covers everything from the autoplay feature built into Netflix, the Airbnb booking ecosystem, and the way you filter possibilities on Uber Eats.
Good user experience responds to the context of the user and tries to learn how they interact with the product. And when you're writing, you're doing an off-screen version of user experience. You're thinking about the context the reader will find themselves in when they read your words, the way your words will look on their screen, and how you can reduce friction to allow them to understand your meaning. The best living example of good and bad off-screen UX is none other than the humble cafe menu.
This is an out-of-date menu for a hip cafe in the inner north of Melbourne. As much as I love eating here, reading the menu gives me a headache.
It looks reasonably innocuous but a UX audit of this menu snippet turns up the following issues we can learn from.
Confusing naming conventions
Headings and names are meant to signpost in a way that allows us to go deeper into the signposted section with some clue of what it is (like how on your resume, a headline of 'Education' prepares the reader for some information about your education, pretty simple). On this menu, the dish names give us absolutely no clue as to what's going on in the dish. Now, I love whimsy as much as every other woman who owns a Baggu, but there's a time and a place. A menu is usually neither*, as readers are hungry and the waiter is standing right there waiting, iPad at the ready. The bear names mean the reader is required to read the whole menu item to understand that “Bearable” = “Avocado on toast” which is really more brain power than anyone is willing to give when hungry. But also, bitchy aside, the names aren’t even puns? Or word play? I’d maybe, maybe understand '“Avobeardo on toast” or even “Beardocado on Bearoast” but what does “Bearable” even mean?!
Headings blend in
The dish names aren't stylistically differentiated from the descriptions. The dish name (which is the equivalent of the 'Education' heading in your resume) should be in bold or italics, in a larger font, and/or ideally on its own line to improve scanability. If the reader's decision-making framework is along the lines of "I really want huevos rancheros, God I hope they have it, otherwise, I'll get some other egg thing I guess, but don't let it come to that pleaseeee", they can quickly parse the menu, clock the huevos, internally high-five themselves, and not have to read the whole dang menu.
Poor scannability
Everyone scans a menu differently, with different priorities. If you don't have a preference for one specific dish, you might be looking at price, dietaries, or heaviness of the dish as commonly-used frameworks for making a decision. To create a good user experience, that information should be called out and easily compared.
For example, the prices should be separated from the name (giving it some visual breathing room) which is usually done by a bunch of spaced-out full stops . . . . . . . . . This serves the nobler purpose of pushing the price to the right side so all these alike data points neatly line up and are easy to scan/compare.
Unintuitive order
Dishes should progress from low price to high price, from lighter to heavier, from sweet to savoury. Partly because this is how most menus are done so there's an expectation, partly because this helps the people with a light-or-heavy framework make supported choices and helps people guess where they might find something like avocado toast (usually it’s not as high up as porridge and granola, possibly just past toast and eggs-your-way). People naturally look for patterns and if you don't consciously design them, they'll either be confused, annoyed, or apt to overlay their own.
Hard to locate tags
The vegan, vegetarian, and gluten-free tags should appear at the same line as the name and price because people naturally filter by these dietaries. If this is the kind of cafe that realllly caters to dietaries, they might need to be in am even more prominent position. Ideally, all dietaries that are indicated by acronyms should be supported by a key. You might think “vgo” means “vegan option” but they might mean “vegan - get out”. You never know.
Whack ellipses
The ellipsis after the dish name is whack and ominous, obvi.
What are you gonna do about it, huh?
This is what it would look like if the cafe redesigned its menu to address my (entirely unasked for) criticisms.
It's admittedly way less fun but more readable which is kinder to the hungry and overwhelmed cafe patron who is hyperventilating with indecision (me).
*People really do like the whimsical names at this particular cafe, so I suppose the added context is that if you have lots of regulars and are located in a high-end part of town where people have the time to deconstruct and be delighted by your puns, go for broke.
TL;DR? Use headings as signposts, not whimsy; separate your headings from the paragraph copy; if people are making a decision in a crunch, make it easy to compare by lining up the comparable data points, not obscuring them.