Letting users tick a ‘none’ checkbox | Hacker News Reader

Letting users tick a ‘none’ checkbox

designnotes.blog.gov.uk

413 pointsopen-source-ux120 comments

A great example of how much thought has gone into this can be seen with this paragraph: "Avoid giving directions like ‘none of the above’, as this implies a visual reference that may not be relevant for users of screen-reading software. Instead, use ‘none of these’ or similar."

That's not something I would have thought of straight away, and it's a great reminder of how important accessibility is.

Everyone remembers the smartass tests in school with the directions that say to sign your name and then hand in the test... Or some other form of smartassery where you must pick the MOST correct answer which has some stupid theoretical technicality that somehow invalidates all other answers as 100% wrong no partial credit.

I remember endless multiple choice tests where the correct answer was "All of the above" but it was located below "None of the above"

Or the first answer would be "All of the above," but as item[0], it has nothing above to select.

Or "None of the above," which is always correct by default if it's the first item in the list.

I was never allowed to argue these were correct when it applied to me, though.

> Or "None of the above," which is always correct by default if it's the first item in the list.

If that works anywhere it would be in a logic class that covers logical implication.

It also works in legalese

> Party A must satisfy all the following condition to receive a premium: > EOF

As there were no conditions to satisfy Party A was able to satisfy all of them and is entitled to the premium.

Whenever I see a blog post like this about the gov.uk design system I think about the millions of person-minutes small changes like this must save. My wife is Spanish and whenever I have to interact with Spanish bureaucracy it's like night and day. (This is partially to do with the inherited culture in each bureaucracy - we needed a certified translation of our marriage certificate, and the translator told us that the consulate had put the wrong email address on their website for her. She spent so long trying to get them to update it on their website that eventually she gave in and created the incorrect email address so she could pick up the emails that people were sending).

20 years ago a friend noticed his social security cars as female. So he spent a few months trying to fix it.

He eventually gave up.

Missed opportunity to end the last comment with

> She eventually gave up

It makes perfect sense. For a question like "which types of waste do you transport" you ideally want to differentiate between "None, I don't transport waste", "Other, I transport waste that isn't on the list", "I don't know/don't want to tell you" and "I forgot to answer this question". But it's really easy to design a form so that all of these map to not checking anything, which will probably lead you to drawing wrong conclusions when looking at results with lots of no-answers.

And in this case they did the right thing and don't allow you to both check "none" and any of the other checkboxes, preventing you from giving nonsensical answers.

They do have logic for reconciling the responses so you can't check "some" and "none", yes. But the article states:

> Finally, we also added some JavaScript code to prevent users from ticking the ‘none’ checkbox as well as one of the others. This is to avoid users giving contradictory answers.

I hope they have server side checks as well because this enhancement comes at a cost of state management that isn't guaranteed to happen if JS is the only barrier to reconciling incompatible selections.

Why would the server side code have to change for this? A none checkbox could just be translated to an empty array and passed down to the server as if none of the options were checked.

A particularly annoying problem with front-end validation is that it's not difficult to circumvent the Javascript logic, check both 'None' and 'All', and send it to the server. It becomes the server's responsibility to make a decision about whether 'None' or 'All' takes precedent.

In this case the server likely doesn’t have a ‘none’ option. The none option in the client will be translated into an empty array (or false for all the other options). So circumventing the client isn’t likely to get you very far.

But 'None' is an invalid, nonexistent option on the server. It's like circumventing validation to send the option 'Foobar'. Or in other words, if the server still accepts this the problem already existed long before.

From what I understand, this is a client side feature. Ticking 'none' after this feature is rolled out is the same as leaving nothing ticked before.

>I hope they have server side checks as well because this enhancement comes at a cost of state management that isn't guaranteed to happen if JS is the only barrier to reconciling incompatible selections.

GOV.UK are pretty good when it comes to this stuff and focusing on progressive enhancement.[0]

[0] https://www.gov.uk/service-manual/technology/using-progressi...

It makes perfect sense because people already implement it that way. As the document says:

>Use this new feature wherever services already have a ‘none’ checkbox.

Where I work, there is an internal form, which has a drop down menu that defaults to "unspecified".

The aggravating thing is that it has two distinct meanings. It can mean "nobody has specified this value" or it can mean "this value has been determined by the relevant authority to be unspecified".

