UI Concepts

How to Confuse ATM Users

Closeup of the Envelope Insertion slot in an ATM

Closeup of the Envelope Insertion slot in an ATM

ATMs are great. You’re no longer restricted by where your bank is and when it is open. But, I wish they’d spend a little more time getting the designs right. The image above is from an ATM I used. The ATM has Braille, which is wonderful. You can see the Braille in the strip above the envelope insertion slot. I can’t read it, but I assume it says that the envelope slot is below. This is a very nice touch, great attention to detail. In addition, all the edges are gently rounded, there are no sharp corners, overall a very well executed design.

Given the attention to detail, what I don’t get is the image showing you how to insert envelopes into the slot. Its bad…

  • The biggest problem is that the orientation of the envelopes+slot icon and the arrow is wrong. It looks like you’re supposed to pull the envelopes out of the slot.
  • The second is that the envelopes look like they are going into the slot along their width, rather than the edge.
  • It also looks like you’re supposed to put in a stack of envelopes.
  • The arrow may have been intended to indicate where the slot is. However, that is confusing. It is so close to the slot+envelope graphic that it looks like it telling you what action to perform.
Better ATM Slot Graphic

ATM With the insertion graphic moved to the slot

A better design would be to move the envelope insertion graphic to the deposit slot (and fix its orientation) like the image above.

Companies are always looking for ways to cut costs. When I managed Sun’s industrial design team, I learned about keeping costs down. The graphics are printed onto the metal using silk screening. Images on two separate bits of metal is twice the cost. The two bits of metal (silver and gray in the picture above) might come from different sources. The silk screen should not bother trying to tell you where the slot is. It is large compared to the graphic that it is hard to miss. Also, trying to show the envelopes / envelope stack is too much detail, and adds to the confusion by suggesting the envelopes go in face down. Simplifying the graphic has a better result.

Better Silk Screen Design

Simplified Silk Screen icon

I’m guessing the team that designed the ATM had a decent design. Most likely, someone who was responsible for cost cutting made some design changes without consulting the design team. Whenever Sun’s team needed to cost cut, they worked with the ID team who modified their design to fit the constraints.

No New Ideas: The Star 7 Prototype

Every once in a while, you come across something that makes you believe that there are no new ideas. That everything you come up with was invented by someone else before you. James Gosling‘s video of the Star 7 Prototype is such a thing.

Last year (2009), while I was working on the Java Store, we were looking for a way to get users to understand the “drag to install” feature. Users could simply drag apps out of the store onto their desktop.  This would install the app for them. While this worked very simply once you knew about it, we were looking for ways to help the user discover and use the fea ture.

James suggested that we look at the Star 7 prototype video for ideas. He said that in the Star 7, the “complete user manual” was part of the boot up sequence. The Star 7 was built between 1991 and 1992 at Sun Labs, and the video dates back to 1992. It was a “prototype handheld device” that featured a wireless network, color touch screen, and sound.

When I looked at the video, it blew me away. There was, indeed, a “user’s manual” in the bootup sequence. But what grabbed my attention was how many UI conventions that are common today had been conceived in that UI nearly 20 years ago. I felt compelled to transcribe the video with timestamps and screenshots. Take a look at the video below. If you see something I’ve missed in the list below, post a comment.

UI Conventions from the Star 7

  • Controls with inertia like sliders and spinners: A flick spins them, and the harder you spin, the more they go. Now popularized in the iPhone. Time stamp 4:27.
  • Back button (called “wayback” button. Takes user back to location they came from. Now standard in browsers and many other UIs.) Time stamp: 1:45.
    • A feature from the wayback button that has not made it into current UIs is the thumbnail of the screen that the wayback button will take the user to.
  • Sound to show that an object has been selected / is active. (Multiple instances in the video) Apple / Bill Gaver had an experimental product called the “Sonic Finder” that also used sound to provide the user with feedback.
    • Clicking sound when a spinner is moved. The iPhone inertial spinners use this. For example, when setting the time for an alarm, the iPhone clock UI uses inertial spinners. They give the user auditory feedback when the spinners are turned. The Star 7 did this in 1992.
  • Help system is part of splash screen. Timestamp: 1:28.
  • Panning: Screen pans to keep the “cursor” in view.
  • Drag and Drop: Objects (e.g. schedule for a TV program from the TV guide) could be dropped on the Agent or on other objects (e.g. VCR).
  • Magnifying glass with “+” to indicate zoom in, “-” to indicate zoom out. Time stamp: 5:02.
  • Zoom in for detail / zoom out for a larger view. Time stamp: 5:09.
  • Friendly Agent (as opposed to Clippy, Microsoft’s really annoying agent).
  • Anthropomorphic UI (remember Microsoft BOB?)
  • Dragging to an object and waiting for it to open before dropping. Mac OS X has something similar. If you drag a file to a folder and wait, the folder will open.
  • Sketchy inrerfaces. Was part of James Landay’s PhD thesis. He and his students at Berkeley created “Denim” a sketchy wireframing tool. Now popularized by Balsamiq. What is amazing about the Star 7 interface is that it predates all of this work by years. In addition, Denim and Balsamiq use the sketchy style for wireframes. In the Star 7, it was the actual application, driven by “real” code.

Its fun to speculate what would have happened to the world of PDAs and cell phones if Sun had invested in such devices. The Star 7 also predated the Palm / Palm Pilot. According to Wikipedia, Palm shipped its first Palm Pilots in 1996.