Правильные кнопки для сайтов: о цвете и расположении

Из этого материала вы узнаете, о цвете и правильном расположении кнопки для сайта:

Основная функция кнопки на сайте, это привлечь внимание клиента для определенного действия. А именно нажать на нее.

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

Стоит выделить 2 основных вида кнопок, которые можно верстать HTML-тегом:

  • Кнопка-ссылка, она создается при теге <a>. Она выглядит аккуратно и ее основная задача – это помочь клиенту перейти на нужную страницу.
  • Кнопка-действие, ее можно обозначить при помощи тегов <button> или <input>. Тут уже должно появиться конкретное действие: форма для записи, скачать файл и т.д.)

Кнопки несут вспомогательную помощь, но также их настройка может поднять конверсию. Если перегрузить сайт ненужными кнопками, то это не только будет отвлекать клиента, но и замедлять загрузку самого сайта.

Чтобы не запутаться с правилами размещения кнопки для сайта, стоит учесть 9 пунктов.

  1. Клиент интуитивно должен понимать, где находятся кнопки. К примеру, при переходе вперед/назад кнопки должны располагаться рядом, чтобы можно было их быстро найти.
  2. Кнопки должны показывать стиль бренда. Они должны быть красивыми, привлекательными и в одном стиле с сайтом.
  3. Второстепенные элементы не должны перебивать основные. Углы можно скруглить в одном стиле, а вот их цвет и яркость все же должны отличаться.
  4. Не нужно переусердствовать с тенями. Многие дизайнеры решают сделать акцент на какой-то фигуре, но в итоге тень становится явным элементом и бесформенным пятом. Выглядит это не аккуратно.
  5. Единый визуальный стиль должен быть во всех элементах. Тяжело, когда есть дополнительные функции, не воспользоваться ими, но лучше не делать из этого кашу.
  6. Кнопки-призраки не должны пропадать. Их безусловно стоит делать менее яркими и привлекающими внимание, но они должны быть заметными. Текст должен хорошо читаться и очертания должно сохраняться. Проще всего – сделать белую заливку.
  7. Простые кнопки «ОК» не хочется нажимать. Да, они простые и понятное, но стоит все же связывать СТА с конкретным действием.
  8. Целевая кнопка находится в нижнем правом угле. Клиент интуитивно выбирает именно это расположение, согласно многим исследованиям (например, Гутенберга). Больше всего внимания у левого верхнего угла и у правого нижнего.
  9. Я правой части окон кнопки «Заказать/Подтвердить» нажимаю чаще. Так как русскоязычный клиент читает слева направо, результат действий находится в конце.

Это основные правила, которые стоит учитывать. Также частые ошибки в дизайне:

  • Кнопка слилась с фоном и клиент ее не увидел
  • Надпись слишком нестандартная и клиент запутался
  • Кнопка не похожа на кнопку из-за нестандартности и клиент ее пропускает
  • Кнопка не подписана и клиент не знает, что нажимать
  • Кнопка двигается и клиент не может поймать ее.

Если следовать простому алгоритму и правилам, то конверсия кнопок Leadback возрастает. Главное правило – клиенту должно быть удобно прочитать и нажать.

Поделиться ссылкой:

Оставить комментарий