Showing contacts in a summary list
We used to use the summary list component to display contact information.
This helped us to present a series of related pieces of information in a relatively clear, grouped way.
But there were problems too.
Adding or editing a contact on 1 form instead of a series of questions or fields
When a user adds or edits a contact they enter all the required information in 1 form, rather than in multiple disparate fields.
Contacts are created by completing a form that asks for all the contact details at once, rather than through a series of questions. Because of that we felt that using just 1 "Change" link on the summary list was useful.
We designed the experience this way because our users add and edit contact information multiple times, across multiple projects. Asking them to do this in a 1 question per page approach takes more time, slows them down and causes frustration.
While the 1 thing per page approach works for users entering information into something they only do once in a while, like applying for a passport, it is not the right approach for things that people user every day to do work.
Asking for multiple pieces of information on a page is a design principle we established through research very early in the project.
Altering the summary list to meet our users' needs
Typically, the summary list is used to pull together information from a series of questions or fields and presents that back to the user as 1 list. The user can then edit each piece of information independently, so a change link on each row of the list makes sense.
For us, users would be able to edit all the fields in the form on the same screen. It seemed confusing to provide multiple links to 1 form where all fields could be changed. Instead we chose to give 1 link.
However, becuase of the way that summary lists split information into rows using a solid horizontal line between fields, a single "Change" link looks like it refers to just a single row in the list, rather than all the information in the list.
Changing to summary cards
We recently made the change to the summary cards component. In fact it's a variation within the same component but it looks quite different.
This is a relatively new component. It was not available when we began the project so it had not been part of our initial design thinking.
It offers some major benefits over the summary list.
The main one being that the change link is more clearly visually related to the entire block of information.
While you can code it so that there is a change link on each line of information within the card, we have chosen again to use just 1 change link.
This is located in the top right of the card, and makes use of the grey banner across the top if the card to illustrate that it changes information in the entire listing, not just for an individual row.
Our hope is that this change makes it more clear to users that they can change all the information in the contact, not just 1 row.
What we'll do next
We anticipate that this subtle shift will improve the experience for our users, but we'll keep monitoring this change and respond to user feedback as we get it.