UX-дизайн для сферы услуг: как сделать сайт с удобной онлайн-записью

Статья с советами по UX-дизайну от компании, которая делает веб-разработку на заказ. Внутри рассказываем о проблемах готовых виджетов онлайн-записи.

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

Задача простая: показать клиенту каталог услуг и записать его на следующий вторник.

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

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

В итоге сайт превращается в витрину, а на саму онлайн-запись особо не повлияешь — она происходит внутри виджета.

Если сайту по наследству досталась система онлайн-записи без большого количества настроек, то приходится прорабатывать два параллельных сценария: в первом клиент выбирает услугу, а во втором — записывается.

Разберёмся, как два сценария взаимодействуют друг с другом. Задача сайта — дать клиенту информацию об услуге, задача виджета — собрать данные и внести запись в CRM-систему.

Сайт сети «Ноготок» связан с виджетом через раскиданные тут и там кнопки «записаться онлайн». Нажатие на кнопку открывает виджет поверх сайта.

Здесь мы сталкиваемся с первым ограничением платформы. Изначально мы планировали, что при нажатии на кнопку «заказать» рядом с конкретной услугой виджет будет запоминать выбор клиента. Но во время интеграции у заказчика появились проблемы с сервисом — иногда он работал странно и записывал криво, поэтому сейчас эти кнопки просто открывают виджет.

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

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

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

В-третьих, мы наглядно разделили услуги по типам: маникюр, педикюр, эпиляция, брови.

Сайт Ноготка получился простым и понятным, но если в компании используется что-то вроде Sonline, мы практически не можем повлиять на сам процесс записи.

Единственное, что должен делать такой сайт — не мешать виджету. Поэтому мы оставили переходы в Sonline практически везде: в идеале клиент должен как можно скорее нажать кнопку и оказаться в виджете.

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

Готовый виджет практически всегда превращает сайт в простую витрину. Но для салонов красоты этот формат — норма, потому что так работает большинство сервисов онлайн-записи, включая популярный YClients. С ним мы тоже сталкивались, но рассказывать о нём не будем — принципиально он ничем не отличается от Sonline.

Если не пользоваться готовым виджетом, а связать сайт с сервисом через API, то грань между сайтом и онлайн-записью становится незаметной. Можно прикрутить оформление, настроить шаги и запоминать выбор, который клиенты делают в каталоге услуг.

При разработке сайта сети студий маникюра Лены Лениной мы использовали сервис GBooking.

Модуль онлайн-записи сделали в виде небольшой плашки: когда клиент начинает оформлять заказ, чуть выше каталога услуг появляются этапы оформления.

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

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

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

Свою систему онлайн-записи делать долго, зато можно исправлять недочёты, тестировать подходы и постоянно улучшать опыт пользователей.

Основатели ManiQu пришли к нам в самом начале существования стартапа, так что мы не только разработали сайт, но и повлияли на их бизнес-процессы в целом. Мы не стали пользоваться услугами стороннего сервиса, а сами разработали модуль онлайн-записи и настроили его под заказчика: компания продаёт услуги мастеров на выезд, так что при оформлении заказа нужны другие поля.

Мы применили логику интернет-магазина с корзиной, потому что на выезд клиенты заказывают сразу несколько услуг — когда весь список перед глазами, оформлять запись удобнее.

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

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

У ManiQu логика заказа нигде не ломается и не видно швов, которые соединяют сайт с сервисом онлайн-записи. Своя система — это хороший задел на будущее, потому что она позволяет улучшать UX, даже если новые решения пока не пришли в голову сторонним разработчикам.

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

Сделайте понятную навигацию. Чтобы куда-то записаться, нужно выбрать услугу и мастера, найти свободное время и понять, в какой салон будет удобнее подъехать. Покажите шаги оформления на отдельной плашке — это поможет клиентам собраться с мыслями и вспомнить всё.

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

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

На сайт сети Лены Лениной мы добавили выбор молчаливого мастера, а также заказ чая или кофе.

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

Напоминайте клиентам о записи. Уведомления на почту, телефон, электронный календарь — чтобы клиент вовремя вспомнил о своих планах.