Внимательный подход к UX аудиту детского интернет-магазина

Аудит страницы семейной карты

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

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

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

2. Зарегистрирован, не авторизован. Заполнение полей ФИО, логина и пароля можно избежать? Точно так же попросить пользователя войти, если он неавторизован, в таком случае часть его данных должна быть известна и должна отпадать необходимость заполнять их снова.

3. Зарегистрирован, авторизован. Я рекомендую избавиться от построения полей в строку друг за другом - это противоречит логике, это непривычно и доставляет дискомфорт. Формы все привыкли заполнять в колонку сверху вниз.

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

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

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

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

Что касается галочек о ребенке и материнстве. Во-первых, это действительно важно - на этом этапе запрашивать данную информацию у пользователя? С каждым дополнительным полем все больше пользователей не доходят до конечного пункта. Можно ли убрать необязательные поля и предоставить возможность заполнить их в личном кабинете? Если они крайне важны, можно хотя бы убрать * с обязательных полей и сказать, какие поля необязательны - так будет более дружелюбней. Я добавил возможность пропустить шаг, если он полностью состоит из необязательных полей.

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

В завершении заполнения формы кнопка «отправить» не слишком корректна – она несет за собой довольно-таки размытый паттерн действия. «Активировать карту» будет звучать логичнее, ведь именно это действие хочет совершить пользователь, а не отправить данные.

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

Аудит страницы мастер-классы

Первый вопрос - почему выводится неактивный список мастер-классов за неделю, которая уже прошла? Это можно как-то устранить? Эта информация не несет пользы и просто отнимает у пользователя больше времени, пока он добирается до нужных ему данных.

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

Взаимодействие с карточками при наведении немного спорно. Смущает, что одна карточка перекрывает собой сразу две. Далее, при наведении на карточку кнопка целевого действия "записаться" вдруг появляется справа от курсора на месте, где под ней находится соседняя карточка. То есть появляется лишнее действие "навести курсор > перетащить курсор > нажать". Это бесполезно и, думаю, ничем не обосновано. Почему бы ей не появляться именно на том месте, где она и ожидается сразу при наведении? В таком случае пользователю остается только навести и нажать.

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

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

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

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

Аудит страницы каталога товаров

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

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

Кстати, на мобильных устройствах, в случае, когда мы имеем дело со значениями вида "от X до Y", как цена и вес, например, общепринятым и наиболее удобным функционалом считается слайдер. Его преимуществом является быстрое изменение значения путем перетаскивания ползунка и избавляет нас от необходимости вводить сначала одно значение, затем второе, затем нажимать "применить", то есть делать в 3 раза больше действий. Я думаю, вы замечали такое решение где-нибудь.

примеры для следования из руководств двух гигантов дизайн-систем на рынке:

developer.apple.com

material.io

Общее впечатление после взаимодействия с интерфейсом

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

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

Исследование калифорнийской консалтинговой компании в сфере UI/UX, на которое я опираюсь:

The Magnifying-Glass Icon in Search Design

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

Меня сильно смутило, что в разных местах на сайте разные формы регистрации и запросы. А именно:

• 1. Возможность присоединиться/войти через кнопку на панели навигации вверху справа. Классические логин + пароль и предложение зарегистрироваться. Кстати, я заметил, что иногда эта кнопка с ключом просто не реагирует на нажатие и приходится несколько раз перезагружать страницу, чтобы все заработало.
• 2. Возможность присоединиться через форму активации карты. Кроме большого количества полей пользователь еще и должен выбрать вариант - есть у него аккаунт или нет.
• 3. Запрос данных, которые несколько отличаются от формы регистрации по содержанию и расположению на странице оформления заказа, а также не предусмотрено предложение регистрации, если пользователя еще нет в системе.
• 4. Форма заявки на странице с расписанием так же отличается от всех остальных по содержанию полей.
• 5. Не везде есть возможность восстановить пароль, если пользователь его забыл. Это создает большую путаницу и в идеале нужно форму регистрации/авторизации стандартизировать и ссылаться на нее в каждом случае, когда для действия требуется авторизация пользователя. А в случае, когда пользователь авторизован, не запрашивать у него лишние данные, которые и так уже известны. Стоит заметить, что в адаптивной версии очень мелкие элементы интерфейса. С ними неудобно взаимодействовать, в них сложно попадать пальцем. Самые неприятные моменты - радио баттоны и чекбоксы, они недопустимо мелкие для мобильной версии сайта. Если на десктопе такие размеры имеют место быть, то на мобильных устройствах все элементы должны быть крупными и доступными, чего сейчас нет. И плюс ко всему прочему некоторые иконки, видимо, не векторные и отображаются в плохом качестве - страдает эстетика. Но это гораздо более глобальный вопрос.
  

Выводы

Подходите к дизайну интерфейса с умом!