Как избежать типичных ошибок в дизайне кнопок

Перевод статьи Адхама Даннавея, в которой он сначала разбирает 9 распространённых ошибок при проектировании кнопок, а затем показывает пример группы кнопок, которые отвечают требованиям доступности и удобства использования. В заключение автор даёт 6 советов, которые помогут создать правильную визуальную иерархию кнопок, сделать их контрастными, удобными для попадания по ним и расположить их на достаточном расстоянии друг от друга

🙂 awdee.ru/button-design-tips-to-avoid-common-mistakes

#awd_article #awd_ui

Шпаргалка по доступным областям нажатия

Перевод статьи Виталия Фридмана о размерах интерактивных элементов в мобильных интерфейсах

В статье автор рассказал:
— Об общепринятых рекомендациях в отношении областей нажатия. Они должны быть не менее 44×44 px, а в случаях кликабельных элементов в тексте — не менее 27×27 px

— О том, что кликабельные элементы по краям экрана должны быть больше по размеру, чем элементы, расположенные в центре

— О случаях, когда в нижней навигации количество пунктов меню превышает 5. Здесь стоит создать нижний оверлей, который будет скользить вверх/вниз вдоль основного экрана, а не стараться втиснуть все пункты в нижнюю панель навигации

— Об альтернативе всплывающим при наведении иконкам в строке сложных таблиц в виде кнопки «Действия» («Actions»)

— О помощнике, который необходим пользователю для выполнения сложных действий в интерфейсе

— О случаях, когда покупатель хочет выбрать цвет в интернет-магазине, а колорпикер слишком маленький. Тогда уместно добавить дополнительное касание, которое увеличит колорпикер, чтобы человек точно попал по цвету, который ему нравится

— О том, что всегда следует делать всю ширину или высоту элемента кликабельной, а также добавлять в область нажатия достаточные по размеру внутренние отступы

Эти практические приёмы помогут дизайнерам интерфейсов избежать «кликов ярости» со стороны пользователей

🙂️️️️ awdee.ru/accessible-target-sizes-cheatsheet

#awd_article #awd_ui