Weber's Law states that the smallest noticeable change in a stimulus is proportional to the original stimulus intensity. This means that the greater the intensity of the stimulus, the greater the absolute change is that is required for us to perceive the same relative change. This finding is a basis of psychophysics and shows that our sensory perception is proportional rather than linear.

For example, if we are asked to hold two objects of different weights in our hands, the JND is the «Just Noticeable Difference» in weight between the two. The heavier the stones are, the greater the difference in weight must be for us to perceive it.

Origin

Weber's Law goes back to the German physiologist Ernst Heinrich Weber, who first described it in 1834. Later, Gustav Theodor Fechner expanded on these findings, which led to the so-called Weber-Fechner Law.

  • Weber, E. H. (1834). De pulsu, resorptione, auditu et tactu. Leipzig: Koehler.
  • Fechner, G. T. (1860). Elemente der Psychophysik. Leipzig: Breitkopf und Härtel.

Application in UX and UI design

In UX and UI design, Weber's Law can be used to make deliberate use of perceptual differences in size, color, or brightness. The larger or more intense an interface element already is, the more noticeable later changes must be for users to perceive them. This helps to make design decisions that aim for real differences, rather than making imperceptible adjustments.

Considerations of this kind should be applied, for example, to font size variations. We can easily distinguish between a font size of 9 and 10px, but we can hardly see a difference between a font size of 72 and 73px. Font size graduations should therefore increase proportionally with the font size. A graduation along the Fibonacci series (... 8, 13, 21, 34, 55 ...) which corresponds to a proportion in the Golden Ratio (1 : 1.61) is very useful.

A useful range of font sizes would therefore be:

  • 10px – for legal notices and the like.
  • 16px – as the standard font size for body text
  • 26px – for smaller headings (teaser boxes, H3 - H4)
  • 42px – for H2s
  • 68px – for the H1 of a page

Impact on the User Experience

medium

Further information