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/

11) Make use of a webviewer instead of field to make the content non-editable and scrollable in FileMaker Go. Please have a look on to the below link to have better idea of the same:

http://www.supportgroup.com/explore/using-the-web-viewer-as-a-field-in-filemaker-go/

12) Finally it is always the best practice to test the layout for each aspect on the iPad and iPhone itself while doing the design.

Written By: Suryakant Mekap, Software Engineer, Mindfire Solutions

About these ads
Leave a comment

6 Comments

  1. Peter Gort

     /  September 6, 2013

    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.

    Reply
    • 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.

      Reply
  2. 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

    Reply
  1. Best practices in layout design for FMGo | Filemaker Info
  2. Filemaker | Annotary

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Extreme FileMaker

League of Filemaker Gurus

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: