I have seen input fields that vary in terms of how they are designed.
Label on the top and text are at the bottom.
How is this decided? And can it vary in different places in the same application and flow?
1
-
I am pretty sure that this question has been asked many times and it has articles all over the internet.Morco– Morco2024-08-09 08:45:24 +00:00Commented Aug 9, 2024 at 8:45
Add a comment
|
1 Answer
Style guide
The decision which form to use is made once, that is, governed by the style-guide to apply. It should not be changed throughout your application. And especially not inside one and the same flow. That would need the user too recognize more elements which do essentially the same. "Same element = same function" should be the idea here.
Which style guide to use is more or less up to the designer/dev.
Examples
Specifically to your examples in the screenshot:
Underlined: Seems like a good choice to convey the idea for an "input". I would advise against it, though. Problem is that the only indication of a field is the light-grey thin line. That is (a) too little visual clue and (b) way too little contrast to the background (c) is indistinguishable from a horizontal line separator.
Outlined (adaptive): Seems like a display only option. Is is not apparent that you can edit it by clicking/tapping on it. Mainly because of the lightgrey background.
Outlined (top): Is okay, but see 5 for details.
Filled: Does not convey the idea of an "input". It does convey the idea of a "button" though. Could also be seen as a display only, because of the background color. In essence: Too ambiguous.
Outlined (contained): Is by far the best option. Because of the contained label it makes prompt (please enter name) and provided/offered action (tap here to do so) a clear unit. It is like a signature field that has to be filled. That idea is immediately apparent. The outline of a button like element also helps to convey the "todo/action" idea and it also specifies it to be a "text edit action". Because it spans the whole width it also conveys the idea of "please fill out before proceeding" and it maximizes the input space for the user name. Also contrast against the background is good. Label text size can/should be larger.
Left/Right: While it might work, the idea of needing to input the name is not apparent. It looks like a Button. A Button of course conveys the idea of "you can do something here when tapping". That this would be the opportunity to edit the name is not directly apparent. Especially if you consider the initial state, which is a blank name, the "button" would appear to be missing a caption. Is the function then "edit" or "delete" or something else or is it even "optional" to fill in a name, is too ambiguous. Also the label eats up space for the user to fill-in the name. Can cause thoughts like "My name is Jonathan Paul Fynn Muller-Reed-Wallenstein ... that does not fit, what should I do?".
I would recommend option 5.
