0

I am designing a dashboard/homepage where there is a toggle button that users will use somewhat frequently and affects the object detection feature of our app. I have two versions currently, one with the toggle button at the top and the other where the toggle button is above the object detection. I can see pros and cons for both versions.

enter image description here

Version 1:

Pros

  • Toggle button is easy to find/access
  • Separates the toggle switch from the rest of the display

Cons

  • At first glance, it is not clear that toggle button enables/disables the object detection (The toggle button will have text that tells the user what it does, but the law of proximity is lacking here)

Version 2:

Pros

  • Law of proximity makes it clear that toggle affects object detection.

Cons

  • A frequently used feature is stuck in the middle of a screen (Is this necessarily bad?)
  • Messes up the clean UI by placing a toggle in the middle of the display.

Which version provides the better ux? What about the better UI?

2
  • How often do you think that users will toggle this setting on / off? do you have any data?
    – Mike M
    Feb 15 at 18:27
  • @MikeM No data unfortunately, but I assume if the user is using this app as intended, they will set this setting at the very least when they go to bed/wake up. So they will access this at least 1-2 times per day, possibly more.
    – Gene Lee
    Feb 15 at 18:32

1 Answer 1

2

Try keeping it in proximity, and blending the control with the status.

In your wireframe, you have both an enabling control (the switch), and the status (which appears under the event).

Keeping settings and controls in proximity is valuable (as you acknowledged in v2), but see if you can combine the control and the status: You'll reduce the number of elements, and ideally increase understanding.

Here's a sketch using two variations: one with a switch, and another with a dropdown. This way you eliminate a second element that shows the status separate (which also could get lost if there's a bunch of events and it pushes it off the viewport).

enter image description here

Once you've got it blended, you can experiment w/ font weights, the icon, and color for enabled / disabled.

4
  • FWIW, I vote for "B". Some users have trouble distinguishing colors, but worse than that, it's not always apparent which slide direction means what, and having a seperate status indicator and control is a little confusing. Since "enabled" and "disabled" show the actual current state, there's no confusion. IMO, "B" is much clearer. Feb 15 at 19:39
  • @TerryCarmen That's a good point, but do you think the "Enabled" of version "B" would be difficult to tap on a mobile screen? Keep in mind that the boxes above as well as below the movement alert are tappable. The target user group has trouble with tapping accuracy as well
    – Gene Lee
    Feb 15 at 19:50
  • You can add some spacing and make the target hit area larger than the control.
    – Mike M
    Feb 15 at 20:31
  • @GeneLee If it's the only actual control nearby I don't think it would be a problem. I might be wrong but everything else looks like text and graphics. If tapping flipped it from "enabled" to "disabled" and back and nothing nearby is tappable, I think it would work nicely. I'm an old guy with big fingers and arthritis and I'd like it. 8-) Feb 15 at 20:32

Your Answer

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

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