A talk at Redevelop.io by Tom Byers on the 22th of August 2014.
Tom Byers
Front-end lead
Government Digital Service
@tombaromba
10 things
I'm from the Government Digital Service
We're a team at the heart of government building digital public services
We started by building GOV.UK
We launched GOV.UK in October 2012. It replaced the two big central government websites: Directgov and Businesslink.
The idea was to make something simpler, clearer and faster. Something focused on users.
Firstly, we took a careful look and worked out what services and information we actually needed to deliver. We eliminated thousands of pages that no one ever visited. Then we made sure that the information we were providing was as easy to find and to follow as possible.
This, for example, is the page on Directgov that tells you about bank holidays. Now it has all the information you need and you’d think it would be hard to do it better. But looking at how people actually use the site we realised that what most people were searching for was the date of the next bank holiday so we put that right at the top of the page, big and bold.
We’ve done the same thing to more complex tasks, like working out how much maternity pay you’re entitled to. Before, on Directgov, you’d need to read all this information. On GOV.UK, you just need to answer a few simple questions and the site calculates the answer for you.
In April 2013 we finished moving all departmental sites to GOV.UK. Together with the sites for Number 10 and the Deputy Prime Minister’s office. So instead of every government page having a different design and different navigation, every site now looks and works the same way.
GOV.UK is not perfect and it’s not finished. It’s never going to be. It’s designed to improve, to react to user needs. We’ve made thousands of changes to GOV.UK and we make small improvements almost every day. This idea: iterative, responsive change is at the heart of everything we do.
You should visit us at www.gov.uk. Hopefully, you’ll see something you like. Something simpler, clearer and faster.
We're now transforming government services
25 of the government's biggest services redesigned to meet the needs of users
To do that we're working in digital teams in departments all over the country…
As well as building common tools for analytics and signing in, improving the way government buys technology, and making sure civil servants have the right skills to run digital services
We work in open, agile, multidisciplinary teams, relentlessly focused on user needs
1. Think about access first
1. Think about access first
How do they get to your content?
Picture of voter registration letter
Picture of google search for www.gov.uk/register-to-vote
Learn the tools your users have
How do they use their machines?
Pictures of people using desktop and laptop computers and laptops using mice or stylus pens for interaction
Pictures of people using laptops and tablets with either separate or built-in keyboards
Pictures of tablets and mobile phones being used to browse www.gov.uk
Pictures of Voiceover, the screenreader for Mac OSX, being used to browse www.gov.uk/bank-holidays
Mock-up picture of Dragon natural voice, speech recognition software, being used to select a link on www.gov.uk/bank-holidays
Mock-up picture of Dragon natural voice, speech recognition software, being used to select a link on www.gov.uk/bank-holidays
Mock-up picture of Dragon natural voice, speech recognition software, being used to select a link on www.gov.uk/bank-holidays using grid selection
Pictures of TV's and e-readers being used to browse www.gov.uk
2. Your design is a tool too
How easy does your page design make it to access your information?
Picture of a heat map showing how users read the text in a web page, from left-to-right, in ever-decreasing line lengths. Generated using eye-tracking software
Picture of a page from the register to vote service asking users to confirm the information they have entered in the transaction so far
Picture of the www.gov.uk/types-of-school page before and after design changes. It had a left-hand navigation which is now moved to be above the page article
The web is, by it's nature stateless so your design needs to give users some context
@markhurrell
Picture of the www.gov.uk/government/publications?publication_filter_option=consultations page, highlighting the heading for the main search results which describes the filters applied
4. Don't ask bad questions
Picture of the form from https://esta.cbp.dhs.gov/esta/
Does your form work as a conversation?
@cjforms
Don't underestimate how hard a single task can be
Think about someone with no prior experience of websites using your forms
Picture of the page on the register to vote service where you enter your date of birth
Video of a user having trouble using selectboxes to enter their date of birth
5. Tasks cannot be too simple
Picture of custom radio buttons on the register to vote service and one of someone using a numeric keyboard on a mobile phone with the date of birth page
6. Text is the primary visual interface
https://www.gov.uk/service-manual
https://www.gov.uk/service-manual/user-centred-design/how-users-read
Users only really read 20 to 28% of a web page
You don't read one word at a time. You bounce around. You anticipate words and fill them in.
By the time you're 9 years old, your brain can drop up to 30% of the text and still understand.
7. How well you write affects everything you do
Picture of the top of a 3 page long commit on github
Picture of the bottom of the same 3 page long commit on github, showing one line had changed
8. Screen readers show how good your markup is
Picture of the XCode accessibility inspector being used to view the properties a web page text box is exposing to the accessibility API of the operating system
The OS gets this information from your HTML
Progressive enhancement is about resilience as much as it is about inclusiveness
@bradwright
https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/
10. What you don't know yet has the highest value
11. Publish, don't send
Picture of a pull request on www.gov.uk/bank-holidays to correct the dates: https://github.com/alphagov/calendars/pull/1
We believe sharing what we do will make it better, so you can see lots of our thinking and working online…
Read more
Attribution
Thanks!
Tom Byers
@tombaromba