Drag-and-drop is an affordance that’s harder to perceive than clicking. Unlike clicking, you can’t just use a button surface as the cue. You need several other cues that signify drag-and-drop.
The first cue you need is an icon. Many interfaces fail to use any icon for drag-and-drop. As a result, users have no way of knowing that drag-and-drop is even possible.
Not only that, but they also use the wrong icon, which can conflict with what users expect. For example, many tend to use a three-bar icon, but this icon is also used for hamburger menus.
You also need to use a drop cue to indicate the drop area. Failing to include a drop cue will make it hard to determine where users can drop items. When dragging items, they’re holding down the mouse button and need to know when they can release it.
Using the wrong mouse cursor when users drag an item is another common mistake. The right cursor is necessary to make the drag-and-drop affordance clear to users when they hover over an item. The cursor cue reinforces the drag-and-drop affordance in case the icon cue isn’t clear.
Read Full Article
Read the full article to learn what icon, drop, and cursor cue you should use for a clearer drag-and-drop. Your subscription gets you access to all past and future premium articles.
Book
Affiliate
