visual appeal

[VICH]

if anyone has any advice on visual appeal and making layouts visually appealing please help

[Ted S]

Wow. This is a big topic where everyone has an opinion. There are books and articles galore on this subject many of which take a very high-level view of interface design.

I assume you are not looking for a 30,000 ft discussion UI design thoughts but would rather would like just some simple tips.

One simple thing I have done that seems to improve the appearance of layouts is to indent the text on fields. I generally indent text about 5px from the left on a regular text field. I'll do the same thing for numbers but generally right align them.

[VICH]

it was meant to be pretty broad i'm not really looking for anythingspecific just anyones 2 cents on what makes a layout look good

thanks for yours btw

[Ender]

I'd suggest you study other successful databases, applications, web sites, and OSs, to gleen what's good about their UI. There tends to be some common threads like simplicity and intuitiveness. For example, what web search engine do you use? Why? I like Google because the interface is simple and uncluttered.

Translating this desire for a simple user interface into a database that works for new users as well as power users is certainly a challenge. It's clear that the simple interface will be appreciated by new users so they won't feel overwhelmed, but what about the more advanced users? I think these power users still appreciate a simple interface, but would like the ability to access more advanced features easily.

It's then your job as the developer to figure out how many fields, buttons, and other interface elements to include on the layouts, how to arrange them in an intuitive way, and how to allow that advanced functionality that the power users want (in a way that won't clutter up the basic UI.)

I know I spend a great deal of time working on the template for the basic UI of each solution I work on. I use the client's color preferences and minimum screen dimensions to make an interface template that shows what the basic layout looks like, with example process and navigation buttons. Once I feel good about it, I'll bring it to the client for approval.

As Ted says, this is a big topic. If you're serious about making a good UI, you might check out some books on the subject. There are also some web site about UI, many dealing with building a user friendly web site, but the concepts are the same.

[VICH]

well i just see everyone elses databases that they send out for demos or that people post just because and i can't even attempt to mimic those layouts mine just looks basic i want it to look like something as opposed to a fillin sheet with a few buttons

[Fenton]

Yes, it's a big subject, and controversial to some extent. Here's my take on it. I think that FileMaker database design is not really web design, so while you can get some general ideas, there are database specific considerations.

My general design uses a fair amount of 3D, with white and soft grays being the most common colors. Color and icons are used sparingly; their function is to attract attention. The data itself should be the dominant element of the layout, easy to see and read.

My general scheme:

The general layout color is one of the lightest grays, or a Aqua-like (Mac) light line pattern. The data is often in 3D "engraved effect" fields; this is a built-in Effect (by the fill color); with a custom line leading space of 2 pixels (keeps the first letter from looking smashed against the box). On list views I use the built-in alternating rows, in the Body tag, white color alternating with lightest gray.

You can also go with a more Aqua like look, more white, less grey. But I don't like layouts where everything is white and you can't easily see where to type, nor am I fond of light gray labels you can hardly see.

I like to use FileMaker's native tools as much as possible. It makes it easier to modify for one thing. This is something to keep in mind. If you can't quickly change an object's size and position, you're shooting yourself in the foot. Remember that there's always more to add, until you're completely finished. It's good to stagger data blocks apart a little, for definition, but don't waste a lot of space in the beginning; you may need it later.

Line things up (read on). The human eye can subconciously detect if an object is 1 pixel off. If 2 objects should be lined up, make sure they are. Sloppy design is annoying. That being said, all objects cannot and should not be strictly aligned. But it helps if an object is aligned to something. Look beside it, and above and below it.

Related to the above, fields should the correct size for their data, which is generally a little bigger than the longest entry (unless this conflicts with alignment, in which case fudge). Fields with wildly varying amounts of text should have a mechanism to switch to another layout (and/or window) so it can be easily read. Just putting scroll bars on all large text fields is not adequate, IMHO.

I (and others) have been using light gradient bars recently. You can add a "gray line - while line" separator. Put text with an attached script and you've got a button.

