3 заметки с тегом

UX

К чему приводят ошибки валидации

У меня есть суперспособность — попадать в системные дыры и ломать процессы. Я могу заблудиться в аэропорту, переночевать в уже сданном номере, на мне ломается электронная очередь, глючат паркоматы и скрипты в сервисных центрах.

Расскажу одну такую историю, а в конце поделюсь выводами.

Я купил в московском магазине железяку с доставкой до двери компанией СДЭК. Железяка быстро доехала, но вручить посылку у транспортной компании просто так не получилось: Плутон стал ретроградным и я вновь попал в какой-то каскадный баг.

Мне написал менеджер магазина: посылка уже в городе, но в СДЭК не могут со мной связаться. В пропущенных было пусто, поэтому я решил проверить реквизиты в накладной СДЭК и в договоре с магазином.

Номер телефона был указан верно — форма отслеживания посылки его принимала, — но в адресе из номера дома исчезла дробь. Поменять адрес доставки на сайте СДЭК не получилось: форма отказалась принимать адрес с дробью, выдав неустранимую ошибку с расплывчатой формулировкой. «Корпус» и «корп.» вместо дроби тоже не помогли. В итоге форма всё же отправила данные, но изменились только валидные: дата и время доставки.

Связаться непосредственно со СДЭК не вышло. На горячей линии никто не отвечал, виджет онлайн-звонка два раза подряд выдал маркетинговой чепухи, сослался на занятость операторов и закрылся. Форма заказа обратного звонка попросила обязательные имя, телефон, город, тему запроса и номер договора. Затем она сломалась и перестала показывать города после буквы «б». Я выбрал Абакан, но мне всё равно никто не перезвонил. Не особо надеясь на ответ, я написал СДЭК в ВК-сообщество.

Скрин от 11 мая. Если не актуально, можно и не читать

Решил действовать через магазин. Менеджер оперативно связался со СДЭК, но выяснил только, что курьер приезжал, не дозвонился и доставку перенесли на завтра. Адрес в СДЭК не исправили, сказав, что курьер всё уточнит перед поездкой. Но ему никто ничего не сказал, поэтому сначала курьер попробовал сдать посылку по неверному адресу.

Транспортные компании требуют предъявлять паспорт, но курьеры часто отдают посылки без проверки документов. Это логично: какая разница, кто заберёт груз, если адрес правильный. Теоретически, на первом адресе без дроби могли оказаться ушлые шутники и мне пришлось бы нудно бодаться вначале со СДЭК, а потом и с магазином.

Выводы

Как избежать каскадной жести.

  1. Типовые сообщения для ошибок — зло. Хорошо подсказывать пользователю, что он делает не так. Например, в каком формате следует вводить адрес, если некому научить форму парсить эти данные самостоятельно.
  2. Если отваливается справочник городов, нужно давать пользователю указывать город произвольно. Выпадающий список должен показывать, что он сломан, данные не загружены и следует попробовать позже.
  3. На выходные и праздники стоит менять скрипт автоответчика, чтобы пользователь не ждал ответа. Робот не должен просто обрывать звонок, если операторы долго не отвечают, а подсказывать альтернативные способы связи.
  4. Чтобы сервис работал, компании нужно сервисное мышление, а не сервисные ценности.
  5. Клиентским сервисам лучше совсем не принимать сообщения через ВКонтакт, чем отвечать через трое суток.
  6. Формальная вежливость лучшее, чем безразличие. Хорошо доводить любой диалог до логического конца, это оставляет положительное впечатление.

Upd. Комменты закрыты из-за спама, приходите в ВК-пост.

Форма обратной связи

Написал призыв к действию для формы обратной связи Девхаба и решил призывом не ограничиваться, а сочинить весь диалог пользователя с feedback-формой мечты. Расскажу, как бы она могла себя вести и что уметь, а потом попробую объяснить, почему такую сложно сделать.

Начнём с философии. Обратная связь — один из шагов знакомства пользователя с компанией. Сначала он узнаёт о компании в социальных сетях или находит в поиске, смотрит сайт, а потом нажимает кнопку обратной связи. Выскакивает окошко с формой и начинается диалог.

Выбор способа общения с пользователем зависит от задач сайта. Для срочных и быстрых вопросов пользователю удобнее заказать звонок или открыть чат с оператором, но нужно, чтобы кто-то дежурил на линии. Форма обратной связи работает как почта, просто с ней удобнее: не нужно копировать адрес, открывать почтовый сервис и нажимать лишние кнопки.

