Сегодня в рубрике «Дизайн-законы» у нас серьёзный представитель — закон Вебера-Фехнера. Это психофизический закон, который описывает зависимость между интенсивностью стимула и его субъективным восприятием человеком. У него даже есть собственная формула, кому интересно, можете погуглить).
Если говорить проще, человек до определённого момента воспринимает раздражители разной интенсивности как одинаковые. Например, вы несёте в сумке 10 книг. Если добавить ещё одну, вы вряд ли почувствуете разницу. Но если добавить ещё 10, разницу вы ощутите сразу)).
Закон Вебера-Фехнера играет важную роль в дизайне интерфейсов. Мы применяем его, меняя размеры и пропорции элементов. Размеры кнопок, иконок и других интерактивных элементов должно быть относительным. Если основная кнопка имеет размер 100×40 пикселей, то для акцентной кнопки лучше сделать 110×44 (увеличение на 10%). Пользователь быстрее заметит изменение, если оно пропорционально исходному значению.
Если мы хотим изменить яркость и цвет, разница должна быть заметна относительно уже имеющейся. Например, затемнение фона на 20% для выделения элемента эффективнее, чем фиксированное уменьшение яркости на 30 пунктов. Текст на кнопке должен иметь контрастность не менее 4.5:1 к фону (по WCAG), но если фон тёмный, то осветление текста на 15% будет заметнее, чем на фиксированное значение.
Где ещё применяется закон? В анимации: её скорость должна учитывать начальное состояние. Плавное увеличение элемента воспринимается естественнее, чем резкий переход. При наведении на карточку товара её увеличение на 5% выглядит гармоничнее, чем сильное увеличение.
Прогресс-бар должен двигаться с учётом логарифмического восприятия времени.
Например, первые 50% могут заполняться быстрее, чтобы создать ощущение прогресса. Люди хуже оценивают абсолютное время, но чувствуют относительный прогресс.
Итак, закон Вебера-Фехнера в дизайне интерфейсов помогает делать изменения заметными, но не резкими, подбирать естественные пропорции для размеров, анимаций и контраста, а также учитывать восприятие пользователя, а не только математические метрики.
Применяя этот закон, можно создавать интерфейсы, которые чувствуются интуитивно правильными.
Если говорить проще, человек до определённого момента воспринимает раздражители разной интенсивности как одинаковые. Например, вы несёте в сумке 10 книг. Если добавить ещё одну, вы вряд ли почувствуете разницу. Но если добавить ещё 10, разницу вы ощутите сразу)).
Закон Вебера-Фехнера играет важную роль в дизайне интерфейсов. Мы применяем его, меняя размеры и пропорции элементов. Размеры кнопок, иконок и других интерактивных элементов должно быть относительным. Если основная кнопка имеет размер 100×40 пикселей, то для акцентной кнопки лучше сделать 110×44 (увеличение на 10%). Пользователь быстрее заметит изменение, если оно пропорционально исходному значению.
Если мы хотим изменить яркость и цвет, разница должна быть заметна относительно уже имеющейся. Например, затемнение фона на 20% для выделения элемента эффективнее, чем фиксированное уменьшение яркости на 30 пунктов. Текст на кнопке должен иметь контрастность не менее 4.5:1 к фону (по WCAG), но если фон тёмный, то осветление текста на 15% будет заметнее, чем на фиксированное значение.
Где ещё применяется закон? В анимации: её скорость должна учитывать начальное состояние. Плавное увеличение элемента воспринимается естественнее, чем резкий переход. При наведении на карточку товара её увеличение на 5% выглядит гармоничнее, чем сильное увеличение.
Прогресс-бар должен двигаться с учётом логарифмического восприятия времени.
Например, первые 50% могут заполняться быстрее, чтобы создать ощущение прогресса. Люди хуже оценивают абсолютное время, но чувствуют относительный прогресс.
Итак, закон Вебера-Фехнера в дизайне интерфейсов помогает делать изменения заметными, но не резкими, подбирать естественные пропорции для размеров, анимаций и контраста, а также учитывать восприятие пользователя, а не только математические метрики.
Применяя этот закон, можно создавать интерфейсы, которые чувствуются интуитивно правильными.