We recently shipped some changes to how we order team members in our Team Profile content type.
These improvements came in several stages, each building on the last, so this seemed like a good opportunity to talk about progressive enhancement.
What is progressive enhancement?
The Government Digital Service's service manual has a great explanation of progressive enhancement:
It’s based on the idea that you should start by making your page work with just HTML, and consider everything else an extra.
This is because the only part of a page that you can rely on to work is the HTML. If the HTML fails there’s no web page, so you should consider the rest optional.
Progressive enhancement is important for accessibility. By making sure your feature works with HTML alone, you can be more confident that your feature will work for people who are:
- using assistive technologies
- on slow or compromised connections
Progressive enhancement is also well-suited to Agile, as you can start with the core functionality and then iterate.
Introduction to the feature
Users have two options when it comes to creating team profiles:
- 'Create manually' – create a list of names and roles using Markdown
- 'Select from Person Profiles' – add Person Profiles to the team to pull through the member's name, role, photo and other important information
When we first built the 'Select from Person Profiles' feature, users had no say over the order in which the team's members were listed on the page.
Members with the 'Leadership Profile' subtype were always listed first. All other members were then listed in alphabetical order. Our users reported that this wasn't ideal and it was often important that members be listed in a certain order. For example, the manager of a team should probably be listed first, even if they don't have a 'Leadership Profile'.
Adding the order with HTML
After some complicated data structure changes behind the scenes, we had a shiny new field called 'Order in team'.
Users could now specify the order by entering numbers into these fields. When they saved or published the page, members would appear in the order they'd chosen, both in the interface and on the page itself.
Saving the page also added more empty member dropdown menus, so users could add more members if they wanted to.
We now had the core functionality, even if there was still room for a bit of polish.
We shipped this version of the feature and then moved on to the enhancements.
We had the essential behaviour of the feature, but there was still room to improve the user experience.
- replaced the multiple dropdown menus with a single one, which adds new members to a list below
- allowed users to drag and drop the members in the list into their desired order
- hid the member order fields, but updated them behind the scenes whenever users rearranged the members through drag-and-drop
- added a remove button for each member to take them off the list
These enhancements make it quicker for users to add, reorder and remove team members.
This means the Content Publisher can still be used by broad range of people, no matter which technology they're using.
What comes next?