Allergen card vs. Celiac Menu, from the perspective of UX, Information Architecture and Data Visualization.

On returning home after a walk, with a stop at a mountain restaurant, my partner told me with a smile of excitement: 

– I’ve been in a fantastic place.  Great food and they also have a celiac menu. I’ve taken a picture of it, in case you want to come with me someday.

Those who have any kind of intolerance will know that the problem does not only affect the sufferer but also family and friends when it comes to finding a restaurant where everybody can eat. Depending on the level of intolerance, maybe will happen if the food has some traces of gluten, for example. But sometimes, and for very intolerance sensitive people, an error could be a serious problem, or even lead to death. (Several of my friends always carry an adrenaline injection, in case they accidentally encounter ingredients to which they are allergic.

Returning to the subject of the restaurant, I was looking at the photo I received on the mobile phone. After examining it for a while, I raised my eyebrows and looked at him sternly and said with a sour face: 

– This is not a celiac menu…

– What are you saying? Here it says what has gluten and what doesn’t.

– That’s not a celiac menu (I insisted). In fact, it’s something completely different.

People usually say I’m not the nicest of people, especially when I am hungry for something, but there’s no way to satisfy this hunger. (quite an apt expression with the subject at hand). If you have never suffered any kind of intolerance related issue, you may perceive my reaction as a bit OTT and exaggerated, but in this particular case, I’m completely right: An allergen card is not a celiac menu, it’s basically the opposite.

After the European law 1169/11 came into force, it became mandatory to inform customers about the allergens in the dishes on the menu in bars and anywhere in the restaurant trade, although there are still many that do not comply with the regulations and many others that don’t present the information properly.

Let’s take a look at  the differences:

Normally an allergen card is presented as follows: A list of dishes with their possible adverse components listed one after another for each dish.

Sometimes they do not even appear in the same order, and this is why it is difficult to process the information and determine which dishes you can eat and which dishes you can’t. Although the icons include a certain order, by not having the same ingredients, it is difficult to make a visual scan between the icons for which we should be looking out for.

Let’s Imagine the case of a celiac and allergic who is also allergic to celery: In this case, we will read the dishes one by one and then check which of them have the wheat icon (we will not enter the debate on the icon’s meaningfulness).

Once this is done, we will memorize the dishes with gluten and begin the search for celery, something that little by little will increase our cognitive load.

Some of you may be thinking that this is not what happens in real life, that users do not search in this way, and that they will start from a specific whim, or we focus on the dishes that we like or feel like eating  at that precise moment, and then check if they are suitable or not for us.

I can assure you that this never happens: Almost all the dishes that we might fancy, can not be consumed, because the contain specific substances that we can not eat. There are even several theories that say we only become allergic to what we like, because of the burden of the system: We ‘abuse’ or consume more things that we like, and in some cases, the body reaches a limit intolerance.

In other allergen card cases, somewhat more developed we may find, something similar to this:

Icons listed in columns ordered by allergen, highlighting the substances present in each dish. In this case, the information is easier to process, even when detecting several intolerances: It is much easier to detect the rows in which the problematic substances are together but these systems still have a problem:

It is focused on what you cannot eat, instead of what you can. It happens on many occasions that after having checked an entire menu (especially in tapas bars during the summer)  you reach the conclusion that you can not consume anything at all (but your appetite has already been awoken, if your appetite was not aroused when you left home).

Normally a specialized restaurant will not consider all cases of allergens, perhaps only the most common ones, but in this case, the menu is oriented to the dishes you can eat, so you only process the food that you are able to eat:

What is the big difference?

So far the examples have focused on what I can NOT eat, this last menu focuses on the opposite: What I can eat.

But the previous example, although good, is insufficient. What would happen to a person who had allergies to many of the products? How would we solve the problem? One of the options would be to go back to the second case (Figure 3) trying to find the rows with fewer icons highlighted, and then check if there is any possibility, although this would mean having a  customizable menu that automatically gave us information about what to eat and whatnot. I am sure that within a few years and thanks to artificial intelligence, we will have this information filtered just bypassing our biometric bracelet over the welcome sensor at the door. Including the combination that will best suit us at that time of day and in line with the exercise we have done that day. In the meantime  we could have something similar to the following on a digital menu supported on a tablet or mobile:

To get something similar like this:

No results matching the search criteria were found:

Better go home. Or drink a glass of water.

Or better still, that we “print” on demand whatever we like. No allergens included. Or better still, that nobody has allergies to any food.

Luz Calvo

The UX Visualization Diaries · Number 1

Someone once accused me of not doing visualizations. Although that is not actually true (I’ve done more than one and so that means there are a lot of people out there with a bad memory) However, I have to admit that it’s not a really my job.

My job, my function in the Visualization department – apart from designing user friendly interfaces, of course– is to make the visualisations of my team more understandable:

Trying to prevent them putting 20 variables in the sae graphic in an attempt to demonstrate that it can be done, just for the sake of it.

Sometimes I managed to do it. Sometimes I didn’t.

That’s the reason why I decided to write this series of blog entries dedicated to analyzing things that are not clear or aspects that could be improved upon, always from the UX point of view.

Taking Tuftte’s work as a base, Fernanda Viegas and Martin Wattenberg wrote a blog entry titled Design & Redesign which suggested that Data Scientists should not only criticize other people’s work but improve on it with suggestions on how to redesign the visualization and  I’ll try to analyze them respecting their original style.

Journal visualization, the number of publications are represented by the volume of circles

First I’ll confess that I chose this representation: Jounals, because I thought, at first glance, that it was appealing and easy to analyze. I also wanted to prove that my point of view coincided with, or at least complemented, the view of experts (my boss basically). And they did.

The first problem we see is that depending of the subject or type of publication we see a different time period (from 2004 to 2013, from 1970 to 2010…)

The question is why not represent the same time period for all graphs to show  that they don´t have any data in some years.

A different problem is the time step which is changing throughout the different graphs: every two years, every five years…

different step in timelinedifferent step in timelineAfter thinking about the color range, in the end, I deduced it was not relevant. The color range selected only tries to differenciate one line from another, but some users could have thought: Does the range (Blue, red, green) mean something? Does the color intensity mean something else? Is the light blue more relevant than the dark one?
And the last and most important design error: Why are some totally different values represented with the same/similar radius?


The basic problem is that for every line they have changed the relative radius. So if you don´t see the values beside two similar circles you might think they are hiding a similar value, but they don’t. One circle could have a value of 20, while a similar circle could have a value of 2. So at first glance, and without any interaction you can’t compare the two graphs (or even two lines) easily.