Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have developed a UI.

Now I want to add a functionality to this UI that if user wants to exchange positions of if and else if blocks, he must be able to do that.

One option could be an up and down arrow icon next to each if and else if, to move the blocks up and down. What could be other better options?

share|improve this question
    
Can an else if block be the first block? Otherwise, why would there be a need to move if blocks? (assuming that there only can be one, as the button only allows to create new else if blocks) –  unor Feb 27 at 11:46

6 Answers 6

up vote 6 down vote accepted

I would suggest adding drag handles on each block and let the user decide the ordering. You'll only need to ensure that no matter the order of blocks, the first block will always be an if block and the remaining blocks- else if.

Refer the image for more details enter image description here

This way the user will come to know upfront that the blocks are drag-able, both on desktop as well as mobile devices.

share|improve this answer

All other answers suggest drag handles, but I suggest against that.

The problem with drag handles is that:

  • you ask the user to move a block from one position to a specific area. If he misses the area, errors can easily occur.
  • if the block you're moving is too high, the travel distance can become cumbersome.
  • it can be hard to implement
  • drag handles suggest that the item can be moved anywhere, but in this case, there's only one target

Drag handles work well with a list of N items, where each of these item take up a small amount of space, and where each item could be moved anywhere within the list.

Switch, not drag

Here, you just want to switch positions, between 2 items. There is only 1 start position, and 1 target position. Just use a toggle button.

Examples

For example, Google Translate uses a double-arrow button to toggle between the source language and the destination language:

enter image description here

Here's Converbot:

enter image description here

Keep it simple

Don't give your users the illusion that can they can move items around anywhere with drag handles. Just have a single button that performs the single action of switching positions.

share|improve this answer
2  
What if you have 10 else if's and you need to add another one, but this one needs to be placed at the top (for some reason). The screenshot suggests blocks can only be added at the bottom. In your case you'll have to press switch button 10 times. Dragging can also be done in grids, minimizing the chance for errors. You can even constrain movement to just the Y axis. –  Paul Feb 26 at 10:26
1  
You're right. In that case, it would definitely make more sense to have some kind of drag behavior. But still, you would need to come up with a more condensed interface. If you have 10 of these blocks, you'll have to drag and scroll the page at the same time. Dragging works for example in GMail, because each email takes up 20-30 pixels in height. So, when dragging, you can see both the start point and the destination area. –  jgthms Feb 26 at 10:37
    
Collapsable blocks? –  Paul Feb 26 at 11:01
1  
@Paul Spreadsheets software usually have a button "insert before current row". You could imagine having N add buttons instead of just one, and the problem doesn't exist any more. –  Pierre Arlaud Feb 26 at 13:19
    
I am of the same opinion as @Paul ! –  Trevör Anne Denise Feb 26 at 14:51

Mailchimp uses and icon to indicate the draggability of the block.

enter image description here

Google uses drag handles in Gmail, they appear on hover.

enter image description here

Using an icon (any icon) or drag handles to indicate the object is draggable are both good solutions, but it all comes down to the affordance of the solutions. When showing it to your user, will they understand it's meaning? One way of solving that is by introducing the feature to new users. Which one to choose is up to you.

A third option is to set the cursor property to move on hover. This is by default a good thing to do and can be used in combination with the previous options. One note of advice with that is to only make part of the block draggable (just a handle) so users won't see the move cursor all the time when moving over the blocks. They still have to select and click stuff on the blocks. The move cursor might make the user believe they can't select the drop down boxes.

share|improve this answer

When I do lists of orderable elements, I try to avoid drag handles but only becuase they are fiddly with smaller UI elements in my case.

Instead I implement Move Up and Move Down buttons on buttons or a context area (or both).

The downside of directly replacing drag handles with buttons is that the user needs to reposition the mouse after each move action. Ideally, you want a selection mechanism to highlight (or 'check') the block(s) being moved and static buttons that appear when a block is selected.

enter image description here

Related buttons could also include Remove, Add Comment, Copy. A drag handle does not let you naturally add these actions in the same mechanism.

share|improve this answer

If I had to solve this problem, I would have combined two different ways to do it :

  • Enabling the user to drag blocks to change their position.
  • When one block is selected, using the arrows of the keyboard to change their position.

I think that it's interesting to combine different ways to do something, so you could also display the arrows you was speaking about on hover or if the block is selected although I don't think that this way to do it is as natural as dragging or using the keyboard.

share|improve this answer
    
I've noticed that you leave an 'im french' disclaimer on every answer. This is just noise on the answer and is not required. If there are grammar errors, we can usually tell you are not a native English speaker and that is OK! No apology is necessary :) –  Gusdor Feb 26 at 14:43
    
Thanks a lot @Gusdor ! I was in fact wondering if you guys could tell that I wasn't english or If you would have thought that I was a stupid guy who wouldn't know how to speak his own language ! Thanks again for your answer, I won't put that anymore then... –  Trevör Anne Denise Feb 26 at 14:49
    
You are welcome. Your English is great btw. Errors are only a problem if it can't be understood - in that case some will ask you to clarify! –  Gusdor Feb 26 at 15:14
    
Ok thank you !!! –  Trevör Anne Denise Feb 26 at 15:29

I would do as you suggested and use up / down arrows on the if blocks as well as the individual conditions in case the user wanted to swap any of those as well.

You can also make the arrows aware of their position by enabling / disabling them based on whether they can move their item up or down or not.

Based on your image, here's what it could look like:

image displaying up and down arrow example

Note:
Obviously, you could give the individual conditions a little more height so you can have larger arrows.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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