1

My team is working on an email design software that features a drag-and-drop interface that offers very sophisticated drag-and-drop experience compared to others.

It enables users to drop elements not only on top and below each other but also next to each other, so users can create columns and change the layout without needing to use so-called "layout elements" that are usually available in other email design tools.

You can see the drag-and-drop in action here:

https://youtu.be/CTMbMOn8znY

We studied a wide range of general design and email design tools and found that:

  • In classic design software, the hover state of elements is more emphasized than the selected state.

  • While in email design tools, the selected state seems to get higher emphasis than the selected state.

We are not sure, which one to choose.

What do you think, what are the pros & cons of having the emphasis on either the hover or selected states?

2
  • Please remove the tweet from the post. Only use the necessary link. Feb 4, 2020 at 14:34
  • You meant to say that for email design tools, the selected state gets more emphasis than the hover state, didn't you? Feb 5, 2020 at 7:42

2 Answers 2

1

I would think the hovered element should receive more emphasis.

(My) Rationale being that while dragging, the dragged element is selected. (Otherwise, you would need three visuals, one each for selected, dragged, hovered.) But while dragging, the user's focus is where to drop, i.e., which is the correct hovered element.

0

The selection indication is meant to provide context and status and to minimize the user's reliance on their memory. If you glance or walk away from the screen and then get back, it's meant to remind you quickly what element is selected. It affects the whole scope of your work and responds to an action that the user has made sometime in the past - it could've been right now, or it may be a year ago, when he last used the software. It doesn't even always reflect the user's actions, often an element is pre-selected at system startup.

By contrast, the hover indication is only meant to provide immediate feedback, as a response to an action that the user has performed this very second and performing right now, often a small change in the tint of the element is enough. The chance that the user is not aware of it are minimal, and the hover indication is a supplemental, secondary mechanism. Sometimes it's good for fine-tuning, for being sure that your mouse is on top of the right element and not the one two pixels to the left.

It follows that selection indication needs to be more emphasized.

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.