But the distinction has to be tracked externally somehow, because there's no way to change the menu.

The infamous difference between 0 and null. It's a surprisingly tricky concept for a lot of non-programmer folks to grasp it seems.

Last year while working on some public opinion polling software I ran into an issue where I found that analysts often wanted to know the difference between someone selecting "None", someone skipping the question, or someone not being asked the question due to branch logic. It's a pretty easy problem to solve -- if you represent the response as a string, you use "None", "", and "Not Asked"; if you represent as numeric, you just set numeric codes for each. But the interesting thing is just that it's sort of an invisible distinction until you think about it, just like this one is. I don't really do a lot of UX stuff myself and it was kind of a cool moment to have to think about it a little.

I'm new to the UK and the gov.uk sites are a true breath of fresh air. I still wish they gave more context on questions, but the quality of the site and using their forms is excellent. The consistency is also amazing, every form I've used behaves consistently, so it's easy to build up a muscle memory in using them.

I experimented quite a lot with "3 state checkboxes" at Product Chart.

The Product Chart interface offers a ton of checkboxes. Because the most typical use case is that a user wants to "tick" a feature. Like "I want a laptop with a touchscreen":

https://www.productchart.com/laptops/

But sometimes, users want to exclude a feature. Like "I want a 3D printer that is not assembled". After some experimentation with custom 3-state checkboxes, I decided to go with this type of dropdown:

https://www.productchart.com/3d_printers/

By default it displays "Feature". And when dropped down it has the options "√ Feature" and "√ No Feature". So far, users seem to grasp this intuitively.

The nice thing is that it is self-explanatory and takes up only one line of space.

Nice site. I'm not sure the dropdown looks great on OS X though. On OS X, the selected option is prepended with √, so it looks like

  √ Feature
    √ Feature
    √ No Feature

Selecting the second element then shows

    Feature
  √ √ Feature
    √ No Feature

It ends up looking somewhat odd.

Oh wow, you are right. The same happens on the latest iPadOS. Must have changed since I tested it last time.

I guess that's why nobody is using native elements. They can break any time the browsers change their appearance.

Guess I will have to create a custom element that "simulates" a plain dropdown.

macOS has always displayed selected menu items that way.

> Guess I will have to create a custom element that "simulates" a plain dropdown.

That would probably be a regression for accessibility.

Another option might be to rephrase them as "Assembled or Disassembled", "Assembled", "Disassembled".

At the moment you're using the checkmark to disambiguate between not-chosen and chosen, but rewording the not-chosen to clarify that it includes both could achieve the same goal.

You should probably add this to the brands as well, so I can search e.g. "not Lenovo" or "not Google". A "select all" button would also make it faster to get that.

Somewhat related: I have seen some twitter polls with "Just show me the results" as the last option.

I think this would end up with more signal in the poll results, as some users are likely to just click any answer to see the results. I was thinking that all twitter polls might benefit from this.

Is this a good idea in all cases?

For some polls it is by design that it blocks you. If you can see the results before you click, you're biased but the results.

> allowing all checkboxes to be unticked means that users might accidentally skip the question, perhaps assuming that they’ll return to it later

This also means the software can validate that the user hasn't skipped the question.

With a "none" option, the user can distinguish between not answering and answering in the negative, and so can the software.

It also make coding the backend somewhat easier, as unchecked checkboxes/radio buttons are not included in the POST data. Not sure how much this is an issue with modern frameworks but when I did HTML/Forms work this was a constant surprise to newer developers.

If only more sites took inspiration from gov.uk, "modern" sites might not be the barely usable mess they are today. Unfortunately some see gov.uk as an "eyesore" and not something to learn from.

Governments around the world have taken inspiration from gov.uk and the GDS. Even my own province's website closely resembles gov.uk in many ways.

This is a nice pattern - simple and effective. Although adding a 'none' option may seem like a minor detail, it's a small detail that can improve any form.

Here is a bigger screenshot of the pattern. In this example (from booking a vaccination appointment), you are asked if you have any access needs (or none):

https://i.postimg.cc/R0D0Fn9Y/online-form.png

This 'none' pattern can work well on paper forms too. For example, on some paper forms I scribble N/A (not applicable) when there is a long list of options but none are applicable to me.

