Fog Creek Software
Discussion Board

UI Layout Preference

In the past, I've always tried to pack as many controls in a scroll length as possible when designing forms. In fact I try to make everything fit into a single 800x600 screen shot (i.e., no scrolling req'd) and split it into 2 or more forms or tabs if it doesn't all fit.

So, if my form had controls with logical groupings A, B, and C, my control (field) layout would look like:

[<----- A1 ---->][<----- A2 ---->][<----- A3 ---->]
[<----- A4 ---->][<----- A5 ---->][<----- A6 ---->]

[<----- B1 ---->][<----- B2 ---->][<----- B3 ---->]
[<----------------- B4 ----------->][<----- B5 ---->]

[<----- C1 ---->][<----- C2 ---->][<----- C3 ---->]

... Or, sometimes like:

[<----- A1 ---->] [<----- B1 ---->] [<----- Ctrl C1 ---->]
[<----- A2 ---->] [<----- B2 ---->] [<----- Ctrl C2 ---->]
[<----- A3 ---->] [<----- B3 ---->] [<----- Ctrl C3 ---->]
[<----- A4 ---->] [<----- B4 ---_
[<----- A5 ---->] _-------------->]
[<----- A6 ---->] [<----- B5 --->]

But I've noticed that when I'm filling out forms myself, I really like the simplicity of the straightline vertical layout of fields like this:

[<----- Ctrl A1 ---->]
[<----- Ctrl A2 ---->]
[<----- Ctrl A3 ---->]
[<----- Ctrl A4 ---->]
[<----- Ctrl A5 ---->]
[<----- Ctrl A6 ---->]

[<----- Ctrl B1 ---->]
[<----- Ctrl B2 ---->]
[<----- Ctrl B3 ---->]
[<----- Ctrl B4 ---->]
[<----- Ctrl B5 ---->]

[<----- Ctrl C1 ---->]
[<----- Ctrl C2 ---->]
[<----- Ctrl C3 ---->]

The advantages of the first two are that the information is viewable in a snapshot and the user is (slightly?) more likely to re-check their entries before clicking a submit/OK/next button since scrolling back up takes extra effort.

So I thought I would take a little poll. Which do you prefer, the single-screen-shot, tightly-packed layouts or the straight-vertical layouts? If your answer is tightly-packed, then which do you prefer, the horizontal alignment of related fields or the vertical (newspaper column) alignment of related fields?

Tuesday, October 07, 2003

Didn't you answer your own question? You have at least one user's feedback on your design, and if the user don't like it, it is wrong.

I prefer ease of use. If ease of use includes typing and checking, then I think I would offer a summary screen. Then the edit screen would be optimized for typing, the summary for reading.

Thomas Eyde
Tuesday, October 07, 2003

I agree with Thomas.

This is along the lines of the Inductive UI (q.v. the paper from Microsoft on the subject, and my rants against it on this board). One screen, or in your case one logical block on the screen, approximating a linear screenful should be dedicated to one task.

"Enter your personal information"
"What is your shipping address?"
"What is your Credit Card Number?"
"Please tell us your advertising preferences"

In other words, a wizard rather than a more powerful "manage everything here" screen.

Mark T A W .com
Tuesday, October 07, 2003

I deal with 2 types of users...
police officers who are familiar with the look and feel of a paper form and data entry clerks, who would prefer to never look at the screen and just type away...

the former would like a screen that looks as close to the paper form as possible,

the latter would like something that is easy to use

let them decide....and design thier own entry screens

Tuesday, October 07, 2003

Better still than letting your users tell you how to draw it (people are remarkably bad at knowing what's best for them), do both:
Just mock up the screens in the Visual editor, without any code behind.
Then, get a couple of people who are like your users (or better yet, your actual users), and show them. 
Now, don't ask, "Which do you like better?" - they'll try to be graphic designers and make it beautiful or whatever.
Instead, ask them to do whatever it is the screen is meant to do.  Make them really try to accomplish the task.
You'll find that the problems and advantages of each approach jump out at you. You'll also learn that some of the stuff you thought was indispensable is no use to them, and that something you never thought of would be really useful.

Tuesday, October 07, 2003

I second andrewm's advice.

Get real users to actually use the two.

In my opinion, either solution might be chosen depending on the situation.  There is no single right answer here.

The Pedant, Brent P. Newhall
Tuesday, October 07, 2003

*  Recent Topics

*  Fog Creek Home