Developer Community | Fellowship Technologies | Dynamic Church Conference DESIGN PATTERNS LIBRARY & CODE STANDARDS Design Patterns Code Standards Overview This document contains normative guidelines for web applications built by the Product Development department of Fellowship Technologies, as specified by the UX team. It is to be readily available to anyone who wishes to check the iterative progress of our best practices. Table of Contents Design Patterns Dynamic Interfaces Add Another Confirmation Error Feedback Drawer Navigation Logout Counter Note: Our code standards are free to repurpose for your own use, under a Creative Commons attribution / non-commercial / share-alike license. We simply ask for a link back to the original. Menus & Actions Gear Menu Actions Forms Design Patterns The primary benefit of using design patterns is that we are not constantly re-inventing the wheel when coming up with the general functionality of a site or web application. Another benefit is that these design patters often mirror or mimic other similar functionality found throughout the rest of the Internet. This allows users to feel more comfortable and familiar with a web application, rather than having to learn a foreign system. Design patterns can help applications be understood quicker. They can be thought of in terms of various automobiles. Though they differ, the steering wheel and pedals are readily familiar to any licensed driver. Fieldset vs. Box Simple Form Complex Form Miscellaneous Back Tab Composition Rich Text Editor Enhanced Actions Pill Tabs Advanced Search Match Indicator Dynamic Interfaces Add Another Personalized Data Involvement Graph Modal Window Tables Alpha Bar Delete Links Sortable Rows PROBLEM PATTERN RESULT The user needs to add another piece of data, akin to the information s/he is currently viewing. An add link is placed below the list of data. Delete links accompany each newly added item. This allows the user to add new data, without having to visit a new page for data entry. Confirmation PROBLEM PATTERN RESULT The user needs to be informed when an action was accomplished successfully. A dynamic message overlay appears for a few seconds, then quietly animates out of sight. This gives brief feedback, without being obtrusive to the user as s/he continues to work. Error Feedback PROBLEM PATTERN RESULT The user needs to be made aware of potential problems with a form submission. A message appears, prominently above page content, listing the errors that were found. This allows the user to read the errors, and dismiss with the hide link when finished. Drawer Navigation PROBLEM PATTERN RESULT The user needs to see, at a glance, a listing of hierarchical links in an application. A dynamic drawer menu slides down over the page content, revealing helpful links. This allows the user easier access to sections of the application, no matter where s/he is. Logout Counter PROBLEM PATTERN RESULT In the interest of protecting personal data, an unattended session should be ended. If a user leaves the browser idle for a period of time, s/he is prompted with a countdown. Unless the user dismisses the modal within 5 minutes, the app redirects to the login page. Menus & Actions Gear Menu PROBLEM PATTERN RESULT The user needs actionable items one-click away, without cluttering the interface. A gear menu contains a list of collapsible actions, at the top-right of the interface. This allows quick access to a variety of actions, while still allowing the user to work. Actions PROBLEM PATTERN RESULT The user needs to have actionable items visibly nearby, but not as the page's focal point. An actions sidebar is provided, which is supplementary to the page's primary purpose. The user can focus on the task at hand, but can also take secondary actions, if need be. Forms Fieldset vs. Box PROBLEM PATTERN RESULT Data needs to be grouped into logical sections, for easier visual scanning and reading. Small portions go in a <fieldset> . Larger groupings should be in <div class="box"> . This helps visually distinguish the size of data sets and importance of form elements. Simple Form PROBLEM The user wants to enter a small amount of data, and needs an accommodating interface. PATTERN When a form only requires limited information, labels and inputs belong on their own lines. RESULT CODE This allows the user to quickly fill out the form, because it is easy to scan visually. View example Complex Form PROBLEM PATTERN RESULT CODE The user wants to enter a large amount of data, and needs an accommodating interface. Form labels and inputs are arranged side-by-side to allow more inputs per vertical space. This allows the user to enter more data, without having to scroll the page as much. View example Miscellaneous Back Tab PROBLEM PATTERN RESULT The user needs to return to a previous page, while maintaining the current state of the session. In the top-left of the page, there is a back tab that will take the user to the previous page. This allows the user to go back, without breaking the statefulness of the application. Composition Rich Text Editor PROBLEM PATTERN RESULT The user needs to compose an rich text message, such as an email or church announcement. A rich text editor offers a familiar interface, akin to what might be seen in a word processor. This allows the user to compose a message using an intuitive point-and-click workflow. Enhanced Actions PROBLEM PATTERN RESULT The user needs to insert variables such as {FirstName} and {LastName} into a message. Using one-click actions on the side of a page, the user can easily supplement an email. This allows a user to write messages quickly, which can be sent to multiple recipients. Pill Tabs PROBLEM The user needs to access sub-content that has been obscured within the same page. PATTERN Using stylized links that function as tabs, the user can hide or show relevant material. RESULT CODE This allows the interface to remain uncluttered, while still facilitating heavier content. View example Advanced Search PROBLEM PATTERN RESULT CODE The user needs to perform a search using a specific set of criteria, beyond a basic query. Using a toggle-able set of additional search fields, the user can enter more specific details. By providing additional search criteria, the user can narrow the result set considerably. View example Match Indicator PROBLEM PATTERN RESULT When attempting to compare two or more data sets, the user needs to know if they match. A strength indicator depicts visually (on a scale of 1 to 5) how close of a match is found. This allows a user to easily see how closely related the results are to the search criteria. Personalized Data Involvement Graph PROBLEM PATTERN RESULT The user needs to see how involved an individual has been in an area of ministry. Attendance and involvement in various programs can be plotted chronologically. This allows an administrator to gauge how active people are in their various roles. Modal Window PROBLEM PATTERN RESULT The user needs to be able to view more details about a person, without leaving the page. Using a modal overlay, a person's contact info can be displayed above everything else. This affords a quick synopsis while still maintaining all context of the task at hand. Tables Alpha Bar PROBLEM The user is viewing a great deal of information and needs to navigate through it logically. PATTERN RESULT For extremely large data sets, an alphabetical listing is displayed at the top of the table. This allows the user to drill down via the first letter of a single aspect of data (name, etc). Delete Links PROBLEM When viewing a set of data, the user needs to be able to delete one or more entries. PATTERN Delete links are displayed in the far-right hand of the data set, to prevent mis-clicks. RESULT This allows the user to delete specific items without going to a separate admin page. Sortable Rows PROBLEM The user needs to be able to rearrange the order of rows in a particular data table. PATTERN Up and down arrows facilitate the movement of a row, higher or lower in the table. RESULT This allows the user to have more granular control over how the data is displayed. Status Indicator PROBLEM The user needs to be see the status of a batch of requests that has been processed. PATTERN The status of each unique request is shown, and is color coded by success or failure. RESULT This allows users to easily scan the page for requests that need special attention. Curated by the UX Team at Fellowship Technologies | Color coded via SyntaxHighlighter HTML5 validator | View source