The UI-ology Zone: In a Pressed State
7/21/2011 2:00 AM
by Morgan Strauss
For intuitive operation, users need to be able to see that a button is visibly active (in a “pressed state”) when pushed. Since their finger is actually covering the button when it is pushed, this brings up a few design challenges. Obviously putting an “on” light in the middle of the button isn’t going to cut it. A better approach would be to have the active area display in a higher contrast when active, making it clear to the users that the button is doing something. But of course, for this to work the active area itself needs to be larger than the bounding area that the finger covers so it can be seen.
A button that toggles on and off, however, is a very different story. Here it should be very obvious which state is active and which is not when the user’s finger isn’t on the button. This means that any approach where the user has to compare the active state to the inactive state should be avoided. So using a higher contrast on a toggle button is ineffective, as the user has to distinguish between the contrast levels. Instead, an option would be to graphically make the button look pressed in when it’s active. Another is to use an LED or other lighting effect to make the button look clearly illuminated when on. There are a number of ways to achieve the desired result, and designers should feel free to get creative with it.
Morgan Strauss is the president of Guifx, an interface design studio specializing in touchscreen interfaces for home automation and embedded systems. He can be reached at firstname.lastname@example.org.