Unit Price Calculator

by Tom Richards

Wednesday, Mar 28, 2018

I’m at the store shopping for groceries, and I’m considering buying a thing. I’ve narrowed down my selection to two final candidates. These two options look equivalent in nearly every aspect, except for the part where they are packaged in differently-sized containers, and the price is different. So… what now?

Looking for the actual calculator?

Skip the article and go directly to the unit price calculator.

Just pick one and hope I’ve made the right decision? That’s not right at all. What I really want to do is select the option that gives me the most value for my money. To do this, I need to know the unit price of the product. You know, the “price per unit” of whatever it is I’m buying.

The formula for this value is simple:

\text{unit price} = \text{cost} / \text{quantity}

That is, you take the cost of the thing, and divide that by how much of the thing you’re getting.

Here’s a more concrete example (using freedom units, sorry!).

1 gallon of Dr Pepper Syrup costs $22.98.

= \$22.98 / 1 \text{ gal}

Since there are 128oz in a gallon, the unit price of this delicious product is:

= \$22.98 / 128 \text{ oz}

= \$0.1795 / \text{oz}

In a physical store, you can usually find the unit price of an item on the price tag. Sometimes, it’s on the page when you’re buying things online.

Computing the unit price is simple, don’t you think?

Problem 1

I do not trust “price per unit” values on the price tag at the store. Why? Because they are frequently wrong.

  • Sometimes, the unit price is keyed in manually, separately from the actual price of the item. This human math error can make a product appear less or more expensive than it actually is.
  • Sometimes, the unit price is automatically computed, but it is based on an incorrect quantity. This human data entry error can make two-packs or bulk packs appear more expensive than they actually are.
Wrong unit price
Problem 1 in action! The unit price is incorrect on both the single unit and two-pack.

I would love to calculate the unit price myself, on the fly, but this brings me to my second problem.

Problem 2

When dealing with numbers, I have the working memory of a goldfish.

The average number of things a person can remember without repetition is 7 \pm 2. For me, personally, I’m painfully aware that I fall on the lower end of that spectrum. It is therefore unlikely that I will be able to compute the unit price for two items, unless I can write the numbers down. Let’s look at how many numbers we’re dealing with.

  1. Product A price
  2. Product A quantity
  3. Product A unit price
  4. Product B price
  5. Product B quantity
  6. Product B unit price (whoops, ran out of space)

Problem 3

Existing unit price calculators don’t fit what I want. Here are some examples of these calculators and the reasons I don’t want to use them.

Example A

  • Ads
  • Tap targets are too small
  • No “number” input fields
  • Plain HTTP

Example B

  • Ads
  • Tap targets are too small
  • No “number” input fields
  • Cookie popover
  • Too few products on screen at once
  • Unusable when the keyboard is open

Example C

  • Tap targets are too small
  • Unnecessarily complex; too many input fields
  • Plain HTTP

Example D

  • Ads
  • Non-mobile-friendly design
  • Too few products on screen at once
  • Unnecessarily complex; too many input fields
  • HTTPS mixed content

Example E

  • Ads
  • Too few products on screen at once
  • Custom on-screen keyboard that doesn’t look native or respect normal workflows

I am tired of putting up with this insanity. Introducing…

The tomrichards.net Unit Price Calculator!

It is amazing and you should definitely check it out.

{{ ‘/unit-price-calculator/’ | absURL }}

Privacy features

  • Runs entirely in your browser
  • Inputs and calculations are never collected
  • No ads or tracking snippets, ever
  • HTTPS for all resources

Usability features

  • Low complexity
  • Large input fields for easy tap targeting
  • Mobile-optimized interface
  • Dynamic number of items on screen (use the blue ‘+’ to add more)
  • Input fields with “number” type
  • No cookie popovers, ever

Technical features

  • Lightning-quick computation
  • Lightweight code (~5KB)