Улучшаем форму покупки билетов на фестиваль

С помощью варфреймов в Figma колдуем над веб-формой заявки на покупку билетов.

Олег Кептюха
3 min readJun 29, 2018

Что имеем: десктопная форма онлайн-покупки билетов на городской музыкальный фестиваль, которая размещается на странице раздела «Афиша» крупного интернет-портала. Благодаря активной рекламной кампании мероприятие находится в фокусе внимания немалого количества пользователей. На первый взгляд, форма понятная и простая. Это мнение подтверждается словами организаторов о том, что они делают акцент на доступности фестиваля. Но давайте углубимся и рассмотрим, как можно преобразовать текущий опыт использования интерфейса.

Текущая форма покупки

Поле подтверждения адреса эл. почты

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

Поле имени и номера телефона

Заполнение поля с именем не несет явной выгоды для покупателя. Не рассказано, в чем плюс именного билета и какие плюшки он дает на фестивале. Аналогичная история с номером телефона. Номер даже не нужен для возврата билетов. В комментариях под формой видно, что организаторы предпочитают общение по эл. почте. Вероятно, имя и номер необходимы организаторам для коммуникаций в рамках будущих активностей. Но форма имеет название «Быстрая покупка билета без регистрации», а каждый дополнительный элемент делает процесс покупки менее быстрым. Поэтому скроем поля имени и номера под спойлер с возможностью их заполнения.

Одно имя на несколько билетов

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

Выбор количества билетов

Кнопки «+1» и «-1» можно сократить. Цифры здесь — избыточные элементы интерфейса, поэтому оставляем понятные пользователю «+» и «-». Текстовое поле ввода количества билетов делаем более явным с помощью рамки, чтобы при заказе нескольких квитков покупатель не кликал на плюс несколько раз. Если пользователь хочет заказать 10 билетов, он может вводить цифры «1» и «0».

Информация о возврате билетов

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

“Подскажите, пожалуйста, можно ли вернуть билет? Если можно, то каким образом?”

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

Итоговая форма покупки после преобразований

Вариант формы после варфрейминга в Figma

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

--

--