FMLayoutMode.com

More work on that nasty layout from my May 26, 2010 post. It’s time to give the user some more data. That’s right, we’re going to improve the user experience by putting more stuff on the layout. Haven’t we been slowly removing things these past few weeks?

Yea, Bob. We have. But it’s not all about the visual. We want accessibility too.

So here’s a look at our latest iteration of the layout:

So it’s better. A lot better than the original. But it can be even betterer.

First of all, let’s fold some space. Damn it, Jim! I’m a database developer, not a quantum physicist! Easy dude, I’m just talking about giving your layout a little more real estate with a Tab Control Panel. Let’s take a wormhole into Layout Mode (a little space-folding reference; I had to look it up!).

Now that we’re in our comfort zone again, let’s grab that handle for the Body, and drag it downward to give us a little more working space.

Let’s make a Tab Control Panel now by clicking the following button up in your status toolbar:

Now click and hold a blank spot on your layout, and drag down and to the right. Let go of your mouse button, and you will suddenly have created a Tab Control Panel! You will see the following dialog:

You’ve probably done this before. Type the following in the Tab Name area: Address

… and then click the Create button. You’ll see it show up in the list of tabs in the top left. Let’s create three more tabs: Contact points; Projects; Invoices.

A couple more things:

1. Change the Tab Justification to be “Full”.
2. Change the Appearance to be “Square”.

Now click OK.

You’ve just created your tab control panel, friends. Now let’s make it a little less ugly, shall we?

While the Tab Panel Control is selected, change the font to Verdana 10 pt. Then change the fill colour to white. You’ll notice that the fill colour only changes on the panel that you’re on. So you’ll have to select each tab, and change it to be white as well.

I know, I know. More white. Don’t worry, we’ll be adding a very slight bit of colour in my next post. While we don’t want to go back to the original clown puke look of the layout, we need something!

You know all those nice (?) enclosing boxes for Location and Contact Points from the last post. Yeah, we’re turfing them for a new girl … and her name is Tab Panels.

Delete the Location sub-title, and the box that it is in. Now drag those fields onto the Address tab. Do the same with your Contact Points box — onto the Contact Points tab. Make sure that you keep them aligned with the name and company fields above. We mustn’t break Spafford’s Principle of Boxy Layouts that you learned last time. (Okay, I didn’t call it that, but coined the term later when I tweeted about it.)

We don’t need the Tab Control to be too tall. I set mine to be 164 pixels high. Looks about right to me.

Now, move your buttons over to the side a bit, and then move the tab control panel up to about 20 pixels under the Company field. Last step: grab that Body tag and drag it up against the bottom of the Tab Control Panel. Here’s what my final result looked like when I went back into Browse Mode:

Dude! That layout is starting to look crisp now! You are really getting good at this!

Not so fast sweet-talker! What about the additional data that was promised, you may be asking? That will be in the next post in this series. We’ve set the table for the new data; now we’ll be able to bring out the main dish on our fancy-eating plates.

Notes

1. Why did I choose square — instead of rounded — tabs? I just like ‘em. The straight lines look much cleaner and more business-like, in my humble opinion.
2. Why did I choose full, instead of left, right, or centered alignment for my tabs? Balance, baby. I find that left or right aligned tabs make the layout look too heavy on that side … and centered just looks goofy. I will use left if there is only one tab on my Tab Panel Control, but that doesn’t happen often.
3. If at all possible, try to make your layout — including your tab control — to be as wide as a single sheet of paper (and no wider). Even though you’ve made some lovely printouts for your users, sometimes they just want to print what they’re looking at. So it’s nice if it fits on the paper.
4. I had to change the field borders from black to a dark grey. I found the black to be a little too stark in comparison to all the white we’ve created. The grey softened things up a little.
5. I know, those buttons we worked so hard on “fixing” last time now stick out like a sore thumb. We’ll get to them too.

Paul Spafford
FMLayoutMode.com
Spafford Data Solutions