FMLayoutMode.com

Hey y’all. We’re slowly getting there. Just to recap: The layout from my May 26, 2010 post started out looking like this:

… but with some attention to colours, vague icons, text styles, and overdone effects, we’ve been able to get it looking like this:

That’s hardly embarrassing at all. Now let’s take the next step. It’s time to look at placement and alignment of the layout objects — or “Where’n hell do we put all this stuff?”

The first order of business: That’s a long line of fields. You users only get one cue about which field they’re in, and that’s by way of the field label to the left of the field. So, we want to set these fields up in such a way that they can feel more comfortable.

Anytime you have a large group of fields like this you need to remember one of your most valuable layout tools: white space!

Let’s separate these fields into groups that make sense, so that the users know, “when I’m in this general area of the layout, I must be entering this type of data.” It’s time to enter that most divine state of being known as Layout Mode.

So let’s look at what kind of data we have here:

1. The first five fields relate to the contact’s identification (name and company).
2. The next four fields are various parts of the address.
3. The next four fields are contact points (email, phone, etc.).
4. Then we have the contact’s status.

That looks like a pretty good way to start slicing this thing up. Have a look at how I did it:

We didn’t do anything too earth-shattering there, but even just that little bit of white space really helps divide your data entry into smaller, manageable pockets. Here’s what a little more jockeying does:

So by drawing a couple rectangles, and giving those areas titles. We have more defined pockets of data now. You’ll notice there are some things we did within the lines of data as well.

As long as we don’t make too many, we can make some some assumptions about how people are used to seeing their data. For example, it’s not unreasonable for users to expect to enter First Name, Middle Initial, and then Last Name. It’s a natural order for that data.

We could have just labelled that line as “Name” and left it at that, but just because I don’t like to assume too much familiarity with my users, I helped them out by making the field label say “Name (first, middle, last)”. I made the “middle” field very narrow, so that there is only room for about one character; this tells the user that this field is in fact for the middle initial, without having to litter the layout with more text.

What was the Salutation field, has been relabelled as “Mr., Ms., Mrs.”. Salutation is a little too generic a term; it could mean “Dear Mike” for all the user knows. We can remove further doubt by adding a value list for the user to select from. Slow down, Lightnin’ — we’ll get you there.

The Street Address field might often contain two lines of data, so I increased the height on that.

What about those nasty, misshapen buttons? Let’s finally do something about them. Just a quick solution for now. In (you guessed it) Layout Mode, you need to select all of those buttons.

From your Arrange menu, select Align > Left Edges. Now from your Arrange menu again, select Resize to > Largest Width. If that printer icon is selected, you may get some nasty surprises while doing all this arranging. Did I mention how I feel about icons? Basically, you’ll want to make sure your icon is not selected, and then move it to the desired position afterward. Next, go to your Arrange menu and select Resize to > Smallest Height.

The last thing (for now) that you want to do to these buttons, is select them one at a time, and move them so that they are just touching each other.

The last step? Select the Footer, and delete. That’s right, this is a form layout; we don’t need a footer. Then grab the bottom of the Body (not as dirty as it might sound), and drag it up until it is just under your bottom-most layout object.

The end result of all this pixel-pushing could end up looking like this:

Now those buttons are all aligned in a perfect rectangle, and are close enough together to almost look like one of those palettes that you see in other software.

Notes

1. When aligning objects, generally speaking, you want to align the bottom edge and the left edge. That just seems to be what the eye likes.
2. When possible, it is also nice to align the tops and right sides. Makes everything nice and boxy (I mean that in a good way!).
3. The text in text fields should be aligned to the left, unless it is a number field, then it is aligned to the right.
4. Generally text on buttons should either be centred, or left-aligned.
5. Field labels are funny beasts. They often look better if they are left-aligned. However, if you have a really long field label, that pushes the rest of them quite far to the left — further away from their field. If the field label is further away from the field, you increase the chance that your users will confuse which label belongs to which field. So as an exception to Spafford’s Principle of Boxy Layouts, I keep my field labels right-aligned. I consider it an ugly trade-off to make data entry more reliable.
6. The fields should all be the same distance apart from each other. I have all fields in a particular grouping sitting one pixel from the side of the adjacent field, and one pixel above or below the previous/next field.
7. Wow, man. What’s with all the Notes?
8. Vertically, field labels should be aligned with the text baseline of it’s field — which is not necessarily the bottom of the field.

Soon we may want to look at folding some space, and bringing in some related data. Believe it or not, this related data may make our layout look a little less crowded.

Paul Spafford
FMLayoutMode.com
Spafford Data Solutions