Toggle button in ZugInfo

28Sep09

ZugInfo is an iPhone application for searching train time table in Germany. It is similar to bahn.de.

There is a UI glitch that cause misunderstandings for several times. Let’s have a look at the main screen.

There are many train types in Germany. In this screen, you can see them: ICE, IC, RE/RB, and S/bus. From this screen, can you tell which trains is going to be searched for?

The answer is RE/RB and S/bus. They use toggle buttons for the selection. The buttons that are not grayed are the selections.

This is a problem. Buttons on iPhone provide an affordance to be pushed, by the gradient direction and border. And my mental model is we should push a button to select it. Think of a switch on your computer or a key on your keyboard. However, when you push RE/RB button, you DEselect it.

The next problem is graying out buttons eliminate affordance of selecting them. Therefore, user may think that those options (ICE, IC) are not available.

iPhone Human Interface Guideline would recommend using a switch button like below:

I believe that the creator of ZugInfo avoid this in favor of making all options appear in one page. Nevertheless, I wonder why don’t they use checkboxes instead.