Hyperlinks Should Have Context
2025-12-18
While poorly implemented links can cause minor annoyances for users, improper interactive links can often lead to a loss of users.
Thatâs why, if you have interactive links on a website or application, it helps to include detailed context. This avoids incorrect actions being triggered or users second-guessing themselves and needing support. You can achieve this through what I call âinvisible hand-holdingâ. Itâs not as aggressive as having forced tutorials or treating your customers like idiots, but still provides them with a sense of guidance.
Letâs explore a fictional example:
Jimâs Potato Emporium is a subscription service that delivers bags of potatoes to subscribers on a monthly basis. Customers have the option to subscribe via three tiers:
- Small: $5/month for 1 pound bag
- Medium: $10/month for 2 pound bag
- Large: $15/month for 3 pound bag
Keeping things simplistic for our example, new customers need to be able to subscribe to a tier from a main âpricingâ page. The default user experience (UX) would likely involve three interactive links (or âactionsâ). Each link would setup a new subscription based on the corresponding tier. We will ignore any type of account creation or payment setup that would follow, to keep things streamlined.
Task: The potential customers need to be aware of each tierâs name, monthly price, and amount (of potatoes).
Very often, the go-to approach is an over-bloated table like so:
| Small | Medium | Large |
|---|---|---|
| $5/m | $10/m | $15/m |
| 1 lb | 2 lbs | 3 lbs |
| Subscribe | Subscribe | Subscribe |
Notice how much bouncing around your eyes need to do for the example above? Not the best experience. Humans are familiar with reading and speaking in clear sentences. Breaking things apart into categorized, one-word items doesnât always help easily convey your context.
Letâs try that again but in a more natural, sentence based structure:
Jimâs Potato Subscriptions
Small:
Get 1 lb of potatoes delivered for $5/month
Medium:
Get 2 lb of potatoes delivered for $10/month
Large:
Get 3 lb of potatoes delivered for $15/month
Doesnât that flow so much better? Your brain can process these types of sentences faster than trying to scan a table (no matter how minimal). It reads similar to how a person would talk with you face-to-face. These types of hyperlinks are often referred to as descriptive links.
Get (action) 1 lb of potatoes (product) delivered (expectation) for $5/month (cost)
We can also use this page to set further expectations and answer questions that the user may not have even thought of yet.
Letâs add some more context:
Jimâs Potato Subscriptions
Choose a potato subscription by clicking an option below.
You can always upgrade, downgrade or cancel your subscription at anytime.
Small:
Get 1 lb of potatoes delivered for $5/month
Medium:
Get 2 lb of potatoes delivered for $10/month
Large:
Get 3 lb of potatoes delivered for $15/month
In the next steps, you will need to create an account and choose a payment method.
With this minimal amount of additional text, we have successfully provided:
- a clear description of what they need to do in order to choose a subscription
- reassurance that they can update or cancel at anytime
- a heads up on what to expect after clicking an option
You also might be tempted to rewrite the upgrade/downgrade portion as:
You can always upgrade, downgrade or cancel at anytime
But it isnât absolutely, 100% clear. Cancel what? The subscription? My account? Including the extra instance of the word âsubscriptionâ doesnât hurt anyone. What it actually does is avoid any possible miscommunication, which is far more important than worrying about tagline âcharacter countsâ. (Looking at you, marketing teams)
You never want your users making âleaps of faithâ when it comes to interactive links or buttons. âWhat does this link do? Guess Iâll click and find outâ. No user should ever be put into this situation. This is 100% a UX failure.
Thought Experiment
You should take some time to think through how to apply a similar concept to future interactions this âJimâs Potato Subscriptionâ user might need. Such as:
- skipping their next delivery
- upgrading / downgrading / canceling their subscription
- changing account details
It might sound silly since these types of interactions are found everywhere on the web, but often times they are poorly implemented and we simply âadaptâ to the bad UX. The idea of phrasing actionable items into more human-readable sentences might not be the best solution every time, but I find it to be a great starting point.
If you canât explain a clickable action with a simple sentence, that action is probably trying to do too much. Simplify.
đ„đ„đ„