Задача формы — не испортить первое впечатление: не хамить, не пугать и не загадывать ребусов. Для этого форме нужны опрятный вид, понятные заголовок и призыв, предсказуемое поведение и разумное количество полей. Впечатление о компании в целом складывается из бесчисленного количества мелочей, и форма обратной связи одна из них.

Взаимодействие с формой состоит из четырёх этапов:

  1. Пользователь замечает кнопку обратной связи и решает посмотреть, что там.
  2. Страница проматывается на форму или открывается модальное окошко. Пользователь читает-заполняет или уходит с формы и дальше ничего не происходит.
  3. Форма отправляет сообщение.
  4. Пользователь читает подтверждение об отправке, диалог завершается.

Совсем хорошо, если форма запоминает введённые данные. Пользователю будет приятно, если он случайно закроет заполненную форму и решится вводить всё заново. Особый шик — помнить, что пользователь уже писал и менять текст кнопки на что-то вроде «Написать ещё».
Способ показа формы зависит от сценария взаимодействия. Форму совсем необязательно прятать в модальное окно. Ей можно отвести отдельный этаж и проматывать страницу по нажатию кнопки в меню. Это уместно на лендингах, но не подходит, когда на странице уже есть форма или когда мы не хотим усложнять структуру.

Я предпочитаю формы в модальных окнах: они понятно переключают внимание, не мешают на страницах не про продажу, их проще закрывать щелчком за пределами окна. Поэтому дальше я пишу про формы в модальных окнах.

Элементы формы

  1. Модальное окошко с подложкой, которая затеняет страницу. Если форма большая, её можно разворачивать на весь экран с анимацией. Окошко должно влезать в экран и блокировать прокрутку страницы, чтобы после закрытия формы пользователь оказался там же, где начал диалог.
  2. Заголовок, чтобы было понятно, чего форма хочет от пользователя.
  3. Призыв к действию, объясняющий что и зачем писать, какая от этого будет польза, кто ответит и когда.
  4. Поля ввода, которых должно быть как можно меньше. Согласно модным представлениям о психической энергии, мозг охотнее выделит энергию на простое действие с понятным смыслом.
  5. Кнопка «Отправить». Неактивна, пока обязательные поля пусты.
  6. Подтверждение об отправке. Если отправка занимает полсекунды, показываем спиннер, чтобы пользователь не подумал, что всё сломалось.
  7. Крестик, закрывающий форму. Кнопка «Закрыть» не нужна, форма закрывается по крестику или клику за пределами окошка.
  8. Предупреждение со ссылкой на политику конфиденциальности. Если юрист разрешит, её можно её убрать в подвал.

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

В идеале кнопка обратной связи живёт в навигационном меню, которое сжимается или прячется при прокрутке.

Надпись на кнопке, заголовок и призыв зависят от наших ожиданий и целей. Если мы делаем сайты и предлагаем заполнить бриф, пишем на кнопке «Заполнить бриф» или «Оставить заявку». Если занимаемся разработкой и ищем проект — «Предложить проект».

Бывают случаи сложнее. Например, мы — технологический партнёр для стартапов, продаём рабочие часы специалистов, делаем всё сами или собираем инхаус-команды, консультируем, проводим бизнес-анализ. Что-то одно не напишешь, вся надежда, что пользователь заинтересуется и решит посмотреть. Вот тут-то мы ему и расскажем самое важное.

Кнопка про всё сразу на странице вымышленной компании

Вот как вся эта красота может выглядеть у компании с широким профилем:

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

Можно было бы оставить одно поле для телефона или почты и разбирать его регулярными выражениями, но есть гипотеза, что для переговоров по проектам нам понадобится и то и другое. Чтобы не путать пользователя вводом в одно поле, разносим их на отдельные.

Телефон и почта — традиционные каналы связи в деловой среде, но если целевая аудитория предпочитает мессенджеры, уместнее спрашивать логин в Телеграме/Скайпе или аккаунт ВК/ФБ.

Обязательные поля. Пока пользователь не указал почту или телефон, кнопка «Отправить» неактивна. Другие поля для первого контакта не особо важны: имя и вопрос можно узнать в разговоре. Заставляя пользователя заполнять на себя досье, мы решаем не его задачу, а свою. Не надо так.

