Layout Design
In this installment, “Layout Design” Fenton “lays out” his theory of screen design and tells where to find all those nice buttons.
I would like to describe a method for layout design that I use. It’s nothing special really, kind of conservative, but attractive and efficient.
The main idea is to begin with the data, and work outward from there. That seems fairly natural, as that’s what you have to work with.
The overall theory is this: Use the least amount of layout elements to clearly convey the message. Be reasonably consistent within a type of element. Use a gradual contrast to separate elements, with small touches of dramatic contrast reserved for focusing attention.
My theory is based on a simple discovery. I found, by experimentation, that every layout element adds, by its contrast, a small amount of distraction from the data.
Contrast of Elements Explained
By contrast I mean all the ways that make elements distinct: shades of black; white or color of text or lines; relative to the background; size and position.
Some contrast is needed of course, to allow the data to stand out quickly from the background. It is a balance. Thus the “least amount” must be found.
It’s not that hard. Simply increase the contrast until the data looks good and is easy to find. Then increase it further, look away, then look back. You will notice a slight confusion, even irritation from the extra. It will be slightly more difficult to quickly read the data. Try it. Use this test on every element you add, while viewing the layout as a whole.
Often, after adding many fields and elements, you’ll run into the opposite problem, wherein you can’t quickly find the main data that you want to see first, such as a name in the header or a few primary fields. In this case, I’ve found a couple of good ways to add contrast, as long as they aren’t overdone.
Text Color
One method is to change the text color to a slightly brighter shade. If the other text is black, change that field to very dark blue (it looks almost the same, but is a tiny bit more readable). I often use dark blue for most of the fields, highlighting the few critical ones with one step lighter blue. Bright blue stands out better than any other color.
Red stands out too, but it’s irritating, so I reserve it for warnings.
Dark green doesn’t stand out quite as well, but it’s also good, especially for labels; it’s sort of tranquil.
Dark gray, rather than black, can be used for labels, which, although necessary, don’t need to be as obvious as the data in the fields. This is especially true for things like address or phone number labels, which we all recognize by their format anyway.
As I said, every element adds some distraction. Tone down the labels and the data will stand out more clearly. Do keep them readable, however.
Backgrounds
The other way to add contrast is to change the background of the secondary fields to lightest gray, while leaving the main fields white. That way your eye is quickly drawn to the main ones, and the others are still easy to read.
I usually use a Body background of light gray. (Set the background color by clicking once on the “body” tab, then choosing the fill color.) In this case though, you’ll probably want to change the overall gray background one shade darker than the fields, to preserve some contrast.
By the way, this is generally for Form views, or header or footer elements. Field backgrounds in List views are done differently (see below).
Borders
For the border of the fields, I usually use a slightly darker gray, maybe two shades darker. This is what I mean by “gradual contrast.” If you use the default black it looks “boxy,” and it becomes more difficult for your eye to move quickly to the data in the other fields.
3D
If you feel you need more separation between the elements, or to group certain elements together, use a soft 3D box, or put it around the group.
The 3D effect is made by covering two sides of the box with one or two light colors (white, lighest gray) on two adjacent sides, and one or two dark colors (dark gray) on the others to create the illusion of 3D. I’ve found that if you use two shades for each it’s more realistic.
Layout Purpose
It is essential to have a good idea of what the layout should show, and what the purpose and focus of the layout is.
It’s necessary not only to know what data to put on the layout, but also to know what to leave off. If it seems there is more than one distinct group and there are a lot of fields, give those fields their own layout. That’s what makes a database better than a spreadsheet for displaying sets of information.
There’s also no need to cram everything on one big screen, forcing users to scroll all over looking for things. A simple button, or tab, to jump back and forth is much better.
It is whether you want to see lots of data from one record at a time, or certain fields from many records, that will determine whether you choose a Form view or a List view type layout.
If there is a need for both, you could probably do what you want with a Form view and a portal or two to show lists.
List Views
In the case of List type views I almost always use the alternating background row technique in white and lightest gray behind transparent fields. (See my article from March, “Layout with Global Containers,” and the example file “AltRows” for this simple technique.) Not only does it look good and allow you to easily see what row you’re on, it also enables “the least contrast.”
You can dispense with contrasting lines between the rows. This usually allows you to make the body one pixel shorter, saving at least a pixel per row (and that’s a lot per screen), without cramping the data in any way.
List View Borders
I don’t really like the “grid” look of spreadsheets for list views. Once again, all those black lines cut up and distract from the data.
Sometimes you can leave out borders entirely. But they are often needed to separate the columns and group them with their header label. In that case an elegant solution is to give them a border on just one side and a line color of light gray (a shade or two darker than the background).
Take Sides
To make it look really good, choose the side for the border that interferes least with the data. In the case of two text fields, give the left field a border on the right. In the case of number fields, give them a border on the left. Nudge the fields a couple of pixels apart.
What you are doing is using the adjacent field to create the border, and what it avoids is having the border crammed right up against the data. It appears to float between the fields, lifting and separating (oops, that’s a bra commercial).
You Can Push My Buttons
Buttons are a bit of a problem. I mostly use the built-in 3D buttons. But I try to add a few embellishments when possible.
Buttons should be as clear as possible while remaining a reasonable size. They should be labeled with text unless the graphic is dead obvious (or repeated throughout the database after having been clearly labeled on the main layout).
One way you can customize text buttons to make them more recognizable is by using color. Most buttons I make have dark blue text with dark blue lines around them. The fill is one shade lighter than the background when possible, one shade darker when there is no lighter color (I avoid white buttons usually; too glaring).
The lines would also be dark blue. This allows the buttons to stand out, but draws no particular attention to any one of them.
Buttons for actions that really change the records get a lighter color. For New Records and navigation scripts to other files I use a lighter, more electric blue color, and lighter blue text. This says, “I do something!”
For Deletes I always use dark red text and brighter red line–“Be careful!”
For the button that returns to the main control panel for the whole database I use bright blue text and neon green line, hard to miss if you’re lost or in a hurry to get out. I try to put it in the same place on every layout that has it, which in most layouts is on the far bottom right.
Consistent Locations
“Be reasonably consistent within a type of element.” This is very important with buttons. We associate them with the look and location we saw them last. While this is not a hard and fast rule, it’s a good idea to try and put the same button in the same place on different layouts where it is needed.
This is not to say that it should be on all layouts. Once again, the “least amount of elements” would mean not to put things on a layout that aren’t useful there, unless your overall design requires it.
I sometimes bend the “consistency” rule, especially in cases where the layouts are so different that you can’t reasonably put the button in the same place. A Form view Main Menu type layout and “letter” or report view have little in common.
Alignment and Balance
This is another mysterious area. Suffice it to say that some kind of alignment is better than none. There is no need, however, to have everything line up exactly on their edges.
One thing I’ve noticed is that even unrelated objects should line up with something if possible. This is especially true if an element is just a little out of alignment, but not enough to be considered as part of some other arrangement.
For example, there are some horizontal fields, lined up along their bottoms, with a small graphic button on the end, at the right edge of the screen. Up higher on the layout, there is another similar, though not identical graphic by itself. It really looks better if the upper graphic is moved to line up with the lower, on its outer edge, even if it’s a different size, so the overall layout has a right edge.
Or there is one wide field, with two smaller ones under it. If possible, the first of those should line up on the left, and the second on the right of the one above. Either the fields and/or the space between them should be adjusted to make it so.
Sometimes center-alignment is a good choice when neither right or left will do. These are small things, but they add up.
Spaces between objects should be given roughly the same care as objects themselves. That is, they should be the appropriate size to separate the data fields with their respective labels, uniform within groups of fields and roughly uniform between groups (a pixel or two doesn’t matter).
Overall, the layout should have a pleasing balance. This is something that you just have to sit back and adjust. Move things around. Group the data fields that belong together. Balance the data with the space.
Make a copy of the layout to try out real different arrangements (as it’s a pain to recreate a messed up layout).
So that’s my method. I’m not saying that you should do yours the same. But do give it some thought, look at other files and develop a style of your own.
Databases can be aesthetic; they will not only look better, but they make it easier to find what you’re looking for, which is what it’s all about, right? They don’t have to look like a spreadsheet or a bunch of bare black boxes on a white background. Neither should they look like a piece of abstract modern art (unless it looks good and works), nor like a peacenik’s vest covered with buttons.
I like to think of mine as simple control panels for personal data-space craft 🙂
Sliding Rows
OK, here’s an actual useful tip, for those of you still awake. To achieve the ultimate soft 3D look with a list-type view, draw (in Layout mode) a 1 pixel horizontal line across the bottom of the Header for the whole width of your layout, right over the black default line. Do the same for the Footer (if you have one), but nudge the line down one pixel below the dotted line (elements touching a dotted line belong to the part above it).
Make the top line a shade or two darker than the Header and the bottom one white.
The body now appears to be inset beneath the other parts. When you scroll down, the list view rows appear to be sliding underneath. It’s classier looking than the black lines and besides, it adheres to the “least contrast” rule (OK, I’ll never say it again).
Moving, Deleting Parts
Sometimes you want to remove a part (Header, Body, etc.), but keep the fields that are in it. Normally if you press Delete, you’re asked if you want to delete the part and everything in it. If you hold the Option key, just the part will be deleted, without dialog, and all the objects will remain just where they were.
Other times you want to adjust a part, moving its line up or down past existing objects; it stops when it hits one and won’t go further. Once again, hold the Option key and it will glide right past. If you slide a Header line all the way to the top, it’s the same as deleting it (above).
There is a reason for the default “stopping” behavior. It lets you move the part line snug to the bottom of fields or labels without having to look hard to get it pixel perfect, very useful in list views. Remember the Option key to get the best of both worlds.
T-Square
Sometimes one or both of the T-square tool’s lines are difficult to grab quickly, either far away or off the visible screen. Rather than trying to scroll and grab the one you want and then drag it back, simply hold the Command key and hit “T” twice. The first hit makes them disappear, the second brings them back centered on the screen.
Duplicating fields and Value Lists
Once you get one field all fixed up like you want it (formatting and lines), you can Option-drag it to create another. The Field dialog will conveniently pop-up so you can reassign it. Hold the Shift key to keep it lined up.
Caution: When you duplicate a field that has a Value List attached or Auto-enter options, the duplicate will have them, too. Usually you won’t notice this until you click in one in Browse mode and the wrong list drops down.
Field Format Dilemma
You can select several fields at once to strip or add a value list to all of them. This can happen even if you don’t intend it to.
If you select several fields–one of which has a value list–and trigger the Field Format dialog and change the value list options (or any of the other options), their entry status (entry or non-entry, select contents), or change the number of repetitions, they will all change.
If no value list is showing in the dialog box, all selected fields will lose their value lists. If you click on the value list radio button to add or modify one when they’re all selected, they’ll all get it.
It is difficult to predict whether a value list will be showing when you open the dialog. If a field has a pop-up list, it tends to show. If it’s a pop-up menu, it doesn’t show. It probably has something to do with pop-up lists being the default.
In any case, you have to pay attention if you select groups of fields with value lists or they will get changed behind your back. If you have any doubts at all, hit cancel and check.
Button Templates
I have a little Layout file to store small graphics that I use, most borrowed, some modified, some homemade. Everyone needs “Sort, Print, List, Find” graphics.
For these common things I’ll use a small graphic, perhaps with some small text, perhaps alone.
You can also make your own graphics in a drawing or painting application. ClarisWorks is good for simple ones. Keep in mind that complex graphics can add file size and slow screen redraw considerably.
Drawing graphics for buttons is probably alot like drawing icons, that is, they’re so small that you must draw in a magnified view, but then they look quite different at 100% view.
I suggest having the two views open at once on the screen, so you can see what your changes are doing; it’s often surprising.
It’s also a good idea to set the “Rulers” to have more divisions. I put 72 per inch. This gives more control when nudging with the arrow keys.
Buttons on the Web
I searched my FileMaker sites and assembled the following list of graphics templates.
The king of FileMaker buttons is undoubtedly John Krische. His “1000 Buttons” series, up to Volume IV now, has hundreds of layout objects at a reasonable price ($5-$10 file). I had a little trouble with expanding the Mac (.bin) files; I ended up downloading the PC (.zip) files, which worked fine. Perhaps you’ll have better luck
.
http://www.krischesystems.com
Another nice set of buttons is by Parker Bennett of Mogulsoft (databases for the entertainment industry). It’s generous of him to give these away free. (His download server was down, so this is his main page.)
http://www.mogulsoft.com
This is a basic set of buttons and other layout objects released by FM itself (long ago), also on the FileMaker CD.
ftp://ftp.claris.com/pub/USA-Macintosh/Templates/FileMakerPro4/ButtonsAndDialogs.bin
(that’s all one line, folks).
A multi-volume set of free buttons by Charles Lunsford is available at this address. It has a lot of buttons, most with an unusual pastel colored interface theme.
http://home.HiWAAY.net/~cullman
See you next month!
Fenton Jones
Fenton Jones is a FileMaker database designer and consultant, based in San Diego, CA. FileMaker is a cross-platform rapid-development tool for affordable relational databases. If you have need of a FileMaker Pro expert, please be sure to visit his home page at http://www.fentonjones.com
Leave a Reply
You must be logged in to post a comment.