Pizza As UI Part II
In Part I, I wrote about the effect of information overload, poor communication, and misplaced convenience on user experience. I’m going to discuss information overload in more detail and speak in a more meta sense about tools.
Once again, I’m going to pick on Antonio’s (although I could choose any number other pizza places) pizza box:
Ok, here we see a set of radio buttons that are used to mark a box to indicate its contents. There are several things wrong with this, so I’ll hit them one at a time.
First, radio buttons are the wrong UI element. Radio buttons are supposed to be used to set off a group of “select one of many”. Maybe these are really check boxes with unusual skinning, but even so it is the wrong UI element. What if I want double mushrooms? How do I indicate that in a way that is obvious and unambiguous? A better choice would be an entry blank followed by a times symbol then the topping (ie, __ × Peppers). In real UI terms, this could be a numeric entry box or better yet a pop-up which includes a reasonable limit to pizza toppings Side note: what is the reasonable limit? For pizza, it might be 5 or 6, but realize that whenever you try to create a reasonable limit, a customer will try to do something crazy, like this 100 patty burger requested at an In-N-Out Burger.
Second, what is the difference between Special and Other? I have absolutely no idea. It should probably be just “Other” with a space for it.
Third, one of these things is not like the other. The only item in the set that is not a topping is “Customer”. Or is it? It has a place to check it – now I’m terrified. Do I really want a pizza with parts of me (or anyone else) on it? Ewww. Best not to use a check box. Best not to associate it will all the other toppings
Fourth, the underlined box is probably for Customer, but maybe it’s for Other. I don’t know. What happens when the customer is name Olive Oyl? Probably the wrong thing half the time. Better to set off space for this.
Here’s a mockup of the pizza box with suggestions in place (forgive the crude image editing – I’m not an artist):
While the box looks mostly the same, there are some important other changes. The box for the customer is unlabeled. Labeling it is an option, but I wanted to leave the intent vague for the pizza shop. The outline is bold, making it really stand out. When a customer picks up a pizza, this is the first thing that the counter staff will be looking for. Your eye is drawn to it. I used a bolder font as it seemed easier to read, and set off other as its own thing.
The bad news, is that the fundamental concept of this UI is flawed, and herein is the real problem. This pizza box is a component, if you will, purchased by the shop in bulk for one real purpose: to hold a pizza. And even then, it fails since the flimsy cardboard can only just tolerate the weight of a pizza and only fails more as oil seeps into it. It doesn’t insulate well, so hot pizza gets colder faster and transmits that heat to your hands or arms, especially since you have to support it to keep it from caving in. The box should be stronger (many shops use corrugated cardboard).
Then comes the UI itself. This was something slapped on as an afterthought by the printer. It has every appearance of being useful, but I rarely, if ever see it being used. Why? It’s in the wrong place for being written on. There are very few ways to easily write on a pizza box. The edge is ideal for information presentation, when stacks of boxes are on top of the oven, but it’s unwieldy to actually write on the box.
The check boxes are on the box – but the people who make the pizza don’t have the box, nor should they. The box takes up too much space. In reality, the box only comes into play when the pizza comes out of the oven. Someone pulls the pizza out and puts it in the box. Now is the time to write on it, which they can’t easily do since that entails crouching to the level of the box before it gets on the oven, turning the box up on edge (ruining the pizza), or moving the box on top of the oven and filling it in there (blocking the oven – a no-no in a busy pizza shop).
This UI represents epic fail on so many levels. No wonder it doesn’t get used.
What I’ve seen in most places is that the order ticket travels with the pizza (except into the oven) and gets tucked in the box – this is bad because the ticket flops over and is hard to read at pickup time. It makes the customer wait and blocks the oven. One solution I’ve seen that address the problems is a ticket which is short in height, but wide in length with a peel-off back. The order taker writes the order on it. It goes to the preparer and then follows the pizza. When the pizza goes into the box, the backing is peeled off and the ticket gets stuck onto the box.
Ultimately, a tool should be made to be used. A tool that has the appearance of being useful, but in reality does nothing is worse than no tool at all.