Design and Layout best practice

[Cathy Evans]

My technical understanding of Filemaker is getting good and I can do pretty
much what I want/need to but my design of layouts is rubbish. I end up with
buttons all over the place because (I think ) of lack of planning. Can
anybody point me in the direction of a good book CD on the subject. Many
thanks

CAthy

[Howard Schlossberg]

I inherited a project like that (were you the original developer?),
where buttons were all over the place (and there were a zillion
different colors and heavy lines and 14-point bold fonts and fields not
aligned with each other and...etc).

I don't think there are any FileMaker oriented books on the subject.
But this isn't really a Filemaker issue, anyhow. There are many
theoretical books on design and user interface, which will help you
better think about what might make sense for the user. Also, there are
a couple books I have in my collection that are specific to standards on
the Windows platform. Books like "The Essential Guide to User Interface
Design" <http://www.amazon.com/exec/obidos/ASIN/0471084646/> and
"Developing User Interfaces for Windows"
<http://www.amazon.com/exec/obidos/ASIN/0735605866/> have both been
helpful to me in recognizing many of the consistancies that we come
across and expect every day as we use various programs. I'm sure there
must be similar books for Mac, as well.

Cathy Evans wrote:

> My technical understanding of Filemaker is getting good and I can do pretty
> much what I want/need to but my design of layouts is rubbish. I end up with
> buttons all over the place because (I think ) of lack of planning. Can
> anybody point me in the direction of a good book CD on the subject. Many
> thanks

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Howard Schlossberg (818) 883-2846
FM Pro Solutions Los Angeles, California
Associate Member, FileMaker Solutions Alliance

[Howard Schlossberg]

Another one I just noticed on Amazon, though I don't have it. But it
looks good: <http://www.amazon.com/exec/obidos/tg/detail/-/1558605827/>

Howard Schlossberg wrote:

> I inherited a project like that (were you the original developer?),
> where buttons were all over the place (and there were a zillion
> different colors and heavy lines and 14-point bold fonts and fields not
> aligned with each other and...etc).
>
> I don't think there are any FileMaker oriented books on the subject. But
> this isn't really a Filemaker issue, anyhow. There are many theoretical
> books on design and user interface, which will help you better think
> about what might make sense for the user. Also, there are a couple
> books I have in my collection that are specific to standards on the
> Windows platform. Books like "The Essential Guide to User Interface
> Design" <http://www.amazon.com/exec/obidos/ASIN/0471084646/> and
> "Developing User Interfaces for Windows"
> <http://www.amazon.com/exec/obidos/ASIN/0735605866/> have both been
> helpful to me in recognizing many of the consistancies that we come
> across and expect every day as we use various programs. I'm sure there
> must be similar books for Mac, as well.
>
> Cathy Evans wrote:
>

>> My technical understanding of Filemaker is getting good and I can do
>> pretty
>> much what I want/need to but my design of layouts is rubbish. I end up
>> with
>> buttons all over the place because (I think ) of lack of planning. Can
>> anybody point me in the direction of a good book CD on the subject. Many
>> thanks

>
>
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> Howard Schlossberg (818) 883-2846
> FM Pro Solutions Los Angeles, California
> Associate Member, FileMaker Solutions Alliance
>

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Howard Schlossberg (818) 883-2846
FM Pro Solutions Los Angeles, California
Associate Member, FileMaker Solutions Alliance

[Bridget Eley]

The best way to learn design is to study the solutions of other developers.
Each have different styles and different ideas about what works and what
doesn't. Where there is broad consensus from one developer to another, you
should at least consider it. You can also learn from what they do wrong (on
the principle that it is easier to see the faults in the designs of others
than in our own designs). So sample widely, experiment with ideas you like,
develop your own style.

If I had to pick the single most important element in design layout, it
would be consistency across the solution as a whole. Here are some examples
of how you can achieve that:

- keep the layouts the same size (as large as the smallest screen resolution
on which they will be used) and in the same position (top left corner) to
give the whole solution the appearance of being a single integrated
application. Always design within this space (users hate scrolling, and
scrolling causes mistakes) except for printable forms and reports which
should be designed to the appropriate page size and orientation. If you
need more space, see tabbed interface notes below.

