How would you implement a Momentary Rocker switch in a mobile app or web page?

Question

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

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 :) ?

Answer 1

You could just use two adjacent buttons:

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

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

Answer 2

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:

Answer 3

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!

Answer 4

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

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.