This week, we’ve added a section about designing tables to our design manual. We’ve done this so that our tables are understandable, are used for suitable information and address user needs first.
This is the second update to the design manual since we publicly released in January 2017. We released our design manual so we could start to share design styles, patterns and advice for people building digital services at Co-op.
What we’ve done
We looked at a lot of different tables from around the Co-op to explore what kind of information we need to be able to present, and what a user needs to understand from it. We also looked at best practice in how data should be displayed working closely with the Co-op’s data science team. From this, we created a set of styles that can be used as guidelines for designing tables in our digital services.
Designing tables
In her book Letting Go of the Words, Ginny Reddish writes:
When a site visitor asks a question to which your first answer is “it depends,” that’s a clue that you need a table. What it depends on becomes the left column of the table. The answer to the question for each site visitor’s situation becomes the right column.
Tables are good for answering questions with multiple answers as they are a good way of presenting a lot of information in a way that’s easy to scan.
You can use the design manual to find out when and how to:
- use a table to display data
- format data in a table
- use borders and type within a table
- create a responsive table
- code an HTML table correctly
We’ve got more research to do
What happens next is more important than the work we’ve done so far. We’ll be asking the design team (which includes interaction designers, content designers and user researchers) to see if our tables help solve design problems. We’ll continue to research how well they help real users find the answers they’re looking for.
We’ll update the design manual with what we learn.
What else have we done?
Created a simpler prototyping kit for designers
Testing our assumptions with real ‘in browser’ prototypes is an important part of building a new service. However we’d had feedback that the current prototyping kit was a bit difficult for some designers to set up. We’ve responded to that by building a more simple HTML and CSS only ‘copy and paste’ version that we think will help.
Added a section on 404 pages
When a user follows a broken link, they arrive on a 404 page. You can use the design manual to find out how to create a 404 page that:
- reassures the user
- helps them get back on track
- doesn’t make them feel as though they’ve done something wrong
Tell us what you think
Check out our tables and 404 sections and let us know what you think. Your feedback will make the design manual better.
Matt Tyas
On behalf of the Design Manual team