I went out to dinner with friends last night, and got treated to a particularly bad example of UI design gone wild. Somehow this UI evolved over time.

So as you can see here, there’s a disaster of light switches. Some for fans and vents, others for lights. The best part is that there’s

• another row of lights i couldn’t fit into this picture
• actually another entire ‘panel’ in a different part of the restaurant! (smaller, though)

When looking at this from my perspective, the meaning is lost. The first thing that comes to mind is that there must be some better way to do this (an actual panel, perhaps?), second is that things must be rough when you just want to turn things on or off for one light.

We had to ask what the deal with the lights actually was – apparently it’s really rough to train people to close down at night, because some of the switches stay on, and some stay off.

The punch line of this is that they recently repainted. Apparently they’re half mislabeled now, as they didn’t spend too much effort worrying about putting the right cover plates back on the right switches.

How many times have you seen this in web UI design? This is a real world example of what a form with controls thrown everywhere would look like. It seems ridiculous when we see it on a wall, and it should seem just as ridiculous when we make a webform that just throws 23+ controls at you and says “have fun”.

So what could be done to actually fix this design? Here’s some potential solutions:

• Group like-switches together. Perhaps “bar lights”, “main seating lights”, “main seating fans” etc.
• Group switches by context together. Typically we turn this set of lights on at the same time – group those.
• “Complex” switch – a master programmable control panel (this seems expensive, and a design cop-out to me)
• Hide them. This is the interesting one. Right now, this is exposed to all of the customers, even those who don’t need to be made aware of the complexity. I wonder what brand psychologists would say about the subtle hints given off by having this in a dining room – it certainly wouldn’t make you feel like a tight ship was being run.If the complexity is a must (again, that should be a last resort), then only show it to those who must interact with it. Perhaps the closer touches the master panel, and the average wait staff only works with the “simple” panel.

One last point – if you see that much mess out front, imagine what’s going on behind the scenes. Behind every light switch should be a box that encases the electrical wiring behind the drywall – this is usually slightly larger than the switch itself. Imagine where all the boxes would fit in the above picture – there’s not much room for the wall at that point… and there must be just a mess of wiring in the wall.

Bad UI can expose your code smell to the client. This is the worst – it’s bad enough if your code is riddled with flaws and is an unmaintainable mess, but the client should not have to have that made visible to them!