What pattern to apply to a sizable flight logging form

Question

I need to build a form of about 15 to 20 fields for the purpose of logging a flight. I will be collecting the following data:

• Registration of aircraft flown
• Designation of the user (pilot in command, co-pilot, etc...)
• Name of the pilot in command if it is not the user
• Date, time and airport of both departure and arrival
• Flight time, number of take-offs and landings both day and night.
• Optional remarks regarding the flight.

I am looking for the best way to present this form to the user and I am considering a plain form where everything is visible at once, a (jQuery) accordion form, or a wizard (single-page JavaScript).

Some considerations:

• My users will complete this task two-to-three times on average per week. I am not sure if a wizard would be a good idea because this task is performed on a regular basis.
• I can use good defaults for nearly the entire form. I do want the user to review them before submitting the form though so a tabbed form seems undesirable.
• I can estimate some form values based on earlier input. For instance, I can calculate the flight time based on the departure time and the arrival time. Wizards accommodate this but then again, I do not absolutely need to precalculate the value.

I would love to hear what would best suit this task.

Answer 1

First things first:

Iterate

logging forms are a super common need. If you can make the form in iterations, starting with something simple like a google spreadsheets form, go that route. It might meet the need entirely. It can also save some big headaches. I once spent two weeks making some great forms, only to learn upon presenting them that the client gave me the wrong papers. Client expense, but wasting two weeks of work is never fun.

That said, assuming you get to the form building part with jQuery:

Form Design

Field Fitting A form with all fields visible makes sense, especially if you're going with defaults. Assuming entry speed is a consideration, I'd check the data on user screen sizes and make sure all fields fit without scrolling. Vertical or horizontal can work depending on space.

Labels: Assuming left-to-right text and pre-populated defaults, place the labels outside the inputs; left or above, no watermarks.

Defaults: Good idea. If different users will have different preferences, also consider storing their preferred defaults on their machine in a cookie/localstorage (for fields without security issues), or on the server.

Data Quality: Since it's for logging, ensuring data quality is typically important jQuery validate is an excellent plugin. If it's for FAA requirements, do server-side validation too.

Autocomplete: For fields with limited possible answers, autocomplete can provide an affordance and constraint.

Reference: Users may want to remember previous entries to determine what to enter this time. If you have room, consider making previous entries available in a table to the right. Remember alternating row colors.

Auto-population: If multiple fields often differ from defaults, one click form completion may be faster than defaults. Users can scan reference table columns very quickly. If you place the fields most likely to change to the top of your form (and the left of the reference table) , they'll be able to quickly scan the table for previous matching entries. Place a small button to the left of each column, and with the title "copy this line's entries into the current form". Once the fields are copied, jumping the cursor to any fields that are likely to change afterward (like time), can speed up input.

Focus Highlight: The jQuery form plugin provides some nice ways to highlight the currently active field. It can also be achieved with CSS

For additional ideas:

• UI Design Patterns: Getting Input
• UI Design Patterns: Dealing with Data