{"id":9620,"date":"2017-05-30T12:52:47","date_gmt":"2017-05-30T11:52:47","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=9620"},"modified":"2017-05-30T12:52:47","modified_gmt":"2017-05-30T11:52:47","slug":"form-design-complex-applications","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/form-design-complex-applications\/","title":{"rendered":"Form Design for Complex Applications"},"content":{"rendered":"

13 ways to present forms and the future of data\u00a0input<\/h1>\n

\"\"<\/a><\/p>\n

<\/p>\n

From complex ERP systems to Facebook, applications make meaning out of input. The form \u2014 in its many manifestations \u2014 provides a gateway for user submission. This article illustrates 13 different ways to present forms, and explores the future of data input.<\/p>\n

Modal<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

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 popovers can cause user error. Also, modals prevent the user from interacting with other parts of the app until it is closed. Consider employing a separate page for longer forms, and inline editing for in-context entries.<\/p>\n

Multi-modal<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Multi-modal forms (there is probably a better name for this)<\/em> present itself as draggable panes, allowing the user to interact with many forms at once. The user can drag modals around the page allowing them to view the information beneath it. Multi-modals allow power users to address lots of information at the same time, instead of pulling up multiple views, browser tabs, etc. This presentation can be problematic for novice users because they can get lost and commit erroneous actions.<\/p>\n

Slideout<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Slideout forms present itself by sliding over a portion of a 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. Slideouts usually allow for longer forms because it takes up the window height.<\/p>\n

Popover<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Popover forms are great for quick edits and entries. The popover is presented in-context to the related data so users don\u2019t lose their place in the app.<\/p>\n

Inline<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

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.<\/p>\n

Editable Table<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Like inline forms, editable tables allow the user to manipulate data directly where it is presented. It is great for the entry of tabular data like in the case of a spreadsheet or invoice line-items.<\/p>\n

Takeover<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Takeover modals enable a user to interact with a complex form, while having the ability to quickly go back to their previous view. Takeovers are great for entering system level data that doesn\u2019t need a subsequent view.<\/p>\n

Wizard<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Wizards allow users to fill out sequential information step by step. Wizards are great for complex forms that users won\u2019t engage with after completion. Wizards should be employed when a user needs to go through an unfamiliar process. Wizards are typically a poor user experience, and a bit patronizing, for high use forms.<\/p>\n

Sectioned Form<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Sectioned forms are great for the entry of complicated information. The user benefits from having the full context of the form, instead of a multi-page form like a wizard. The user is free to fill in information throughout the form instead of linearly, affording greater flexibility.<\/p>\n

<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

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 main interaction adds a level of fun to the input.<\/p>\n

WYSIWYG<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

W<\/strong>hat y<\/strong>ou s<\/strong>ee i<\/strong>s w<\/strong>hat y<\/strong>ou g<\/strong>et editors are employed for text editors like Microsoft Word, email creators like MailChimp, website publishers like SquareSpace, etc. WYSIWYG editors allow a user to create rich content without knowledge of HTML, CSS, and JS.<\/p>\n

Fill in the\u00a0blanks<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Sometimes usability best practices can be neglected for aesthetics and fun interactions without creating a poor user experience for reasons I wrote about in an article on the aesthetic usability effect<\/a>. Fill in the blank forms present input in a sentence or paragraph, allowing the user to complete statements with their data.<\/p>\n

Conversational user interfaces and the\u00a0future<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Conversational user interfaces (CUI) typically consist of a \u201cbot<\/a>\u201d responding to freeform voice or text inputs. The bot then answers or provides further form controls to address the request. Machine learning has been employed to better interpret input and tailor responses.<\/p>\n

There is a lot of hype around conversational user interfaces. Many designers think CUI is the future of web forms<\/a>. WeChat\u2019s success has provided credibility to the exuberance. However, as Yunnuo Cheng and Jakob Nielsen point out<\/a>, the benefits of WeChat\u2019s integrated service offerings come more from its familiar and convenient graphical user interface instead of its conversational user interface.<\/p>\n

CUI suffers from many usability issues including: lack of discoverability, and an arbitrary completion path. CUI homogeneity isn\u2019t the future of form design, but it is the future for many chat apps<\/a> that have found a niche around this way of collecting input.<\/p>\n

I am looking forward to designs that blend CUI with rich graphical interfaces. Mini embedded applications can be presented based on user input, which can lead to larger applications, perhaps independent of the chat box. Or maybe CUI is used when a user is lost in an application. For more insight, Toma\u017e \u0160tolfa<\/a> has a great article on the future of CUI<\/a>.<\/p>\n

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 help you build better apps.<\/p>\n","protected":false},"excerpt":{"rendered":"

13 ways to present forms and the future of data\u00a0input From complex ERP systems to Facebook, applications make meaning out of input. The form \u2014 in its many manifestations \u2014 provides a gateway for user submission. This article illustrates 13 different ways to present forms, and explores the future of data input. Modal Simple modals work well for forms with… Read More ￫<\/a><\/p>\n","protected":false},"author":140,"featured_media":9646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-9620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n