Best practices in layout design for FMGo

1) To create an iOS friendly layout for FMGo, the best practice is to minimize the amount of horizontal and vertical scrolling required to interact on your layout. To achieve the same, we should make a single layout for iPhone having size 320W X 255H and for iPad having size 768W X 673H (instead of making two layouts one for landscape and one for portrait) along with proper anchor locks which will stretch it properly to fit for both the landscape and portrait mode view.

2) We also need to take care of the proper anchor locks for the objects(fields,graphic, webviewer etc) placed on the layout so that the objects showing correctly in one view would not overlap with each other on the other view. The other benefit of this size layout is that we will not have to scroll in either direction to view all of the objects.

3) Sometimes, we need to make the layout big enough to hold all the objects, in this case we have to design the layout smartly we can make use of the side a block method to make the layout work both horizontally and vertically. We can even make use of tabs to place tab related objects on it thus limiting the layout to above size.Please have a look on to the below link to get a better idea of the side a block method:http://www.infografix.biz/?p=188

4) Locking the zoom level is helpful on a list view to prevent horizontal scrolling and can be done by using “Set Zoom Level[Lock;100%]” step in the navigating script of the layout for that file. However a possible best practice would be to defer zoom levels to the user rather than setting them by script.

5) Make sure the size of button and the space between them are adequate so as user doesn’t accidentally click the button near the one that he is intended to click.

6) Make sure the size of the text are large enough to interact with the database from the iPhone and iPad.

7) Don’t forget to make your list views 4pt narrower so as to accommodate the indicator for the active record. Some other factors to take into consideration while designing the layout are:

FMGO ITEM INFORMATION
Toolbar 44 points high in Portrait mode on the iPhone / iPad
Toolbar 44 points high in Landscape mode on the iPad
Toolbar 34 points high in Landscape mode on the iPhone
Status Bar 20 points high in Portrait mode on the iPhone / iPad
Status Bar 20 points high in Landscape on the iPad

8) Sometimes, field height do restrict the bottom of character on iPad and iPhone such as “g”, “p” etc, we should take care of the same by increasing field height or doing the correct alignment for top, bottom or middle for that field.

9) “Allow User Abort[Off]” step should be set appropriately for the application so as to avoid users to interrupt scripts by double-tapping a scripted UI element. This lets user unintentionally stop scripts from executing, potentially interrupting
data processing scripts and potentially introducing data corruption.

10) We should use small images or native FileMaker contents to make the navigation to the layouts faster, we can even use the hidden tab control feature to hide objects contributing towards loading time for the layouts, and show them with the
click of a button when the user is intended to do so. Please have a look on to the below link to have better idea of the same:http://www.teamdf.com/weetbicks/tab-controls-overlay-menus-revealing-filemaker12/151/

6 Comments

Peter Gort

Our Filemaker Systems Engineer ran some courses on iOS design, and had some good examples of this. A good rule of thumb is to make all buttons at least 42 points high, for unambiguous tapping on an iPad mini. He also showed a technique which I’ve come to use a fair bit, using separate layouts for portrait and landscape and running a timer script at one second intervals that detect the orientation and switch layouts when appropriate. Another couple of things : choosing the right theme can make your solution look more “native-like”, and it’s worth experimenting with the different themes. Also, if you use the Developer Tool to make a kiosk version of the file, you can make it get all the “Chrome” out of the way, making your solution look even more “native app” like.

Thanks Peter for your further enlightenment. The methods you have suggested are very intuitive and practical. We have implemented in one of our projects the way of swapping layouts in some time intervals with On-timer script step. Thanks again.

To anyone interested, Yann from Infografix will be doing a one day workshop in Toronto and Vancouver on the very subject of designing for FM GO on IOS. This is the link for more info http://bit.ly/1c9Ji6y , will expire after Sept 19 and Sept 19, 2013