UX: Перепроектирование сайта “Кабанчик”
Часть 2: Рекомендации по улучшению UX, прототип
Структура:
- Главная страничка
- Список исполнителей
- Страничка исполнителя
- Промежуточная форма заказа
- Основная форма заказа
- Страничка задания
Главная страничка
- Меню сайта (рекомендация)
Связанные по смыслу элементы меню находятся далеко друг от друга, из-за чего поиск информации или действия затрудняется.
Например: «Создать задание» и «Как заказать услугу» относятся только к заказчику, в то время как «Как стать исполнителем» и «Стать исполнителем» только для исполнителя.
Юзабилити тестирование и тепловая карта показали, что пользователь охотнее нажмёт на то «Как это работает» в блоке с фото, под кнопкой заказа, нежели в хедере. Эта кнопка переносит нас вниз по страничке и объясняет, как заказать услугу- т.е. предназначена для заказчика.
Исполнитель хочет узнать, как работает сервис. Из-за того, что кнопка «Как стать исполнителем» находится далеко от смыслового блока «Стать исполнителем» он не замечает её и нажимает на кнопку «Как это работает» из блока ниже. И попадает не туда- на блок для заказчика.
2. Кнопка «Найти специалиста» или поиск услуги через список
Заходя на сайт, пользователь ищет услугу. Мы предлагаем либо сразу заказать её (призыв к действию кнопкой «Найти специалиста»), либо показываем большой список услуг.
Прежде чем нажать на кнопку, нерешительный пользователь, захочет провести исследование (для себя- понять, что есть на сайте и какие предлагаются услуги, хочет ли он этого). В таком случае его внимание будет обращено на большой список, где очень трудно ориентироваться без поиска или фильтра из-за большого количества пунктов. После чего он перейдёт на листинг и будет оттуда искать себе специалиста.
Другая категория пользователей- те, кто сразу нажимают на кнопку и хотят немедленно начать поиск специалиста. Кнопка «Найти специалиста» переводит нас на поле описание услуги- таким образом мы заставляем пользователя совершать лишнее действие и отнимаем его время.
У большинства конкурентов на главной сразу же есть поле (иногда с фильтром и примером) ввода запроса и кнопка «Начать поиск». Такой метод помогает понять пользователю на какой сайт он попал и что нужно сделать, пример же устраняет страх «написать что-то не так» и сам блок даёт возможность немедленно приступить к заказу услуги.
3–4. Список услуг и обобщенные категории
Исследования показали, что люди редко читают в интернете, они лишь бегло просматривают отдельные слова и предложения.
Особенность нашего сайта в том, что иногда мы заставляем пользователя искать нужную ему услугу на главной из-за отсутствия быстрого поиска в видимой области (на данный момент он внизу сайта). Тогда ему приходиться потратить время на изучение неполного списка услуг, состоящего из более 100 пунктов.
На сайте присутствуют обобщённые категории- их 5 (изучив аналитику мы поняли, что не все из них есть популярными по запросам пользователей). После нажатия на «Все категории» мы переходим на страничку полного списка, который имеет такой же вид, как список на главной.
Для того чтобы пользователю было проще найти нужную категорию нужно усовершенствовать обобщенные категории и скрыть полный список услуг с главной.
Наши конкуренты thumbtack.com решили поделить категории по принципу событий в жизни человека и проиллюстрировать каждую из них- Marriage and Relationship, Career Coaching, Wedding and Event Makeup. Таким образом вы видим эмпатию по отношению к пользователю.
Мы не просто предлагаем заказать услугу, а понимаем проблему и предлагаем её решение.
Дабы решить проблему навигации нужно добавить «хлебные крошки».
Учитывая потребность пользователей- добавить фильтр и в этом же блоке показывать сколько найдено мастеров по данному запросу и к кнопкам «Вперёд/назад» добавить кол-во страничек, для того чтобы пользователь мог легко перемещаться по списку и понимать где он находится.
5. Список городов (рекомендация)
Список городов демонстрирует пользователям то, как развивается, растёт «Кабанчик». Так же при выборе своего города пользователю предлагаются отфильтрованные исполнители и объявления (т.е. только те, кто находятся в этом городе). Но большой список затрудняет поиск и принятие информации.
В такой ситуации стоит визуализировать карту Украины. Исследования показывают, что мы склонны узнавать и воспринимать лучше всего тогда, когда информация представлена в наглядном виде.
Заголовок должен вкратце объяснять пользователю о том, что он увидит ниже. К примеру: «Ура, теперь мы есть в этих городах! Выбери свой и найди нужного специалиста».
Так же при первом посещении сайта мы видим попап, который спрашивает не с Киева ли я? Если я с другого города, то нажимаю на соответственную кнопку, но после этого мне не предлагают выбрать мой город.
Список исполнителей
- Фильтр и список категорий
Список категорий слева нужен для навигации, но как уже говорилось раннее, пользователю тяжело ориентироваться по списку без поиска.
Так же юзабилити тестирование показало, что пользователи хотели бы иметь дополнительные настройки для поиска специалиста- фильтр по популярности, отзывам, категориям, городу и самой услуги. В этом же блоке показывать сколько найдено мастеров по данному запросу и к кнопкам «Вперёд/назад» добавить кол-во страничек, для того чтобы пользователь мог легко перемещаться по списку и понимать где он находится.
2. Блок «Так же искали»
Т.к. сайт «Кабанчик» предлагает очень большой спектр специалистов и услуг, то блок «Так же искали» редко может показать подходящий для пользователя запрос (юзабилити тестирование подтвердило эту теорию), и сам список усложняет поиск. Наличие фильтра поможет подобрать более подходящего специалиста, тогда пользователю не нужно будет просматривать «что искали другие»- ведь мы удовлетворим его запрос.
3. Список городов
Большой список усложняет поиск и в данном случае занимает много места слева, при том что сама страничка со списком исполнителей и объявлений содержит в себе большое количество информации- соответственно она сложнее для восприятия.
Если же при первом попадании на сайт я смогу с попапа выбрать свой город, а потом система автоматически подставит его в фильтр (либо просто выбрать город через фильтр), то страничка станет менее «нагромождённой».
6. Задания по теме
На данной страничке размещены задания по теме, часть из которых уже неактуальна, т.к. они выполнены.
Через юзабилити тестирование мы увидели, что пользователь не понимает для чего нужны задания, и при переходе на 1 задание начинает теряться (не знает куда попал, как выйти обратно, как этот блок поможет решить его проблему).
Так же, из-за того, что карточка одного задания очень похожа на объявление и находится близко к этому блоку, пользователю тяжело понять где заканчиваются исполнители и начинаются последующие блоки. Что отнимает его время и усложняет понимание сайта (пользователь опять не понимает где находится).
Страничка исполнителя
1. Категории услуг, выполняемые специалистом
Специфика сервиса «Кабанчик» предполагает то, что один мастер может выполнять задания в разных категориях. Список таких категорий мы можем увидеть на его страничке.
Юзабилити тестирование показало, что когда заказчик находится на страничке исполнителя он смотрит на список услуг, но часто не может найти свой запрос из-за того, что список бывает очень большим.
Так же заказчика отталкивает что профессионал делает маникюр (услуга которую хотел заказать респондент) а также уборку в квартире. В следствии чего доверие к мастеру становится меньше и это становится стоп-фактором при заказе услуги.
В таком случае стоит обобщить категории, которые выбрал мастер- Клининговые услуги, Услуги красоты и здоровья, и скрыть ту категорию, которая не относится к запросу заказчика.
2. Галерея работ
Галерея работ так же содержит в себе материалы по всем категориям, что усложняет поиск работ по запросу заказчика (к примеру, ему интересен только маникюр, а он видит изображения вымытых уборных).
Стоит разделить работы по категориям и показывать приоритетные (для заказчика) вначале.
3. Популярные услуги
Пользователь переходит на профиль конкретного специалиста для того, чтобы узнать подробную информацию о заинтересовавшем его специалисте и предложить ему работу.
Тут же сайт предлагает ему просмотреть «Популярные услуги», после нажатия на которые, он попадает на страничку услуги.
Таким образом мы прерываем процесс заказа услуги и резко бросаем пользователя на «новую страничку» где тот теряется и вынужден заново искать специалиста.
5. Отзывы
Так же как и галерею работ, нужно разделить отзывы на категории и показывать вначале приоритетные. Юзабилити тестирование показало, что пользователи думают будто ошиблись и выбрали не того мастеря, глядя на отзывы, которые касаются других категорий.
Промежуточная форма заказа
Форма
Глядя на тепловую карту, мы видим, что пользователь, который нажали на кнопку «Найти специалиста» на главной попадает на серую форму и часто пропускает поле выбора категории услуги и клацает на серое поле «Детали задания», так как думает, что это и есть полная форма заказа.
На эту же страничку они возвращаются с полной формы, если решил поменять категорию. Юзабилити тестирование показало, что пользователи не могут понять почему форма становится серой, даже если перед этим они заполнили все поля. Из-за этого они пугаются что заполненные данные стёрты и не понимаю почему они тут оказались.
Дабы не путать пользователей и не заставлять их переживать за личные данные, можно совместить полную форму с выбором категории и дать возможность тут же поменять категорию при надобности.
Полная форма заказа
1. Выбор и изменение категории
Юзабилити тестирование показало, что пользователи не сразу могут понять, как поменять категорию услуги, т.к. сам блок с категориями не представлен как строка с запросом что мы видели прежде (находясь на страничке с серой формой).
Дабы сделать это более очевидным стоит совместить предыдущий вид поля и существующую форму.
2. Конфиденциальные данные
При проведении юзабилити тестирования и глядя на тепловую карту мы поняли, что пользователи не понимают этот пункт и не нажимают на него (т.к. он не похож на кнопку). Так же пугает название «Конфиденциальные данные»- возможно стоит заменить название кнопки на, к примеру, «Дополнительная информация» или вовсе убрать с сайта.
Так же он находится далеко от своего смыслового блока «Контактные данные».
3. Добавление файла
Так как сайт предоставляет множество услуг с разных сфер, то создан обобщённый пункт «Добавления файла», который не понятен в контексте для определённой категории пользователей (те, кто хочет заказать преподавателя для гитары задаются вопросом «Какой файл нужен? Детальное описание задания? — после проведения юзабилити тестирования), соответственно этот пункт перетягивает на себя много внимания и тратит время такого пользователя, также он физически занимает много места.
Как альтернативное решение- добавить в поле ввода задания, сбоку иконку «Добавления файла» в виде скрепки или подобную.
4. Дата выполнения задания
Аналитика показала, что чаще всего на этом сервисе пользователи заказывают услугу «на сегодня/завтра». Т.е. пользователи в данном случае не требовательны и заданный параметр стоит как правило по умолчанию «На сегодня». Тем не менее, сам блок с выбором даты занимает много места, и выбранная дата, подсвечиваемая зелёным цветом, бросается в глаза- забирает время пользователя.
Сделать выбор даты более невзрачным и «стандартным» (как блок с выбором времени).
5. Правила сервиса (рекомендация)
При нажатии на «Правила сервиса» пользователя переносят на новую вкладку с правилами.
За шаг до заказа услуги человек оказывается на совершенно другой страничке и после ознакомления с правилами не знает, как вернуться на форму- юзабилити тестирование показало, что пользователи не замечают, как открывается новая вкладка и не понимают, как вернуться назад, ведь даже браузерная кнопка назад неактивна.
Стоит добавить внизу кнопку «С правилами ознакомился» и вернуть пользователя на форму.
Вид формы
Исследования показывают, что подпись к полю следует располагать сверху от инпута. Тогда человек быстрее «прочитает» форму и заполнит её.
На сайте «Кабанчик» стоит поменять расположение подписей к формам.
Ожидание сообщения с кодом (рекомендация)
После того, как пользователь нажал кнопку «Опубликовать», он должен подтвердить заказ введя в поле код, который придёт ему на номер телефона.
Исследования показывают, что людей раздражает ожидание. В таких случаях стоит показывать сколько осталось ждать- сделать таймер «СМС придёт в течении 30 секунд» с обратным отчётом.
Подтверждение успешного заказа (рекомендация)
Т.к. при заполнении формы пользователю приходит на телефон сообщение и пароль на сайте (даже исполнитель связывается с ним посредством звонка на мобильный номер), а юзабилити тестирование показало проблему с пониманием в каком состоянии пребывает заказ, то стоит отправлять на номер сообщение с подтверждением и кратким описанием того, что будет происходить дальше. Тогда мы уберём страх человека перед ожиданием и неведомостью.
Моя страничка задания
Область статуса задания и управления заданием (рекомендация)
Юзабилити тестирование показало, что пользователи не сразу могут понять в каком состоянии, пребывает их задание. Элементы связанный по смыслу находятся далеко друг от друга, из-за чего человек не может составить «целостную картину».
Оглавление задания, номер задания, цена, способ оплаты, ожидает исполнителя, просмотры- должны находится максимально близко друг к другу и помещены в выделенную область, дабы привлечь внимание.
В то время как дата выполнения и категория задания относятся к описанию задания и так же должны находиться рядом друг с другом.
Ссылка на прототип
