Что такое отзывчивость интерфейса. Важность :hover :focus :active CSS стилей

Обновлено 24 июл. 2019 г.

У устройств Apple, задержка между касанием экрана и реакцией интерфейса 0.1 секунды. У Android-устройств эта задержка больше. Большинство людей не замечают этой разницы. Но после продолжительного использования мозг выбирает устройства Apple как более предпочтительные.

Почему это происходит? В реальной жизни, когда мы касаемся предмета, он двигается мгновенно. В реальной жизни задержек не существует и мозг воспринимает это как норму. Когда мы работаем с графическим интерфейсом смартфона, любая задержка дольше 0.1 секунды регистрируется как сбой и запускает в мозгу процесс анализа. На это мгновение человек автоматически задумывается о причинах такого поведения, вдруг он не туда нажал или недостаточно сильно надавил пальцем. Это нагружает мозг и снижает комфорт от пользования устройством.

То же касается и интерактивности дизайна. Если при наведении курсора мыши на кнопку, она не меняет внешний вид, то это не соответствует интуитивным ожиданиям и мозг запускает процесс анализа.

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

Нужно исключить все поводы отвлекать внимание пользователя от исследования сайта. Следовательно, все действия должны соответствовать интуитивным ожиданиям, а именно: - Кнопки, ссылки и поля ввода должны реагировать на наведение курсора мыши. А курсор мыши должен менять дизайн на pointer. - Все кнопки и ссылки должны менять внешний вид при нажатии.

Вы можете проверить свой сайт на интерактивность в нашем онлайн-сервисе (“:hover :focus :active checker)[https://site.test/tools/responsive-interface “Free online tool to check page for interactive.”].