Из этого материала вы узнаете, о цвете и правильном расположении кнопки для сайта:
Основная функция кнопки на сайте, это привлечь внимание клиента для определенного действия. А именно нажать на нее.
Однозначно понятно, что яркая кнопка будет привлекать внимание больше, чем ссылка, спрятанная в слове, но тут важно не переусердствовать. Яркие краски и кнопки на сайте в огромном количестве будут давить на клиента и отвлекать от сути.
Стоит выделить 2 основных вида кнопок, которые можно верстать HTML-тегом:
- Кнопка-ссылка, она создается при теге <a>. Она выглядит аккуратно и ее основная задача – это помочь клиенту перейти на нужную страницу.
- Кнопка-действие, ее можно обозначить при помощи тегов <button> или <input>. Тут уже должно появиться конкретное действие: форма для записи, скачать файл и т.д.)
Кнопки несут вспомогательную помощь, но также их настройка может поднять конверсию. Если перегрузить сайт ненужными кнопками, то это не только будет отвлекать клиента, но и замедлять загрузку самого сайта.
Чтобы не запутаться с правилами размещения кнопки для сайта, стоит учесть 9 пунктов.
- Клиент интуитивно должен понимать, где находятся кнопки. К примеру, при переходе вперед/назад кнопки должны располагаться рядом, чтобы можно было их быстро найти.
- Кнопки должны показывать стиль бренда. Они должны быть красивыми, привлекательными и в одном стиле с сайтом.
- Второстепенные элементы не должны перебивать основные. Углы можно скруглить в одном стиле, а вот их цвет и яркость все же должны отличаться.
- Не нужно переусердствовать с тенями. Многие дизайнеры решают сделать акцент на какой-то фигуре, но в итоге тень становится явным элементом и бесформенным пятом. Выглядит это не аккуратно.
- Единый визуальный стиль должен быть во всех элементах. Тяжело, когда есть дополнительные функции, не воспользоваться ими, но лучше не делать из этого кашу.
- Кнопки-призраки не должны пропадать. Их безусловно стоит делать менее яркими и привлекающими внимание, но они должны быть заметными. Текст должен хорошо читаться и очертания должно сохраняться. Проще всего – сделать белую заливку.
- Простые кнопки «ОК» не хочется нажимать. Да, они простые и понятное, но стоит все же связывать СТА с конкретным действием.
- Целевая кнопка находится в нижнем правом угле. Клиент интуитивно выбирает именно это расположение, согласно многим исследованиям (например, Гутенберга). Больше всего внимания у левого верхнего угла и у правого нижнего.
- Я правой части окон кнопки «Заказать/Подтвердить» нажимаю чаще. Так как русскоязычный клиент читает слева направо, результат действий находится в конце.
Это основные правила, которые стоит учитывать. Также частые ошибки в дизайне:
- Кнопка слилась с фоном и клиент ее не увидел
- Надпись слишком нестандартная и клиент запутался
- Кнопка не похожа на кнопку из-за нестандартности и клиент ее пропускает
- Кнопка не подписана и клиент не знает, что нажимать
- Кнопка двигается и клиент не может поймать ее.
Если следовать простому алгоритму и правилам, то конверсия кнопок Leadback возрастает. Главное правило – клиенту должно быть удобно прочитать и нажать.