Hold me for an action

For a very long time be it on the web or desktop applications, people have been using their pointing devices to perform actions. And most of the used ones were to click(left/right) or to double click or to drag and drop.

It has become very common that people accidentally click on a button to perform some action that they didn’t intend to. This leaves with users getting frustrated when they some some irreversible action has been performed without any intent.

To cope up with this, UX designers and developers came up with a solution. Which is to add a confirmation asking the user weather they are sure to perform the action or not.

Below is a image of gmail trash box. When you want to empty your trash box and if you click on Empty Trash Box, you get a Confirm deleting messages which confirms your action to empty the trash box. Many of you feel, that this is an old way to confirm and need a change.

Gmail — Empty trash screen.

Now we get to know about the so called hold me button. To avoid this extra confirmation box, we will use this new technique. In this UX, the user will have to click and hold the button for a defined time and the action will execute. This will serve both as an action and confirmation to perform the action.

The below is a simple example which demonstrates this UX behaviour. The below is a simple list of messages that has a delete action.

Example Inbox application

In the above example, user has to press and hold the button for 3 seconds to perform the delete action. This eliminates the need for a extra confirmation as the hold action itself serves as an confirmation.

A basic react component is built to achieve this behaviour. Let us look at a simple steps to integrate the same.

Install the component from npm using the below command

npm install react-long-press

import LongPressBtn from 'react-long-press';

class Example extends React.Component {
  render(){
    return (<div>
            <LongPressBtn
              ref={(btn) => { this.holdButton = btn; }}
              longPressEnd={this.longPressEnd}
              longPressStart={this.longPressStart}
            />
          </div>);
  }
}

Then we will write a simple call back function to see how it works. Declare the required functions in the class

class Example extends React.Component {
  longPressStart = () => {
    console.log('Long press Started');
  };
  longPressEnd = () => {
    console.log('Long press Ends');
  };
render(){
    return (<div>
            <LongPressBtn
              ref={(btn) => { this.holdButton = btn; }}
              longPressEnd={this.longPressEnd}
              longPressStart={this.longPressStart}
              pressCallbackTimeout={2000}
            />
          </div>);
  }
}

When the user holds the button, after 300 milliseconds, longPressStart is called. If the user holds the button for 3 seconds, then longPressEnd is called where you once can initiate an action.

Many people think this could be a viable alternative for confirmation actions. Hopefully i hope this would be so.

Github Repo: https://github.com/marudhupandiyang/react-hold-button