1

In our software we have a dropdown menu. The dropdown menu has listitems which represent columns for a table. Via two buttons in the list (on the left side), the position of the listitems can be changed. The position of the columns in the table will also be changed. The dropdown looks like this:

enter image description here

Problem: The buttons to move the position accidentally communicate that the list can be scrolled. Reason: The icon is looking like a typical icon for scroll buttons:

enter image description here

There is also another typical scroll icon we cannot use:

enter image description here

Question: How can we communicate via icons in the buttons, that the buttons change the position of the selected list item?

Improve this question
4
  • Your question is about Icon suggestion which is not suitable for this site. Sorry. Maybe Graphic Design is the right place.
    – Ivan Venediktov
    Commented Jan 12, 2018 at 9:20
  • Why do you think this topic is not a thing about user experience?
    – Simon
    Commented Jan 12, 2018 at 9:37
  • I have read that in your question.
    – Ivan Venediktov
    Commented Jan 12, 2018 at 9:48
  • Are you open to a UI change, can you afford to change the list with another element?
    – Garik
    Commented Jan 14, 2018 at 22:57

3 Answers 3

Reset to default
2

In this typical example:

enter image description here

The Blue Up & Down Arrows can be clearly differentiated from the scrollbar, and it is intuitive too.

Improve this answer
1
  • + it is used by multiple programs like that, so users might already be familiar with it, too
    – Big_Chair
    Commented Jan 12, 2018 at 11:41
1

Drag and drop can be quite intuitive if done correctly.

See here for an example: https://cdn.dribbble.com/users/57127/screenshots/1074817/drag_drop-list.gif enter image description here

Improve this answer
0

The icons are fine, your problem is that the buttons are too far away from the item it is acting on.

You could make the up and down arrow buttons appear inside the list control, on the selected item itself.

enter image description here

Improve this answer
3
  • Nice Suggestion. One Problem that I can see here: When the user clicks on an arrow via the mouse then the entry moves from the mouse pointer away. So when the user wants to move the entry multiple times (e.g. from position 1 to 10) then the he has to move the mouse pointer over the arrow every time again.
    – Simon
    Commented Jan 12, 2018 at 12:17
  • @Simon Good point. Drag drop is better in this specific case.
    – Franchesca
    Commented Jan 12, 2018 at 13:23
  • The case pointed out by @simon is pretty valid and important. I would suggest you go with the familiar control (which is my answer) or go with drag and drop if development and design teams could handle.
    – Kish
    Commented Jan 15, 2018 at 9:04

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