1

I'm currently developing a quite complex and growing website that has centered layout. These are some of the layout rules:

  • Table width are 768px in default, but if not possible (overflow) the table should be stretched to full width.
  • All other elements are aligned to center.

And here is the problem:

enter image description here

Is it a good practice to center the form inputs regardless the position of the table? Also, where should I put the title? Since the table is also a part of the form. It may looks tidy as it is now, but I don't want the layout changes too much from the default look as follow:

enter image description here

Or any other idea how to beautify this layout? Any help appreciated.

Edit: I start bounty on this, for some reason it doesn't appear anywhere on home. I want the solution to look fine on complex forms such as this:

enter image description here

Edit 2: This is my last attempt on centering the form alignment. It looks quite fine on simple unsectioned forms, but on sectioned forms with different column numbers it looks very ugly: The "fine" layout The ugly layout Because I get stuck at this, I'm considering to make the layout aligned to left only for forms -- since the forms can consist of 1 to 3 columns and tables. Is it a good practice?

I have no other ideas to solve this, please help.

  • 3
    What's wrong with hiding the table when editing or creating an entry? That allows the user to focus to the specific task they are performing at that time. Placing the form in the center would naturally be best practice then. – Levano Jun 22 '18 at 11:15
  • 1
    In your first picture the fields look tidy but it is not clear in which order the fields are to be filled. If the user uses tab to navigate from one field to the next, a centered design would be clearer. – BrunoH Jun 22 '18 at 13:42
  • @Levano if the table is hidden, where should I put it? It's impossible to put on another page since we're not allowed to use third-level page. The table is relatively big to be put on popups. And also, if there is a button to show/hide the table on the same page, it doesn't seem to solve my layout problem since the page will look the same as my screenshot if the table is visible. – Dolorosa Jun 28 '18 at 16:11
  • @BrunoH yes, but if the form is centered, will it look good if it should be followed by a table like in my question? – Dolorosa Jun 28 '18 at 16:12
  • 1
    How many items are you expecting to see in the table? – SteveD Jun 29 '18 at 13:16
2
+25

My immediate thought is that you need to SIMPLIFY, especially because your website is going to become larger and more complex. When you lock in a complex solution, it creates dependencies that will almost certainly inherit the complexity so the best strategy is to try and simply where you can.

In terms of positioning the form and the table, there are two basic strategies:

A. Make the table and form two distinct elements (on the same page) OR

B. Link the table and form together (e.g. popup or extending the table UI element)

Some considerations for making your decision:

  • Is the form going to be large and complex? If so then it will be difficult to find screen space for both (without scrolling).
  • Will this site be used on mobile devices? If so then popups are not easy to implement and you will have to resort to some unpleasant transitions during data entry.
  • Is the logic of the table and the input required clear and limited to only a few items? Otherwise separating them makes the entry process more complicated

With regards to option A, it seems more logical to have the input form at the top of the table if no prior reference to the table is normally required before entering the information. However, if you want to check for duplicates or some details before adding a new entry, then it makes more sense to put the form after the table.

With option B, you could consider the normal trigger for adding new items into a table creating a popup form, or you can think about allowing the user to enter information directly into the table itself (i.e. switch between view and edit modes).

Regarding the alignment of input fields in the forms, you can weigh up your decision based on the complexity of the forms (so probably not middle alignment if most of them are complex), the number of complex forms, how frequently people use them and if they are used for important functions. There are some general rules about how the alignment of input fields in forms can affect the way users interact with them. Rule of thumb is to be consistent first and then break the rules when necessary.

Perhaps if you have a good idea of the types of forms (and enough of them) then you can make the complex forms part of the page and have one type of layout, and the simple ones just popups and have a different type of layout so that users know what to expect when they trigger certain functions.

  • Thank you for the answer. The forms sometimes can be so simple and sometimes can be so complex (I put more examples on my question). This is a responsive website but almost 100% of our users use desktop to access it. We use popups to get rid the third-level pages (for example the add/edit action on the table use popups). – Dolorosa Jun 28 '18 at 15:46
  • And also, how about the alignment? Do you have any idea about that? – Dolorosa Jun 28 '18 at 18:32
  • 1
    @Rosiana sorry, it is really another 'it depends' kind of response. I have updated my answer to reflect this :) – Michael Lai Jun 28 '18 at 23:47
1

Depending on the complexity of the form, you could consider opening a popup/modal when adding/editing a salary template. This allows the user to stay on the same page while quickly adding or editing information in the modal. This can be quicker for the user while also keeping the main page cleaner (no need to show/hide a form on the page).

If you do open a modal, you could leave the title, labels, and form fields left aligned as per your second image.

I find this approach less useful when the form gets more complex as you may need more screen real estate to work with.

  • Modals are good for simple forms with limited input fields, while mine are sometimes very complex. I put more examples on the question if you want to check it. :) – Dolorosa Jun 28 '18 at 15:40

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.