0

I'm working on a very large form, which is an adaptation of an excel file my client was using.

I need to find a way to group elements, align the fields, and manage several input types, keeping the form simple, compact and quick to fill.

The form is going to be used on a daily basis, by company staff, used to work with this kind of data via excel (and they use excel like experts). They want to get rid of excel files with calculations and macros, and I don't want to make the new form more complicated or difficult to scan / fill / understand than what they currently have.

My main problems are:

  1. Alignment and overal form length
  2. Fields with droplist (need space to expand)
  3. Fields with dynamic search have many options (could be more than 20)
  4. There could be very long labels (larger than fields or frame in the table-like approach)
  5. Placement of tooltips

Posting an image of the options I'm considering for now.

form alignment examples with mock labels

Any advice is welcome. Thanks!

Improve this question

3 Answers 3

Reset to default
1

Utilize Patterns the User is Familiar With

Seems like you’d benefit from keeping things as Excel like as possible. These are Excel experts doing Excel-like stuff.

Groups of related inputs organized into categories of functionality across multiple tabbed pages should be readily understood by your users.

Keep the interactions and inputs as Excel-like as possible, but take advantage of whitespace in a way you couldn’t in Excel.

Improve this answer
1
  • Thanks Dennis. I believe I didn't get the full idea on: "Groups of related inputs organized into categories of functionality across multiple tabbed pages". Would you elaborate on it a little bit, please? ---I have discarded the tabbed or stepped form, since the users are not likely to fill the form in the given order (they could complete it as they receive data, so they will need to navigate back and forth to fill it (the form can be saved as draft). But, I'm separating blocks of fields and grouping them by similarity, to make the form readable and content-wise. Suggestions are still welcome!
    – redux
    Nov 24, 2015 at 16:28
1

you can try several options of form variations of simplify the look of form

-label inside input field
-input field that is only an underline

You could also look into natural language forms

enter image description here

enter image description here

Improve this answer
1
  • Thanks, Ameen. I considered the underline input field, but will not solve the space issue (as you type, the label should appear animated into a smaller label, above input). With this field density, the underline approach will make it harder to read. ---Labels inside fields: no good practice to include labels or help text inside fields (clues will be lost when field is "in focus", or when using keyboard tab), fields will seem filled, users will try to send form with these errors...) On labeling and help text inside input fields: ux.stackexchange.com/q/9220/57201 Suggestions are welcome!
    – redux
    Nov 24, 2015 at 16:20
1

I think there are issues with droplists (because it takes longer to get to the correct value and requires more dexterity on the part of the user) and prefer radio buttons and checkboxes.

I think having the label above the field is easier.

It is also possible to arrange the form fields like a spreadsheet and have labels as the header row, with the option to add and remove rows. This works well for things like expense forms and order forms, where the user needs to enter multiple rows of similar data.

EDITED to add:

You can also have checkboxes in a pseudo-dropdown:

you can also have checkboxes in a pseudo-dropdown

when you click on the button next to the text field, it shows the below and the user can check the checkboxes; for added usability, you can append the value of the checkbox to the text node of the field above (with an ellipsis '...' when you run out of space).

Improve this answer
2
  • Thanks for your answer. Yes, droplists are cumbersome, but needed in this case, due to the amount of possible options (could be more than 10), so radio buttons would take important space. The table approach with labels on top of the column is useful, but the data entry is not that uniform in this specific case: every label is different.
    – redux
    Nov 24, 2015 at 16:03
  • You can also put radio buttons or checkboxes in a pseudo-dropdown.
    – Yvonne Aburrow
    Nov 25, 2015 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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