Размер
На больших мониторах можно смело выставлять длину кнопки 50,60,70 и даже 100! Курсор то маленький, ещё попробуй прицелься. А вот на мобильных устройствах 100px уже «занадто», поэтому уменьшай до 30–50, будет в самый раз
Логика!
Для того чтобы сайтом было удобно пользоваться, его блоки/элементы должны быть логически расположены. Если есть призыв к действию - должна быть кнопка. Если в поп апе у вас кнопка “получить” справа, а “отмена” слева, то и в остальных поп апах эти кнопки должно иметь такое же расположение. Не нужно делать сайт в режиме “первого свидания”, когда вы хотите рассказать о себе побольше и показать все свои умения)
Анимация
Когда при клике на кнопку не происходит никакого отклика от сайта, то пользователь может подумать, что система лагает и будет кликать по 100 раз. Не мучайте пользователей, создавайте режимы для кнопок: hover,active,focus
А по запросу «buttons interactiron» ты сможешь найти много примеров крутых анимаций для вдохновения
Важность
Чем заметнее кнопка - тем важнее действие. Конверсионные действия всегда должны быть самые крупные, яркие и заметные, чтобы их невозможно было пропустить. Далее вы можете добавить второстепенные кнопки используя контурную заливку или менее контрастный цвет, а то и вовсе кнопку-ссылку
Куча кнопок
Большое количество кнопок запутает кого угодно, это точно не лучшее решение. На одном экране лучше размещать 1–3 кнопки (и то, соблюдая иерархию и предыдущее правило) Люди и в трёх соснах могут заблудиться, а вы их в целых лес телепортируете))
Не выдумывай
Не нужно изобретать велосипед, за тебя уже все придумали. Крупные компании в свое время потратили миллионы, чтобы провести UX-исследования и прийти к выводам, которые были описаны ранее
И всем этим они делятся с нами, бесплатно, бери да пользуйся, это же круто!)
Если у вас тяга к другим соц сетям и здесь бываете редко, у меня есть аккаунты и там, подписывайтесь:
Инстаграм: https://www.instagram.com/rigayaya/
Ютуб: https://youtube.com/channel/UCpCzjJDxLMcgld1gVwLmlNA
Вк: https://vk.com/rigayaya_design
Тик ток: www.tiktok.com/@rigayaya
Behance: https://www.behance.net/rigayaya