- use colour sparingly, consistently and to good effect (to designate
function or file). If you use two or more colours on a layout, make sure
they are complimentary. Use lighter, less saturated colours for
backgrounds. A bright, saturated colour scheme might look spectacular in an
interior design magazine, but try to imagine the experience of the people
who have to live in that house 24/7. In the same way, your users have to
look at your colour scheme 8 hours a day, 5 days a week. So spare a thought
for them.

- button bar always in the same position

- common buttons (print, find, sort, help, quit, and so on) always in the
same position relative to the button bar (greyed out and inactive if not
needed on that layout)

- use a tabbed interface to break up cluttered layouts and organise your
fields into groups of similar types of data. Clicking a tab takes you to
another layout with different fields and functions, but the user is largely
unaware that they have even left the original layout. They can be set up to
move between different files too, although this is a little trickier, and
usually results in more than one row of tabs which is a form of clutter in
itself. I prefer to use a main menu for movement between files and tabs for
movement within a single file.

When starting a new solution, it is useful to create a template file with
basic tabs (a layout per tab position) that are already functional (ie
formatted to scripts that move to the appropriate layout), and button bars
with button (formatted to dummy script if actual scripts vary from file to
file), then just make copies of this for each new file in the solution. Its
easier to delete unneeded layouts and scripts, than to recreate each file
from scratch. It also ensures pixel perfect consistency between files.

I have posted several articles on the how to of making a tabbed interface,
here is a link to one of them (I use a slightly different technique these
days but this should get you started):

<[url]http://www.google.com/groups?q=+%22tabbed+interface%22+group:comp.databa ses[/url]
..filemaker+author:Bridget+author:Eley&hl=en&lr=&i e=UTF-8&selm=B8FAA318.559A%
25bridgeteley%40ihug.com.au&rnum=2>

Also, Albert Harum-Alvarez has written some good stuff about filemaker
interface design:

[url]http://www.smallco.net/index.html[/url]

In RestrainYourself.pdf, he shows some before and after shots of dbs that
have had a makeover using tabs.

Other articles by Albert Harum-Alvarez worth looking at:

Good Waiters & Bad Waiters
Task-Centered_Design.pdf
FileMaker_Foibles.pdf

Bridget Eley


in article blc0di$pgi$1@titan.btinternet.com, Cathy Evans at
[email]cathy@clarity-copiers.co.uk[/email] wrote on 30/9/03 11:28 PM:

> My technical understanding of Filemaker is getting good and I can do pretty
> much what I want/need to but my design of layouts is rubbish. I end up with
> buttons all over the place because (I think ) of lack of planning. Can
> anybody point me in the direction of a good book CD on the subject. Many
> thanks
>
> CAthy
>
>

--

(to email direct, replace "DOT" with "." and remove ".invalid")

[Bridget Eley]

Hi Howard

I keep getting a bad link message from Amazon, do you have the name of the
book?

Bridget

in article [email]vnj6vriscv8b30@corp.supernews.com[/email], Howard Schlossberg at
[email]howard@antispahm.fmprosolutions.com[/email] wrote on 1/10/03 1:06 AM:

> Another one I just noticed on Amazon, though I don't have it. But it
> looks good: <http://www.amazon.com/exec/obidos/tg/detail/-/1558605827/>
>
> Howard Schlossberg wrote:
>

>> I inherited a project like that (were you the original developer?),
>> where buttons were all over the place (and there were a zillion
>> different colors and heavy lines and 14-point bold fonts and fields not
>> aligned with each other and...etc).
>>
>> I don't think there are any FileMaker oriented books on the subject. But
>> this isn't really a Filemaker issue, anyhow. There are many theoretical
>> books on design and user interface, which will help you better think
>> about what might make sense for the user. Also, there are a couple
>> books I have in my collection that are specific to standards on the
>> Windows platform. Books like "The Essential Guide to User Interface
>> Design" <http://www.amazon.com/exec/obidos/ASIN/0471084646/> and
>> "Developing User Interfaces for Windows"
>> <http://www.amazon.com/exec/obidos/ASIN/0735605866/> have both been
>> helpful to me in recognizing many of the consistancies that we come
>> across and expect every day as we use various programs. I'm sure there
>> must be similar books for Mac, as well.
>>
>> Cathy Evans wrote:
>>

