Scott
Кнопка обратной связи позволяет сообщить о непонятном экране, неработающем действии или недостающей информации. Дизайнеру важно получить описание конкретной трудности, пока пользователь помнит, что хотел сделать и что произошло.
Начните с прототипа сценария обратной связи: от заметного входа до подтверждения отправки. Рисунок кнопки без этих состояний не показывает, сможет ли человек закончить обращение.
Например, человек нажал «Экспорт отчёта», но файл не появился. Форма с вопросом о том, что произошло при экспорте, поможет описать эту ситуацию точнее, чем общая оценка впечатлений от сайта. Для такого обращения нужны понятный вход, подходящие поля и сообщения о результате отправки.
Часть 1. Что такое кнопка обратной связи / виджет на веб-сайте?
Кнопка обратной связи — элемент управления, который открывает форму или страницу для отправки сообщения. Её можно разместить сбоку страницы, внизу или рядом с действием, о котором нужно сообщить. Заметность зависит от подписи и окружения: кнопка не должна перекрывать основную задачу.
Способ подключения зависит от выбранного сервиса и устройства сайта. Для работающей формы нужны обработка отправки, защита данных и понятные ответы при ошибке. Сам по себе визуальный макет или вставленный фрагмент кода не подтверждает, что всё это настроено.
Часть 2. Что делает кнопка обратной связи? В чем преимущества ее использования?
Давайте разберемся в простом механизме кнопок обратной связи. Когда ваши посетители нажимают на кнопку, перед ними открывается форма обратной связи. В этой форме им можно задать несколько кратких вопросов и предоставить шкалу оценок, чтобы оценить их впечатления от вашего веб-сайта.
Постоянная кнопка позволяет пользователю самому выбрать момент для обращения. Всплывающее приглашение требует внимания, поэтому для него нужен подходящий момент и заметная возможность отказа. Не показывайте такое приглашение поверх оплаты или сообщения об ошибке.
Вот как кнопки обратной связи могут быть полезны на вашем веб-сайте:
Вы ставите пользователей на первое место
Внедрив кнопку обратной связи и форму обратной связи, вы показываете, что цените пользователей и учитываете их трудности и опасения. Вы даете им возможность высказаться по поводу любых неприятных моментов, с которыми они сталкиваются в вашем интерфейсе.
Понятный вход в форму
Подпись «Сообщить о проблеме» объясняет назначение кнопки лучше, чем значок без пояснения. Проверьте, что вход в форму доступен с клавиатуры и не закрыт другими элементами на телефоне.
Обеспечивает эффективную коммуникацию
Форма даёт прямой канал для сообщения о проблеме. Объясните, читает ли команда такие обращения, возможен ли ответ и где получить срочную помощь. Кнопка «Оставить отзыв» не должна обещать мгновенный чат, если за ней только почтовая очередь.
Помогает сообщить о проблеме напрямую
Форма обратной связи позволяет пользователям сообщать о проблемах напрямую вашей компании. Это помогает быстрее реагировать на недовольство, хотя и не исключает негативных отзывов в социальных сетях.
Обеспечивает конструктивные решения
Повторяющиеся обращения помогают заметить трудности, которые стоит исследовать. Они не представляют мнение всех посетителей: люди, решившие написать, могут отличаться от тех, кто не оставляет отзывов.
Часть 3. Несколько советов при разработке кнопки обратной связи
До выбора оформления определите, где появится кнопка, что обещает её подпись и сколько усилий потребуется для ответа.
1. Выберите место для кнопки
После завершения покупки можно предложить оценить оформление заказа. Но для сообщения о сбое нужен и доступный по инициативе пользователя вход: человек, столкнувшийся с ошибкой, может не дойти до завершения задачи.
Боковая вкладка или кнопка внизу экрана может быть заметным входом в форму. Выберите место с учётом основной задачи и проверьте, что элемент не перекрывает управление на телефоне.
2. Приведите дизайн в соответствие с вашим брендом
Настраивая кнопку обратной связи или виджет, убедитесь, что они соответствуют вашему бренду. Это включает в себя использование цветов, акцентов и фона, похожих на цвета вашего бренда. Смайлик может дополнить текстовую оценку, но не должен быть единственным объяснением её значения.
3. Четко сформулируйте, о чем вы хотите спросить
Форма должна быть лаконичной и содержать простые вопросы, которые помогут вам улучшить удобство использования вашего веб-сайта. Например, задавайте пользователям такие вопросы, как «Что вы хотели сделать на нашем веб-сайте сегодня?», и уточняйте их вопросом «Смогли ли вы выполнить это действие?».
Если выполнить задачу не удалось, попросите кратко описать, что произошло. Такой ответ даёт контекст для разбора проблемы, но сам по себе ещё не объясняет её причину.
От жалобы на экспорт до подтверждения отправки
В интерфейсе отчётов человек нажимает «Сообщить о проблеме» после неудачного экспорта. Форма уже знает название раздела, но не должна молча отправлять содержимое отчёта. Покажите, какие сведения будут приложены, и оставьте обязательным только описание проблемы. Поле для контакта нужно, если пользователь хочет получить ответ.
Во время отправки сохраняйте текст и меняйте подпись действия на «Отправляем…». Если запрос завершился ошибкой, оставьте сообщение в поле и предложите «Повторить отправку». Не показывайте экран благодарности до подтверждения от сервера. После успеха достаточно «Сообщение отправлено» и информации о дальнейшем ответе, если команда действительно может его обещать.
В рекомендациях W3C по уведомлениям в формах успех и ошибки рассматриваются как отдельные сообщения, которые должны быть доступны пользователю. В макете отметьте, где появится сообщение и сохранится ли фокус; при реализации проверьте объявление результата со скринридером.
На телефоне плавающая кнопка не должна закрывать оплату, нижнюю навигацию или поле ввода. Если раскрытие зависит от наведения мыши, добавьте понятный вход по нажатию: у сенсорного экрана такого наведения нет.
Часть 4. Три варианта размещения кнопки обратной связи
Ниже показаны три варианта входа в форму. В Pixso можно сравнить их расположение и состояния в контексте своего экрана.
1. Выдвижная вкладка
Для этого используется значок кнопки обратной связи, расположенный в правой части веб-страницы. Как только пользователь наводит курсор мыши на кнопку, она раскрывается, показывая, что пользователь может оставить отзыв. При нажатии на нее открывается форма обратной связи, которую пользователи могут заполнить.
Вкладка показывает приглашение при наведении; для сенсорного экрана нужен вход по нажатию.
2. Приглашение оставить отзыв
Такое приглашение можно показать после завершения задачи, если оно не перекрывает основное действие. Предусмотрите заметное закрытие и не открывайте его повторно сразу после отказа. Случайное появление посреди ввода данных мешает работе и не делает отзыв полезнее.
Приглашение предлагает оставить отзыв или продолжить работу.
3. Полоса обратной связи внизу страницы
В этом примере приглашение оставить отзыв занимает полосу внизу страницы. Проверьте, что оно не перекрывает основной контент и остаётся доступным при увеличении масштаба.
Полоса обратной связи располагается внизу страницы.
Часть 5. Часто задаваемые вопросы о кнопках обратной связи
Вопрос 1. Как мне создать страницу обратной связи для моего веб-сайта?
Сначала определите, какие сведения нужны для разбора обращения, затем спроектируйте поля и состояния отправки. После согласования макета разработчик или выбранный сервис подключает обработку данных. Проверьте не только успешный ответ, но и ситуацию, когда сообщение не удалось отправить.
Вопрос 2. Является ли кнопка обратной связи такой же, как и виджет опроса?
Не обязательно. Кнопка — это вход, за которым может быть свободное сообщение, оценка или несколько вопросов. Опрос — способ сбора ответов. Полезность зависит от цели и формулировок, а не от того, называется элемент кнопкой или виджетом.
Отзывы пользователей помогут оптимизировать ваш веб-сайт…
Форма приносит пользу, когда обращения попадают к команде, которая может их разобрать. Определите получателя сообщения и объясните пользователю, стоит ли ожидать ответа.
Сохраните введённый текст при ошибке отправки и показывайте подтверждение только после получения сообщения. Тогда человек сможет закончить обращение, не повторяя всю работу.
