Закон Вебера-Фехнера: почему 10% лучше, чем 10 пикселей

Сегодня в рубрике «Дизайн-законы» у нас серьёзный представитель — закон Вебера-Фехнера. Это психофизический закон, который описывает зависимость между интенсивностью стимула и его субъективным восприятием человеком. У него даже есть собственная формула, кому интересно, можете погуглить).

Если говорить проще, человек до определённого момента воспринимает раздражители разной интенсивности как одинаковые. Например, вы несёте в сумке 10 книг. Если добавить ещё одну, вы вряд ли почувствуете разницу. Но если добавить ещё 10, разницу вы ощутите сразу)).

Закон Вебера-Фехнера играет важную роль в дизайне интерфейсов. Мы применяем его, меняя размеры и пропорции элементов. Размеры кнопок, иконок и других интерактивных элементов должно быть относительным. Если основная кнопка имеет размер 100×40 пикселей, то для акцентной кнопки лучше сделать 110×44 (увеличение на 10%). Пользователь быстрее заметит изменение, если оно пропорционально исходному значению.

Если мы хотим изменить яркость и цвет, разница должна быть заметна относительно уже имеющейся. Например, затемнение фона на 20% для выделения элемента эффективнее, чем фиксированное уменьшение яркости на 30 пунктов. Текст на кнопке должен иметь контрастность не менее 4.5:1 к фону (по WCAG), но если фон тёмный, то осветление текста на 15% будет заметнее, чем на фиксированное значение.

Где ещё применяется закон? В анимации: её скорость должна учитывать начальное состояние. Плавное увеличение элемента воспринимается естественнее, чем резкий переход. При наведении на карточку товара её увеличение на 5% выглядит гармоничнее, чем сильное увеличение.

Прогресс-бар должен двигаться с учётом логарифмического восприятия времени.

Например, первые 50% могут заполняться быстрее, чтобы создать ощущение прогресса. Люди хуже оценивают абсолютное время, но чувствуют относительный прогресс.

Итак, закон Вебера-Фехнера в дизайне интерфейсов помогает делать изменения заметными, но не резкими, подбирать естественные пропорции для размеров, анимаций и контраста, а также учитывать восприятие пользователя, а не только математические метрики.

Применяя этот закон, можно создавать интерфейсы, которые чувствуются интуитивно правильными.