Live data from Hacker News

Why the Gov.uk Design System team changed the input type for numbers

technology.blog.gov.uk

81–90 of 177 posts

Re: Why the Gov.uk Design System team changed the input type for numbers

#81
post #62
post #51

Earlier quoted context omitted.

Yes, you're right, this isn't a great solution for credit card inputs either. They should be able handle dashes and other spacing characters and the site should be able to filter/format it automatically either on the front-end before submission or with some server-side processing. And no we don't need four different input boxes to enter a credit card numbers either. Flexibility is key here and since many websites han…

Part of the problem is that inputs don't necessarily reflect the specific intent behind the use of certain symbols. For 99% of people using US keyboards when they input a dash in a credit card number they are using the exact same key as one would use for the minus when inputting a negative number. If you asked them to verbalize their inputs they would probably use different words for the same symbol, signifying that…

Not to mention that some countries use . as a decimal point and , as a digit grouping separator, and others do it the other way around.

Re: Why the Gov.uk Design System team changed the input type for numbers

#82

This is off-topic, but I really like the current GOV.UK (several years old now). I don't really have opinions on the visual stuff, but I find it really pleasant to use. Filing my self-assessment tax return (only required because I run a side-business) is a fantastically straightforward experience. Step-by-step information entry, pre-filled with what they already know (e.g. main employer's salary), then they give you…

As a US guy, I've never looked at this site before. The extreme clarity of pages like https://www.gov.uk/vat-rates is really refreshing.

In Germany, I can't even find the VAT rate info page at the ministry via google. I end up with this: https://www.bundesfinanzministerium.de/Web/DE/Themen/Steuern...

Re: Why the Gov.uk Design System team changed the input type for numbers

#83
post #4

In summary the main issue is that, according to the spec, ` ` is only for numbers that are going to be parsed into a Javascript number. It has to make sense to increment, decrement or do other numerical operations on it. It's not to be used for strings or identifiers that just so happen to be numbers, e.g. credit card numbers. I'll admit this is slightly surprising to me but it does make a certain amount of sense. Th…

That's a good rule of thumb there :) More pedantically, credit card numbers _aren't_ numbers in the first place. They are identifiers that happen to use numerical digits. Same as phone numbers. Treating them as numbers at any point in a system is an error. My dream is this detail of the HTML spec forces people to rethink their schema design while they're at it.

Re: Why the Gov.uk Design System team changed the input type for numbers

#84

Earlier quoted context omitted.

One good reason for this is that for things like credit card numbers, a good interface will accept leading, trailing, or interior spaces. Sites that make me type in values in exactly their own weird format are an abomination. Site A: Ah ah ah! You put a slash in your date! No soup for you! Site B: Ah ah ah! You didn't put a slash in your date! No soup for you!

> a good interface will accept leading, trailing, or interior spaces Won't pattern="[0-9]*" do the exact opposite of what you're suggesting?

Important to note that in the article we mention we only use pattern to trigger the right keyboard in old iOS. We actually turn off HTML validation in favour of doing server side validation, we'll soon be publishing guidance on that too. Disclaimer - I work on the team.

Re: Why the Gov.uk Design System team changed the input type for numbers

#85
post #75

Earlier quoted context omitted.

Fantastically straight forward? I strongly disagree. I've done the SA many times, and trying to find out your balance or payments list or anything useful is now a kafka-esque nightmare. Last time I knew they must owe me money but they didn't say at the end, and it took me about 15 minutes to find out how much, with no indication of when it would arrive. At the end of the SA they even had some sort of message saying m…

I’m biased, I used to work at GDS. The lack of a ‘login’ button is a huge issue IMHO, but the main blocker to it isn’t the tech teams, its at the ministerial/senior civil service level. The problem isn’t the button itself but the infrastructure behind it. I.e. it requires a single database of users (i.e. a national register of citizens). This needs doing, but politicians come out in hives because it involves setting…

Finding where to login for SA is the one frustration I have with SA right now. Everything else works really smoothly, but I have to resort to Googling "self assessment login" every time.

Solving this doesn't require a unified login - it needs proper signposting within gov.uk of the most likely user flows. Right now, finding the login for SA is something like 5 levels deep within the hiearchy of pages, and even then it's not well signposted.

gov.uk -> "Money and Tax" -> "Self Assessment" -> "Register for and file your Self Assessment tax return" -> Sign In

