I have an application that presents a question/answer form to the user. It was mandated that the form look as close to the paper form as possible. The paper form was built in a spreadsheet as two columns of questions and answers. In designing the mobile application, I've been able to move to more of a progressive disclosure model where the user picks sections and subsections. But I've always been frustrated by the desktop application's layout. What's the best way to lay out a screen full of drop-down and text boxes?
2 Answers
Try to have your progressive disclosure(wizard) with some effects and beautiful design. it is not distracting having a form full of fields with a good design. Try to have a two step form for each column of your paper form. and put related fields in each step.
This is for a mobile app? The smaller scale does not offer many options for displaying a form with text input. I usually feel it is best to display the question with the input directly below it. The eye has an easier time looking down than following an often invisible line over to the right to get to the input. This, of course, is probably only a real issue on larger resolutions.
You may be able to closely group related questions(dropdowns, usually) into multiple columns and then have a longer text input question on a line of its own. The subject of the form usually lends itself to different groupings(think an address form). It might be useful to know what kind of information you are collecting. Are they filling in personal info and writing one word answers, or do you have larger input areas?
-
Actually, the mobile app looks fine. This is for the desktop, which was required to mimic the spreadsheet layout. It's a mass of clutter.– DonAug 10, 2010 at 15:18