When Digital Design Impacts Your Real-World Customers

Setting the Scene

My family and I recently visited a bistro bar run by a well-known brewery, for an afternoon bite to eat. As we asked for menus, the waiter handed a tablet to one member of my family, a coeliac. On the tablet was the online menu, with coeliac allergens pre-selected for us by the waiter.

As we finished ordering up, I checked with the bar staff - “Is the battered cod and chips gluten free?”. Their answer was “No, you can’t order that”. So, how did we order a dish that would have made someone sick? The answer is found in User Experience and User Interface design, and the assumptions we make when designing and coding interfaces.

What Went Wrong

When the waiter handed out the tablet with the menu on it, they had already selected the filters to show gluten-free foods. And the website, as it was designed to do, had greyed out those options that were unsuitable and retained in dark grey those options that were suitable. It had worked as expected.

The problem was, these were the expectations of people who had worked with and on the menu. Having not seen the original state of the menu, this was not our expectation. What we saw was a menu we had been told was suitable for coeliacs, with a list of dishes on it.

My relative didn’t make the connection between light grey being something that was unsuitable for them. In fact, they believed the lighter shade was highlighting dishes they could choose.

How did this happen?

This all comes down to the assumptions we make as designers as we create experiences and interactions. In this instance, two erroneous assumptions had been made.

The first of these was the assumption that the menu would be used by the person making the food choice, so they would see the changes made to the menu as they selected various options - such as calorific content or allergens. But, with over 20 filters to choose from, staff had begun pre-filtering the menu for customers, to avoid confusion and frustration. So the animations that would normally indicate a change were not seen.

Second was the assumption that various tones of grey “obviously” mean the difference between something that is available or unavailable. It’s an assumption we make a lot as designers, so much so that even some of our tools use the label “disabled” to invariably mean something that will be rendered in a light grey. In this instance, this association was not made. My relative, rather than thinking these items were unavailable, or ‘disabled’, instead thought they were highlighted. It didn’t help that reflection from the tablet screen reduced contrast between the light and dark greys.

How could we have designed this better?

There are many ways to design a menu, and best practice can vary a lot based on the medium you’re using, the type of establishment you are, and the clientele you serve. So, here I’ll focus on a couple of things that could have been designed to make this experience better.

On the tablet, the menu had a lot of options for allergens that could be ticked or unticked to adjust the menu. This is great, but it means that the main menu is off the screen when the selections are made, and it also means that some customers are put off using the interface due to its apparent complexity.

In the menu, there was a second column of filters that just contained “Under 600 calories”. It’s a filter for those who want a low-calorie lunch or dinner. What if this column was also used to outline common dietary requirements? It could be populated with Vegetarian, Vegan, Lactose Intolerant, Coeliac, etc. With one tap, the options would be selected. It’s proven that when users are faced with a choice of more than 7 or 8 options, they find it harder to process the options and choose. This menu had 26 options.

Then, instead of “greying out” the unavailable menu items, why don’t we do something more obvious? The names of the dishes could have a strike through them, or the dishes could be hidden all together. This is a convention that extends outside of the digital realm, helping the many who may not be familiar with it.

The Lesson

The lesson here is that some of the assumptions we make every single day as designers can have an unexpected impact in the real world. What we assume is “obvious” may not be, depending on the context.

An animation designed to make something obvious won’t help if the person it’s intended to help isn’t looking. Greyed out text may mean different things to different people. And the experience and knowledge of the people who use your products always makes a difference.

This is why we need to test our assumptions. Try out designs, try out products with real people in the real world. Observe and simulate different contexts to understand the “fringe cases” that are never as fringe as we think they are. And open our testing up to people of different demographics - age, gender, occupation, etc - so that we get the best representation.

Those organisations who embrace the messy fact that technology exists in and interacts with the real world will find they can truly make a difference for their customers.

Thanks to the Staff

My thanks go out to the staff who were incredibly helpful during our visit. The issues I’ve discussed here are nothing to do with them, they stem from decisions made long before the restaurant. We were well looked after and the food was delicious, so we’ll definitely be visiting again. But this time, we’ll know how to use the menu.