Forms Design for Complex Applications

From complex CRM systems to Facebook, or website builder like WIX, applications make meaning out of input. The form in its many manifestations provides a gateway for user submission. This article illustrates 8 different ways to present forms and explores the future of data input for applications.

Modal

Simple modals work well for forms with low complexity and limited inputs. Modals are usually easy to implement and have a straightforward user experience. However, complex interactions requiring additional modals, or pop overs can cause user error. Also, modals prevent the user from interacting with other parts of the app until it is closed.

Multi Document

Multiple document interface forms present itself as draggable panes, allowing the user to interact with many forms at once. The user can drag panes around the page allowing them to view the information beneath it. Multi-document forms allow power users to address lots of information at once, instead of pulling up multiple views, browser tabs, etc.

Slide-out

Slide-out forms present itself by sliding over a portion of the main view or pushing content over to accommodate the form. Like the modal, this presentation is contextual, allowing the user to reference information from the main view. Slide outs usually allow for longer forms because it takes up the window height.

Pop over

Pop over forms are great for quick edits and entries. The pop over is presented in-context to the related data, so users don’t lose their place in the app.

Inline

Inline forms allow a user to make simple entries and edits directly where the data is presented without being redirected to another view. Inline forms can have an edit and read mode, or inputs can be edited and auto-saved as a user interacts with individual fields.

Takeover

Takeover modals enable a user to interact with a complex form while having the ability to go back to their previous view quickly. Takeovers are great for entering system-level data that doesn’t need a subsequent view.

Wizard

Wizards allow users to fill out sequential information step by step. Wizards are great for complex forms that users won’t engage with after completion. Wizards should be employed when a user needs to go through an unfamiliar process. 

Drag & Drop

Although not a typical form, drag and drop editors allow users to pick from predefined inputs and drag it into a WYSIWYG presentation. By mimicking the physical world, the primary interaction adds a level of fun to the input.

Many forms will become obsolete as data entry becomes standardized, OCR capabilities increase, and software automates manual processes. However, a user interface will always be needed. I hope these different form presentations inspire you to build a better application.

error: Content is protected !!
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.