6

Consider the two form layouts shown below

The context here is an Android app targeting Android v 4.4+. The controls are

  1. A select box which I have attempted to make flat
  2. A readonly input which when tapped shows a popup dialog with a circuar selector
  3. A username

What looks "wrong" to me

  • Without at least the bottom border the selectbox on the l.h.s. does not look/feel like a select box
  • I feel the Age label + input on the l.h.s. does not scale well to large screens

I hope that someone with more UX experience than I can provide a few insights here.

  • Why is there so much white space at the bottom of the image? – Chase Sandmann Mar 20 '17 at 17:35
11

I think your observations are correct! Do check some standard interaction patterns of select-box and text-field

Based on your current layout, I will suggest you choose one of these:

enter image description here


OR

enter image description here

  • 1
    Thanks. What is the current view on using floating labels - i.e. labels that occupy the same space as their companion form control and "float up" to indicate the function of that control when required as discussed here – DroidOS Mar 20 '17 at 10:07
  • 2
    @DroidOS That one is definitely intuitive.. the animation makes interaction even better compared to the still labels/placeholders. – DPS Mar 20 '17 at 10:15
5

If the Age input is opening a dropdown or picker of some kind, I suggest you use the dropdown arrow. Otherwise it will look like a text input where the user is supposed to enter text.

In the gender select box I would not include the "I'd rather not disclose my gender", because if a user selected a gender then he will have no hint that in the options of the select box there is this option.

Thanks @AdrianMaire for the comment on the gender default.

  • 3
    Good point on the I'd not rather disclose my gender :) – DPS Mar 20 '17 at 13:01
  • 6
    As user, I feel not secure the gender is not disclosed, because it is still there selected in the select-box. Personally I rather prefer the 3-state select-box. – Adrian Maire Mar 20 '17 at 14:54
  • 1
    @AdrianMaire the current image displays a selected state. But the default could be "Select a gender". I'll edit that, thanks for the comment. – Alvaro Mar 20 '17 at 15:01
  • @Alvaro - I'd rather not disclose my gender is actually the default choice. However, you make a valid point - once the user has selected a gender they may not realize that this option exists – DroidOS Mar 21 '17 at 10:11

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.