Fitts' Law
Given the Web Apps & Mobile Apps coining innovative ways to optimize CLICKS on those relevant areas (CTAs) does indeed become primary & here's how the Fitts' Law comes into play...
Take a look at this image here asking for some specific feedback w.r.t a feature.
Have you ever come across this or anything similar like a micro-survey popping up over a miniature window aiming to estimate or capture metrics like:
response time
active session length
time on page
click through rate
all within a session’s length of you browsing through a website?
Also note how micro-surveys doesn’t disturb the main window like the famous (/ infamous) AfxMessageBox [- used commonly in VC++ / MFC (Microsoft Foundation Classes)] popping up bang at the center of the screen when you’re amidst deep work disrupting it if it were to be MODAL. It just harmlessly pops up at the RHS bottom.
The reason micro-surveys makes sense is it helps one measure the effectiveness when also telling you a thing or two about whether the users seem to resonate with the manner in which: a particular problem was solved / the whole solution that was offered. Not to mention how the advent of AI makes it a cakewalk to automatically process and classify the verbatim (“share your thoughts”) and get to gauge the user’s attitude and behavior towards the product / feature.
For ex: Miro. As one lands on the homepage there’s such a lot of stuff organized and sorted over sections whilst a navigation panel occupying the LHS all throughout the screen from top to bottom. And then on the top right is the Notifications icon when clicked launches the FEED, which is an aggregation of updates from the team the user is part of.
“An episode of improvement essentially starts by interfacing with users in the real world to collect really subjective & meaningful feedback that pertains to a high degree of granularity if need be”
So, as one can notice it all boils down to popping one simple question to the user:
→ Were you able to easily find the information you wanted to?
Just as one talks of relevance in the parlance of a solution, one could pin on prominence over the parlance of UX in general and UI in particular which is exactly what the Fitts’ Law is all about.
Definition:
Fitts’ law is mathematical model that predicts how long it will take to point at a target based on target size and proximity, stating the further away and smaller it is the longer it will take for user to interact with it.
Amending that to the parlance of UI / Design, the law merely states that the time the user would take to move & interact if not click on a target area of a screen depends on how large and close it is to them. The nearer the better of course.
For all you MATH lovers (including me), here’s the equation:
T - reaction time
a - co-efficient (represents the Y-intercept)
b - co-efficient (represents the slope)
D - distance between the cursor & the target
w - size / width of the target
log2 - logarithmic relation b/w target size & source
log2 (2 D/w) gives the level of difficulty in reaching the target
So, given the 3 targets A, B, C the law suggests that the user would obviously go for “A” given its proximity (DISTANCE) to the cursor and its prominence (SIZE). Note how “B” is of the same size but is farther away from “A” and “C” a tad smaller in size although at the same distance.
One of the natural and primary applications of this is over UI Design.
UI Design
Have you ever analyzed verbatim which carried something on the lines of
→ “No, I didn’t quite notice any such button” or
→ “No, I didn’t find the LINK I might have missed it entirely”?
It’s happened to the best of the lot. And NO, you aren’t alone here.
Here are 2 prominent things that one ought to keep in mind when building CTAs:
KISS – Keep it Simple Stupid
make those CTAs really simple to read & correlate
refrain from using lengthy texts as the CTA label
make it prominent & use contrasting colors demanding attention
Enforce Action – Use specific & relevant verbs enforcing users to take action
use relevant keyword / verb phrases to indicate specific action
ensure the verbs used also induce a sense of urgency
But now it is down to these questions again:
Where do you place the CTA so that users don’t miss it, come what may?
How big does the CTA have to be? &
Is there a need to make it vibrant / flashy?
When the answers to that could heavily depend on the layout of the website, the organization of information over the sections of the screen, here are some pointers that could help:
Use of contrasting colors is highly recommended whilst still staying within the confines of your website theme colors
Use of action verbs like “Sign-up NOW”, “Subscribe”, “Get Started HERE”, “Learn More…” have proven to work pretty well
As you are designing that new UI, think about optimizing both these variables (size, distance) by creating well-spaced, big target CTA and positioning it such that it is close to the user’s most significant area of interaction which obviously is the bottom / center of a given section of the screen for most layouts over a generic case. Embedding it prominently at the bottom of a rectangular frame over a campaign could be the right way around it if it is specific to a campaign (as depicted over the Vrbo website – refer figure above).
The law also finds a few other applications in helping drive outcomes when still essentially being tied to UI / Design at the base of it all.
Let’s take a look at some of those cases here:
01) Cancellation flows
This also happens to be a prerequisite given the abundance of SaaS products we see around us today. Just as much as the process to sign-up is made easy so also it should be if some user wants to cancel his subscription and given the advent of PLG this becomes as imperative feature to have.
“No questions asked” returns / cancellation has become a prerequisite. The easier is it for a user to cancel their subscription over your SaaS product greater are the chances of it getting stacked up greatly in your favor putting your product & the team at a high pedestal of credibility.
Recently my good friend Aakash Gupta covered the very topic of cancellation flows pretty extensively.
But where exactly do you fit that cancellation button?
Do you make it prominently visible somewhere on the landing page?
NO! Absolutely NOT.
Talking of a membership one obviously has a linked account somewhere. When one goes into account properties and just as you make the subscription details visible, it also needs to carry an option to CANCEL right there.
Here’s how NETFLIX embeds the cancellation option:
That’s essentially the application of the Fitts’ Law in terms of getting the SIZE & DISTANCE of that “FINISH CANCELLATION” button right. If you look at the NETFLIX example, the button to trigger off the cancellation process is prominent as opposed to the other elements on the UI there.
02) Pricing
Given SaaS products there obviously are multiple versions on offer made available over a TIER pricing model. And then amongst those choices is “THE ONE” that would BEST suit the users quite naturally labeled “BEST DEAL”.
The size you choose to display that offer and the proximity to the user over the pricing page does play its part in influencing the users to click and improve the probability of it getting added to cart.
The prominent display of $29 / month, $187 savings bearing the title BEST DEAL on the top could just be enough to direct those clicks to that “Get Started” button when a few may take notice of $9 & $49 options for a quick comparison.
03) Marketing
Remember the launch of the iPod about 2 decades ago and how the messaging was so strongly targeted at “1,000 songs in your pocket”? For a split second let’s imagine you are seeing the same advert sans that line in there.
Do you think it would have been even half as effective a campaign as it turned out to be?
So, which one of these would have led you to click on the advert and explore it further? The choice is obvious & that question may be rhetorical.
The Verdict:
The application of Fitts’ Law has been ongoing ever since product / application design became mainstream. When most seem to manage something barely acceptable under the banner of UI and believe in writing it off as final, operating sans any real knowledge of these methods / laws / rules, they seem to eternally wonder how and why that “X factor” seems to be missing from their products.
And the ones who possess the knowledge of methods / laws / rules always exhibit a sense of calmness around their workflows, have & will always be at a better pedestal to plan, relate & factor it all in making their design / artifacts shine, leading users to discover that WoW factor quicker paving the way for not only better adoption but also reaching a point of customer loyalty sooner.