2 Replies Latest reply on Sep 25, 2012 1:45 PM by psijmons

    How prominent do your navigation buttons need to be?

      Hi All,

       

      In his recent Before & After layout screen shots, (https://fmdev.filemaker.com/message/95362#95362 and earlier) Peter Sijmons made a big change in the prominence of the Buttons used for Navigation to the different modules of his Laboratory Management solution. They went from being prominently styled boxes in a banner across the layout to a row of less conspicuous oval buttons beneath the strong banner of his revised layout.

       

      I like the change as it seems to fit with the modern thinking on interface design and am considering a similar transition as we rebuild our current solution. I'm curious as to how different layout designers arrive at these decisions without all the benefits of FMI's eye tracking laboratory that Heather Winkle cited in her DevCon presentation as an important tool in their way of reaching an optimal layout configuration.

       

      Mike Duncan's Navigation Framework also has much smaller buttons than I'm used to seeing.

       

      I'm hoping that Peter can share with us how he arrived at this design decision and its impact on the users of his solution.

       

      Thanks in advance,

       

      John

        • 1. Re: How prominent do your navigation buttons need to be?
          wsvp

          One thing to consider (besides aesthetics) when dealing with buttons is... Do you need your interface to be "Tablet" friendly.  The primary input device on a Tablet, is a "finger", one needs to consider the size of the button carefully.  It is a real pain in the @$$ to have to pinch up the screen every time you need to click a button.

          • 2. Re: How prominent do your navigation buttons need to be?
            psijmons

            Actually John, most buttons on the new FMP12 layouts have increased in size, only very prominent tabs in fmp7 have been reduced. All of these are large enough to be used in touch screens (not mobile devices but the next generation PC's that will probably have this feature).

             

            I have added a few more images (our logo will be replaced by the licensee's logo when implemented).

             

            Screen Shot 2012-09-25 at 21.48.51.jpg  Screen Shot 2012-09-25 at 21.50.20.jpg

             

            The new openings layout has a very customizable series of buttons, which all light up with mouse over and color when clicked. The plus buttons within all large buttons will light up in a contrasting color when the user wants to add a new record.

            This openings layout groups table by function (business, research, production etc) but can also be set in the order of the clients workflow. This layout can be reached from every other of the 800+ layouts.

             

            The next 2 images are examples of detail views:

            Screen Shot 2012-09-25 at 21.54.10.jpg   Screen Shot 2012-09-25 at 22.15.27.jpg

             

            The main tabs in the left image were moved up in the new layout. Both the header and footer are completely portable and scripts fill all details (headername, tabnames). All detail views have a 7-tab structure and depending on the table, some or all are in use.

            Within the top dark grey bar, some of the more common buttons are in a darker grey but light up prominently with mouse over (e.g. for new, delete, , search, storage, company dashboard) and change color on mouse click. The 3 buttons on the far right are for navigation (page back, move up to opening or page forward (when applicable).

            The rightmost tab is always for Actions, here all buttons are grouped where specific actions are needed from the user (with a minimum size of 25x25 pts.

             

            Screen Shot 2012-09-25 at 22.17.17.jpg 

             

            We prepared a custom Szienz CSS which was tweaked in some details, but the basis was CoolGrey.

            We made heavy us of the new anchored rules to make every layout as consistent as possible. There were exceptions where we simply had to give in for practical reasons, but overall, the solution is much more consistent then our previous version.

             

            Another major change was that we took out as many dialog boxes as possible, and showed messages in a field under the tab buttons. This field is white when empty, pick for warnings, yellow for lengthy script and the user sees a processing warning, green for confirmation messages. In the picture below you see the blue line that is the top of the tab structure, the tab labels are reduced to 0 pts (fortunately, FMP12 now opens the tab that is open in browse mode).

            Screen Shot 2012-09-25 at 22.38.08.jpg

             

            We have not yet tested this on users (beta release later this fall), but we did have a very good look at the way modern websites are designed and picked what we liked. We think the improvements can lure our customrs to upgrade.

             

            All comments are welcome

            Peter