The introductory paragraph links to their high-quality component documentation, which contains not just code examples but also clear guidance on things to do and avoid when using it.

From there it embeds an interactive example: https://design-system.service.gov.uk/components/checkboxes/w...

It is clear that gov.uk hires _actual_ UX designers, people who focus on user experience. Not what most of us in the industry see, where they prioritise flashy animations with easing over stuff like this.

Nice one

Yet the linked text shows as black on darkish gray background to me, making it very hard for me to read.

For me it's black text on white background, in one narrow easy to read column of text.

It is because of the cookie banner. It makes the rest of the page grayer to highlight the banner. Once you close it, it is black on light-gray, which is actually the most palatable combination for me (reasonable contrast between text and background).

Yet another reason why cookie banners suck. I'd say this site's cookie banner is less sucky than others, actually.

> Yet another reason why cookie banners suck.

More like yet another reason why that government wanting to track its citizens via Google analytics sucks.

I get you and mostly agree, but using GA on its gov.uk websites is probably the least intrusive surveillance the UK does. GCHQ were pretty heavily involved in those Snowden leaks, and I don’t imagine they’ve backed off at all since then.

> I'd say this site's cookie banner is less sucky than others, actually.

So a cookie banner which makes the entire page unreadable without showing, you know, a cookie banner is less sucky than others?

I had no idea there was a cookie banner. Was the unreadable text supposed to give it away? Most cookie banners show some text which lets me approve or reject cookies.

it's almost black (#0b0c0c) on almost white (#f3f2f1), you can this by inspecting the CSS

I watched my husband trying to do something important on AmericanExpress.com and he got totally stuck and extremely frustrated because he thought all the radio buttons were disabled and he couldn't answer the questions he was being asked.

Some shitty UI designer thought grey radio buttons "looked good" ignoring that grey controls have a functional meaning (disabled). Sure the grey was a slightly different shade than the "disabled grey", but my husband doesn't know what the exact shade of grey disabled is because he doesn't use a computer all day. He just knows when controls are grey he can't use them, and that's totally reasonable.

Companies make no sense, they tell you to use their website so you don't have to call their call center but then they don't prioritize usability and accessibility on their shitty SPA.

I'm a seasoned front-end engineer (20+ years of experience, working closely with UI and UX designers, worked for the big names, etc.) and I recently had to enter an invoice into a system and I couldn't figure out how it worked. The "SAVE" button was greyed out, and it didn't have a visible :hover state, and the text was light grey on a slightly-darker grey background. The mouse cursor was the normal pointer, not even a hand. So I never assumed it was a button I could actually press.

Imagine if someone like me gets confused by stuff like that. Less-seasoned people wouldn't even manage to understand a UI like that at all.

Worst finding I noticed was that because the UI looked so amateurish and outdated, I also didn't dare to click on things out of fear of breaking the system, which would cost or delay me a month of freelance payment if I messed things up.

Bad UX and bad UI are absolutely killing. And unfortunately, many of these companies (the one in my example included) don't give a damn. This company pretty much has a local monopoly on this kind of software. Their backend integrates with numerous (outdated) payment systems and nobody else does it like that. They can get away with it because people don't have alternative options; so why would they even consider spending tens of thousands on improving the UX and UI?

I'm seriously considering setting up my own product to replace theirs. The frontend looks simple enough. It's just the backend that worries me.

I just, minutes ago, walked my dad through sending several existing photos in a text on his Android phone. He knew how to open the text app and find the person he wanted, so he'd gotten it that far.

1) Tap the camera + photos icon. It's pretty small, and between that and combining two icons for quite different actions into one made it so he'd never have guessed that on his own.

2) Bottom third or so of the screen becomes what I think was a live camera view on the left side, with what I'm guessing was a scrolling gallery on the right, but that was gonna be unusably tiny to scroll through, so I had him hit (IIRC) one of the photos that either had an icon on it or said the word "gallery". That's three separate things (Camera, gallery, quick-select photo view) all blended together such that it took me a second to figure out what I was looking at. He had no chance. Tapped gallery.

3) All context is lost as the gallery view takes over the whole screen.

4) You have a scrollable grid of your photos. It's multi-select, but there's not really any way to know that except to guess that it is, and that the select action will be a single tap (it could just as well be that one tap adds that single photo and takes you back to the message screen, and you have to long-tap or swipe or god knows what to add more)

