As FileMaker developers we pride ourselves with our ability to perform amazing feats of behind-the-scenes scripting and calculation dexterity. But, sometimes we forget that functionality is only half of a good design. The other half is what the user sees and interacts with. This half is the UI/UX.

For this discussion, let’s define the user interface (UI) as the workspace that contains objects (as well as their themes and styles) for data viewing and manipulation. These objects encompass everything from edit boxes to drop-down lists to tab controls, button bars, portals, web viewers, and so on.

The user experience (UX) is defined as how a user interacts with the UI. Foremost of UX is workflow, which is how a user moves from one object to the next in a logical fashion. UX also includes the layout’s “intuitiveness”, which is how easy (or not-so-easy) it is for a user to understand what they can do, where they can click, and what they can edit.

A good UX makes a user’s job easier. It reduces the learning curve of your app which reduces training time. It also increases “buy-in” from users. If they like what they see (UI) and feel comfortable using your app (UX), it increases its value to your client.

Let’s take a look at a few tips to enhance that comfort level. Below are six tips to consider when designing a good UX:

Workflow:

Never leave your user stranded.

When a user opens an additional window such as a report window or navigates to another layout to perform a task, always make sure to build obvious navigation tools so that your user can get back to where they started.  Leaving a user stranded on a dead-end layout can be confusing and frustrating. A user needs to feel at ease to explore areas of the app while always feeling comfortable that they can go back to start over.

Good workflow includes circular navigation, not linear. Linear navigation brings a user down a singular narrow path from one layout to the next but often leaves them stranded at a dead-end.

Circular navigation incorporates buttons to circle back to a previous step or go all the way back to the beginning to a dashboard or main menu to start over. It also allows a user to go forward to the next logical step, or branch off to a different section of the app.

Design the workflow of layouts to “read” from top to bottom, left to right. 

Place data that the user needs to know first in the upper left area of a layout. 

For example, on a form/detail layout of a “people” record, knowing the name of the person is most often the first thing a user needs to know. So, place the name fields in the upper left area so that the user “reads” that data first.

The additional data fields should flow in a cohesive way so that the user doesn’t have to jump their eyes around the screen to gather the next logical piece of the puzzle.

In action areas, place action buttons in the lower right or centered across the bottom.

Keeping with the concept of “top-to-bottom, left-to-right”; in dialog windows, card windows, popovers, tab panels, and slide panels it is best practice to place the action buttons in the lower right or center bottom of the action area. 

Clicking an action button such as “Okay”, “Cancel”, or “Save” is usually the last step your user will take when in an action area. Your user’s eyes will flow from top-to-bottom. So, their eyes will be positioned to see the action buttons when they need them. Placing the action buttons elsewhere forces the user to hunt around for the buttons.

Intuitiveness:

Use tooltips. 

Always add a tooltip to a button that is an icon only, one without text. Icons can be interpreted different ways by different users – and developers. Many users are afraid of clicking blindly in fear of breaking something. To help users feel more comfortable clicking a button, add a tooltip to buttons, especially icon-only buttons, to make sure your user knows what a given button will do.

Add the Self tooltip to long text fields. Fields that can hold long strings of text sometimes get cutoff. A simple help is to use the Self function as the tooltip calculation. Then when a user hovers their mouse over the field the entire field contents is displayed for a few seconds. This allows a user to know there is more data to read.

In addition, using the calculation box for tooltips allows us to provide extra data that may be pertinent to a field but does not need to take up real estate on the layout. For example, hovering over a person’s name in a list view layout could display a tooltip that provides that person’s title, rank, phone number, or other additional info from other fields.

Disable Browse Mode access on calculation and summary fields

 Users new to your app can get confused and distracted from their task when they click into a calculation field and attempt to edit data. FileMaker will provide a dialog box with a message saying the field is not modifiable. This can cause them confusion as to what they are supposed to do next and derail their task at hand, slowing down their work.

Since a user cannot edit data in a calculation or summary field, why allow a user to click into the field to begin with? In the Inspector (on the Data tab, Behavior section) simply uncheck Browse Mode for field entry. When a user clicks on the field nothing will happen. They will immediately learn that field does not need to be edited without a scary distracting error message.

Add Close buttons to all Popovers and Card Windows.

Many users can get stuck after opening a popover because they do not know how to close it. They do not know that simply clicking outside the popover will close it, it is not intuitive.

Always add a simply close button – with a tooltip – in the header/title area of popovers. A single script step of Close Popover will do the trick (use the Close Window (current) script step for card windows). This makes the popover more user-friendly because it is easier to understand what the user needs to do. 

Building a close button only takes a minute or two and can then be copied and pasted into every popover to maintain a consistent look and function.

Consistency adds to intuitiveness since after learning it on one layout, users will more easily recognize the same functionality on other layouts.

Conclusion

These simply techniques help put a professional polish on your app. They can improve your user’s experience which in turn helps them do their job more comfortably and more efficiently.