We’ve updated the ‘forms’ bit of our design manual

On 26 January 2017 we posted to say we’d released our design manual so we could start to share design styles, patterns and advice for people building digital services at Co-op.

We’ve now updated the section about making forms. We’ve done this so that our forms are clear, simple and easy to understand for anyone who wants to use them.

The forms section now includes information about ‘inputs’ (any point that the user gives us data), ‘patterns’ (ways to solve commonly occurring problems) and advice about how to design a good form.

Form inputs and patterns

We’ve updated our form input and pattern guidance with things that the design team has learned over the past 2 months.

You can use the manual to find out why, when and how to:

  • use things like radio buttons, checkboxes and text areas
  • ask people for personal information like their name, address, date of birth and so on
  • tackle recurring patterns like validation messages and ‘progressive reveals’ (showing more information based on a previous answer)

Designing a good form

But, we didn’t want it just to be a pattern library. As Steve Krug said in his foreword to ‘Forms that work‘ by Caroline Jarrett and Gerry Gaffney:

“[Form design] isn’t just about colons and choosing the right widgets. It’s about the whole process of making good forms, which has a lot more to do with making sure you’re asking the right questions in a way that your users can answer than it does with whether you use a drop-down list or radio buttons.”

So, we’ve included advice about forming, structuring and wording questions to encourage us to consider the effect on the user at every point of the interaction.

What’s next

The next thing we’re going to look at is how we should design tables and data visualisation at Co-op. This will include research about:

  • how words and figures are presented
  • horizontal and vertical space
  • type sizes and weights
  • lines
  • colour
  • basic trends and comparisons

We’ll update you with the things that we learn.

Tell us what you think

Check out our updates to the form section and let us know what you think — you can now send us feedback directly from each page of the manual, without having to email.

Your feedback will make the design manual better.

Joanne Schofield
On behalf of the Design Manual Team

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s