Форму можно научить полноценному диалогу, прописав подсказки для разных ситуаций. Указан телефон — предлагаем указать почту, чтобы не диктовать её. Пользователь ввёл почту, предлагаем указать телефон, чтобы позже обсудить детали.

Чтобы пользователь заполнил побольше, мотивируем его разумными объяснениями: укажите почту, чтобы не диктовать её по буквам, мы вышлем вам презентацию.

К обработке формы можно прикрутить CRM и квалифицировать заявки по заполненным полям. Например, если пользователь указал имя, почту, сообщение и приложил файлы, ставить заявку в приоритетные лиды. Заявки с одним номером телефона — как запрос звонка, а в ответ на имя и почту автоматически высылать презентацию. А потом подключить нейронную сеть, чтобы она определяла вес лида по тексту сообщения и отвечала на типовые вопросы.

Для начала можно научить форму определять день недели и выводить корректную подпись под полем телефона:

Валидация запускается после потери фокуса, когда пользователь явно закончил заполнять поле. Сообщения об ошибках не должны кричать, а мягко обращать внимание, поэтому обводка не яркая.

Телефонный номер приводим к нужному формату после ввода, чтобы не сбивать пользователя и не мешать вставлять номер автоподстановкой или по Ctrl + V.

Поле сообщения меняет размер, чтобы пользователь видел весь текст без прокрутки. Если форма не помещается в один экран, она вытягивается целиком, без полос прокрутки внутри модального окна. Так удобнее скроллить и понятно, что внизу ещё что-то есть.

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

Ничего не мешает изложить дело обстоятельно

Вложения. Поскольку мы предлагаем делиться идеями и проектами, к сообщению можно добавлять файлы. Добавляются они перетаскиванием или через системный диалог, тут всё обычно.

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

Фрагмент формы с недопустимым файлом

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

Форма может понимать, что именно пользователь сообщил, и показывать соответствующее подтверждение. Указал почту — когда напишем, для телефона — когда ждать звонка. А если указал всё и приложил файлы, расскажем, что будет дальше.

Мы позвоним вам на этой неделе до 17:00 по Москве.

Мы позвоним вам в понедельник с 10:00 по Москве.

Мы изучим материалы и напишем вам в начале следующей недели.

А теперь немного прагматичного реализма.

Почему такую форму сложно сделать. Причины две: конечность ресурсов и ограничения движков и виджетов.

Форму нужно спроектировать, нарисовать, согласовать, сверстать, написать логику и отладить. Задач набирается на десятки часов, а экономический эффект не так уж и очевиден, чтобы срывать разработчиков с коммерческих задач. Если форма обратной связи не ваш основной инструмент продаж, вкладываться в неё стоит по остаточному принципу. Хватит и того, что форма опрятна, понятна и не требует заполнять всех полей.

Если вы не разработчик, вы упираетесь в ограничения готовых решений. Движки и Редимэг не поддерживают нестандартного поведения окон, а переписывать логику формы в движке — занятие дорогое, долгое и сомнительное.

Разработчикам остаётся отдавать допил формы в качестве испытательного задания, а остальным — ждать виджета или плагина. Но если ваша форма активно продаёт, то делать её, конечно же, стоит на все деньги.

Обращайтесь к нам ;3

2019   UX

Страница Maintenance

В Девхабе регулярно обновляются критичные сервисы: Jira, Confluence, GitLab и Sentry. Когда они недоступны, пользователь попадает на заглушку с кодом ошибки. Чтобы не пугать пользователей, мы сделали страницу, которая информирует и успокаивает.

Кастомная страница об ошибке для nginx Custom nginx мaintenance page

Русская и английская версии

У внутренних сервисов белый фон страниц, поэтому для сообщения выбрали приглушенный желтый. Так пользователь быстрее поймет, что попал куда-то в другое место. А крупный заголовок должен быстро захватить внимание и свести время замешательства к минимуму.

Билл из Гравити Фолс официально представляет коварные силы мрака. Был вариант с Дружко, но его знают только в Рунете. Билл ближе англоговорящим пользователям.

К сожалению, подробнее объяснить, что именно не работает, нельзя. Сервер умеет только возвращать статичный html и код ошибки: 500 internal error, 502 service unavailable или 502 bad gateway. Поэтому сообщение написано на все случаи жизни. Админам выводим код, а пользователям объясняем, что делать, если что-то все же сломалось.

2018   UX   Девхаб   работа