Patterns for input flow

Summary

The importance of input cannot be overstated in software design. From simple "forgot password" fields to multi-step complex workflows, inputs enable data to be collected, synthesized and actioned as needed by any particular use-case. When crafted carefully and with care, input design can exponentially improve efficiency and streamline user experiences. When executed poorly or as an after-thought, the potential for frustrating users is endless.This case study summaries how I went about streamlining input flows across Capiche’s core product.

Part 1
Providing context

In Canada, most money raised in capital markets is done by financing method called private placements. Private placements are a type of capital raise where companies raise money by issuing securities to a select group of investors that meet clear eligibility criteria.

This process is governed by strict compliance requirements that place participation restrictions to protect uninformed investors from making unsound investment decisions. Traditionally, companies who seek to raise capital by way of private placements have to navigate the unforgiving terrain of securities law and stock exchange policies. The process is completed using a time-consuming paper-based process that places the company at risk of missing sensitive financing windows. Companies today are relying on a system that is inefficient, time-consuming and at times not even legally compliant.

I work at a SAAS product that was born out of an urgent need to disrupt this  process. Capiche.io brings the entire capital raise process online by facilitating entity data structure setup, investor subscription and the dynamic generation of all required documentation for closing. To date, Capiche has completed over 60 financings and enabled issuers to raise over 150 million dollars via our platform.

Everything relies on input

When Capiche brought the process online, users experienced vast improvements in efficiency in comparison to the manual process. Nonetheless, our usability tests revealed insights of users experiencing high cognitive load when completing their subscriptions. Since our platform accommodates investors of various skill-levels and backgrounds, we needed to find a way to refine our micro-copy, and to be more critical about how we design, structure, and organize our form inputs and subscription flows.

Capiche’s various products all rely on heavily user input to function properly. One example is automating a typical investor subscription flow. Traditionally, this process required companies to physically mail 50+ page documents that must be received, filled out, and signed error-free within a short period of time. Naturally, this never goes according to plan. The forms are long, complicated, riddled with legal eligibility requirements that confuse even the most seasoned of lawyers.  

Patterns for flow

In order to evaluate the range of design solutions, I took the time to research, learn and grasp the relative advantages and unique characteristics of form design patterns. I'm under no illusion that all these insights are always going to make their way to production. As we strive to optimize for efficiency, faster completion rates and fewer make measurable impact on helping user achieve their goals. How trade-offs are identified and balanced ultimately depends on the judgment of the entire product team, and their appetite for optimizing for the specific audience and usage models involved.

The following insights were learned from books, usability testing, eye-tracking studies made by a wide range of web companies and users. These insights are not mine, I did not create, uncover or discover them and I have presented all my sources. I used my intention to find the information that will make me a better designer, and hopefully if you have not come across these contexts, if the end result if alleviating some user frustration - then I've done my job.

Part 1
Choregraphed scanning

Vertical path to completion

Each input elements will be viewed and processed by the user’s visual system, and any pattern than can help reduce cognitive load will subconsciously aid completion and satisfaction if implemented. If one pattern makes a slightly marginal difference, combining all the best practices will make a significant difference in input experience. First, let’s look at the utility of aligning the form inputs in a vertical line rhythm.

Designers sometimes opt for multi-column layouts in an attempt to shorten larger forms and reduce perceived time for completion. This may make sense at first, but our testing has shown that multi-column layouts actually result in slower completion rates and higher input errors. Additionally, users have to shift their visual focus left-to-right to navigate the form which scatters attention across different horizontal anchor points.

If a vertical rhythm is used and established, its possible to nest two inputs side-by-side as longas they are contextually related to each other and kept to a minimum. A nuanced distinction needs to be made here between lines that have 2-3 fields per line vs a multi-column layout.

Chunking and grouping

To focus the user's attention on input fields can be achieved by breaking down larger forms into steps that allow them to experience incremental wins. Finishing a step has a positive psychological effect and adds a subtle element of momentum to the experience.

Even on single pages, grouping related information together has been proven to increase comprehension. Finding the right level of detail means moving between the levels in a structured and logical way. By grouping carefully, required information is transacted better when it's broken into small, well-organized units.

Part 3
Manage cognitive load

Offload complexity

The earlier interface audit exposed the lack of consistency prevalent in production UI. These outputted interface elements that were not only stylistically different, but also resulted in patterns that did not perform well across different breakpoints and screen sizes. None of this was intentional or a result of malpractice - the team’s energy was simply focused on other problems that needed to be solved given the resource constraints. To scale effectively and prevent avoidable interface asymmetries - we needed change to happen at foundational level and not by policy additions or individual outliers. Standardization should not depend on any one designer, a clever developer or an enthusiastic new hire - it needed to be baked in from the get-go.

Be forgiving in formatting

Allowing for various formatting is incredibly important and vastly underused. This is one of the micro-interactions that can drastically make a different in user experiences. Allowing users to enter data in their own way does not have to clash with a certain data format that's required for parsing. It takes a few lines of code to convert predictable formatting after its inputed. When dealing with date pickers, payment details, postal code inputs pattpredicable fields that lend themselves to varied user formats. Allow users to enter data (particularly fields such as zip code, phone number, and credit card) any way they want. It takes a few lines of code to fix the formatting after they input it. Don’t let your laziness ruin the user experience.

This case is incomplete and will be updated soon.

Modern software applications simplifies workflow by layering an interface on top of data input models. Empty spreadsheet cells got replaced with pre-defines forms controls to convert input to whatever output is necessary to achieve a certain goal. Its safe to say, that the quality of input largely determines the quality of system output. As designers, we have a responsibility to craft our input experiences with consistency, awareness and care. Its important for any designer to season themselves with the patterns and best practices that emerged from usability studies and eye-tracking metrics.

```jsx ```