woodwing

I want to start a little series about usability and best practices for interfaces in general and for magazines in particular. This time I want to cover buttons.

In the real world we are surrounded by objects that communicate with us. These objects have different properties like colour, behaviour and appearance that give us an indication on how to interact with them. If we see a button we know that pressing it will invoke an action depending on the context it is presented in. When designing interfaces we make use of these assumptions, we use a button because we want people to tab it. A button for example has a little distance to it’s surface thus throws a shadow and its beveled surface reflects a light and maybe contains a gradient. Now you might think I get lost in details. But take a look at these images below.

The left button fulfils all these properties, the right one doesn’t, it looks flat because all effects are removed. Presenting the third button to a user might not result in an action, the user might think it’s a label. Functionality is unrecognized. Sometimes a text label looks like a button, the user tabs it and gets frustrated because nothing happens; frustrated users might never come back.

If you want the user to recognize these objects at a first glance it’s important to make them look like real world objects. If you don’t, these objects will be harder to recognize. The downside of a realistic button is that it makes a layout look cluttered if used too often on a page. Sometimes I design navigation elements that do not fulfil all of these properties mentioned above but will be recognized sooner or later because they are used repetitively. You can learn a user how to use it page by page or issue by issue. But it’s important to keep it consistent throughout all issues and to distinguish between informative, non-touchable icons (slideshow- tapping on a slideshow does not work) and objects that invoke an action. What I personally would never do is to add a descriptive label next to a “button” something like “press this”, “click here”, “do that”. It occupies lots of space. A button that needs a label hasn’t ben designed well. So if you add interactivity to your content make sure it’s recognizable. If you provide great content with poorly designed interactive elements , the user experience will be poor and your efforts will be in vain.

Example of well designed buttons