ansaurus

Question

CSS design for large form - Design Advice

Answer 1

+4 A:

The first thing that comes to mind is that you want to remove the <br/> tags from the form. If you need vertical space, use CSS padding and margins since they're easier to change and make spacing consistent.

With that out of the way, other than branding (which will influence the look and feel of the form the most) the things you want to consider the most are accessibility and ease of use. Your use of labels and unwillingness to use tables for layout are a good start for accessibility so I'm not going to mention it further.

For ease of use, you'll need to make sure that each field can be tabbed to (in an order that makes sense), has a clear, meaningful label, has no unnecessary validation rules (such as forbidding whitespace in a phone number - don't force the user to clean data that can be cleaned automatically) and those validation rules that are necessary have clear, easy to understand messages that appear, ideally, as the user is entering the data rather than waiting for the user to submit the form.

Each of your field sets should be visually grouped either by colour, with a border or some other method. Individual field set should not be broken up, but different field sets can be separate from each other as long as they are contextually different (like address versus interests, for example).

Since you're already grouping field sets, you can use them as your basic unit of page layout. Each set could be floated, for example, in order to maximimize horizontal usage regardless of the user's browser width. As long as the sets are visually distinct enough and are clearly labelled there shouldn't really be any issues with that.

If consistency is more your thing, then each field set should be separated from each other vertically. That would make sure the form is ordered and laid out the same way for every user. Again, the important thing is visual consistency and ease of use. Users are used to forms being laid out vertically so the wasted horizontal space of doing it that way shouldn't be a very big concern.

Just remember: you're making something that should be easy to use and not frustrating. The position of fields should reflect that: they should be natural, grouping like fields together and separating groups of like fields from dissimilar fields. As long as you're keeping that in mind you're probably in good shape.

And don't forget to do some quick usability tests to make sure your validations make sense and are clear.

Welbog 2010-10-19 21:06:07

Wow some great points, big thanks!!! I never thought to use the field sets like that. So if I understand you correctly, group all related fields together in a field set vertically but group the field sets horizontally? Also the tab order is something I always seem to over look. Again great tips and thanks!!!

Phill Pafford 2010-10-20 14:00:09

@Phill: I'm not really recommending a specific layout style, since that is usually covered by the branding of what you're trying to create. If the brand style dictates that you should not waste horizontal space, then you'll probably want to go with the grid layout that Frédéric Hamidi suggested (assuming you're OK with CSS3). If you want a lower-tech solution, I'd go with floating field sets or a simple vertical layout.

Welbog 2010-10-20 14:15:51

I'm interested in the Floating Field Set implementation, are there any good examples of this? Would I wrap them into a div or ul? not to savey with CSS yet but I thought this would be a great learning exercise for me. Thanks

Phill Pafford 2010-10-20 14:23:29

@Phill: There is no difference between floating fields and floating any other block element, so finding any resource on CSS floating should get you started. But with respect to field sets, it's unlikely that each one will have the same height (unless you force them to have the same height), so it will be difficult to achieve a layout that doesn't have ragged bottoms (again, unless you force them to have the same height). If you're forcing things to have the same height, what you're really doing is building a grid-like layout, which is why I suggest going with Frédéric Hamidi's grids instead.

Welbog 2010-10-20 14:27:53

yes I agree they are similar to the grid part but having the floating aspect to adjust to screen resolution would be different. I understand the visual layouts will have to be the same height to look consistent and that is acceptable to me.

Phill Pafford 2010-10-20 14:32:53

Answer 2

+3 A:

Have a look at CSS3 grid positioning. It has a clear but powerful syntax, e.g. from the link:

body {
    grid-columns: * * (0.5in * *)[2];
    grid-rows: 20% *;
    columns: 3;
    column-gap: 0.5in;
}

Elements use gr units to choose their grid cell:

img {
    position: absolute;
    left: 2gr;
    width: 3gr;
}

You would only have to give an id to your fieldsets then set their position and extents in your style file.

Frédéric Hamidi 2010-10-19 21:10:23

I have heard of grid layouts done in CSS but have never seen (well looked at the code) of one. My question would be, "Would the grid change by screen resolution"? So if a user had a 800x600 screen and I have a 4 grid layout, would they layout stay the same as 4 grids going across or would it be flexible enough to stack 2 grids over 2 grids?

Phill Pafford 2010-10-20 14:04:07

The grid model remains static and is subject to `overflow` like other block elements. If you define a 4x1 grid, it will remain 4x1 when the user resizes his window, either reducing cell width or showing a scrollbar depending on whether you used relative or absolute units in the grid definition.

Frédéric Hamidi 2010-10-20 14:08:03

Thanks for the info. It looks great but I would like to implement a dynamic grid layout if possible as the end user(s) have large to small screens and I think it's annoying on a smaller screen to scroll left or right to view the entire page. Scrolling vertically (in my opinion) just seems to flow better. Thanks for the fast reply and idea of grid layouts, let me know if you find a more flexible solution

Phill Pafford 2010-10-20 14:17:47

Answer 3

+1 A:

One of my favorite ways to group large forms is with the jQuery style accordion. It allows you to abstract the form into key groupings, keep the form all on one page, and eliminate the need for page scrolling; all with an intuitive user interface.

A good example of this is the Barnes & Noble checkout form process.

Moses 2010-10-19 21:13:26

I do love jQuery but wanted to keep it as much CSS as possible and minimal (if any) JavaScript. I have implemented something like this in jQuery: http://jsbin.com/ezesi Stack: http://stackoverflow.com/questions/1126489/jquery-examples-horizontal-accordion-table-instead-of-un-ordered-lists-upda

Phill Pafford 2010-10-20 14:11:04

Answer 4

+1 A:

Check out CSS Flexbox for some liquid flexibility withing you design sets. I would also recommend picking a "style" and sticking with it. Agree with Welbog.

taylorjes 2010-10-19 21:17:41

Looks great for newer browsers and +1 for HTML5

Phill Pafford 2010-10-20 14:05:58

Answer 5

+1 A:

I guess that if you have a form with 50 fields, you surely have to split it to themed tabs. Say 3 to 5 tabs. They can be implemented by JS with or without jQuery.

You may want to save input data on-the-fly, because the user may need a long time to finish the form, so there is bigger possibility that he will catch a loss of internet connection or some other factor, that will erase his half-finished form, which would probably dissapoint him and leave your site.

Also consider that user has to have a place for his eye to rest, so be sure to make enough blank room between inputs.

Jevgeni Bogatyrjov 2010-10-19 21:18:35

I would recommend tabs only if Ajaxy validation messages are infeasible for whatever reason. The benefit of tabs is that they permit more frequent submission, which leads to earlier validation and saving, but at the cost of hiding the information the user has already entered. Use tabs only if you can guarantee that users won't need to look to previous fields to change them or to double check them (or provide that functionality to them explicitly). Tabs are also useful if some groups of fields are optional depending on the values of other fields (like a flow with optional tabs).

Welbog 2010-10-19 21:23:14

I thought about doing tabs but the constraints/requirements of the project limit my ability to do so. It's for internal uses so it doesn't need to look the best but since I have some flexibility on the design aspect I thought it would be a great exercise for me to hone my skills and learn. Thanks for the tip

Phill Pafford 2010-10-20 14:14:33

ansaurus

tags:

views:

answers:

CSS design for large form - Design Advice

related questions