Rotating button text

Question

Suppose that you design a standard button that at every click rotates among a fixed number of options (in this case, display modes), like: Wireframe, Shaded, Rendered and then back to Wireframe.

According to UI design, shall we display the text of the next option or active one?

Thanks.

Answer 1

Why not use a segmented control instead?

Segmented controls with text labels are unambiguous, and allow the user to see the state and the name of the state (and all available states) in the same view.

^{download bmml source – Wireframes created with Balsamiq Mockups}

if space is at a premium, you could bring these down to just icons, although beware that icons without a text label can be problematic.

iOS guidelines use the example of a segmented control for maps:

Segmented controls are often used to display different views. In Maps, for example, a segmented control lets you switch between Map, Transit, and Satellite views.

Either way, hiding functions under a button means that you are forcing the user to remember all the possible display modes. This can even be problematic in a dropdown, where all the items are labeled, but only one can be seen at a time.

Answer 2

Single button function rotator, once the action is complete, display the next version.

It's poor user experience, consider using a different control.

Example

My TV at home being a venerable 10 years old switches inputs in a similar fashion. Even though we've had the thing 10 years, do you know how often we still miss the input we were aiming for? More often than you think.

The remedial action? To then have to proceed through the other options to get back to the one we wanted.

Very frustrating.

Answer 3

The user wants to know where they're going with the next click, so label it with the name of the next slide.

Now for thoughts on a question you didn't ask: This isn't a good pattern. It requires the user to cycle through all the modes before they know what's available to them. And, if they manage to memorize all the options and their ordering, they'll click multiple times to get to their mode.

So, if you're invested in the rotating navigation, I'd suggest you add these features:

• A "Back" button labeled with the name of the previous mode.
• Indicators for each mode that can be clicked so the user can access each one directly.
• Labels on the indicators so the user can see all their options at once.

You might want to look at Nielsen/Norman's article that describes ways to make carousels less user-unfriendly.