User Interfaces, Usability, and User Experience: The Square Milk Jug Edition
Tags: ui, usability, ux, milk
Published: 2019-05-17 20:00:36

---
title: User Interfaces, Usability, and User Experience: The Square Milk Jug Edition
published: true
description: How do UI design, usability, and user experience combine to impact your success?
tags: UI, Usability, UX, Milk
canonical_url: https://tenmilesquare.com/ui-usability-and-ux-the-square-milk-jug-edition/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/i7oa53cfqaywueqil65q.jpg
---

Given the lack of time and scarcity of resources all designers face, we need to prioritize our efforts. This often means setting aside the most obvious or seemingly coolest features for those that will give us the most return on our investment, even (or especially) when these choices appear counter-intuitive.

To get to the right design, you’ll need to answer the 3 key questions:

* Who uses it?
* How do they use it?
* How are successful interactions measured?

By answering these questions up-front, you stand a much better chance of creating a product that will be a market leader rather than a forgotten follower. Need a good example to show you the way?  

## The Square Milk Jug Conundrum 

The relationships between user interfaces (UI), usability, and user experience (UX) are complex. Consider the square milk jug. Perhaps you have seen one at a big box store. Consumers hate it, because it is difficult to pour, frequently resulting in spills. Yet it has been around for about a decade and is unlikely to go away. Why? While the usability of pouring the milk from the jug is faulty, is that the critical use case? If not, what is? And from whose point of view? The consumer, the store, or the producer?

### The Domain

Let’s start with the Domain.  What is the environment in which a product operates from production through consumption? The typical way to express this is through some representation of the people and systems that interact directly with your product as well as those who have a stake in or impact its use.  This is more than just the interaction between the person pouring and that oddly shaped jug of milk. The path from the cow to the one who drinks the milk is rather long. The user may be the one who buys the milk, pours it and drinks it; however, if these are different people, how does their relationship affect the milk buying decision?  And how do you get the milk to the point where the user places it in the shopping cart?

At the store that sells the milk, a number of things need to happen to sell a carton of milk:

* A purchasing agent buys the milk.
* A refrigerated truck brings the milk to the store.
* A stocker puts the milk in the refrigerated case.
* The user interacts with the refrigerated case and puts the jug in the shopping cart.
* The cashier accepts payment.

![Milk Context Diagram](https://thepracticaldev.s3.amazonaws.com/i/wlsi39sju45cchgblscd.png)

### User Interface (UI)

User Interfaces are complex things, and a lot of products – even square milk jugs – have more than one.  Here are the key questions to ask about the UI for your product:

* What are the touch points between any two actors in this domain? Each of these describes a transaction.
* The interface is how the two execute this transaction:
 * What is a prerequisite for the action?
 * How does the exchange occur?
 * What are the possible results?

Certainly, there’s an interface between the milk pourer and the milk jug; however, there are also interfaces between the cup and the drinker, the refrigerated case at the store and the buyer, the buyer and the cashier, and again with the fridge at home.

![Interface Diagram for Milke](https://thepracticaldev.s3.amazonaws.com/i/egvr5maq9fzgha2e84x0.png)

### Usability

UI and Usability are soul mates, and you need to serve both to build a great product.  Therefore, there is, at least implicitly, a usability commitment for each interface: a set of criteria by which each actor will judge the success of the transaction. Usability is a quality measure of some combination of an interface’s ease of use and learnability. This serves as a framework for understanding how a user will judge the interaction. It is a highly subjective measurement that takes into account the context of the domain.

The interface between the one who pours and the milk jug may be evaluated on how easily the person can take the jug out of the fridge, open it, pour, close it, and put it back without spilling or wasting any milk. The compactness of the square jug makes it more difficult to complete these tasks as compared to a regularly shaped jug (though the square one may fit in the fridge better); however, this is just one of many interfaces.

### User Experience (UX)

UX is more than just the sum of the usability of each interface. It is a subjective measure of the whole experience, which will vary by user and over time.  Most who pour the milk expect to do so without spilling; some are more tolerant. Some who buy the milk expect to get the best value for their money; others want the highest quality product. Sometimes I want to spend as little time as possible executing the transaction; other times, I like to linger to see what’s on sale. It is the cumulative total of these individual experiences that adds up to the overall user experience.

Some things are beyond the designer’s control, like the cup interface between the drinker and the milk. Others things, like the relationship between the drinker and the purchaser, can be influenced indirectly through activities such as advertising (got milk?™). The key is to prioritize this list in order of what’s most likely to achieve your goals for a given level of effort.

Note that organic milk is not packaged in a square jug because organic milk buyers find the entire experience from cow-to-cup to be important.  Therefore, tough to pour equals poor sales. Regular milk buyers would like to pour the stuff more easily, but, given the choice, they’ll usually go with the cheaper option.  It’s cheaper because the store can pack more containers in the refrigerator if they are square shaped, which lowers their costs and enables them to compete better on price. The frustration a user feels about the occasional milk splash is outweighed by the importance of getting a good deal on a product they buy every week.

## The Lessons Learned

The Square Milk Jug Conundrum provides several valuable insights:

* **Important v. Obvious**. There is a difference between the most obvious and most important interface.  In the milk market, the most important metric is sales volume, not consumer convenience.  Therefore, the most important interface is from the dairy to the big box store, not to the consumer.  The consumer interface only has to be “good enough to pour.”
* **Think Deeper**. It’s an easy leap to assume consumer preferences are the number one driver in the milk market, but the Square Milk Jug Conundrum shows us otherwise.  Maximizing amount of the milk on the shelf actually maximizes sales despite a less than optimal milk container.  Square containers are also easier and cheaper to ship because stacking is easier and use of space in the truck is optimized.
* **Follow the Money**. Suppose you built the perfect milk carton for consumers but no one knew.  I don’t mean that consumers rejected your perfect container once it hit the shelves.  I mean that big box stores rejected your container for a multitude of reasons – too much shelf space per container, too expensive to buy and ship – and consumers never saw your perfect container.  You are better off improving the square container, so consumers will like it more, than designing a product no one will ever see. That way, the dairy and store make the most possible money, and the ​consumer gets milk at a good price – albeit in a distinctly average container.