0

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.

|improve this question
  • 1
    Can you provide us with a mockup or design? I don't really understand what you are asking... – Rubenxfd Sep 7 '17 at 12:59
4

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.

mockup

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.

|improve this answer
  • Mmm... What if you have many states, say 10 or 20? – abenci Sep 7 '17 at 13:43
  • crazytown! :). Have you seen a problem space of that kind? Would love to see that kind of a complex UI. – Mike M Sep 7 '17 at 13:45
  • If you have 10 or 20 states, you use a combobox. – 17 of 26 Sep 7 '17 at 16:11
  • @abenci, you mentioned only 3 options. This is a very good solution for your problem, much better than having to cycle thru options, with the added benefit of visualizing active options. If you want 10 or 20 then cycling through options with a single button would go from bad UX to a definitive nightmare – Devin Sep 9 '17 at 15:10
3

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.

|improve this answer
  • Mmm... In this case you don't know current option... We need to switch quickly between different states and the drop down requires too much interaction. – abenci Sep 7 '17 at 13:03
  • 1
    You're on the current option. – DarrylGodden Sep 7 '17 at 13:05
  • Yes, but I don't know how it's called. Maybe with TV channel numbers it easier, if you see 8 on the button, you know to be on 7 but this is not our case. – abenci Sep 7 '17 at 13:08
  • How does a dropdown require more intraction than cycling through an unknown number of unknown options? – Devin Sep 9 '17 at 15:12
  • Drop-downs have their place, it depends on how many options there are. – DarrylGodden Sep 9 '17 at 16:08
1

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.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.