0

I am working on an Android app, and one page has many options a user can change, so it looks similar to this:

xxxx: [          ]
xxxx xxx: [          ]
xxx: [          ]
xxx xxx xxx: [          ]
xxxxx: [          ]
xxxx: [ ] [ ] [ ]
xxxx: ( ) ( ) ( ) ( )
xxx xxx xxxxx: [          ]

Where:

[ ] is an text input field

[ ] is a checkbox

( ) is a radio button

Is the "best" most accepted way to line them up like this?

         xxxx: [          ]
     xxxx xxx: [          ]
          xxx: [          ]
  xxx xxx xxx: [          ]
        xxxxx: [          ]
         xxxx: [ ] [ ] [ ]
         xxxx: ( ) ( ) ( ) ( )
xxx xxx xxxxx: [          ]

Or is there something better?

Improve this question

3 Answers 3

Reset to default
1

Without knowing anything about the assignment, and assuming that the labels aren't long enough to break the layout, there's nothing wrong about your design. However at eight fields/controls, I would probably consider grouping them visually into two (of three) groups to break any excess monotony.

Improve this answer
1
  • When you say "there's nothing wrong about your design", do you mean the first, "messy" one or the second aligned one? Commented May 13 at 16:26
1

The key goal is to make it easy for your users to scan the form fields, so they can quickly understand what they need to enter, where.

I've seen plenty of articles advising to place the field labels above the respective field. Depending on the overall space you have, keeping them on one line might be just as effective.

Grouping should be based on semantic relationships between the fields, and not on purely aesthetic perception.

This article by NN/g has some great design guidelines that might help you get your own form laid out just right:

Form Design Quick Fix: Group Form Elements Effectively Using White Space

Improve this answer
0

Consider in changing the UI using a stepper (more pages with a single interaction) rather than a single page with many interactions. In mobile UX this works much better because of the limited space in the screen. This UI helps users focus on one task a time and let you use wider components that are simpler to use with touch devices.

pro tip: if the app is a wrapper, predownload the whole set of pages in order to reduce the time of loading which is the most powerful source of frustration.

Improve this answer
2
  • Without knowing the exact contents of that form, that's tricky advice, Marco: If, for example, there's an address field, your suggestion could be read as, please the street field on one page, then the city on the next, then the ZIP code, then the country. Breaking up a longer process over mulitple steps is typically a good idea, of course. But it's key that the steps feel coherently self-contained so the user does not have to remember anything between steps, because it's now out of view. Commented May 21 at 17:26
  • You are totally right. For this reason i just put it as "consider". In that case I would paginate the form accordingly, trying to group the input fields in coherent pages Commented May 22 at 6:53

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.