>>> My technical understanding of Filemaker is getting good and I can do
>>> pretty
>>> much what I want/need to but my design of layouts is rubbish. I end up
>>> with
>>> buttons all over the place because (I think ) of lack of planning. Can
>>> anybody point me in the direction of a good book CD on the subject. Many
>>> thanks

>>
>>
>> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>> Howard Schlossberg (818) 883-2846
>> FM Pro Solutions Los Angeles, California
>> Associate Member, FileMaker Solutions Alliance
>>

--

(to email direct, replace "DOT" with "." and remove ".invalid")

[Technicians]

In addition to what Bridget says I would reinforce one thing and add one
other.

I cannot stress how important consistency across the solution is. You
are the developer and understand all its ins and outs. Your users will
be everthing from fellow developers down to brain dead time servers who
consider your creation a total waste of time. If these latter have to
actually THINK!!! then they will not use it properly and risk the
integrity of the whole solution. Consistency very effectively fool
proofs the solution (or, at least, makes it idiot resistant).

Colour is also important. I endorse Bridget's comments but add a stress
on the importance of contrast. Best is, of course, black on white but
consider others. Black on very pale blues, greens, etc. For the opposite
effect place some black text against a strong purple background or white
against yellow and have a look. These can send you blind very quickly.
Consider the eyesight of your potential users also. I set up a solution
using 12 point Arial as the main font which worked well for nearly all
users. A (literally) one-eyed colleague needed to have the font size
increased to 18 point so it could be read. It turned out that it was
easier for other users too especially with people tending to set
resolutions higher these days to get more screen real estate.

Bridget Eley wrote:
<snip>

> If I had to pick the single most important element in design layout, it
> would be consistency across the solution as a whole. Here are some examples
> of how you can achieve that:

<more snips>

> - use colour sparingly, consistently and to good effect (to designate
> function or file). If you use two or more colours on a layout, make sure
> they are complimentary. Use lighter, less saturated colours for
> backgrounds. A bright, saturated colour scheme might look spectacular in an
> interior design magazine, but try to imagine the experience of the people
> who have to live in that house 24/7. In the same way, your users have to
> look at your colour scheme 8 hours a day, 5 days a week. So spare a thought
> for them.

[Howard Schlossberg]

I just tried the link again in another browser and it worked okay. You
can also try this slightly different link:
<http://www.amazon.com/exec/obidos/ASIN/1558605827/>. And if you can't
get it working, the book is "GUI Bloopers: Don'ts and Do's for Software
Developers and Web Designers" by Jeff Johnson; ISBN # is 1558605827 if
you just enter that into the search field.

Bridget Eley wrote:

> Hi Howard
>
> I keep getting a bad link message from Amazon, do you have the name of the
> book?
>
> Bridget
>
> in article [email]vnj6vriscv8b30@corp.supernews.com[/email], Howard Schlossberg at
> [email]howard@antispahm.fmprosolutions.com[/email] wrote on 1/10/03 1:06 AM:
>
>

>>Another one I just noticed on Amazon, though I don't have it. But it
>>looks good: <http://www.amazon.com/exec/obidos/tg/detail/-/1558605827/>
>>
>>Howard Schlossberg wrote:
>>
>>

