Interface Re-Design

As new versions of FileMaker are released and clients upgrade, sometimes it is the best choice to re-work or re-design the screens themselves to take advantage of the new functionality.  The project we are going to look at involved upgrading from FileMaker 11 to FileMaker 14 which meant that every single object had to be reset to use a custom theme.

The three images below show the original interface (from the developer who started the project); then the FileMaker 11 interface and finally the current (FileMaker 14 interface).

This is the original FileMaker 11 interface.  Admittedly it is very busy and a bit cramped but there was a lot of information that needed to be on a single screen; for the client, it worked and worked very well.

A few things to notice on this screen are a). the tab panels (on the right) which allowed the user to quickly find a product, or component, and add it to the current one by clicking on it.  (While this functionality was very useful, it meant a severe lack of space horizontally so all the text was very small; removing the tab panel contents, without losing the functionality, was a primary objective). b). The size of the text throughout; really too small, and c). the navigation buttons on the bottom which, due to space limitations, only allowed for navigation within the production module; this meant that the user had to go back to the main menu to get to other parts of the program.

In FileMaker 14, we have button bars (on the left and bottom of screen) and popovers, which are new windows that open up to reveal different types of content.   Using a combination of these items, allows for a massive amount of information to be available without cluttering up the interface.  The space that is freed up means that the text size can be increased and the full width of the screen used.

Here we’ve removed the tab panel and put all of the individual panel contents into separate popovers (which are in the main button panel on the left).  This allows us to use the full width of the screen to display the items that make up each product and use a larger font to make them more readable.

The popover shown is for the Products.  Clicking on any item adds that product to the current one.  When you select a category, it immediately filters the records shown down to that category.  From there, you can further filter by typing what you are looking for in the filter field.

The navigation buttons have been replaced by a button bar, each of which has a sub-menu that pops open upwards.  This allows the user to go anywhere in the program without first having to go back to the main menu screen.

Re-working the list view was less work and the intention here was simply to make it a bit more visually appealing and use the client’s corporate colors.  (The current record is highlighted so that the user knows exactly which record they are on).

For this list view, we’ve also moved the navigation buttons to the top of the screen so that they open downwards; while this is a small change, it avoids having to mouse down to the bottom of the screen and is a small, but significant, time saver.

The Main Menu screen is now almost superfluous since users can get to anywhere via the navigation buttons on each screen however, it still needed to be re-worked to maintain continuity within the program.

What we’ve shown you here are just a few screens within a very complex program but this should give you an idea of what can be done to improve a program, albeit one that worked extremely well for the client and has done so for several years.  In fact, this is a landmark project that has completely transformed a manufacturing business.  To read the full story, click HERE

Website Apps