3

I'm working on an interface for an industrial application. It's a portable touch screen that controls an industrial machine.

Like any interface we have buttons which triggers various behaviour when you click on them. Now we want to implement another type of button which does something as long as the button is pressed.

I've been trying to find any convention regarding how to differentiate these two types of buttons. In the real world the "press and hold" buttons are (as far as I know) usually round. Like in this example with a control box for a tailgate lift:

Control box with three buttons

But then again, most buttons in the real world are round...

What we've done before is adding something on a label above the button saying "Press and hold to..." but now we want to have a specific button.

  1. Does anybody know of any conventions regarding this?
  2. Does anybody have suggestions on how we can differentiate between a click (and release) button and a press (and hold) button?

Thanks!

4
  • 2
    Nothing says it clearly than actual text. If you opt for an icon or button style, then users will certainly require some level of training as it will never be obvious to all of them. That may also include self-training via trial and error. – musefan Mar 23 at 10:01
  • @musefan True, no matter the design we might have to keep these labels. – bjornlof Mar 23 at 13:32
  • Is it possible you can provide your existing designs? – musefan Mar 23 at 14:04
  • @musefan Just think of your average html buttons, more or less like the ones you have here on StackExchange. – bjornlof Mar 24 at 15:19
1

You're right to be concerned about communicating the need to hold. In playing and watching other people play video games, I've often seen users (players) conclude that some action doesn't do anything (or is broken or has some unmet requirement) because they did not press and hold a button, or in some other way did not “hold still” long enough to see the effect.

I'm not aware of any widespread convention for buttons that require press-and-hold. However, continuous actions very often come in pairs — “up” and “down”, “in” and “out”, etc. My first suggestion is make pairs of movement actions clearly pairs.

Example: Rounded rectangle button split into two segments with arrows

  • This could be made skeumorphic by giving it the look of a rocker switch which sticks out of the surface on the ends, and can be pressed in either direction but not both. This can aid understanding by communicating a familiar physical interface, but carefully weigh the added visual clutter and reduced contrast of using graphics imitating physical shapes.

  • If you have four directions of movement, make it look like a “directional pad”, a very familiar interface for movement control.

  • If you have both paired and unpaired press-and-hold actions, make sure the unpaired hold buttons are more visually similar to the paired ones than to buttons that are only tapped.


Second, if it does not conflict with safety or other functional requirements, make sure the effect of the button is responsive even to short taps. If the user taps the “up” button and then sees and hears the machine go up very briefly, then they will quickly realize that they should try holding the button. Focusing on responsive control will also help the user operate the machine more easily, pleasantly, and accurately.

If the effects are not obvious to the senses, or it's not appropriate to allow short actions, then add an explicit cue: When the user taps the button quickly, pop up a “tooltip” over the button with a message like “Press and hold to move.” Make sure that this popup is visible given users' typical hand placement, and does not obstruct normal use of the interface (e.g. does not cover other buttons), in case it falsely triggers.

1
  • I like the idea with showing the buttons in pairs or using a "directional pad". There will be instances when only one button will be available so it will not work for all instances, but for many at least. Don't you think using a rocker switch might potentially give the user the idea that the buttons works as a switch so that they don't have to keep pressing? Good points regarding the short taps and tooltips as well! – bjornlof Mar 26 at 15:01
0

I believe there can't be a differentiation between buttons that can be clicked and buttons that can be pressed and hold other than instructions of use and feedback.

Take for example the home button for older iPhones with a fingerprint scanner. When the phone is locked you just hold your finger on it and it scans and unlocks the phone.

When trying to get out of an app you "click" the button. So the same button serves two purposes depending on the use case.

Here is an example of a car lift with similar functionality.

The Down and Up buttons can be pressed and the action happens while you hold the finger pressed. When you remove the finger it stops.

The Unlock button when pressed will have a back light on it to indicate that it is activated.

enter image description here

1
  • Sure, but in the iPhone case the button has multiple functions. That's what we want to avoid. The car lift light is a good convention, we'll probably add some pulsating animation to show that something is happening. Just changing color will not do since most buttons change color when pressed. – bjornlof Mar 23 at 13:37
0

My experience with real-life press and hold buttons ( like the tailgate lift controls pictured) is that the buttons 'press in' ( ie they have reward travel), you have to keep them pressed down to keep the action going.

So with the digital versions it needs some kid of 3d effect to show that they are depressed ( and if they aren't 'held down' they undepress).

1
  • We don't use 3D effects for any other components, so they would really stand out. For good and bad :) – bjornlof Mar 26 at 15:03

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.