Ваши клиенты ненавидят сломанные кнопки. Исправьте это сейчас.

Сломанная кнопка может незаметно превратить готового посетителя в потерянного клиента. Я видел, как это происходило на страницах продуктов, контактных формах, экранах бронирования и страницах оформления заказа. Страница выглядит отполированной. Предложение легко понять. Посетитель нажимает «Получить цену» или «Продолжить оформление заказа», и ничего не происходит. Некоторые посетители пытаются еще раз. Многие уходят, не сообщив о проблеме. Небольшая проблема с кнопкой может повлиять на доверие, продажи, отправку форм и данные, которые вы используете для оценки своего маркетинга. Если в ваших отчетах показано меньше конверсий, возможно, проблема не в тексте вашего объявления или ценах. Кнопка, ссылка, форма или макет мобильного устройства могут блокировать следующий шаг. ## Начните с пути клиента. Я начинаю с тестирования полного пути, по которому следует клиент: 1. Откройте целевую страницу. 2. Прочитайте основное предложение. 3. Нажмите главную кнопку. 4. Заполните форму или выберите товар. 5. Отправьте запрос или разместите заказ. 6. Проверьте сообщение с подтверждением и последующее электронное письмо. Этот путь следует протестировать на телефоне, планшете и настольном компьютере. Кнопка может хорошо работать с мышью, но не работать, когда посетитель нажимает на нее на маленьком экране. Я также тестирую разные браузеры. Chrome, Safari, Edge и Firefox могут по-разному обрабатывать сценарии, всплывающие окна и поля форм. Страница, которая работает в одном браузере, может некорректно реагировать в другом. Полезный тест не прекращается после первого нажатия. Я проверяю, что происходит до и после действия кнопки. Страница перемещается в нужный раздел? Форма открывается? Сообщение о загрузке появляется? Страница подтверждения загружается? ## Проверьте, видна ли кнопка. Работающая кнопка все равно может терять клиентов, если люди не могут ее найти. Сначала я просматриваю страницу на телефоне, потому что посетители с мобильных устройств часто видят только часть экрана одновременно. Вокруг основной кнопки должно быть достаточно места, чистый текст и размер, позволяющий нажимать без перехода по другой ссылке. Текст кнопки также влияет на доверие пользователя. «Отправить» дает мало контекста. «Запросить цену» сообщает посетителю, что произойдет дальше. «Продолжить» может работать во время оформления заказа, но на странице услуги может показаться неясным. Кнопка должна соответствовать действию, обещанному на странице. Если на странице описана бесплатная консультация, кнопка с надписью «Скачать руководство» может вызвать сомнения. Последовательные формулировки помогают посетителям двигаться вперед, не догадываясь. ## Проверка действия по клику Кнопка может выглядеть активной, пока ее код не работает. Я проверяю распространенные причины, такие как: - Отсутствующая или неверная ссылка - Поле формы, блокирующее отправку - Ошибки JavaScript - Всплывающее окно, заблокированное браузером - Скрипт загрузки, который никогда не завершается - Кнопка, расположенная под другим элементом страницы - Неактивное состояние, которое не выключается - Инструмент оплаты или бронирования, потерявший соединение Инструменты разработчика браузера могут отображать ошибки после щелчка. Аналитика веб-сайта также может показать, где люди останавливаются. Если многие посетители доходят до страницы оформления заказа, но лишь немногие доходят до этапа оплаты, проблема может быть внутри процесса оформления заказа, а не на целевой странице. Я не рассчитываю на один успешный тест. Один щелчок на моем компьютере не отражает каждого клиента. Повторяю тест с разными устройствами, размерами экранов, браузерами и скоростью соединения. ## Анализ поведения на мобильных устройствах Большая часть посещений веб-сайта может происходить с мобильных устройств, поэтому тестирование мобильных кнопок требует отдельного процесса. Я проверяю: - Кнопка помещается внутри экрана - Текст остается читаемым - В области касания достаточно места - Баннер cookie закрывает кнопку - Закрепленное меню блокирует действие - Страница прыгает при нажатии кнопки - Форма открывается выше или ниже видимой области - Клавиатура скрывает следующее поле или кнопку Клиенту не нужно сжимать экран, поворачивать телефон или выполнять поиск по странице, чтобы выполнить простое действие. Я также тестирую более медленные соединения. Тяжелые изображения, сторонние скрипты и инструменты отслеживания могут задержать нажатие кнопки или сделать страницу зависшей. Короткое сообщение о загрузке может помочь людям понять, что запрос обрабатывается. ## Упрощение исправления ошибок Формы часто терпят неудачу, не сообщая посетителям, что пошло не так. Сообщение типа «Неверный ввод» мало помогает. Я предпочитаю прямое указание рядом с соответствующим полем: - «Введите действительный адрес электронной почты». - «Выберите вариант доставки». - "Это поле обязательно к заполнению." - «Ваше сообщение должно содержать не менее 20 символов». Сообщение должно оставаться видимым после того, как посетитель исправит форму. Если страница очистит все поля после одной ошибки, многие люди скорее уйдут, чем начнут заново. Я также слежу за тем, чтобы кнопка не отправляла форму дважды. Когда посетитель нажимает несколько раз, сайт должен показывать кратковременное состояние загрузки и предотвращать дублирование запросов. Это защищает качество обслуживания клиентов и уменьшает количество предотвратимых проблем с заказами или потенциальными клиентами. ## Используйте данные для поиска скрытых проблем. Аналитика может показать, что страница получает трафик, но сам по себе трафик не говорит мне, работает ли страница. Я отслеживаю полезные события, такие как: - Просмотры кнопок - Нажатия кнопок - Запуск форм - Ошибки форм - Отправка форм - Ход оформления заказа - Неудачи при оплате - Посещения страниц подтверждения Цифрам нужен контекст. Высокий процент кликов и низкий процент завершения могут указывать на проблему с формой или оплатой. Низкий показатель кликов может указывать на неясный текст кнопки, слабую структуру страницы, плохое размещение или техническую проблему. Я также сравниваю данные устройств. Если посетители с настольных компьютеров заполняют форму, а посетители с мобильных устройств останавливаются после нажатия, я сосредотачиваюсь на мобильном опыте, прежде чем менять предложение. Простая запись сеанса может помочь выявить поведение, которое не учитывают цифры. Вы можете увидеть, как люди нажимают на изображение, похожее на кнопку, прокручивают его вперед и назад или несколько раз нажимают на отключенный элемент управления. ## Изучите практический пример. Представьте себе местную ремонтную компанию, на странице которой написано «Закажите визит на дом». Кнопка работает на настольном компьютере, но на мобильном устройстве нижнюю часть экрана закрывает баннер конфиденциальности. Посетители видят кнопку, но не могут ее нажать. Компания может предположить, что странице требуется больше трафика. Реальную проблему решить проще: переместите баннер, добавьте пространство вокруг кнопки и протестируйте форму бронирования на нескольких телефонах. Другой пример касается интернет-магазина. Кнопка «Добавить в корзину» работает, но покупатели не получают видимого ответа после нажатия на нее. Некоторые люди нажимают повторно, создавая дубликаты элементов. Другие предполагают, что страница не удалась, и уходят. Четкое состояние загрузки, обновление корзины и короткое сообщение с подтверждением могут облегчить понимание следующего шага. ## Создайте процедуру перед публикацией изменений. Я использую небольшой контрольный список выпуска: - Проверьте главную кнопку на настольном компьютере и мобильном устройстве - Откройте страницу в нескольких браузерах - Отправьте форму с действительными и недействительными данными - Проверьте страницу подтверждения - Проверьте условия медленной загрузки - Подтвердите запись событий аналитики - Просмотрите страницу с помощью программы чтения с экрана или клавиатуры - Попросите другого человека выполнить действие без подсказок Этот последний шаг может выявить запутанные формулировки. Я уже знаю, для чего предназначена эта кнопка, поэтому могу упустить из виду проблему, которая покажется очевидной новому посетителю. Сломанная кнопка редко бывает просто деталью дизайна. Это может прервать решение клиента именно в тот момент, когда доверие должно перерасти в действие. Я проверяю весь путь, проверяю мелкие детали и использую поведение клиентов для руководства каждым исправлением. Когда посетитель может увидеть следующий шаг, понять его и выполнить без проблем, у страницы больше шансов достичь бизнес-цели.

