![]() We recommend choosing a single theme at the beginning of your design process and avoid making changes. It should include consistent colors, fonts, and styles set for each type of object. You can use a custom theme, one of your own design. Setting a design theme at the beginning of the development process allows you to easily apply a consistent design throughout the entire solution. Any buttons or text we wanted to keep as an option but steer the user away from as the unnatural next action, we used a shade of gray. For any action we wanted to guide the user through or call an action to, we used blue for buttons and hover states. This part of the user experience carries throughout each of the core files and their additional build-ons. Therefore we built a more muted color (for this case, gray). ![]() The user may still need the option of “Delete”, but it shouldn’t be called out to their immediate attention. The natural action, “Close”, displays a brighter color for that button (in this case, blue). We kept the colors simple for these files and selected a single color for “positive” or next action steps, and then muted colors for “negative” or canceling action steps.įor example, a user creating a new time entry in the Job Tracking file has two options for the user once they finish entering in time, “Close” and “Delete”. ![]() This means selecting colors for each different type of call-to-action, whether a button or clickable text. One way of doing is to guide the user through the workflow with specific colors. We aimed for the workflow process to come as naturally as possible to the user, without confusion or hesitation. Color ConsistencyĪnother important aspect of user experience we focused on when designing these custom FileMaker templates is the use of consistent colors throughout the app. The finished product is a clean, functional navigation window that only displays when the user needs, giving the main layouts a sleeker look and feel. Using the Get (WindowWidth) and subtracting the navigation menu’s layout width (in this case 320pt), the navigation window will always open to the rightmost side of the window. Setting the Height within the New Window script step to Get (WindowContentHeight), we are able to allow the navigation window to always keep the same height as the active window. We chose a slender window that appears on the far right on the screen. Because you have control over the size and position of card windows, you have the power to display the navigation layout anywhere within the window. We used a small button with the hamburger icon in the upper right corner of each layout with a script attached that opens the navigation layout in a card window. You only have to make changes to a single layout versus changing every layout that includes the navigation menu. It also allows for easier manipulation of the navigation menu. It gives the user more space on each layout and eliminates layout clutter. Card windows, introduced in FileMaker 16, allow you to layer windows within the same window, a great feature to take advantage of when designing file navigation. We created a navigation layout that displays as a card window. Rather than have a navigation bar on each layout, we took advantage of one of FileMaker’s newer features, card windows. Strategic Navigationįor example, see how navigation between different layouts moves throughout the app. We made our goal to build these solutions to feel and operate much like the apps we enjoy every day. User interface describes the overall look and style of the app. Consider usability, efficiency, and the overall flow of the app. User experience depicts how the user perceives certain features of an app. User Interface & User Experience Best Practices I’d like to go into some detail about some of the best practices we hit on as we worked through our design and development process for them. Unlike starter solutions, these files are meant to be dissected, understood, learned from, and actually built upon. Our team spent a great deal of time determining how these apps should look, how they should flow, and most importantly, how to develop them. Look under the hood and you’ll find much of the same. File Foundation Built for YouĪt the core of the FileMaker templates, you’ll find a solid, consistent design, clean look, and strategic user interface and user experience. These files encourage workplace innovation without requiring extensive development experience. ![]() Our team worked with Claris to build several FileMaker templates that help businesses launch specific functionality.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |