2 edited body
source | link

Visual hierarchy (and order) communicates importance

Because of the way readers of left-to-right languages like English scan UI, placing your button to the left of the inputs communicates "this affordance is important to these inputs".

If, as you say, this isn't an important feature, don't put it on the left. The cost of incorrect use may be low, but for most users, it'll just be a distraction.

When in doubt, copy a big player

The most prominent example of this interaction (vertical swapping of contiguous inputs) is switching origin and destination in Google Maps.

Google places a double vertical icon to the right of the fields.

enter image description here

The fact that Google's UX and Design teams have no doubt sweated over and tested this interaction exhaustively, is almost justifcation enough to go with your second mockup.

If you wanted to strengthen the interaction, you could make the "button" appear more like an actual button (see below), but I think you'll find that if you tested this with users, they'd generally have no problem finding and using this interaction in either case.

enter image description hereenter image description here

Visual hierarchy (and order) communicates importance

Because of the way readers of left-to-right languages like English scan UI, placing your button to the left of the inputs communicates "this affordance is important to these inputs".

If, as you say, this isn't an important feature, don't put it on the left. The cost of incorrect use may be low, but for most users, it'll just be a distraction.

When in doubt, copy a big player

The most prominent example of this interaction (vertical swapping of contiguous inputs) is switching origin and destination in Google Maps.

Google places a double vertical icon to the right of the fields.

enter image description here

The fact that Google's UX and Design teams have no doubt sweated over and tested this interaction exhaustively, is almost justifcation enough to go with your second mockup.

If you wanted to strengthen the interaction, you could make the "button" appear more like an actual button (see below), but I think you'll find that if you tested this with users, they'd generally have no problem finding and using this interaction in either case.

enter image description here

Visual hierarchy (and order) communicates importance

Because of the way readers of left-to-right languages like English scan UI, placing your button to the left of the inputs communicates "this affordance is important to these inputs".

If, as you say, this isn't an important feature, don't put it on the left. The cost of incorrect use may be low, but for most users, it'll just be a distraction.

When in doubt, copy a big player

The most prominent example of this interaction (vertical swapping of contiguous inputs) is switching origin and destination in Google Maps.

Google places a double vertical icon to the right of the fields.

enter image description here

The fact that Google's UX and Design teams have no doubt sweated over and tested this interaction exhaustively, is almost justifcation enough to go with your second mockup.

If you wanted to strengthen the interaction, you could make the "button" appear more like an actual button (see below), but I think you'll find that if you tested this with users, they'd generally have no problem finding and using this interaction in either case.

enter image description here

1
source | link

Visual hierarchy (and order) communicates importance

Because of the way readers of left-to-right languages like English scan UI, placing your button to the left of the inputs communicates "this affordance is important to these inputs".

If, as you say, this isn't an important feature, don't put it on the left. The cost of incorrect use may be low, but for most users, it'll just be a distraction.

When in doubt, copy a big player

The most prominent example of this interaction (vertical swapping of contiguous inputs) is switching origin and destination in Google Maps.

Google places a double vertical icon to the right of the fields.

enter image description here

The fact that Google's UX and Design teams have no doubt sweated over and tested this interaction exhaustively, is almost justifcation enough to go with your second mockup.

If you wanted to strengthen the interaction, you could make the "button" appear more like an actual button (see below), but I think you'll find that if you tested this with users, they'd generally have no problem finding and using this interaction in either case.

enter image description here