The UX of UP (and down): Elevating the Elevator.

Elevators were built to do two things: go up and go down. So why should their control panels ever be confusing? Because they weren’t built by designers, that’s why! Oftentimes it seems the simplest of Enterprise Mobile Apps were designed with the same utility-leaning mindset: the app does what it’s supposed do, so who really cares what the buttons looks like? But

as we’ll see, even a device that supports only a couple of actions can somehow lead to a ridiculously complex user interface. So let’s see what UX lessons there are to be learned from the magic floating box:

First off, elevators used to be controlled like this: push the lever left for down, right for up. Back towards the middle to stop. This binary control is perfectly suited for an elevator. Everybody got it? Good. Now let’s see where things went awry.

Lesson 1: Be wary of arrows. Besides indicating direction, arrows also have a nasty habit of pointing to things. In this case, the wrong button. The user confusion here is derived from the fact the arrows seem to be saying, “The down button’s down here, click this one! The up button’s up there.” Only they’re not. The labels are beside their respective buttons, not positioned above and below them.

Lesson 2: Different functions call for different stylistic treatments. There seems to be some commandment against making elevator buttons look different even when they have completely different functions.

You may argue that all the items in an app’s hamburger menu are presented identically in a big list, but consider the eBay app, which displays Home, Watching, Buying, Selling, and Following in a simple list but uses a separate treatment for Messages and Notifications (which coincidentally is exactly analogous to an elevator alarm button). Action items like “List an item” are given a completely different treatment: blue button/white text. The idea is to distinguish navigation from tools from communication. But at some point someone (probably at Otis) decided all elevator buttons should be the same shape and size — with no exceptions. Ever. There’s no reason (other than budgetary constraints) why the door open/close buttons, and particularly the alarm button should be identical to all the other buttons. Here, at least, the door and alarm buttons are noticeably offset from the floor buttons (and the floor numbers start at the bottom and work their way up).

Lesson 3: Present information consistently, even if it means compromising realism
In this case, I would argue the presentation of the subterranean floor numbers should be consistent, despite nor reflecting the actual physical layout of the floors. In the case of P1–3 shown here, the user is not going to perform the logical gymnastics required to anticipate that the Parking Floor buttons would be in reverse order since they’re in essence negative numbers. Rather, the user would assume P3, P2, P1 would appear in the same order as 1, 2, 3, that is, as P1, P2, P3. The idea that the position of the P buttons would correlate literally to the physical structure of the building is too subtle for users to anticipate. In this case, I would suggest flipping the order of the bottom row of buttons such that “L” is on the far left followed by P1, P2, P3. Some may disagree with me on this point, but those people would be wrong.

Further, the four columns of floor buttons seem better suited to a building that’s laying on its side than to a normal up-and-down style building. However, this may be due to space constraints or to make the buttons easier to reach. See? It’s always a trade-off.

Lesson 4: That said, the placement of buttons should always reflect their physical presence in the real world. There’s a simple reason the iPhone passcode and dialer screens are laid-out the way they are: because we’re all used to seeing them that way in the real world. At left is a worst-case scenario. These buttons are upside down and backwards. At the very least, floor numbers should begin at the bottom and work their way up, as do the floors they correspond to. Also, since we’re all used to reading left to right, floor numbers should ascend from left to right as well. The arrangement shown may be the least intuitive of all possible options. Congratulations to whoever was in charge of this one!

Figured out the problem with this one? Take a closer look. Yes, it’s redundant for one. If you’ve already got numbers on the buttons, why do you need them embossed to the side of the button? Here’s why (sort of): the embossed area also encloses the braille for the number. The problem: how’s a blind person supposed to know which button corresponds to the floor? Is it the one to the left of the braille or the one to the right? I’m guessing this layout didn’t see much accessibility testing from the visually impaired. Lesson 5: always keep in mind the actual disability of those you’re trying to accommodate. Don’t just check it off the list: Braille numbers? CHECK

Different elevator. Same situation. Why not just put the braille on the buttons? Answer: all buttons must always be the same!!! Variation will not be tolerated!

Which brings us to the topic of signage.

Here the lesson is this: If you need to create a sign to direct users to the thing you wanted them to interact with, it’s a sure sign you should’ve put the thing you wanted them to interact with IN THE SPOT WHERE YOU PUT THE SIGN!!

Same goes for interactions on mobile devices. The purpose of any controls should be immediately apparent.

Lastly, a bit about language. Just because something is expressed concisely does not mean it’s less smart or less professional. Quite the opposite. Clearly, the hotel employee who came up with this sign thought he was being pretty clever. But he wasn’t. The extra language only confuses its meaning: Is there a non-working elevator I need to avoid? (There wasn’t.) Has there ever been an arrow on a sign that wasn’t meant to be followed?? (No. Not ever.* ) Lastly, using all these words meant the font size had to be reduced to the point the sign could only be read from like five feet away. Whereas the hallway was at least 100 feet long.

In conclusion, what should it have said above the arrow on this sign? One big word: ELEVATOR.

*Except for maybe in old Road Runner cartoons.

Addendum: Jordan’s Furniture in Reading, MA has NO FIRST FLOOR!! You know why it’s important to have a 1st floor? So people know how to get out!! How is this even legal???

Addendum #2: One additional elevator-UX consideration that I had not…considered:

Just goes to show…you learn something new every day!!

Addendum #3: How many accessibility violations are at hand here? (see what I did there?) Also, be sure to note that the buttons on the sign don’t align with the buttons on the elevator itself. Well, at least this UX insanity isn’t in…say…a hospital where folks might have to get where they’re going quickly. WAIT A MINUTE! Lastly, where the hell is this ‘red light’ exactly???