3

Here's an example of a Monetary Rocker switch. It has 3 states and always returns to the middle position after being pressed.

Momentary Rocker Switch

I want to use this in iOS and Android and web, is there any stock control or standard approach for this? If not, would love some ideas :)

EDIT - Why we want this

Our app controls the ON/OFF state of a WiFi socket plugged into a wall, a bit like a WeMo. A standard switch control is good for this. Easy.

But... some sockets aren't so smart. You can only ask them to turn ON or OFF, they can't actually confirm if it worked. So the app doesn't know if the socket is ON or OFF. So one solution is an ON/OFF button that doesn't store the state of the last action. A rocker switch is a bit like this.

Does that make any sense :) ?

5
  • what are you trying to achieve? what does a "Monetary Rocker switch" do and why in the real world?
    – Dave Haigh
    Commented Dec 9, 2015 at 12:43
  • It's not so easy to give an answer without more information. As I understand this switch does two things: Function A and function B. It does not show a state like a togglebutton would do. So you should think about a solution to show the user that a function or action is executed when the button is pressed either on the left or the right side. Not knowing more I would just say, this should be two bottons.
    – BrunoH
    Commented Dec 9, 2015 at 12:45
  • What I'm more curious about is why do you need this sort of button? What're you designing for?
    – UXerUIer
    Commented Dec 9, 2015 at 12:50
  • Have updated with reason why we want this @DaveHaigh - I'll try not to leave out important info next time :) Commented Dec 9, 2015 at 14:47
  • Ugh. That's not fun to work with. Commented Dec 9, 2015 at 20:03

4 Answers 4

5

You could just use two adjacent buttons:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

So, first, consider why you want to use a momentary-switch-equivalent.

These switches have been designed in the real world, primarily to stop two opposing actions from being performed simultaneously (e.g. turn off/on, move left-right, etc.). They have the secondary advantage of reducing machining costs during manufacture (one switch, two functions).

Neither of these apply on-screen - you cannot click/tap two buttons at once.


However, if you are sure you have a good reason for replicating the momentary switch here's my suggestion:

Since you are writing an app - then sliding/swiping is a normal user input. I suggest instead replicating the sliding style of momentary switch, sometimes found on the edge of phones and tablets (and other devices).

mockup

download bmml source

(the marking to indicate 'slideable is a but wonky here - but you get the idea)

The user can then swipe the switch to ON or OFF. When it gets there, perform some temporary highlighting of the 'ON' or 'OFF' to give feedback that the state has been selected. Then slide back to the middle position.

3
  • Thanks, these are the two solutions we're playing with right now. Commented Dec 10, 2015 at 7:18
  • 1
    With mobile UI, the user can press two buttons at the same time on a mobile device. This is more likely if buttons are close together, especially for folks with fat thumbs :) The rocker switch removes this "risk" by design. It also communicates to the user that the actions are mutually exclusive, making the intent explicit. Am I over thinking it !? Commented Dec 10, 2015 at 7:40
  • @tobinharris no you're not over thinking it in my opinion. I understand your aim more clearly now and you are completely correct that two buttons could possibly be tapped at once and both actions triggered. Paul S, your second idea (sliding control) does indicate "that the actions are mutually exclusive"
    – Dave Haigh
    Commented Dec 10, 2015 at 9:04
3

A momentary switch is only active when pressed down, like the keys on a computer keyboard. A rocker has two related actions. So the functionality of a momentary rocker is just two standard buttons, like this:

Left right

5
  • +1. Yep, don't invent a new thing when these existing elements will do the job.
    – obelia
    Commented Dec 9, 2015 at 17:36
  • That's a too reminiscent of paging controls. Commented Dec 9, 2015 at 20:04
  • My point is that what he's describing is reminiscent of MANY controls. Commented Dec 9, 2015 at 20:43
  • It's similar to a toggle, but not directional arrows. Commented Dec 9, 2015 at 23:45
  • Thanks Matt, using existing elements seems pretty safe. There are some other challenges around this I might post a separate quesiton up. Commented Dec 10, 2015 at 7:32
2

enter image description here

I would start by displaying the current state e.g. Current State: ON

Then have a button that displays the action of reversing this state e.g. Turn Off

When this button is clicked/tapped a secondary label could appear displaying the date/time the action was requested e.g. Turn off attempted - 09/12/2015 15:03, (this could even be a list of all attempted actions with latest first)

This way the user can decide on whether to try the action again, and you could even show a status in that list e.g. if it failed to turn off and has given up trying display it in red with - FAILED!

3
  • 1
    Thanks. One limitation we have is we don't know if it was success or fail. And we don't know current status either. Commented Dec 10, 2015 at 7:27
  • ;) based on your feedback my mockup is a bit of a fail then
    – Dave Haigh
    Commented Dec 10, 2015 at 9:02
  • Haha, I appreciate the mockup anyway as I hadn't thought about a purely textual UI, which would work in some circumstances :) Commented Dec 10, 2015 at 10:42
1

Based on your feedback on your limitations and intention, I would implement a slider control (as Paul S suggests). My mockup is below:

enter image description here

Similar to my previous answer, I would provide a list of text feedback e.g. Turn off attempted - 09/12/2015 15:03 and also return the knob to the centre of the slider after one of the actions has been triggered.

1
  • Thanks Dave. The text is a good idea because the switch itself is stateless (rightly so!). A text tweak could be "Turned off attempted 23 hours ago" but that's another UX angle to discuss haha. Commented Dec 10, 2015 at 13:40

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.