1

I have a popup Javascript widget with an icon that is embedded into the right-hand corner of my site (by default.) The user can drag and drop the widget icon to another corner of the site if they wish, but can also click on the widget icon to open the widget and interact with it (imagine those popup chatbot boxes.)

Currently, I change the cursor to dragging if the user has fired mousedown and then mousemove. mouseover sets the cursor to pointer to indicate that it can be clicked. I feel like it is not obvious that it can be dragged and dropped to another corner. I could have a "change icon location" selection within the opened widget, but I like the ease with which the icon can be dragged to different corners. Does this fall into the realm of "if the user really wanted to move the icon, they'd likely expect it to be draggable and thus would figure out that it is"?

Any thoughts on some hints that I could use to suggest draggability? Currently, the icon only chnages position to another corner if the user drags their mouse to within a set boundary of the next corner. Any thoughts would be appreciated.

Improve this question

1 Answer 1

Reset to default
1

Use multiple approaches to educate users the functionality of this widget. A little complex but giving people more than one opportunity to learn what is possible ought to increase usage and therefore improve UX.

The primary approach is to use appropriate icons to indicate, and remind, of the two actions that can be taken.

A drag icon at the top, and a menu icon below:

drag, menu

Another approach is to provide a pop instruction depicting a click and a drag:

click   drag

This can be automatically displayed on the first view of the page. Thereafter pop up following an extended mouseover event. As @HarryStuart mentioned in the comment below, animating the action would be even more clear.

Also, add an "About this..." option in the opened menu where instructions can be included. As mentioned, a "change location" option in the widget is another way users can take advantage of the relocation function.

Update based on comment below...

To not distract from the logo, dim the drag indicator some:

drag logo

Improve this answer
7
  • Yep, I've added a help component to the widget when it is opened. I did consider an animation but figured that just showing it on first display would be insufficient. I suppose in harmony with an animation on long hover, would be better education for the user.
    – Harry Stuart
    Dec 2, 2022 at 12:20
  • Animation helps a bunch, but I think the type of static image I showed is nearly as effective with a bit less development.
    – bloodyKnuckles
    Dec 2, 2022 at 12:21
  • Yeah animation is definitely more involved. The issue with the static image is that I want the widget icon to be the "logo" of the business for branding reasons. Adding a draggability indicator would clutter it. Might need to just get it out into the field and design a bespoke solution based on feedback.
    – Harry Stuart
    Dec 2, 2022 at 12:33
  • Way to go...mock up a few solutions and user test them. — "...the widget icon to be the "logo" of the business..." I'm curious, is there a different logo/brand for the site than the logo/brand for the widget? ...is there a distinction between the two. I initially assumed the widget was simply a function of the site.
    – bloodyKnuckles
    Dec 2, 2022 at 12:38
  • 1
    @HarryStuart I see—response updated... :)
    – bloodyKnuckles
    Dec 2, 2022 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.