Дизайн Артём Полтавцев
2 286

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

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

В закладки

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

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

Что не так с готовыми виджетами

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

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

Например, у популярного среди салонов красоты сервиса Sonline нет привязки ни к дизайну, ни к функциям сайта — он как бы существует сам по себе. Можно настроить фирменные цвета и поставить свой логотип, но не более того.

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

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

Сеть салонов «Ноготок»: сайт-витрина с виджетом

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

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

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

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

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

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

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

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

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

Логика заказа внутри Sonline:

— Выбор салона из списка или кликом по карте

— Выбор услуг и мастеров, начать можно с любого конца

— Выбор дня и времени

— Подтверждение записи

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

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

Сеть салонов Лены Лениной: интеграция онлайн-записи через API с собственным дизайном

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

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

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

Логика заказа внутри GBooking:

— Выбор первой услуги

— Выбор студии

— Добавление услуг

— Выбор мастера и времени

— Подтверждение записи

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

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

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

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

ManiQu: сайт с собственной системой онлайн-записи и CRM

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

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

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

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

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

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

Советы по UX-дизайну для сайтов в сфере услуг

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

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

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

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

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

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

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

Добавьте возможность отменить или перенести запись. Чтобы клиенты не исчезали внезапно, покажите им удобный способ предупредить вас о смене планов. Как минимум, не обязательно заставлять человека звонить в салон, чтобы отменить или перенести запись.

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Артём Полтавцев", "author_type": "self", "tags": [], "comments": 3, "likes": 11, "favorites": 78, "is_advertisement": false, "subsite_label": "design", "id": 70728, "is_wide": false, "is_ugc": true, "date": "Thu, 06 Jun 2019 20:03:46 +0300" }
{ "id": 70728, "author_id": 211263, "diff_limit": 1000, "urls": {"diff":"\/comments\/70728\/get","add":"\/comments\/70728\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/70728"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

3 комментария 3 комм.

Популярные

По порядку

3

Красная конверсионная кнопка,, а вокруг много красных элементов аналогичного цвета - UX уровень бог.

Ответить
2

Уровень бог - это когда ещё красный фон и красные инпуты

Ответить
0

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }