views:

50

answers:

2

I would like to determine which of the two layouts below is the better layout. I would like usability to be the main concern. Which one is better (in terms of usability) and why is it better?

Shotgun

Use as much of the horizontal screen width as possible without causing horizontal scrolling to occur. Obvious benefit is that vertical scrolling will be minimized/eliminated and screen real estate is maximized.

Sequential

One input per line. Downside is that there could be significantly more scrolling than the Shotgun layout.

              Shotgun                                Sequential
|----------------------------------|    |-----------------------------------|
|                                  |    |                                   |
|  Input1: ______  Input2: ______  |    |  Input1: ______                   |
|                                  | vs |                                   |
|  Input3: ______  Input4: ______  |    |  Input2: ______                   |
|                                  |    |                                   |
|----------------------------------|    |  Input3: ______                   |
                                        |                                   |
                                        |  Input4: ______                   |
                                        |                                   |
                                        |-----------------------------------|
+3  A: 

The sequential has better usability.

In both layouts user discerns lines. In the Shotgun case each line is about two things which requires extra mental processing to understand. In the Sequential case each line is about a single concept which is simpler.

Having more than one concept on a line not only divides attention but also takes additional brain power to identify possible relations between the concepts, to analyze whether the inputs are meant to be related until the analysis subroutine says "no".

As a general rule, dense interfaces with high ratio of elements per space area are more tiring and slowing down than "white space" interfaces. Elements include any UI entity, be it an active input element, a passive textual comment or a graphical element.

Developer Art
A: 

I would agree with New in town, with the exception of times when the fields make more sense to be beside each other. Such as when you are entering first and last names for a number of people, such as:

First Name: __________    Last Name: __________
First Name: __________    Last Name: __________
First Name: __________    Last Name: __________

If these were to be in a sequential, it would be much harder to understand and group the fields together (in your head).

Darryl Hein