Swap two text field values

Question

User needs to be able to swap two input values (first name and last name) so that for example John becomes Doe and vice-versa. There is a button which swaps the values, but I'm not sure where to put it. The swap function is expected not to be used very often.

I was thinking something like this:

---

---

But perhaps button is too conspicuous then (not sure if that's problem because it's possible to swap back anyway)? Ditto if button is between text-fields. Also it breaks alignment with other text-fields(e.g. City) a bit, but perhaps I can align those fields accordingly?

Or if we put it right:

---

---

but it looks a bit off, maybe if it would be better if button is lower then, and not in the middle?

On larger screens I guess I could put text-fields in same line(something like google translate) and button between them so it wouldn't break style too much, but then I'd be unsure what to do on mobile design.

What would be the best position for a button, and how should I style it (and fields if needed)?

Answer 1

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.

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.