Smart Form Patterns

Design patterns are recurring solutions that solve common design problems. They provide a common language between designers and helps create consistency throughout the web. They provide a great resource for web designers looking for the best tested, most usable, and most efficient layouts. UI patterns in web design are gaining recognition as an important resource to consider and creating designs around them can help any app or website to be more user-friendly.

ONEWEB supports the following UI Patterns:

WYSIWIG Pattern: ONEWEB Smart forms use WYSWIG Pattern. WYSIWYG is an acronym for What You See Is What You Get. This pattern gives users a clear indication of what their content will look like when it is published. It allows users to see formatted results as they edit, this increases their confidence and allows for quick and good looking results.

Page Grid: Grid layout is often used in smart forms to organize content, create alignment, and apply divine proportion or other basic design principles. However, grids recognized as interface patterns also serve a purpose in creating clear primary and secondary points of interest.

Input Feedback: Input Feedback Pattern is used when the user enters data into the system and expects to receive feedback on the result of that submission. Using this pattern, the data entered by the user must pass the rules that are considered to be valid. Such validation rules can be:

• Validate the presence of content – at least some content must be entered.

• Validate the inclusion of content – entered text must contain certain data or must be within a certain range.

• Validate acceptance (for instance terms of service) – often with a checkbox.

• Validate length – A password must in many cases be at least 6 characters long.

• Validate uniqueness – Many systems only allow one user with a given user-name. If the data submitted by the user do not pass validation, an error message should be presented to the user explaining how to correct the data and request for a re-submit.

Drag and Drop: Design Pattern allows users to perform operations on one or more objects by moving them from one place to another. It helps users pick up content and then rearrange content by dragging it across the screen.

Calendar Picker: This helps the user to find or submit information based on a date or date range so that user can easily choose a date or date range in to submit, track, sort, or filter data.

Structure Input: This helps when the user needs to quickly enter data into the system, but the format of the data must adhere to a predefined structure. It is used when the input you want to collect from user is a specific data type. For instance, a zip code, date or time, a phone number.

Live Previews: Live previews allow users to check how changes in form fields affect an end result as quickly as possible.

Morphing Controls: This pattern helps when the user wants to be presented with controls available to the current mode only. This can be useful when some controls don't need to be displayed at the same time and helps to declutter the screen from unnecessary and unavailable controls.

Navigation Tab Design: This pattern helps user to choose a content that needs to be separated into sections and accessed using a flat navigation structure which gives a clear indication of current location. This can be helpful when you want to provide a list of the highest available sections/subsections on your smart forms and wanted to show content-specific data for each tab. ONEWEB support General tab and 2-Layer tabs, and each tab can contain multiple (1-1) and (1-many) modules as per user requirement.

Module Tab Design: Module tab pattern helps in generating contents that needs to be separated into sections and accessed via a single content area using a flat navigation structure that does not refresh the page when selected. This helps user to see the content of each tab, can be viewed separate from each other, and not in context of each other. This design is also very helpful when the content for each tab has different structure e-g 1-1 Module or 1-Many module designs on ONEWEB.