FileMaker User Interface Design – Time for a change

Field Boxes everywhere, ugh.

As long as I can remember databases have had labels and field boxes, and that goes back to the days of Claris Works, FileMaker 2.1. and others as well, at least when the GUI started to take over. Even this blog post is typed into a scrolling field box.  Field boxes have their place, but not in every place, the same goes for field labels.  They have been handled so many ways, label to the left, flush left, flush right, top, in field, you get the picture. Both of them take up space and now with new tools there are so many ways we can use them less.

Why?

The FileMaker 13 Platform provides us 2 new tools to change how we can manage our interfaces. We can now stop thinking about boxes. Has anyone ever looked at a business card and seen a label for Company: Company Name or Name: Joe Scarpetta. Never, at least I would hope not. There is plenty of data that we see that is obvious to us, so let’s stop telling everyone that a name is a name or a company is a company, we know! Now being honest there are exceptions, dates are one exception. What date? So if looking at the data begs a question, then a label must be used or a creative way to show true meaning and intention.

Think Simple

sbux

This text is an email, no labels, but all the information is clear and to the point with no explanation. For me, I know I can buy more coffee and because I know it debits my Amex card, I get miles as well, double win.

Where am I going with this?

Let’s throw away all ideas of how we are using our design and build a new interface in FileMaker. Let’s separate Browse, Find, New and Edit, but only one layout to manage all of it. There is no real edit mode, it’s just browse mode, click in field and type.  This is how this whole concept got started. Many new clients want the data protected. I often hear “Don’t let someone think they are in Find mode and mess something up.” If  you have been using FileMaker as long as I have, you know you’ve done it.  Mission accomplished.  We are going to focus on this concept on the left column.

Browse Mode

Below is a screen shot of a location record. Clean, easy to read and follow, lots of negative space and larger type for focus. If we were to use this layout in Find Mode  as is, there is a lot of wasted real estate with the map. So how do we solve this?

browse

 

Edit Mode

This is where we take advantage of the space, by removing the map and now showing fields and labels, to guide the user.  A Cancel Edit (Revert Record) and Save Edit (Commit Record) button also appear now. This is one more layer of protecting the data and ensuring the user doesn’t accidentally overwrite data.

edit

Find Mode

Same layout and slide control as Edit Mode, but again, clearly labeled to guide the user.

find

 

 

 

 

 

 

 

 

 

[space ]

How? The Slide Control

Slide Controls can have object names assigned to the via the Inspector and can have the navigation buttons hidden. So they can be controlled via a script, see my post Slip Sliding away.

Panel1

Create 3 panels in the slide control:

panel.browse

panel.edit

panel.create

Why create and edit?

panel.browse

This is the slide control to let the interface do exactly what it should do. Look beautiful, almost business card like.

panel.edit

This is used for Edit and Find Mode. The panel slides over in the proper mode when called by Edit or Find buttons. This adds an entire extra layer for data integrity, a user has to click a button to Edit the data on the layout. Even Further with security, if a user does not have access to Edit, you can hide the Edit button, with Hide Object When. This also can allow revert record when scripted and managed properly.

panel.create

This is not always necessary, however in this file we are creating a related record for the contact via a relationship. It also allows for additional data entry when creating a record, that you would not necessarily need when performing a find or edit.

Final Thoughts

Using this technique has made the FileMaker User Interface cleaner than ever, clients are loving it. No rocket science here, we know that, but simple design principles and simple use of new tools.  For us as the developers it keeps the overhead low without adding additional layouts. The slide control is proving to be a very valuable tool. What are you doing to simplify your layouts using Slide Controls?

Contact us to see how we can help you!

 

2016-11-01T17:01:17+00:00 By |

About the Author:

Joe Scarpetta

Joe is the architect of the systems that The Scarpetta Group develops. He started working with FileMaker over 20 years ago, helping businesses streamline their companies’ processes and creating applications to make them run more effectively.