>>>I inherited a project like that (were you the original developer?),
>>>where buttons were all over the place (and there were a zillion
>>>different colors and heavy lines and 14-point bold fonts and fields not
>>>aligned with each other and...etc).
>>>
>>>I don't think there are any FileMaker oriented books on the subject. But
>>>this isn't really a Filemaker issue, anyhow. There are many theoretical
>>>books on design and user interface, which will help you better think
>>>about what might make sense for the user. Also, there are a couple
>>>books I have in my collection that are specific to standards on the
>>>Windows platform. Books like "The Essential Guide to User Interface
>>>Design" <http://www.amazon.com/exec/obidos/ASIN/0471084646/> and
>>>"Developing User Interfaces for Windows"
>>><http://www.amazon.com/exec/obidos/ASIN/0735605866/> have both been
>>>helpful to me in recognizing many of the consistancies that we come
>>>across and expect every day as we use various programs. I'm sure there
>>>must be similar books for Mac, as well.
>>>
>>>Cathy Evans wrote:
>>>
>>>
>>>>My technical understanding of Filemaker is getting good and I can do
>>>>pretty
>>>>much what I want/need to but my design of layouts is rubbish. I end up
>>>>with
>>>>buttons all over the place because (I think ) of lack of planning. Can
>>>>anybody point me in the direction of a good book CD on the subject. Many
>>>>thanks
>>>
>>>
>>>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~
>>>Howard Schlossberg (818) 883-2846
>>>FM Pro Solutions Los Angeles, California
>>>Associate Member, FileMaker Solutions Alliance
>>>

>
>

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Howard Schlossberg (818) 883-2846
FM Pro Solutions Los Angeles, California
Associate Member, FileMaker Solutions Alliance

[Bridget Eley]

Thanks, Howard.

in article [email]vnkqm9n11q2u62@corp.supernews.com[/email], Howard Schlossberg at
[email]howard@antispahm.fmprosolutions.com[/email] wrote on 1/10/03 3:48 PM:

> I just tried the link again in another browser and it worked okay. You
> can also try this slightly different link:
> <http://www.amazon.com/exec/obidos/ASIN/1558605827/>. And if you can't
> get it working, the book is "GUI Bloopers: Don'ts and Do's for Software
> Developers and Web Designers" by Jeff Johnson; ISBN # is 1558605827 if
> you just enter that into the search field.>>

--

(to email direct, replace "DOT" with "." and remove ".invalid")

[Lou Lesko]

"Cathy Evans" <cathy@clarity-copiers.co.uk> writes:

> buttons all over the place because (I think ) of lack of planning. Can

Cathy we just put together a stand alone solution thats going to be
released in a few weeks. The issues of user interface were huge, beyond
huge. The best thing I can recomend is to look for some articles on Brian
Dunnings Site [url]http://www.briandunning.com/[/url]

Call your mom, call your friends.

Pick a person who not so savvy with a computer

a person who is a regular, daily user

and someone who's more advanced (stay away from programers, they'll give
you too much input and confuse you)

Have them use your solution and look over their shoulder. Watch where
and why they confused or lost.

On average most people have a problem with more than five buttons or five
tabs. Simplify, simplify. How many of your routines can be combined. How
many things can be done without user interaction? Beware of warning
windows, why ding your user for pressing the wrong button? How many user
missteps can be taking care of transparently? Don't hide routines by
incorperating option-keys into clicks unless it makes sense and is
consistent throughout the solution.

We did a lot of user interaction tests and put together a long list.

If your really interested in more email me and I'll tell you what we
found.

Bridgette, Howard are amazing people read their responses slowly, Im a big
fab of these guys.

loulou

[Bridget Eley]

You can download two sample chapters at

<http://books.elsevier.com/companions/1558605827/sample.asp>

Bridget Eley

in article BBA0AA7E.3D20%bridgeteley@ihugDOTcomDOTau.invalid, Bridget Eley
at [email]bridgeteley@ihugDOTcomDOTau.inva[/email]lid wrote on 1/10/03 3:59 PM:

> Thanks, Howard.
>
> in article [email]vnkqm9n11q2u62@corp.supernews.com[/email], Howard Schlossberg at
> [email]howard@antispahm.fmprosolutions.com[/email] wrote on 1/10/03 3:48 PM:
>

>> I just tried the link again in another browser and it worked okay. You
>> can also try this slightly different link:
>> <http://www.amazon.com/exec/obidos/ASIN/1558605827/>. And if you can't
>> get it working, the book is "GUI Bloopers: Don'ts and Do's for Software
>> Developers and Web Designers" by Jeff Johnson; ISBN # is 1558605827 if
>> you just enter that into the search field.>>

--

(to email direct, replace "DOT" with "." and remove ".invalid")