5) Once any are selected, a small(!) "Add" text(!) appears in the top right(!) corner. It's really easy to miss. It ought to be a full button with some color to make it stand out. I kinda know what I'm doing with computers and it took me a little while to find it. I suppose it's top-right rather than at the bottom (which is better for one-handed usability) because elements near the bottom risk accidental taps on Android's "please ruin what I'm currently doing" persistent button row at the bottom of the screen, which blatant UI mistake they just can't seem to bring themselves to fix even after all these years.

6) If I hadn't been there and he'd somehow figured all that out, he'd have assumed they were sent after that. But no, back on the messaging screen you still have to tap the tiny play arrow with some kind of stuff on it (was it the tiny letters "MMS"? I don't recall for sure) to actually send them, they're just queued to send.

[EDIT: To be clear, though, Apple's interface for the same is barely better]

But this is nothing compared to whatever terrible phone + contacts "app" that phone has (I think it's the default for whatever version of Android he has?). The time he had me fix that for him it took me most of a minute to figure out that it had tabs, because they're just represented by thin text rather than anything that looks like tabs or even buttons, and that the problem was that he'd gotten on to the wrong one. The view he had it on, it looked like someone's half-finished UI mockup. When I got it on the correct one, it still looked like that, but with some content filled in. [edit: oh, and the tab header elements were ~1/3 of the way down the screen, not at the very top or very bottom, making it even less clear what they were]

Google: flat-out incompetent at UI for at least 15 years. I still remember the time like 7 years ago that my grandma couldn't figure out how to add contacts in Gmail and it was because they had two buttons the same color and visual weight on the contact form, both of which with copy that a reasonable person would take to mean "add this contact whose information I've just written in the form", but one of them meant "give me a new contact form (and throw away all the stuff I just filled in)" and the only way to have a decent chance at figuring out which was which was to have some clue about HTML layout hierarchy.

Apple's view provides a photo library icon and shows as a half-screen popover unless the user starts scrolling, keeping context.

Yeah, I edited in that Apple's is "barely better", and that's most of the "barely". I also found the "add" element, though similarly non-buttonish, a little easier to spot, in part because the area in question was smaller, but also because the color stood out a bit better.

The thing about Apple's that's way worse is the photo gallery icon. Pinwheel = photos. So you just have to have memorized the icon to have any hope of figuring that out, especially since there are like 9-10 icons in that part of the screen (plus you can scroll sideways for more).

I also just noticed that, on my view (I assume the icon presence or ordering changes for some people) I have a grey "camera" icon and a grey "App Store" (but seemingly at the top of some kind of "stack"?) icon to the left of the message input field, then directly under the grey App Store icon, on the app list, is a blue "App Store" icon. Naturally, these do completely different things: the blue one opens something to do with the App Store, while the grey one... presents me autocomplete options? WTF?

Yeah, that app store stack icon is a little funky. It's meant to represent a stack of apps - which that bar is, an app launcher for within messages.

Ah, that explains it. I rarely use iMessage for anything but quick texts to people who aren't in one of my other messaging apps, so I hadn't looked too closely at it until I checked it out to compare the iOS flow to the shit-show of an Android one I'd just dealt with.

Checking it again, I see now that the grey app-store-stack icon is toggling the horizontal app list, so it's not that it was bringing up the suggestion list before, but that it was turning off the app list, revealing the suggestion list. Of course it doesn't in any way visually represent a toggle, as its appearance remains the same whether it's "on" or "off", and it's not visually tied to the app list, so the connection is rather metaphysical. Sigh. But, at least now I know how it works.

I generally like Apple design well enough but IMO they derailed way off the usability/discoverability tracks back in iOS7 and have yet to fully recover—it's just that almost everything else is even worse.

As someone approaching a similar amount of UX/UI and FE dev experience, I find that sometimes that experience actually hinders my ability to use websites that use anti-patterns like that. Because I KNOW the "grey button" is disabled (and then find out it actually isn't). From CC sites, to food ordering sites to just run-of-the-mill generic site X - no one seems to be prioritizing UX or user testing anymore.

And, not mentioned, but the absolute lack of error states is also just atrocious - many times I've had to open up the console to see what's going on. The average person doesn't even know that exists, much less be able to interpret what it is saying to know what to do to continue on in spite of the issue (if in case it's actually possible to continue).

> Imagine if someone like me gets confused by stuff like that. Less-seasoned people wouldn't even manage to understand a UI like that at all.

Part of the problem (their problem, not yours) was that you assumed a lot of reasonable things based on your experience. Someone who is less experienced also has less things to assume and can in turn try more things (a greyed out button isn’t obviously disabled, to them).

I put some placeholder text on an input field and that shows up as grey text (in Chrome). I had a user contact me because they thought it was disabled.

So yea ... definitely confusing for people.

Placeholder text is a tough one... The example is usually a good idea, but it can be confusing to users, especially if the example text happens to be what they would have entered anyway, they may think it's safe to skip, then get frustrated when your validation tells them it's empty.

I don't know what the solution is, I'm not a UX engineer, I just know it can be a problem.

If there's room, I always make the placeholder read something like "Example: 12345", which makes it clear that they need to change it and also maybe that it's a number or whatever. Can't always do that on really short input fields, but it helps.

Using italic font for placeholder text would help to quickly distinguish it from actual typed input - some apps do that. But, is it something that can be controlled on a webpage?

I'm going to take this as further evidence for my crackpot theory that it should have never been possible for websites to define their own styling. Websites should serve semantic content and the browser should enable the user to apply their own preferred styling.

I think it would be a shame for every website to look the same. Not all information is textual - we’re visual creatures and a lot of meaning can be conveyed through color, layout, font choices etc.

That's what PDF is for ;) But yes, that's an obvious objection and if I had good responses to all the obvious objections, I would have something more than a crackpot theory.

At the same time, I think the web as it is now is the worst possible state of affairs. There's no clear distinction between content and UI. You can theoretically use predefined UI elements, but nobody ever does and if they do, they can (and almost always do) completely change their behavior.

Funny you mention that, because out of curiosity I clicked "Categories" -> "Communities" to see what else they have on their blog, and the first thing it showed was a post from June stating that they were hiring:

https://designnotes.blog.gov.uk/2021/06/24/were-hiring-inter...

I'm sure the positions are filled now, but it also goes into what they are looking for in interaction and service designers.

AFAIK they are always hiring, more or less. I expect pay rates will be toward the low end of the scale, particularly for London.

If the British government is comparable to the Dutch one then the main appeal of working for them would be getting a work contract that provides very good job security compared to many other jobs.

To be fair, you also get to make a very clear difference in the everyday life of millions, solving actual problems for real people - instead of finding new ways to display despicable ads.

IMHO, the bad nature of much of the UX we see around us is in the gray area between incompetence and malice. It's hard to sincerely concern oneself with usability when the main objective is to manufacture consent, manipulate the user into doing something you want, and use novelty or gamification to engage or convert. The poor design, flashy animations and other such cruft are a byproduct of this mentality - they may not always be inherently malicious in themselves but they are the result of a mindset which doesn't truly prioritize the user's interests.

I don’t think it’s malice at all.

I use many products where I think “wow, this doesn’t make sense. do the people who make this use their own product?”

Then I people watch at work (in every department of course) and I see them do routine things that they seem to hate doing everyday and I think “wow, I would try to do it this other way but ok”

Then on meetings on my team, someone will suggest something that checks all the requirements, but I would have to speak up and roleplay as our support personnel after this feature is released

I have come to the conclusion that people are much harder workers than me.

In my company, it's not malice, it's stupidity and a lack of leadership.

Some of the middle managers I deal with regularly lament that our web sites don't look like "real" web sites, because they aren't flashy enough. When I ask them what web sites they consider "real," they say things like "YouTube," or "MTV." Sometimes name their favorite video game, or streaming show.

Fortunately, I'm able to push back on these requests successfully (so far). But sometimes I have to play the "We're a healthcare company, not a toy company" card. Sometimes that doesn't work, and I have to go over people's heads.

More and more, the people in charge don't know the difference between a web site, an app, a video game, or one of those TV police dramas where someone shouts "Enhance!" and a crime is solved.

> gray area between incompetence and malice

Meaning there's enough incompetence going around to provide plausible deniability for routine malice.

If your intent is malice and those are the skills you're hiring for, you won't have to fake incompetence when it comes to usability.

As always, I'm really impressed (and a little proud as a Brit) by the gov.uk team. I've had the misfortune of having to deal with the various levels of US federal, state, and local govt for basic administrative tasks, and every time I long for gov.uk.

I love the look of the little or divider. Nice touch.

I am also starting to like the french .gouv.fr sites. They are slowly becoming modern.

It is just our love of PDF that is holding us back (really?, PDFs that are fillable on a computer but no web forms to avoid the save & send by email? (or print))

PDFs are accessible: a person distrusting computer transmission or without a computer can print out the form and send it via postal service.

Also, you can save a filled out PDF (or copy a paper) to have a copy of what you submitted in your records, something that is impossible to do with most webform solutions.

> PDFs are accessible: a person distrusting computer transmission or without a computer can print out the form and send it via postal service.

Yes, this is very useful when you do not have or want to use a computer. But if you fill in a PDF form on a computer, better go for the web app whihc will be easier to read and has a higher chance to actually work (the govt PDF will always have that one weird field that cannot be filled).

> Also, you can save a filled out PDF (or copy a paper) to have a copy of what you submitted in your records, something that is impossible to do with most webform solutions.

It would be enough for the web form to send you a confirmation, making it also an acknowledgement of your request. We already have this for taxes for instance.

You could design HTML website in the same way, to be printable (although getting pixel perfect A4 format is tricky with HTML)

Meanwhile, PDFs internally can be as accessible as JPEG in some cases; difficult for screen readers because it's optimized for screen display and printing. Sometimes PDF are not even searchable, you literally have vector glyphs and not "letters" inside.

https://www.gov.uk/government/publications/open-standards-fo...

Although PDFs are of course nice if you want to download it and save somewhere as a user because it's guaranteed to work and 1 file has everything. Downloaded HTML might have all kind of weird issues if it was constructed with fancy "modern" techniques. Again, proper server-rendered plain HTML+CSS for the win, perhaps with everything inlined if form is expected to be saved on disk.

> You could design HTML website in the same way, to be printable (although getting pixel perfect A4 format is tricky with HTML)

But you can also get away with not doing it, so it will not be done.

You would not need to have a true paper form. If anything really needs to be printed, it is a QR code with some basic information pointing to the online information on the gov site.

This is how covid vaccine status is handled today and it works great.

Although the French fondness for printable documents can be very annoying (it can be a lot of work, all that printing and scanning!), it is nice that it makes building your own archive simple. I now live in the NL, and while digitalisation here is advanced and generally not much work, I find it hard to document communication with the government (or business) consistently. Dutch folk are so weary of paperwork that asking for a copy for your own administration (and this has benefitted me countless times so I'm not quitting that habit) usually gets you surprised and/or annoyed frowns.

Really, it's the French administration's fondness for paperwork.

During the Covid lockdowns people were allowed to go out for a number of specific reasons, like in most countries. Of course the French administration decided that this required people to fill a specific form to select the reason, to sign the form (along with name, date and place of birth, address, date of time person left home), and to carry it with them in case police stopped them... After some time they did deploy an electronic version (on smartphones, but that's still a form) but it's the very idea of doing something like that that is symptomatic of the mindset.

Where does this regressive mindset come from do you think?

So people carried as many filled in forms as there were reasons on the form?

No, you were allowed to select more than one reason, but you did have to make a new one each time you went out.

> Really, it's the French administration's fondness for paperwork.

French business isn't any different in my experience.

On the plus side, they could implement it in few days while waiting for the phone version to be up. Businesses could print it for grandmas and hobos that were limited tech wise.

Paper has advantages.

Sure, but the 'madness' is to require this in the first place because, really, it serves no purpose (apart from allowing to prosecute people for perjury on top of fining them for breaking lockdown). That's the point re. love of French administration for paperwork and forms.

And during these few days they created a paper that was barely understandable. Luckily we had the news at 20:00 with an everyday FAQ related to that.

This was literally a piece of paper, but they managed to make it difficult to understand.

On the other hand, I must say that the police is human here as well and when you had almost the right papers and obviously were not trying to play the system they were very understanding (at least where I live)

I find that the digitalised approach makes it much easier to document and reference exchanges.

France traditionally required a letter (un petit courrier), you got weeks later a paper response and so on. If you did not get a response, your letter may have been "lost" (where, it is a mystery).

At least now with the integrated messaging system on some govt platforms you have a trace.

What we are missing is integration. Each entity has their own system, with their own messages. We have a common login system at last (France Connect) but it is not a unified identity system (just a way to use one of the 5 or 6 "official" systems to connect to a new application).

Then you have the problem of answers: you send an email, and receive a letter. To which you cannot reply back.

When I look at countries such as Estonia or Poland, I envy their digital approach. Poland for instance has an app that will download all your key information: id card, driving license, the car papers, your visits to the doctor, the drugs prescriptions, the medical results - everything. Of course, if this is hacked it is a problem but I would like to have at t least the possibility. In France I have to have a huge pile of papers for everything.

> They are slowly becoming modern.

It doesn't even need to be modern. Just usable.

A fellow Brit here, and I share your pride.

They do excellent work. Which is not something I find myself saying very often about a government related organisation!

It’s actually quite remarkable how good some of the UI is on many of our government websites. A lot of thought clearly goes into this design system. And it’s applied relatively consistency across all sorts of online properties too.

There's a pattern in UK govt. websites that pisses me off: multi-page forms with one page per field.

  What is your biological sex?

  Male []
  Female []
  Other []

  [Continue]

As long as they do the keyboard support right (and they do) this is the same number of keypresses. A lot of people get distracted or confused by giant forms. This is even an accessibility issue.

This is a deliberate choice by the designers and we had some to and fro with them about it for the application we were building (a complex 40+ question process for exports).

They seemed open to more questions per page where needed but their single page per question standard makes sense when you understand the need to support the whole audience for a lot of their sites. Stats suggest over 16% of adults in the UK have very poor literacy so in the interests of accessibility I think the page per question is a reasonable pattern.

I'm also really impressed with the gov.uk sites. So clean, simple, and usable.

I've been similarly impressed with a lot of the Norwegian government's web sites.

One thing they've been doing lately is formalize many things into well-designed flows that divide the process of seeking or entering information into discrete numbered steps. It's implemented across several departments, so I guess they must have standardized on a common UX.

Previously, the digital portal required that you sign into the portal, click "New form", find the form (requiring a search among thousands of forms), open the form, fill out the fields and occasionally add sub-forms, and submit it. Very straightforward, sure, but these forms can be complicated stuff with lots of conditionals ("if you answered 'yes' in field 12.3.1, enter the total sum here, minus the subtotal in field 13.1.5"), and if you're not sure which form to use in the first place, there's no guidance at all.

In the new UX, you're guided through each step, which asks you a question, and the answers guide the next question. You always see all the steps, so you can go back and change it, and each section is nicely collapsed as you move forward down the list. Even just "contact us" is implemented this way, guiding you nicely to the right place if you're not sure where to go to, say, amend your tax return.

My wife recently applied for a permanent residency permit, and the process was just a single wizard like this. Occasionally a step would do more complex stuff like ask to upload documents, but the whole thing felt completely linear, and once you reached the end, that was the whole application. There were some further "real-world" steps like showing up for a personal interview, of course, but all the paperwork was done completely online.

That is the Government Digital Service https://gds.blog.gov.uk/story/ , and it's something of a miracle that it's allowed to exist. Competent and committed public servants providing a core structure for other departments to deploy successful software projects, the very antithesis of the "we don't have to manage anything if we contract it out" Serco approach.

Not from the UK, but I poke around on the portal from time to time. It's a true breath of fresh air. I love how you can deep dive into a specific topic of interest without really leaving your place. Example: https://www.gov.uk/browse

The way the menu behaves is both predictable AND useful for browsing around. My local government site is constantly whisking you off to separate sites, each with its own design language and unclear path back to my place of origin.

The team responsible for all this does it right.

>Use this new feature wherever services already have a ‘none’ checkbox.

So I guess this is mostly about standardization in the toolkit, which makes the whole thing easier to work on and modify (or translate into a different front end) in the long run.

And of course, it's standardised for users too, who can now expect a more unified way of interacting with government digital services.

A slight tangent here, but one that I enjoyed:

I've used gov.uk services/sites quite a bit and find them easy to follow and almost always written in unambiguous and clear language. So, having seen this post and the positive comments it generated about gov.uk, I went to the main site and posted a shout-out for the team (especially UI/UX) with a link to this thread. I left my name and email address in the boxes that allow you to request a reply.

I received two automated responses. One contained a tracking link to see the status/progress of my query/comment. The other contained a copy of my comment for my records, and also some info about my set-up at the bottom:

> [User agent] Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

> [JavaScript Enabled] false

> Thank you,

> GOV.UK User Support Team

That's a nice touch, in my opinion, and it made me smile.

Their internal guidelines on ease-of-reading is to target a reading age of 9.

There's a blog that mentions it here: https://gds.blog.gov.uk/2016/02/23/writing-content-for-every...

I don't remember exactly where this is published formally, but I've come across it before.

An alternative UX pattern is to have a "yes" checkbox and a "no" checkbox for each one of the options, with (obviously) neither checked by default. If a user positively answers yes or no for each option, then an all-"no"s response equates to a positive "none".

It's very tedious, so you should probably not do this most of the time. But it could be appropriate if it's extremely important to encourage the user to individually consider whether each of the options applies. By forcing them to click on each line, you discourage them from rushing through without reading, skipping to the end, and just checking "none".

I've seen this UX pattern on paper vaccine forms, for example. They want to know if (1) I'm pregnant, (2) I'm allergic to eggs, and (3) I have Guillain-Barré syndrome. They could ask me to check all that apply, but instead they have yes/no for each one.

As much as I prefer electronic forms over paper, the ability to draw a continuous vertical line through all of those "no" boxes is quite nice compared to actually marking each separately.

I smell an opportunity for someone to create gesture-based HTML forms.

Seriously though, this brings up an important point. People don't like excessive paperwork, so this pattern should be used very sparingly.

Users' time and attention is a scarce resource. You can't magically create more of this scarce resource by applying a UX pattern. People will respond by putting themselves on "click no, no, no, no, no, no, and no" autopilot.

I'll often find a keyboard sequence to speed it up, usually something like tab-tab-space, tab-tab-space (assuming each question is a set of 2 radio buttons or checkboxes... for drop-down lists it's often a matter of typing the first letter or several, like tab, n, tab, n).

I build data collection instruments for biomedical research and we often put "yes to all" and "no to all" at the top of a table of yes/no questions

Does clicking on those, cause the relevant checkboxes underneath to be ticket?

That would help in case one was yes and all of the others were a no. You could just say "no to all" and then just change the one that should be a yes.

Don't forget that mobile is the majority now. As long as the hit target is appropriately sized, this is the kind of task that is much faster with touch than mouse/trackpad.

Users value attention more than time. I'd bet that 4 yes/no radio buttons require a lot less attention than trying to parse the example question from the article ("Will you be travelling to any of the following countries with any of these trailers? Select all countries that apply.")

gov.uk is what the Web should be. Lightweight, accessible, simple.

It takes a certain kind of maturity to ship something so unapologetically utilitarian without giving in to any of the “modern” Web trends. No wonder it takes none less than a nation state to pull this off…

It’s beautiful.

> It takes a certain kind of maturity to ship something so unapologetically utilitarian

This reminds me of a quote I’ve seen a few times: “When I was younger I thought alcohol was the adult drink. When I got older I realized water was the adult drink all along”

This is great, especially since the none checkbox can probably be added with minimal overhead on the frontend and no changes to the backend. Great research and post. Would have never occurred to me but makes total sense.

It would still be a good idea to have backend check for this.

- If javascript breaks, (or get blocked by extensions) there should be a check for contradictory answers. - If on future iterations on the UI (more often than backend) logic breaks, backend help improve how to debug the UI update

Just to mention a few reasons.

I'd guess they do. Another commenter mentioned that when you leave feedback or ask for support they log whether you have JavaScript enabled or not.

Slight tangent: is the plural form of carcass really "carcuses"?

Wiktionary says no:

carcass (plural carcasses)

Going the other way round, I found one article where "carcus" is mentioned in singular form.

link?

update:

Ha. Wiktionary has an entry which says "misspelling of carcass" https://en.wiktionary.org/wiki/carcus

Impressive and quite comforting to see a public entity tackle an issue that many private companies (even in the UX industry!) ignore.

I'm really impressed by this initiative.

Reply on news.ycombinator.com