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

Improve this question
5
  • what are you trying to achieve? what does a "Monetary Rocker switch" do and why in the real world? – Dave Haigh Dec 9 '15 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 Dec 9 '15 at 12:45
  • What I'm more curious about is why do you need this sort of button? What're you designing for? – Majo0od Dec 9 '15 at 12:50
  • Have updated with reason why we want this @DaveHaigh - I'll try not to leave out important info next time :) – tobinharris Dec 9 '15 at 14:47
  • Ugh. That's not fun to work with. – plainclothes Dec 9 '15 at 20:03
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.

Improve this answer
3
  • Thanks, these are the two solutions we're playing with right now. – tobinharris Dec 10 '15 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 !? – tobinharris Dec 10 '15 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 Dec 10 '15 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

Improve this answer
5
  • +1. Yep, don't invent a new thing when these existing elements will do the job. – obelia Dec 9 '15 at 17:36
  • That's a too reminiscent of paging controls. – plainclothes Dec 9 '15 at 20:04
  • My point is that what he's describing is reminiscent of MANY controls. – Matt O'Keefe Dec 9 '15 at 20:43
  • It's similar to a toggle, but not directional arrows. – plainclothes Dec 9 '15 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. – tobinharris Dec 10 '15 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!

Improve this answer
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. – tobinharris Dec 10 '15 at 7:27
  • ;) based on your feedback my mockup is a bit of a fail then – Dave Haigh Dec 10 '15 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 :) – tobinharris Dec 10 '15 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.

Improve this answer
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. – tobinharris Dec 10 '15 at 13:40

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.