Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Currency input #68

Open
govuk-design-system opened this issue Jan 12, 2018 · 24 comments
Open

Currency input #68

govuk-design-system opened this issue Jan 12, 2018 · 24 comments

Comments

@govuk-design-system
Copy link
Collaborator

@govuk-design-system govuk-design-system commented Jan 12, 2018

What

Help users enter an amount of money in a specified currency.

screen shot 2018-02-20 at 12 12 50

Why

Anything else

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018
@timpaul
Copy link
Contributor

@timpaul timpaul commented Apr 9, 2018

This could be considered a specific implementation of a more generic prefix/suffix component. I've proposed one here

@fofr
Copy link

@fofr fofr commented Oct 5, 2018

We're using this on Publish teacher training courses at DfE:

screen shot 2018-10-05 at 14 26 15

@joelanman
Copy link
Member

@joelanman joelanman commented Oct 5, 2018

@fofr great, do you have any research on it? For example do you ever see people try to delete the £, or add another? How does it get read out for screen readers?

@fofr
Copy link

@fofr fofr commented Oct 5, 2018

@joelanman It's largely just worked. In a prior version we had a £ outside the box but alongside it, or in the label (eg Fee in £) – in those cases users regularly prepended an extra £.

The £ isn't pronounced but some hidden text in the label can keep the currency context, eg "Fee for UK and EU students in £".

@gazjoy
Copy link

@gazjoy gazjoy commented Jan 14, 2019

We're using this on Apply for Jobseekers Allowance at DWP:

image

It has worked well in testing, we haven't seen anyone try to delete the £ symbol.

image

VoiceOver on Safari reads "Enter amount in pounds".

@soupdragon99
Copy link

@soupdragon99 soupdragon99 commented Mar 6, 2019

Dropbox Paper audit

On 6th March 2019 the Design System team reviewed a Dropbox Paper document discussing the Currency Input pattern.

The aim was to reduce the number of places containing guidance and code by:

  • migrating relevant, useful content into the Design System itself
  • recording important research findings in the community backlog
  • removing the original Dropbox Paper page

If you need to, you can see the original Dropbox Paper content in the internet archive.

Currency input

Help users enter an amount of money in a specified currency.

approximate-cost-for-tickets

When to use this component

Use the Currency input component whenever you need users to tell you an amount of money in a particular currency, for example pounds sterling or euros.

How it works

The Currency input component shows users which unit of currency they need to enter their amount in.

Preventing non-numeric characters

The component uses input type=”text” rather than type=number to ensure that all users can enter the decimal symbol.

The Currency input component has a progressive enhancement that prevents non-numeric input. To use this enhancement, install the numeric input component or include numeric-input.js on the page and include the attribute data-non-numeric on the input.

Research on this component

This component has been tested in a prototype of the Apply for a temporary event notice service. Read more about how the Curcrency input component has been tested and iterated.

Companies House

We’ve been using the pattern below for a while. Our service is designed to allow users to enter accounts information based on accounts they would have already prepared (that is, they’re pretty much just copying figures from a paper set of accounts into an online set of accounts) - and accounts tend to have the currency declared just once, at the top of the page, so we’ve mirrored that.

We’ve not had a single user have any issue around the currency.

We’ve tested with a variety of users including those with low digital skills and those reliant on assistive technology (there is some hidden, screen-reader friendly label text on those inputs, for example “Intangible assets 2017 in £”. These hidden labels are revealed on the mobile view.)

One or two have suggested a ‘nice to have’ feature would be a persistent header (accounting period and currency) which follows the user down the page, but it’s not a must do for us just yet.

currency-input-2

currency-input-3

@adamsilver
Copy link

@adamsilver adamsilver commented Mar 13, 2019

The HMCTS Design System now has a currency input. We've tried to take all of the comments from the community into account:
http://hmcts-design-system.herokuapp.com/components/currency-input

@ChazUK
Copy link

@ChazUK ChazUK commented May 16, 2019

I'm currently working on a project with Skills for Care and we have followed the same approach as @adamsilver by visually differentiating the currency symbol from the input text.

Screenshot 2019-05-16 at 09 45 00

@Guillermoreno
Copy link

@Guillermoreno Guillermoreno commented Dec 10, 2019

We have been testing this pattern:
CGTPD November 2019
We added this as we have users who are non-residents and did have guidance on the page telling the user to enter the amount in pounds. So we added this symbol and removed the guidance. It has tested well. No users have said they find it confusing or have tried to deleted it so far.

