Does the toggle button need to be near the item that it affects?

Question

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.

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?

Answer 1

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

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