The Original FileMaker Community
Free Templates - Demo Apps - Video Tutorials -Samples - Help - 46000 Member Forum

The Leading Filemaker Developer Tools

Password protection and security…

FileMaker Interface Design: From Clutter to Clarity

When, last month, I finally got around to posting the updated session materials, true to form, I found lots more to improve in my FileMaker integration design work. With one notable exception, I resisted the temptation to tweak things further. That exception addressed a deficiency in the booking interface for Lee Real Estate that I discussed in my talk but hadn’t solved completely. Since you won’t see this final change in my session video, I’d like to take a moment here to share it with you.

A Simple Visual Abstraction

This interface shows a specific property and its bookings for a six months. A list of the bookings appears on the left-hand side of the interface; a 6-month calendar appears on the right, with the bookings color-coded.

Booking layout UI with booking list on left and six-month calendar on the right

Layout with booking list on the left and six-month calendar on the right

In the course of the presentation, I observed that there was no clear visual connection between the list of bookings on the left and the calendar on the right. I wanted users to be able to look at a booking listed on the left, and then be able to glance over to the calendar on the right and spot the same booking more easily. To that end, I added a button to the list which caused the same time period to be selected in the calendar (see below, selection shown in green).

Booking layout UI that shows selected time period in green on the calendar

Selected time period displayed in green on the calendar

While posting the materials, I realized that in each row of the list, I could provide a simple representation of the six-month calendar for the property in question. Any month containing at least one day of the booking would appear as “booked” (or greyed out if the property owner marked it as unavailable). This would provide the direct visual relationship I sought.

Booking layout with visual indication added to portal row for calendar

Portal row shows visual representation of the six-month calendar

Here’s What I Did

I wanted to have six squares corresponding to the six months displayed on the calendar. I decided to use text rather than graphic objects because I thought this would render more quickly. (Please feel free to comment if you disagree).

I found extended ASCII characters for a filled box and an open box. This application is used only on macOS, so I felt reasonably safe taking this approach. I used a filled box for any month where a given reservation appears, and the open box for those months where the reservation does not appear.

⬛︎  = U+2B1B  or Char(6503811035)
⬜︎  = U+2B1C or Char(6503811036)

In the first row of the booking portal, you see one filled square and five open ones:

Closeup of visual indicator for calendar added to portal row

Visual indicator in portal row with six squares – one filled; five open

I color-coded the text to match the two kinds of reservations shown on the calendar: blue for the bookings made by the vacation rental company and gray for the dates blocked by the owners for other purposes.

RGB(154;154;154)   //the gray used by the calendar
RGB (111;111;207)  //the blue used by the calendar

Next, I checked whether the reservation appeared in a given month. I created a custom function for this. It checks four different possible relationships between the reservation dates and the month in question. I decided it was more efficient to store the monthFirstDay and monthLastDay as global fields and pass them as parameters, rather than to recalculate them each time the function is called:

If (
	startDate <= monthFirstDay and StopDate >= monthLastDay
	startDate <= monthFirstDay and stopDate >= monthFirstDay
	startDate <= monthLastDay and stopDate >= monthLastDay
	startDate >= monthFirstDay and stopDate <= monthLastDay;

	"⬛︎";"⬜︎"   //  Filled square if the reservation appears in the month, open square otherwise


Here is the resulting unstored calculation which returns the special text object. It’s somewhat expensive in terms of performance, but the portal in question typically has only 4-8 rows.

Let (
	@textColor = If ( TenantLast = "Other";RGB(154;154;154); RGB (111;111;207) );
	// "Other" (i.e. owner-blocked) leases are gray while bookings are blue

	@squareSet = 

		_BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u[1] ; GLB__Globals::Date_month_lastDay_u[1] ) &

		_BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u[2] ; GLB__Globals::Date_month_lastDay_u[2] ) &

		_BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u[3] ; GLB__Globals::Date_month_lastDay_u[3] ) &

		¶ &

		_BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u[4] ; GLB__Globals::Date_month_lastDay_u[4] ) &

		_BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u[5] ; GLB__Globals::Date_month_lastDay_u[5] ) &

		_BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u[6] ; GLB__Globals::Date_month_lastDay_u[6] )


	TextColor(@squareSet; @textColor )


Finally, I simply included this calculated field in each portal row as follows:

Portal in layout mode that shows calculated field added to each portal row

Calculated field added to each portal row

Do You Have FileMaker Interface Design Suggestions?

I’m pleased with the clear relationship this establishes between the booking portal and the calendar. Do you have any other suggestions for ways to help the user see the connection between these two things? How about ideas for improving the efficiency of the code that I put together? I look forward to hearing your ideas on improved FileMaker interface design.

Next Steps for Your FileMaker Solution

Are you looking for an objective review of your FileMaker system’s interface? My team and I can give it a look and make suggestions for improvement. Contact our team to get started.

On this site we promote, share and showcase material from Soliant Consulting one of the BEST consulting company’s in FileMaker.

We encourage you to visit their site and to inquire about their services. FMT is proud to deliver and promote FileMaker for Small Business Owners Worldwide since 1997. Our Forum The Original FileMaker Forum has 45,700+ members.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy