FMLayoutMode.com

Time to do some more work on that wild layout from my May 26, 2010 post. First, we cleaned up the colour badness. Then we took care of the vague icons.

Here’s what our latest layout looks like:

Still needs some work, eh? Let’s talk about the text: We’ll start with the field labels.

Let’s forget that you’re in FileMaker for a minute. Pretend you’re typing something in an email. If you want to stress an important word or phrase, what do you sometimes do? You make it bold.

So what does our current layout say? All field labels are important. As Dash mutters in The Incredibles, after his mom tells him that everybody is special, “That means nobody is special.” Right. Let’s do something about this. If none of the field labels are special, then let’s make them all unspecial (I’m sure that’s a word), by unbolding them (probably another word that Funk & Wagnall missed).

While we’re at it, do you notice anything else about these field labels? It looks like when the developer set these fields on the layout, he/she clicked the checkbox in the Specify Field dialog box to “Create label”.

As a result, FileMaker just inserted the field name on the layout as a field label. This will just bug your users. When they see fields labelled with things like “nameFirst”, they’ll think that the database was created by Yoda (“Awkward, this layout is. Fix it, we must.”)

So let’s give this some meaningful field names. Double-click on each of them and type something that a user will find less awkward. While you’re at it, put it in sentence case (one capital letter at the beginning).

Now that you’ve done that, let’s have a look at the layout.

One other thing, look at all the different text sizes. I consider text size to be similar to colour: Too many different ones and your layout looks goofy (pardon the technical term). Different text sizes aren’t as alarming as obnoxious colours though. I like to limit my layouts to a maximum of three text sizes, and only one font.

What font should we use, O Wise One, you may be asking. First of all, don’t call me that. I can’t take the pressure.

But I’ll tell you what font I like to use. Are you ready? Verdana — and I don’t mind telling you why. Verdana doesn’t have any of those cluttered looking serifs (the little handles that you see at the ends of the lines for letters in a lot of fonts, like Times New Roman), and it’s wider than a lot of other fonts. So even if you have to make the font pretty small, it is still quite readable.

Another advantage of Verdana: it works well cross-platform. Still a little chunkier on Windows, but not as bad as some (we’ll discuss what to do about that in a later post). Also, it is installed on almost every computer you’ll come across. If you use some weird font and try to use that file on a computer that doesn’t have it, you may be alarmed by the results.

So, back into Layout Mode, friends.

Let’s select all the fields and field labels. Change them to a size 10, Verdana. Don’t worry if you don’t like how the field label aligns with the field. Alignment is also for another day.

For the sake of being thorough, let’s also select the buttons and do the same: Size 10, Verdana, Unbold.

That’s an improvement on the main part of the layout. Now what can we do about that big chunky text at the top?

First of all, do we need that large text saying that this is the Client layout? The user probably navigated here because they wanted to look at clients. A small indication is nice, but we don’t need a big headline.

I usually have my navigation scripts include the following subscript:

All this does is change the window title to be the name of the layout. In this case, it will be “clients”.

Now we don’t need that headline. However, it might be nice to give the user a quick indicator about the nature of this record. So, in layout mode, let’s delete that big status field that we put in there.

Now, double-click on the black text in the top right that says “Clients”. Select that whole word, and then go to the Insert menu and select “Merge field”.

This will invoke the Specify field dialog. Select the nameFirst field. Type a space, then Insert a merge field again, selecting nameLast. Type a space, a dash, and another space, then Insert one more merge field, selecting the status field.

You’ll see this text area now contains the following:

<<nameFirst>> <<nameLast>> – <<status>>

Those are merge fields, for the uninitiated. You can do some cool stuff with them. What we would like to do, is select the dash, and the “<<status>>”. Change that text to be font size 18, Verdana. Now select all the other text before the dash and change it to font size 24, Verdana.

Let’s go back to Browse Mode and have a look:

Hmm. Well that looks a little less like we have been writing all this text with the thick primary grade crayons. You’ll notice that our navigation script changed the window title to be “clients”. Also, as we’re flipping from record to record, we just have to look at the big type in the header area to see the client’s name and status. It’s right out there where we can see it, instead of having to find the important fields in the layout.

There’s still a lot to do, but at least our text is a little less offensive.

Notes:

1. There are many people who disagree with me that field labels and report titles should be in sentence case. I have a few clients who insist on having a capital at the beginning of each word. Man, I hate that! However, it is just a matter of opinion. I need to get over it.
2. You may be tempted to just use “plain language” for your field names. That way, when you click the Create label checkbox on the Specify field dialog, it just puts in the label you want. e.g. “First name:”, “Last name:”, etc. Resist that temptation. If you decide to have the Web, or other programming language, access the database, then it may have problems with things like spaces, colons, the word “and”, and a few other things. Resist the temptation, friends!
3. I used two different font sizes on the headline to separate the two pieces of data that it holds. I tried doing two separate colours instead, having the status be the grey it was in the field we removed. I didn’t like the look of that as well. This seems okay.

Paul Spafford
FMLayoutMode.com
Spafford Data Solutions