Having to choose "Money and Tax" and then "Self Assessment" is fine. But then you're faced with an enormous menu of choices, only the 19th of which leads to a login prompt. Once you've reached that page, "Sign In" isn't even at the top of the page - it's below the fold on my 1440 pixel high screen!

Just putting common tasks at the top of the list, with everything alphabetised underneath for when you're looking for something specific would make a huge difference.

Re: Why the Gov.uk Design System team changed the input type for numbers

#86
post #78
post #48

Earlier quoted context omitted.

That's one of the reasons I love Stripe's checkout being used everywhere and designers elsewhere basically copying them. The internet is constantly getting better and I don't think we give that progress we've made in web design over the last few decades enough credit. Just imagine how bad it used to be to just purchase a simple thing on an ecommerce site in the mid 2000s. Or remember what car websites used to look li…

> Or remember what car websites used to look like vs what they look like now. lingscars.com ?

This site is amazing.

Re: Why the Gov.uk Design System team changed the input type for numbers

#87
post #17

Earlier quoted context omitted.

What makes you think they don't? But they still want good UX for entering the data.

Insistence on (EDIT: having used) using type=number. Given the choice of bad UI vs. (accidentally) modified data, I'd pick bad UI any day. Insistence on using number makes me suspect they require sanitation to be done client-side. EDIT: Normally, I wouldn't assume a website run by a government wouldn't be doing this, but wasn't there some scandal recently in the US about the Dems and some web-app, and that it was woe…

> Insistence on using number makes me suspect they require sanitation to be done client-side.

Why when they explicitly state that it was done for getting the proper input UX on mobile? The whole article is about finding a good UX for inputting numbers, taking different device types and accessibility concerns into account. It doesn't mention using these for validation at all afaict. Somewhere in this thread one of devs showed up and explicitly stated that they disable all HTML validation on the pages.

Re: Why the Gov.uk Design System team changed the input type for numbers

#88
post #4

In summary the main issue is that, according to the spec, ` ` is only for numbers that are going to be parsed into a Javascript number. It has to make sense to increment, decrement or do other numerical operations on it. It's not to be used for strings or identifiers that just so happen to be numbers, e.g. credit card numbers. I'll admit this is slightly surprising to me but it does make a certain amount of sense. Th…

To put it more succinctly and without unnecessarily referring to JavaScript semantics, type="number" is for quantities , not mere strings of digits . It's an unfortunate accident of the English language that both are commonly called ‘numbers’. We might not have had this confusion if some other language were the lingua franca of computing.

Technically, number (a quantity) vs numbers (a series of numbers) would suffice. "Numeric" (as an input mode vs a number type) makes sense, too.

I think it's just an evolution of our education, preferred input devices, and specs all catching up with each other. On a desktop I just start typing numbers from the keyboard. On a smartphone I click on a credit card field, if the field expects "text" I have to click "123" then input the number using a number row with smaller target sizes. I would greatly prefer to directly show me a number pad.

Re: Why the Gov.uk Design System team changed the input type for numbers

#89

Earlier quoted context omitted.

One good reason for this is that for things like credit card numbers, a good interface will accept leading, trailing, or interior spaces. Sites that make me type in values in exactly their own weird format are an abomination. Site A: Ah ah ah! You put a slash in your date! No soup for you! Site B: Ah ah ah! You didn't put a slash in your date! No soup for you!

I hate it when they have drop-down menu for entering your year of birth, so the older you are, the further you have to scroll, but only infants and toddlers can select the year they were born without scrolling. A non-numeric text field is so much easier, and you should also be able enter your birth year as Roman numerals (which is even easier for millennials).

I think you're joking about Roman numerals, but millennials birth years are anything but easy to type in as a Roman numeral. For example, my birth year of 1987 is MCMLXXXVII.

Re: Why the Gov.uk Design System team changed the input type for numbers

#90
post #55

Earlier quoted context omitted.

One good reason for this is that for things like credit card numbers, a good interface will accept leading, trailing, or interior spaces. Sites that make me type in values in exactly their own weird format are an abomination. Site A: Ah ah ah! You put a slash in your date! No soup for you! Site B: Ah ah ah! You didn't put a slash in your date! No soup for you!

This may not be semantically pure, but I think type="tel" is a simple and ergonomic approach to credit card input. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... EDIT: Also more widely supported than https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

I'm not against weird hacks where necessary, but how is this better than the GP's non-hacky suggestion?

Inputmode isn't supported by most desktop browsers but it doesn't need to be. Every mobile browser save mobile Firefox supports it.

...I wonder what's up with Mobile Firefox?

Post reply on HN