Сломанная кнопка может остановить продажу до того, как покупатель дойдет до кассы. Я видел, как покупатели читали информацию о товаре, выбирали размер, выбирали способ оплаты, а затем нажимали кнопку, которая ничего не делала. Некоторые ждут. Некоторые кликают еще раз. Многие уходят, не сообщив о проблеме. С точки зрения покупателя магазин может выглядеть ненадежным, даже если товар и обслуживание хорошие. Кнопка делает больше, чем просто отправляет форму или добавляет товар в корзину. Оно направляет следующие действия. Когда это действие терпит неудачу, процесс покупки сбивается с пути. ## Как выглядит сломанная кнопка Сломанная кнопка не всегда полностью не реагирует. Он может: - Ничего не делать после щелчка - Работать на настольном компьютере, но не работать на мобильном устройстве - Открыть не ту страницу - Показывать ошибку после отправки формы - Добавить неправильный продукт в корзину - Оставаться отключенным после заполнения обязательных полей - Отправлять один и тот же заказ более одного раза - Вписаться в страницу, чтобы клиенты этого не заметили - Перестать работать после обновления темы, плагина или скрипта Некоторые проблемы легко обнаружить. Другие появляются только при определенных условиях, например в зависимости от конкретного браузера, размера экрана, варианта продукта или способа оплаты. Это делает регулярное тестирование кнопок частью поддержки продаж, а не просто задачей проектирования. ## Начните с основных путей клиентов. Я не тестирую каждую страницу наугад. Начну с действий, наиболее близких к доходу: 1. Открыть страницу товара. 2. Выберите необходимые параметры. 3. Добавьте товар в корзину. 4. Обновите количество в корзине. 5. Начните оформление заказа. 6. Введите данные клиента. 7. Выберите доставку и оплату. 8. Разместите заказ. 9. Отправьте контактную форму или форму предложения. Я тестирую эти пути так, как их использовал бы клиент. Кнопка может работать при нажатии на одной странице, но не работать, когда покупатель достигает ее после изменения опции продукта. Простой лист испытаний может включать: | Страница | Действие кнопки | Устройство | Браузер | Результат | |---|---|---|---|---| | Страница продукта | В корзину | Мобильный | Хром | Работы | | Страница корзины | Обновить количество | Мобильный | Сафари | Не удалось | | Оформить заказ | Разместить заказ | Рабочий стол | Край | Работы | Эта запись помогает мне находить закономерности, а не полагаться на память. ## Проверка поведения на мобильных устройствах Многие клиенты просматривают и покупают с телефона. Кнопка может выглядеть нормально на большом экране и становится трудной для использования на маленьком. Я проверяю: - Кнопка остается видимой, не перекрывая другое содержимое - Текст помещается внутри кнопки - Вокруг кнопки достаточно места - Палец может коснуться ее, не затрагивая другой элемент управления - Страница перемещается в правильный раздел после касания - После отправки появляется состояние загрузки - Кнопка остается пригодной для использования, когда телефон удерживается вертикально Распространенная проблема возникает, когда фиксированное меню закрывает нижнюю часть страницы. Кнопка есть, но клиент не может на нее нажать должным образом. Небольшое изменение макета может удалить блок. ## Просмотрите код и инструменты сайта. Неработающие кнопки часто возникают из-за изменений, произошедших за пределами самой кнопки. Новый скрипт может остановить запуск события щелчка. Плагин может конфликтовать с процессом оформления заказа. Инструмент отслеживания может задержать отправку формы. Недавнее обновление темы может изменить класс или ссылку кнопки. Я проверяю: - Ошибки консоли браузера - Ссылки кнопок и действия форм - События кликов JavaScript - Обновления плагинов и тем - Настройки оформления заказа - Сообщения платежного шлюза - Правила проверки формы - Пути перенаправления - Состояния загрузки и отключения. Разработчик может использовать инструменты браузера, чтобы подтвердить, достигает ли клик скрипта страницы. Это может уменьшить количество догадок и помочь отделить проблему проектирования от технической проблемы. ## Сделайте действие простым для понимания. Кнопка должна сообщать клиентам, что произойдет дальше. «Купить сейчас» может соответствовать потоку прямых покупок. «Добавить в корзину» подходит для магазинов, где покупатели могут продолжать просмотр. «Запросить цену» лучше подходит для услуг, которым нужны данные о клиенте. Формулировка должна соответствовать действию. Если на кнопке написано «Начать», но открывается длинная контактная форма, некоторые посетители могут быть не уверены в следующем шаге. Я также избегаю размещения нескольких кнопок одинакового визуального веса рядом друг с другом. Когда каждый вариант выглядит как основное действие, клиенты могут сделать паузу вместо того, чтобы сделать выбор. ## Добавляйте полезную обратную связь после каждого нажатия. Клиентам нужен четкий ответ после взаимодействия с кнопкой. На странице может отображаться: - Индикатор загрузки - Сообщение с подтверждением - Обновление количества корзин - Видимая ошибка рядом с затронутым полем - Ссылка для повтора действия - Ясная причина, по которой форма не может быть отправлена ​​Незаметный сбой вызывает сомнения. Полезное сообщение дает клиенту путь вперед. В сообщении следует использовать простой язык. «Пожалуйста, выберите размер перед добавлением этого элемента» помогает больше, чем «Ошибка проверки: требуется опция». ## Тестируйте после каждого серьезного изменения. Я тестирую кнопки после: - Редактирования тем - Обновлений плагинов - Изменения оформления заказа - Изменения настроек оплаты - Новых шаблонов продуктов - Редактирования форм - Обновлений кода отслеживания - Работа со скоростью страницы Я также тестирую сеансы входа в систему и гостевые сеансы, когда оба доступны. Кэшированные страницы могут скрывать изменения, поэтому я проверяю новый сеанс браузера и мобильное устройство. В одном небольшом интернет-магазине, который я рассматривал, была кнопка «Добавить в корзину», которая работала для стандартных продуктов, но не работала, когда клиенты выбирали индивидуальный вариант. На странице товара не было явной ошибки, поэтому владелец полагал, что магазин получает меньший интерес. Вопрос был не в спросе. Выбранный вариант не был правильно отправлен в корзину. Такая проблема может остаться скрытой, если тестирование охватывает только самый простой продукт. ## Отслеживайте клики и неудачные действия. Аналитика может показать, откуда люди уходят, но для данных необходим контекст. Высокий процент выходов на странице продукта может быть обусловлен слабым контентом, медленной загрузкой или кнопкой, которая не работает после выбора. К полезным событиям относятся: - Щелчки по добавлению в корзину - Начало оформления заказа - Отправка форм - Ошибки оплаты - Повторные нажатия кнопок - Обновления корзины - Успешные подтверждения заказов Повторные клики являются полезным сигналом. Они могут показывать, что страница не отвечает, медленно загружается или блокирует действие. Сломанные кнопки — это небольшие технические проблемы, которые напрямую влияют на доверие клиентов. Я рассматриваю их как часть пути продаж, тестирую на распространенных устройствах и даю клиентам четкую обратную связь после каждого действия. Работающая кнопка не гарантирует продажу, но неисправная может удалить следующий шаг до того, как покупатель успеет принять решение.