@etheya
Copy link

@etheya etheya commented Feb 4, 2020

@Guillermoreno which service was this on? was just looking for the repo to have a look

@Guillermoreno
Copy link

@Guillermoreno Guillermoreno commented Feb 4, 2020

Hi @etheya, Capital Gains Tax for Property Disposals

@MalcolmVonMoJ
Copy link

@MalcolmVonMoJ MalcolmVonMoJ commented Feb 14, 2020

Our service is using the simpler pattern, as do other services in the MoJ.
image

We also have the need to ask for frequent income, for this we modelled the question on the date pattern - the only other multi-answer question I can think of.
image

The HTML structure for this is:

  <legend>
    How much child benefit do you receive?
  </legend>
  <span id="child_benefit-hint" class="govuk-hint">
    For example, &pound;32.05 per week
  </span>
  <div>
    <div class="govuk-form-group laa-currency-period-input__item">
      <div class="form-group-label">
        <label class="govuk-label" for="child_benefit-per_interval_value" id="field-label-child_benefit">
          Amount
        </label>
      </div>
      <div class="laa-currency">
        <span class="laa-currency-prefix">£</span>
        <input aria-label="enter the total amount you get for all your children. Enter 0 if this does not apply." aria-required="true" autocomplete="off" class="govuk-input govuk-input--width-10 " id="child_benefit-per_interval_value" name="child_benefit-per_interval_value" type="text" value="">
      </div>
    </div>
    <div class="govuk-form-group laa-currency-period-input__item">
      <label class="govuk-label" for="child_benefit-interval_period" id="field-label-frequency-child_benefit">
        Frequency
      </label>
      <select class="govuk-select" id="child_benefit-interval_period" name="child_benefit-interval_period">
        <option value=""> </option>
        <option value="per_week">per week</option>
        <option value="per_4week">4 weekly</option>
      </select>
    </div>
  </div>
</fieldset>
@simonwhatley
Copy link

@simonwhatley simonwhatley commented Mar 10, 2020

@MalcolmVonMoJ are you aware that the MOJ Design System already has a currency input component used in a number of services across the MOJ, not least the LAA's Get Paid for Legal Aid? I ask because it varies from the one you highlight.

https://moj-design-system.herokuapp.com/components/currency-input

@MalcolmVonMoJ
Copy link

@MalcolmVonMoJ MalcolmVonMoJ commented Mar 13, 2020

@whatterz
Yes, but after talking with our designer we opted to go for the design shown here. This design is used by many other services in the LAA, including Apply for Legal Aid which had phenomenal user testing. The grey shading might be taken by some users to be a button to change currency type (£/$/€ etc).

@b2whats
Copy link

@b2whats b2whats commented Mar 13, 2020

Why when I click on the currency sign, the input does not receive focus ?

@MalcolmVonMoJ
Copy link

@MalcolmVonMoJ MalcolmVonMoJ commented Mar 20, 2020

@b2whats, good spot. My solution to this will be to z-index the input box above the pound sign, make the background transparent obviously so it still shews through.

@dalepotter
Copy link

@dalepotter dalepotter commented Nov 25, 2020

Does anyone have any thoughts on the use of formatting within number fields - particularly using commas to seperate thousands - for example...

image

On the one hand, it makes proof-reading large numbers easier, leading to more accurate input. On the other hand there may be accessibility/UX concerns?

There would also be questions about how to present data when the field is in focus. Immediate options...

  • Retain comma formatting (which raises issues about how to handle user attempts to remove numbers next to a comma, when a comma is in the way of a number they wish to backspace/delete). From a technical perspective, maintaining the correct comma position can become complex.
  • Remove all commas, which means the input value 'jumps' as removed commas reduce the width of the input value.

This question could equally apply to #74 (Number input field)

@MalcolmVonMoJ
Copy link

@MalcolmVonMoJ MalcolmVonMoJ commented Nov 26, 2020

You could strip them out after submit to avoid any on-screen jumping. This is easy enough, but there are other considerations.

Whilst they are common when typing in large numbers. e.g. 1,000,000, on the other they are used in mainland Europe for the decimal separator. 1,5 for 1½.

