Which option is better for a tool that can edit a website visually?

  1. A two-part toggle switch.
  2. A button that changes the state (and the label on the button changes when the mode changes so that the mode can be reverted).

In design mode you can design and to design another page you can use browsing mode to go to another page.

  • 3
    I haven't seen the 2nd option in many places, but I like it for its clarity. It is a bit long, but there is no ambiguity at all about which mode I'm in & what would happen if I click. I also like the use of color and the capital "D" label (button?) to further clarify. With Option 1 (esp in a grayscale UI) I'm not positive which tab is active. It's probably "Design" but I'm not 100% sure. That sort of segmented control or switch worked better for me w/some color & depth cues before everything went totally "flat." ... This is just personal preference, so only a comment.
    – mc01
    Commented Sep 23, 2014 at 16:18

4 Answers 4


I dont have a refrence on research, but definetly there must be one:

Referencing desired behavior by location is easier, than by toggling single control state.

This means user is more likely to associate left and right with designing and browsing and wont even read buttons in future.

In your mind you have this task as "I want to switch design mode" or "I want to switch browse mode" and not "I want to switch other mode"

thats why:

worflow for case 1:

  1. click left for design, right for browse

worflow for case 2:

  1. read and think of active button state
  2. decide wheither you want to click ot or not.

some proofs of this concept:

  1. two separate "open" / "close" buttons on car remote key
  2. On/Off buttons: Should a toggle button show its current state or the state to which it will change?
  3. Visual Studio use two tabs for edit / design
  • 2
    The two button option also gives you more information - if you are in browse mode, you know that the other available mode is 'design', and it only took 2 words of text. Compare to the 8 words it took to read the single state button.
    – Rotem
    Commented Sep 23, 2014 at 15:24

Option 1 is cleaner and a more direct visual translation of "this OR that". If you added a 'Mode' label like other controls it would be more descriptive and recoup some of the benefit of the long form option.

It's interesting the second option is given a lot more visual prominence with color and size. What is the goal here? If it's a new feature / major mode and other buttons are secondary you could still do a treatment more like 1 but use color / size / style to make it more prominent.

Certainly if users are missing the mode option then a more prominent treatment is in order. I would still question a very wordy control. See the mode selector treatment for InvisionApp (prototyping tool) below. They make selected mode visually prominent. All other controls are represented in a muted color. Rather than take up screen real estate with explanatory text it is revealed on hover for user orientation.

enter image description here

enter image description here


What is the name of that specific component? I mean when the switcher is not an on/off thing, and instead is a mode selector.


In my experience, it depends on the workflow.

  1. The chip-selector style, i.e. option A | option B, work better when the user is likely to switch frequently between options during their workflow.
  2. The state-change button works better when the user picks one view to accomplish and set of tasks, and then switches to another view.

A state-change button also allows you to better handle special cases, like unsaved data being discarded during the change. In the chip-style selector, the user's default expectation is likely to be: "nothing should break".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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