JavaScript Disabled

To enjoy the full experience available to this page, please enable JavaScript for this browser.

Portfolio Forms

I believe that form design is the single largest point of failure in enterprise/customer communication.

Form design is not just drawing minimalist or pretty boxes! I'm a form evangelist and I wish to rid our lives of crap form experiences. That means you have to employ the right designer to craft your forms.

Forms only benefit our enterprise and our users if we apply cognitive and learning design, information architecture principles, sound engineering methodologies, and more.

You may have put your form design in the hands of the wrong designer, or of the wrong team? If so, hire me. If not, then your enterprise is ace, and I'd like to work with you to learn more.

What's Wrong With Forms?

We complete forms every day. They have become a routine barrage of challenges. We find poorly compiled questions, unexpected input rules, unnecessary details to complete, no support, and a feeling that we can only respond but not communicate. A simple interview becomes an aggressive cross-examination.

Forms need designing: and form design is not only determining what data to capture. Unfortunately, this means few forms are truly designed: its just, "too much effort", or simply beyond the knowledge of the enterprise. Trite designs and complexity easily overwhelm us.

Forms can make 'errors'...personal
Our user frustrated with being shown a form error

Over time, we have likely developed a fear of printed forms. For example, you may automatically input your postal code in the address line, and then the next input is Post Code. It’s not an exam!? Why should I read all the questions before answering them?

Online, we fare no better: input your correct Irish Eirecode in the Post Code box, and the form insists that you are wrong because the enterprise hasn't written the validation for an Irish post code.

There are good forms around. You know which they are. You are guided through completing them and they feedback on your work; input by input, instead of leaving the disappointment until after you click the Submit button.

There are so many less than optimal forms around we no longer notice. We just want to get the job done. But that should not excuse poor design!

Important Note: we haven't started to explore the presentation! That comes later. Get the form architecture right first!

A Poor Form Experience

This simplest of forms invites a poor user experience. Long answers are invited by two wide text input boxes, each capable of holding 50 characters (as presented in my viewport).

I entered a long answer and, on clicking Apply, I received an 'error': Answer must be a valid number (no decimals). It was a frustrating experience:

  1. I expected to give a long answer
  2. I formed and typed a long answer
  3. The enterprise wanted only a whole number
  4. The effort forming and typing my answer was wasted
  5. I felt blamed for the 'error' but knew it was poor error management
  6. I needed to type a 'valid' answer, which was easy now I knew the rules. So I ask, "why didn't you tell me, you eejits?"

Clearly, there was something wrong with my experience.

The pretty yet frustrating form showing errors.
A form visually inviting a long text input causing an error as only one integer is required

There are a number of issues here that we can fix.

Choose the Correct Input Type

Using a text input box is not the ideal solution here. It gives opportunity to errors. Error management is not how we handle errors, but how we prevent them.

The ideal input type for this example is the <select> option list (or an equivalent). It can be given a "Smart Default" that needs no error strategy.

The Select Option List

Alternative Boolean Solutions

Close The Accordions

If You Must Use An Input Box

The select option list or alternative Boolean input patterns are ideal in our example - if the number of selections are practicable. If you must use an input box, then we must enhance our user's experience of them by reducing opportunities for errors. We can make clear our validation rules and explain the task we have set as in-line instructions or show/hide 'tooltips'.

Caution: tooltip content must be short. Complex instructions or business rules quickly exceed our users' capacity to remember them once the tooltip has been dismissed.

Adding copy to the form may upset your minimalist designer, but who are we designing for? If we chose a Boolean input type in the first place, then the interaction would be natively minimalist. Minimise that! πŸ˜€

Input Box Design

Error Text

Error Presentation

Close The Accordions

Summary Feedback

Manage the data or input instead of making all this song and dance over it!

The designer should have managed errors by preventing them. A Boolean choice or range of choices would do this. If the text box was absolutely necessary, then we can improve on the current design considerably:

  • Present the "error message" as an on-page instructional text. Highlight it when an error occurs, and give the offending input label the focus, and scroll to it.
  • Reduce the input width to indicate no more than two figures are required
  • Configure the input box to accept no more than 2 figures

This is not the worst of forms, but it does highlight the complexities of form design that go beyond making it pretty. It should be First Year student basics.

But then, I understand the cause. It is not the designer's fault. It is the enterprise's. They should give the form design task to the right designer: one with the right background. Call me, I may be available!

Designing The User Flow and Pathway

Drafting continues...


As with most UI, it depends. In the case of forms, it depends on the strengths of your designer and the needs and wants of your users.