2

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:


enter image description here


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:


enter image description here


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)?

  • Out of curiosity, what is the high-level reason for needing to swap names? – Alan Jan 8 '18 at 20:13
  • 1
    @Alan Data gets prefilled, but with possibility that First name is actually Last name. Thus I want user to just swap it instead of going through trouble c/ping data – Traxo Jan 8 '18 at 20:16
3

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

  • Thanks, that makes sense. But Google maps has no additional fields (at least on provided screen). Should I adjust City length with other fields? – Traxo Jan 8 '18 at 20:21
  • Updated image. If you align the line from 'City' to balance the layout, then the floating button will "break the grid". This might be a matter of taste, but in your position I'd keep the name inputs short and align the edge of the button with the outside of the grid (shown). – dennislees Jan 8 '18 at 20:29
  • I think either works, to be honest. At this point it's a question of style and consistency. – dennislees Jan 8 '18 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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