Клиент нажимает «Добавить в корзину», «Заказать демо» или «Оплатить сейчас». Ничего не происходит. Страница может выглядеть безупречно, предложение может соответствовать потребностям посетителя, а процесс оформления заказа может быть готов. Сломанная кнопка все равно может остановить все путешествие. Некоторые посетители обновят страницу. Многие уйдут, не сообщив о проблеме. Я видел, как это происходило на страницах продуктов, контактных формах, мобильных меню и экранах оформления заказа. Проблема часто небольшая: неправильная ссылка, заблокированный скрипт, скрытая кнопка или форма, которая не отправляет данные. Эффект может выйти далеко за пределы одной страницы. ## Начните с пути клиента Я не начинаю с проверки каждой кнопки на веб-сайте. Я иду по пути, по которому должен идти клиент. Для интернет-магазина этот путь может выглядеть следующим образом: - Страница продукта - Добавить в корзину - Обзор корзины - Оформить заказ - Оплата - Подтверждение заказа Для сферы услуг это может быть: - Страница услуги - Форма запроса - Контактные данные - Запрос на встречу - Сообщение с подтверждением Я открываю путь, как это сделал бы посетитель. Я пользуюсь телефоном и настольным компьютером. Я тестирую основное действие на каждой странице вместо того, чтобы предполагать, что кнопка работает, потому что она выглядит правильно. Кнопка, открывающаяся на рабочем столе, может не работать на маленьком экране. Форма может быть успешно отправлена, когда я вошел в систему, но не может быть отправлена ​​обычному посетителю. Проверка полного пути помогает выявить проблемы, которые можно не заметить при быстрой визуальной проверке. ## Проверьте, что происходит после нажатия. Работающая кнопка должна давать четкий результат. Страница может открыть новый URL-адрес, добавить товар в корзину, отобразить сообщение формы, начать загрузку или отобразить экран подтверждения. Если посетитель не видит никаких изменений, я проверяю ответ страницы и консоль браузера на наличие ошибок. К частым причинам относятся: - Неправильный URL-адрес - Отсутствующая страница - Отключенное событие клика - Скрипт, который не загружается - Поле формы, помеченное как обязательное, без четких указаний - Кнопка, скрытая за другим элементом - Инструмент оплаты или бронирования, потерявший соединение - Мобильный макет, в котором кнопка размещается за пределами видимой области. Я также проверяю, является ли кнопка реальной ссылкой или только визуальным элементом. Четкая ссылка HTML дает пользователям и поисковым системам удобный путь. Кнопке, которая зависит от сценария, требуется подходящий резервный вариант, когда этот сценарий не запускается. ## Тестируйте каждую кнопку на мобильном устройстве Посетители мобильных устройств часто сталкиваются с проблемами, которые не видны на широком экране. Я проверяю: - Размер кнопки и интервал - Текст, который помещается внутри кнопки - Реакцию на нажатие - Прикрепленные баннеры, закрывающие кнопку - Уведомления о файлах cookie, блокирующие нижнюю часть страницы - Формы, выходящие за пределы экрана - Меню, которые открываются, но не могут быть закрыты - Медленно загружающиеся скрипты, которые задерживают действие Посетителю не нужно увеличивать масштаб, поворачивать телефон или нажимать несколько раз. Четкий текст, такой как «Отправить запрос» или «Просмотреть корзину», также помогает людям понять, что будет дальше. ## Сделайте сообщения об ошибках полезными Неудачное действие не должно оставлять посетителя в догадках. Сообщение типа «Что-то пошло не так» мало помогает. Лучшее сообщение объясняет следующий шаг: «Ваше сообщение не было отправлено. Проверьте поле электронной почты и повторите попытку». При возникновении проблем с оплатой на сайте может появиться сообщение: "Нам не удалось обработать этот платеж. Пожалуйста, проверьте данные своей карты или выберите другой способ оплаты". Сообщение должно появиться рядом с затронутым полем или действием. Оно должно оставаться читаемым на телефоне. Я избегаю обвинять клиента, особенно когда проблема исходит от веб-сайта. ## Просмотрите ссылки после изменений на веб-сайте. Неработающие кнопки часто появляются после редизайна, обновления плагина, изменения продукта или перемещения домена. Я веду простой список важных действий и просматриваю его после каждого крупного обновления: | Страница | Кнопка | Ожидаемый результат | Результат теста | |---|---|---|---| | Страница продукта | Добавить в корзину | Товар появляется в корзине | Работа | | Страница контактов | Отправить запрос | Появляется подтверждение | Требуется проверка | | Страница сервиса | Заказать звонок | Откроется страница бронирования | Работа | Этот список не должен быть сложным. Это дает мне возможность записать то, что важно, и упрощает будущие проверки. Владелец веб-сайта также может использовать инструменты проверки ссылок, аналитику, уведомления в форме и инструменты тестирования браузера. Эти инструменты могут указать на проблему, но я все равно проверяю путь клиента самостоятельно. В отчете может быть показано, что страница загружается, но при этом не учитывается тот факт, что основное действие завершается сбоем после щелчка. ## Следите за признаками в аналитике Внезапное изменение активности на веб-сайте может указывать на проблему с кнопкой. Полезные признаки включают в себя: - Просмотры товаров остаются стабильными, в то время как количество добавлений в корзину падает - Посещения форм продолжаются, а число отправленных заявок снижается - Количество заказов увеличивается, а количество выполненных заказов уменьшается - Мобильные пользователи покидают страницу гораздо чаще - Страница подтверждения не посещается после обновления сайта Эти цифры не доказывают, что кнопка сломана. Они показывают, где мне следует провести более тщательное тестирование. Например, интернет-магазин может получить такое же количество посещений страницы продукта после обновления темы, но активность корзины может упасть. Тестирование кнопки «Добавить в корзину» на нескольких устройствах может обнаружить, что скрипт больше не загружается на мобильных устройствах. ## Обеспечьте легкий доступ к важным действиям. Очистить кнопку поддерживает как пользователей, так и видимость при поиске. Поисковые системы могут лучше понять страницу, если ее содержание, ссылки, заголовки и действия соответствуют цели посетителя. Я использую описательный текст ссылок, а не расплывчатые ярлыки. «Загрузить руководство по ценам» говорит посетителю больше, чем «Нажмите здесь». Я размещаю основное действие рядом с соответствующей информацией и избегаю заполнения страницы повторяющимися призывами к действию, которые конкурируют за внимание. На одной странице может быть несколько действий, но они должны обслуживать один и тот же путь клиента. Страница услуги может направить посетителей к форме запроса, а страница продукта — к корзине. Прежде чем опубликовать страницу, я задаю себе один простой вопрос: если я приду сюда с явной необходимостью, смогу ли я выполнить следующий шаг без сомнений и трений? Рабочая кнопка – это больше, чем деталь дизайна. Он соединяет интерес с действием. Регулярные проверки, четкие сообщения, мобильное тестирование и простое отслеживание помогают поддерживать эту связь. Свяжитесь с нами по Аллан-чжэну: longxianghardware@gmail.com/WhatsApp +8618959885227.

1. Стив Круг — 2014 г. — Не заставляйте меня снова думать: подход к юзабилити веб-сайтов, основанный на здравом смысле 2. Якоб Нильсен — 1999 г. — Проектирование юзабилити веб-сайтов: практика простоты 3. Люк Вроблевски — 2008 г. — Дизайн веб-форм: заполнение пробелов 4. Стив Круг — 2010 г. — Ракетная хирургия стала проще: The Руководство по поиску и устранению проблем с удобством использования своими руками 5. Консорциум Всемирной паутины — 2018 г. — Рекомендации по обеспечению доступности веб-контента 2.1 6. Авинаш Кошик — 2009 г. — Веб-аналитика 2.0: искусство онлайн-подотчетности и наука клиентоориентированности