Real Life Journey of Navigation
Updated: Dec 9, 2020
How your solution provides navigation, sets the tone for the whole User Experience (UX).
End Result = Two Options.
When you click on the above image, this showcases two 'options' for the same main navigation. The first option exposes all the options with one click - the second option assumes the user will know which of the six sections their required option is located.
Which of the two options is your 'considered' preference - and why ?
Read on . . .
Claris FileMaker allows the Developer to craft modern and sophisticated navigation with combinations of buttons, scripts, tab controls, slider controls, card windows and pop overs.
Consistency is the initial concept for consideration. Regardless of your chosen method, apply your navigation method across the entire solution. This gives the user a consistent experience for travelling around layouts.
Before beginning any new function, I look to the internet to research various options, regardless of the technique being FileMaker focused.
Navigation is a well discussed design pattern - and blogged about function. I'm struggling to think of any software that doesn't require any form of navigation.
Any conversation about navigation includes hamburgers. We're all familiar with those three horizontal lines, or the variation of three vertical dots - either way - with the invent of mobile devices, the hamburger became the default for navigation, if only to reduce the clutter and to save screen real estate.
Any design pattern, and hamburger navigation is a design pattern, needs to be 'considered', which is a corner stone of design, to consider all aspects for the function.
As an example, here's a great article from the Nielsen Norman Group on how hiding navigation reduces the discoverability of any solution.
Without spoiling the outcome of your User Experience (UX) to actually read the above mentioned article, consider exploring a combination of hidden and exposed navigation.
More on that later . . .
And for context, this is a real life navigation journey, for a real life solution, over a period of 10 years of live production.
Let's start with the scenario of a new system for a new client. The first release of the solution obviously requires navigation, in this case, only four sections for selecting. These four items sit simply in the right hand corner of the top panel. No big deal. Simple.
Over time, we add navigation options, moving from four to nine items, which now fill the space we have allocated in the top panel for navigation.
We are now down the timeline a further 24 months, we now require 14 options, and some of the section navigation names have lengthened, making it impossible for our current navigation design to work, with the solution begging for a new solution to our navigation - which can lead to the hamburger.
Now the latest version of the solution has a hamburger for navigation with a list of 14 navigation items in a list vertically down the pop over. Great, now we have reduced the visual clutter of the previous navigation items, although we have change a User Experience (UX) that has been in place for over two years.
Now it's time to discuss a key component of User Experience (UX) - Cognitive Load.
Our users have built up years of muscle memory and cognitive memory, in the context that they can navigate from one section to the other, without really focusing on the task at hand. They know without really looking, or even thinking about it, that the Personnel section in the navigation is the second option from the left.
Now, with the hamburger, they need to move the mouse to the far right, actually click on the hamburger, then find the item they require, from the list of navigation options.
I'll reference George A. Miller's 1956 paper - the human brain can recall seven items, plus or minus two. Present a list of 14 items - horizontally or vertically - and the choice is made by reading from left to right or up or down.
There must be a better solution.
It's now later - time to apply a combination of hidden and exposed navigation.
And fast forward to the current navigation requirements, and there are 21 navigation options for the user to choose. And before we assume that's three sections of seven items - grouping the options into six sections, with considered items between two and six.
These clear and considered six sections have been defined so that the user doesn't need to think about the section that the navigation option they require is within.
The next feature we can add is to not have to click on the Navigation Section to then click on the Navigation Option. It's counter intuitive to have to click to expose the options, then to click again to select the option.
Reducing the mouse clicks - reducing click fatigue - improves the User Experience (UX).
I know what you are thinking - Claris FileMaker does not have the feature that you can display a pop over via a hover (mouse over) - or does it ?
FileMaker Mouse Over.
Daniel Woods - aka Weetbix - has an excellent blog post here - describing a technique where a mouse over - or hover - can call a script via the tooltip function. And it's worth noting this solution was published in 2014.
FileMaker Back Button.
There's one more component that I'd like to recommend for your navigation toolbox - and this is a back button - or I should say 'back and forward' buttons - which from here we will call Browser Navigation.
Paul Jansen has created a Modular solution here - which only require one script, one custom function - and of course the back and forward buttons. It's also worth noting this solution was published in 2013.
There you have it - a Navigation Journey based on a real life solution . . .