I am working on a mobile app which has an update settings page. For one of the settings, values can be entered either using UI1 or UI2 (2 different ways)

By default, UI1 is displayed, as it is preferred by most of the users.

enter image description here

The purpose of switch is to toggle between default UI1 and UI2

enter image description here

Well, since on toggle the UI is updating instantly, the interaction isn't confusing it seems.

Do you think it's right approach? Please add thoughts/suggestions.

  • I'm not sure what your question is here. What is your concern with using a toggle? – JonW Oct 25 '18 at 10:00
  • It will be better if you could share more details on two different type of input ways. However, think on these lines - "How does user know that there is a different way. Is it clear enough?", "Is it clear that both do the same operation, but just are different ways?", "Is there a possibility to merge both more intelligently?". More information can help understand the exact requirement here. – Amit Jain Oct 25 '18 at 10:27
  • @JonW, I want to know if switch/toggle is able to convey users about the other way (UI2) of inputing values. Do you think radio buttons are better? See below. e.g. (0) UI 1 () UI2 ------------- | UI1 | ------------- – NavenS Oct 25 '18 at 10:43

The method you have chosen is used by a number of high-profile sites, Reddit being one of them: Day Mode

Night Mode

The broader question must be "what is the difference between the two interfaces?" If it is simply to provide a switch between dark and light themes, then there's little to tell the user, as long as nothing prevents them in reverting the change or makes it more difficult.

If the UI change fundamentally changes the interface, more thought should be given to the change. For example, perhaps popping up a preview of what the new interface will look like and how the user can revert the change.

The tl:dr is, the method to change the interface should be as simple or as complicated as the change that it will impose.

|improve this answer|||||

Assuming that the UI change is not just a simple BG color change, the switch element is not really appropriate to change between two equal levels of hiearchy.

According to Apple and Google:

A switch is a visual toggle between two mutually exclusive states—on and off.

Use switches to: Toggle a single option on or off, on mobile and tablet Immediately activate or deactivate something

Consider using Segmented Controls or Tabs instead:

enter image description here

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.

|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.