When Design meets Math
UX is about how the user feels about a product while using it. I love User Experience design, I especially love to research more about user experience, I’m desperate to be able to do things like deep dive to the root concepts in which I came across Usability, Experience, Feel, Pleasure…. but is there any math behind it…
Confused… Come let’s have a tour…
- Fits Law
In 1954, psychologist Paul Fitts’, examining the human motor system, showed that the time required to move to a target depends on the distance to it, yet relates inversely to its size.
What is Fitts’ Law?
“The amount of time required for a person to move a pointer to a target area is a function of the distance to the target divided by the size of the target. Thus, the longer the distance and the smaller the target’s size, the longer it takes”
How does Fitts’ Law work?
The early experiments on pointing movements targeted the tasks that might be related to the worker efficiency problem. They were not targeted to the HCI field because there was no GUI. Paul Fitts extended Woodworth’s research which focused on telegraph operator performance substantially with his famous reciprocal tapping task to define the well-referenced Fitts’ Law.
Fitts’ Law description of pointing, the parameters of interest are:
The time to move to the target
The movement distance from the starting position to the target center
A target object, in the context of User Experience, can be an interactive element such as a submit button, a hyperlink, and an input field in a web form. The idea is the quicker you can reach a target object, the more convenient and easy it is to use.
This law influenced the convention of making interactive buttons large (especially on finger-operated mobile devices) — smaller buttons are more difficult (and time-consuming) to click. Likewise, the distance between a user’s task/attention area and the task-related button should be kept as short as possible.
MT=a+b log2(2 D/W)
MT is the amount of time required to complete the movement
a and b are empirically determined regression coefficients, which is basically a fancy way of stating they are values gained from direct observation that build a slope.
D is a measurement from the starting point to the end point (target object)
W is the width of the target object
2. The Fibonacci Sequence
The Fibonacci Sequence is a great design concept to understand and integrate into your work.
What Is The Fibonacci Sequence?
Fibonacci Sequence is a series of numbers with the pattern of each number being the sum of the previous two. So starting at zero the sequence would be as follows:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…
How Does It Apply to Design?
The first area of relevance is that the sequence is actually a very close ratio to the Golden Ratio.
3. Golden Ratio
The Golden Ratio is a mathematical ratio you can find almost anywhere, like nature, architecture, painting, and music. When specifically applied to design specifically, it creates an organic, balanced, and aesthetically-pleasing composition.
What is the Golden Ratio?
Also known as the Golden Section, Golden Mean, Divine Proportion, or the Greek letter Phi, the Golden Ratio is a special number that approximately equals 1.618. The ratio itself comes from the Fibonacci sequence, a naturally occurring sequence of numbers that can be found everywhere, from the number of leaves on a tree to the shape of a seashell.
You can find the Golden Ratio when you divide a line into two parts and the longer part (a) divided by the smaller part (b) is equal to the sum of (a) + (b) divided by (a), which both equal 1.618. This formula can help you when creating shapes, logos, layouts, and more.
Here are the ways to use the Golden Ratio in UX design:
Typography and defining hierarchy
The Golden Ratio can help you figure out what size font you should use for headers and body copy on a website, landing page, blog post, or even print campaign.
Ex: Let’s say your body copy is 12px. If you multiply 12 by 1.618, you’ll get 19.416, meaning a header text size of 19px or 20px would follow the Golden Ratio and balance the 12px body font size.
If you want to figure out how big your body text size should be, you could do the opposite. If your header text is 25px, you can divide it by 1.618 to find the body text (15 or 16 px).
Leveraging the Golden Ratio can help you design a visually appealing UI that draws the user’s attention to what matters the most.
4. Rule of Third
What Is the Rule of Thirds
The Rule of Thirds is another way to look at the layout of a design, you place a simple grid overlay (divided equally into thirds, both horizontally and vertically) on the space to be used for the design. This makes a grid of nine equal-shaped boxes. So, going from the top left, measure the width of your background. If you’ve got a width of 36 cm, mark out points at 12 cm and 24 cm. Then, look at the height. So, again going from the top left, measuring down, we get a reading of 24 cm. Therefore, mark out points at 8-cm intervals (8 cm and 16 cm down). Now that we have our grid points set, we can make the grid!
The most important part of the grid is where the lines cross. These are focal points (or “sweet spots”, as those in the industry call them)...
In web and app design, we can place the call to action or a key element on a sweet spot, since we know that the eye will automatically fall towards the four intersection points. It’s important to note that these four sweet spots differ in their appeal to the eye, underlining the fact that going for symmetry in your design is not always the best option.
5. Bayes’ Theorem
You conduct a research study or usability test, only to find that no one can agree on how to interpret the results. Or the team agrees on the interpretation, but can’t decide how to move forward. How can we make sure our research has the right impact?
At essence, Bayes’ Theorem is about the probability of how to calculate whether a particular event will happen or not happen.
The calculation has two parts: an explicit statement of priors (your assumptions about the likelihood of the event), and a procedure for updating that initial assumption as you learn new information
Q1: Two teams are playing Cricket. What is the probability Team A wins the game?
Q2: Two teams are playing Cricket. Team A leads by 20 runs at halftime. What is the probability Team A wins the game?
Q3: Two teams are playing cricket. Team A leads by 20 runs with 2 minutes left in the game. What is the probability Team A wins the game?
People often say 50% for Q1, around 95% for Q3, and somewhere in the middle for Q2. Unless you did a bunch of research, the exact numbers you wrote down are based on your subjective thoughts about how hard is it for a cricket team to overcome a 12-point deficit.
The objective part is how those numbers increase as you go. Regardless of what you answered for Q1, you should have given a higher number for Q2 and a higher number yet for Q3.
Let’s say your prior was 50% each team equally likely to win. At halftime, you’ve updated yours prior to 50%+X, where X represents how likely you think it is for Team A to hold on to a 20 runs lead for a whole half. With two minutes left, you’ve updated with more information and have less uncertainty about the outcome.
P(A|B)=( P(B|A).P(A) ) / P(B)
where A and B are events and P(B) not equal to 0 .
P(A|B)is a conditional probability: the likelihood of event A occurring given that B is true.
P(B|A)is also a conditional probability: the likelihood of event B occurring given that A is true.
P(A)and P(B) are the probabilities of observing A and B respectively; they are known as the marginal probability.
The “simply powerful” idea here is twofold:
- Explicitly state your assumptions.
- Keep your assumptions separate from what reality is telling you — and update them accordingly.
6. Binomial Distribution (Probability)
Testing is a situation with two possible outcomes. The respondent will face or won’t face a problem. Like tossing a coin, but with probability which can be different than 50/50. In statistics, the probability of one result from two options is called binomial.
Based on data research defined average problem probability ‘p’ for usability testing. According to them, it is approximately 30%. So, on average we need to involve 5 respondents to be 85% sure we’ve faced each 30% probable issues on users way. Or that we faced 85% of such issues.
For design testing, a number of needed respondents depend on project situation= problem probability.
One thing to keep in mind is that the calculations above are for facing problems at least once. You can be 85% sure but still may face a problem just once.
7. Confidence Interval
Let’s look at testing result probability from another side. What is the probability to face a problem if we faced it once in five test runs? Like in our testing session from the probability section. 1/5=20%?
The confidence interval tells ‘from’ and ‘to’ what percentage may be the probability of that issue.
If you have 5 respondents confidence interval is about 35%.
If you have 20 respondents confidence interval is about 17.5%;
If you have 100 respondents confidence interval is about 8%;
If you have 200 respondents confidence interval is about 5.5%;
Even if you faced issues just once for 5 respondents there is a good chance it is a one for about 20(±35)% of respondents.
More details about confidence interval — Here
8. Continuous variable
One that gives a score for each person and can take on any value on a measurement scale that you are using.
- Interval variable: equal intervals on the variable (e.g. on the scale of 1 to 5 ratings, the difference between 1 and 3 is equivalent to the difference between 3 and 5)
- Ratio variable: the same as the interval variable, but in terms of ratio (e.g. a reaction time of 4 seconds is twice as long as a reaction time of 2 seconds and a half as long as a reaction time of 8 seconds).
In correlational (qual) research we observe what naturally goes on in the world without directly interfering with it, whereas in experimental (quant) research we manipulate one variable to see its effect on another. Regardless of the method you choose, keep in mind that behavior consists of a continuous stream of movements and events. Before it can be reliably measured, the stream must be divided up into discrete categories.
Inexperienced researchers often record too much. A stream of behavior could potentially be described in a limitless number of ways, so it’s important to be selective. The fewer categories used, the more reliably each will be measured and all of them can be organized according to the nominal, ordinal, interval, or ratio variables. For example, “it took P1 twice as long to find the ‘Checkout’ button than P2”.
Latency is the time from the beginning of the observation to the first occurrence of the behavior. Frequency is the total number of occurrences divided by the total observation time (3/t). The total duration of the behavior is a + b + c units of time and the mean duration is the total duration divided by three. Finally, the intensity is the amplitude of the behavior represented by the height of the rectangles.
Latency measured in units of time (s, min, h)
Frequency measured in reciprocal units of time (s-1, min-1, h-1)
Duration measured in units of time (s, min, h)
Intensity is helpful in assessing the amplitude of a behaviour pattern and can be measured in terms of some physical quantity related to behaviour,