Collect icons. You should have a Layout Bank file, with all your icons and objects. So you don't have to go looking all over for them.

Final note: Unless you're creating a shrink-wrap solution, your client or boss is paying for this. So you have to be efficient. But, on the other hand, every job is slightly different. That's what makes it interesting. BTW, plain and ugly is NOT efficient. If it's their file, usually that's what you start with, and they came to you because it's not working -]

[VICH]

thank you very much advice like that is what i am looking for...anyone else?

[Leoff]

...ya know what...ya just gotta get into the pool to swim. Try some of your own and eventually you'll have a style unique to YOU which will work! Look at others for ideas, but develop yur own sense of style and look...it does work!

Leoff

:yay:

[VICH]

i have a sense of style i just don't know how to execute it very well through this program

[sbg2]

My 2 cents:

- Use a different font and/or style for labels vs. data. This enables users to easily distinguish between the two.

- Be consistent! For example I like to use a white background for fields that can be entered in browse mode and have a tab-stop, light yellow fields are for fields that can be entered but do not have a tab-stop, fields that are required have a red border. Fields that are for display only should be set to the background color, or transparent when needed, use merge fields where appropriate. Being consistent applies to much, much more than field background colors!

- If a Layout is displayed in View As Form mode uncheck the "show field frames when record is active box".

- If you are designing a tabbed layout make it readily obvious which tab is selected. Make selected tab higher than other tabs, font bold, back color different etc.

- Instead of using FMP's Engraved feature on a rectangle consider creating two rectangles the same size, the first one with an almost white line color overlayed by a second one (one pixel up, one pixel left) with an almost black line color. This IMO looks much better than an FMP engraved rectangle.

- Add a triangle (Arial U+25BC Black Down Pointing Triangle) on top of the right side of drop down menu's. Use the same triangle, with a small box around it, to the right of but not on top of the field for drop down lists, attach a Go To Field script step to the triangle. It does'nt look great, but looks better than no indication that the field is a drop down list.

- Take control of user Finds. Make it readily obvious that the user is in find mode. I like to use a gray color for the body of the layout and for any rectangles. This way my user has a visual cue that since the layout is colored gray rather than the normal Tan they are are in Find Mode. ** instead of simply making a button enter find mode use a script to facilitate the find and add a Find button to your layout that resumes the script. No more needing to remind users they need to hit Enter to perform the find, or click that little find button on the status area. ** Also include a Cancel button so users can cancel a find.

- Use scripted validation rather than FMP's automatic validation. When validation fails show a custom dialog explaining the validation error and then go to the field (and layout) where the error occured, highlight the contents of the field if appropriate. This makes a layout feel much more professional IMO.

- Learn to use the View>Object Size pop-up to move and resize objects.

- Learn to show/hide buttons by storing buttons in a related file and using a portal. Get confused when you cant see the portal in layout mode because you dont want the portal to have a border line and FMP offers no way (that I know of) to highlight portals in layout mode.

- Avoid pop-up Menus as users can select more than one item, you cant configure how the menu looks and the drop shadow outline is ugly. Avoid pop-up lists because they are slow and you can't configure how they look. hmmm, that doesn't leave any options.

- Use a monospaced font for denomination display, have at least one "narrow" font available.

- Hide the status area from users, display the current record, found records and total records in the same spot on every layout (where appropriate).

[comment]

FMP offers no way (that I know of) to highlight portals in layout mode.

Click the portal tool and Select All.

[VICH]

thanks that really helps!

[sbg2]

Click the portal tool and Select All.

That helps but is yet another less than ideal work around. Once I select one of the portals my other portals are no longer highlighted. Something more along the lines of what you get when using View>Show>Buttons would be better. The option to view or hide different object types at any given moment would be even better but I'm not going to hold my breath waiting for that to happen in 2020.

** Clicking the Button Tool then Select All does not do anything....?