3

I want to visualize a drag start delay, it takes 1 second hold before drag starts, and I want the user to understand they should keep on holding the item. What is a good practice for a ui/ux visualizing it?

(The items are some images organized in multiple rows like below) enter image description here

2 Answers 2

4

One option would be to use something like a progress indicator, to denote that something is going to happen if the user holds it. For example, for the first 100-200ms, there could be no visualisation and after that you could display a radial progress indicator that fills up for 800-900ms around your cursor to denote that we're drag mode is going to start soon.

To make it even more obvious you could display a tooltip or a subtle non-distracting toast notification "keep pressing to start dragging".

This option is often used in video games (for example, opening chests and doors in Fortnite):

Progress indicator for opening a chest in Fortnite

Another option is implementing some visual cue or animation for that. For example, making the element subtly progressively larger while being pressed to denote that something is about to happen. This way is used, for example, while starting drag on the springboard in iOS (here they make it seem as if icon sticks to the background and pressing it almost pulls it off of background to drag it):

iOS springboard icon being dragged after a delay]

1
  • Thank you, I liked the second solution better. Dec 5, 2023 at 10:51
2

On desktop, change the cursor from pointer to move after a delay:

enter image description here

Edit after the comment

For mobiles, there are two options:

  • Add an icon that indicates draggable
  • Show or hint the area where it can be dragged

enter image description here

More info at nngroup.com

3
  • Thank you. Do you have any idea for mobile view? Dec 3, 2023 at 13:54
  • Answer updated.-
    – Danielillo
    Dec 3, 2023 at 14:24
  • Thank you for the answer. I still have problem informing users to keep on holding the draggable item so that the dragging unlocks. Users can see the dragging icon but they try and see nothing is moving (dragging hasn't still been unlocked) Dec 4, 2023 at 5:59

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.