If we strip them out, a well-meaning European could enter 1,5 meaning 1.5, and inadvertently enter 15. If we error, then someone entering an ordinarily perfectly acceptable 25,000 would be inconvenienced.

So by that logic, if we accept them at all, we should only accept them in the -3xth position of the string, from the end or decimal point?

I am assuming that we don't want to go down the road of accepting non-UK formats - which sounds like a minefield with the different formats used in India, Switzerland etc.

@Zeno001
Copy link

@Zeno001 Zeno001 commented Nov 26, 2020

Would the approach by the (US, but widely used around the world) National Institute of Science and Technology (NIST) to grouping digits be something to consider?

They suggest using a space (or half-space) to indicate groupings:

10.5.3 Grouping digits

Because the comma is widely used as the decimal marker outside the United States, it should not be used to separate digits into groups of three. Instead, digits should be separated into groups of three, counting from the decimal marker towards the left and right, by the use of a thin, fixed space. However, this practice is not usually followed for numbers having only four digits on either side of the decimal marker except when uniformity in a table is desired.

Examples:
76 483 522 | but not: | 76,483,522
43 279.168 29 | but not: | 43,279.168 29
8012 or 8 012 | but not: | 8,012
0.491 722 3 | is highly preferred to: | 0.4917223
0.5947 or 0.594 7 | but not: | 0.59 47
8012.5947 or 8 012.594 7 | but not: | 8 012.5947 or 8012.594

https://www.nist.gov/pml/special-publication-811/nist-guide-si-chapter-10-more-printing-and-using-symbols-and-numbers

That may not entirely fix the problem of using period and comma for the decimal point, but would help with display, I think.

@terrysimpson99
Copy link

@terrysimpson99 terrysimpson99 commented Feb 24, 2021

They suggest using a space (or half-space) to indicate groupings:

The international standard is ISO 80000-1
"To facilitate the reading of numbers with many digits, these may be separated into groups of three, counting from the decimal sign towards the left and the right. No group shall contain more than three digits. Where such separation into groups of three is used, the groups shall be separated by a small space and not by a point or a comma or by any other means."

@timpaul
Copy link
Contributor

@timpaul timpaul commented Feb 25, 2021

Thanks Terry - I wonder if that standard reflects common usage, in the UK or elsewhere? At the moment, the GOV.UK style guide position is "For numerals over 999 - insert a comma for clarity: 9,000".

@terrysimpson99
Copy link

@terrysimpson99 terrysimpson99 commented Feb 25, 2021

I mentioned ISO 8000-1 to add information to what Alan (Zeno001) said. I do have an opinion on it. Unfortunately, without a github for the content style guide, I don't think it matters much what we say here.

@timpaul
Copy link
Contributor

@timpaul timpaul commented Feb 25, 2021

Thanks Terry, understood. I think regardless of how we format numbers ourselves, we'll need a way of handling numbers input by users, which may contain a number of separators (if we allow it).

I wonder how 'safe' it is to assume that the last-comma-on-the-right is a decimal marker only if there are no more than 2 digits after it?

@terrysimpson99
Copy link

@terrysimpson99 terrysimpson99 commented Feb 25, 2021

We've discussed this issue in our team. I know some services don't want decimal values and just want integers but I think that issue can be handled separately. I'd like to accept comma decimal marker and I'd like rules that are 'safe' as you put it. This isn't just because of how people type or use voice, it's also because of cut & paste. Incidentally, the english-language numeric keypad has a full stop but has a comma in some languages.

I think the following are invalid regardless of whether the decimal marker is a comma or full stop:

  1. comma as a decimal marker followed by one digit
  2. full stop as a decimal marker followed by one digit
  3. comma as a separator for groups of three digits then a comma followed by two digits
  4. full stop as a separator for groups of three digits then a full stop followed by two digits
  5. comma as a separator for a group of one digit
  6. full stop as a separator for a group of one digit
  7. comma as a separator for groups of two digits (I'm open to challenge on this due to lakhs, and crores)
  8. full stop as a separator for groups of two digits (I'm open to challenge on this due to lakhs, and crores)

The following should be valid:

  1. currency symbol at the beginning or end (this could be due to cut & paste).
  2. spaces before, between, or after digits (this could be due to cut & paste, or voice assistance)

As I said, I'd like to accept a comma as a decimal marker. It's not a the top of my wishlist. I have a bit of fear, uncertainty, and doubt. If somebody can specify a safe design, I'd be up for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet