UX: Оптимизация карточки отзыва, с использованием атомарного принципа
Автор Andieta Octaria
Источник Medium
Источник Medium
С чем мы сталкиваемся
Давайте начнем с истории. В 2018 году меня попросили обновить карточку отзыва для сайта Female Daily. Запрос прост и понятен, я только попросил изменить принцип действия карточки. Существующий принцип действия заключался в том, что карточка появлялась при нажатии кнопки «Загрузить больше». Что создавало проблему, потому что страница перезагружалась для того, чтобы показать всплывающее окно. Таким образом происходила двойная загрузка (первая - та, когда пользователь зашел на страницу, и вторая - когда нажал кнопку «Загрузить больше»).
Но так как основным продуктом сайта Female Daily являлись предметы красоты, то эти карточки были разбросаны повсюду. Многие страницы включали в себя карточки различного типа и с разной информацией. И, что еще хуже, не было ни классификации существующих карточек, ни поля с запросом информации по каждой карточке на разных страницах.
Итак, путешествие началось.
Понять проблему
Чтобы лучше понять проблему, я обсудил с разработчиком компоненты карточки и как ее создавали.
После этого мы нашли каждую страницу на сайте Female Daily и создали общую схему карточек. Каждая страница включала карточку отзыва, как она выглядит, и какая информация в нее входит. Исходя из этого мы нашли болевые точки и проблемы, требующие решения:
После этого мы нашли каждую страницу на сайте Female Daily и создали общую схему карточек. Каждая страница включала карточку отзыва, как она выглядит, и какая информация в нее входит. Исходя из этого мы нашли болевые точки и проблемы, требующие решения:
1. Отсутствие схемы карточки отзыва
Это самая большая проблема, мешающая достичь результата. Так как нет схемы/классификации карточки отзыва, то и нет информации на какой странице есть карточка, а на какой – нет. И что еще хуже, мы понятия не имеем, какая информация должна отображаться на каждой странице. Например, обычно карточка отзыва включает в себя отзыв, карточку пользователя и карточку товара. Но в карточке профиля пользователя содержится только отзыв и карточка продукта (поскольку карточка отзыва в профиле пользователя – это его собственный отзыв, то нет необходимости показывать информацию самого пользователя).
2. Слишком много типов карточек отзывов
Из вышеописанной проблемы мы обнаружили еще одну - слишком много типов карточек отзывов. Разные страницы содержат разные карточки отзывов, которые включают информацию различного характера.
Разные типы карточек отзывов
3. Отображаются не все данные, представленные пользователями
Последнее, но не менее важное, показаны не все данные, представленные пользователями. Форма отзыва содержит несколько вопросов. Но представленные данные не отображаются в карточке отзыва. Таким образом, пользователи обычно вводят свой ответ повторно в текстовое поле. Что также является «болевой точкой», требующей устранения.
Процесс
После обнаружения проблем мы приступили к их решению:
1. Понимание элементов, используя метод атомарого дизайна
На этом этапе, с помощью использования метода атомарного дизайна мы осмыслили каждый элемент, включенный в карточку отзыва.
«Атомарный дизайн – это не создание какой-то отдельной инстанции или страницы, а проектирование с учетом полной картины – моделирование ядра системы».
Джо Тоскано
Джо Тоскано
В карточке отзыва выделены 3 основных «молекулы» в составе каждого организма:
Дизайн система
А) Карточка продукта;
Б) Карточка пользователя;
В) Карточка отзыва;
Г) Элементы карточки;
Б) Карточка пользователя;
В) Карточка отзыва;
Г) Элементы карточки;
Молекулы карточки отзыва
Теперь давайте более подробно рассмотрим каждую «молекулу».
А) Карточка продукта;
Карточка продукта строится из следующих «атомов»: изображение продукта, рейтинг, бренд, название продукта и вариации продукта (если таковые имеются).
Продуктовая карточка
Б) Карточка пользователя
«Атомы» карточки пользователя: картинка профиля, имя и ID пользователя
(тип кожи, цвет кожи и т.п.)
(тип кожи, цвет кожи и т.п.)
Карточка пользователя
В) Карточка отзыва
Карточка отзыва состоит из следующих «атомов»: рейтинг рецензента, отзыв и кнопка «Читать дальше» (если есть)
Г) Элементы карточки
«Атомами» карточки элементов являются: «Нравится», «Комментарий», «Поделиться» и «Выход»
2. Создание схемы карточки отзыва
Разобравшись с элементами, переходим к списку страниц, включающих карточку отзыва.
И создаем схему, которая содержит требования к карточке отзыва, страницы и принцип действия для каждой страницы.
И создаем схему, которая содержит требования к карточке отзыва, страницы и принцип действия для каждой страницы.
Карта карточки отзыва
Результат
Как результат – мы не только можем перепроектировать карточку отзыва с меньшими пробелами и дополнительной информацией, но и создать систему дизайна для карточки отзыва.
Дизайн
Мы обнаружили несколько улучшений, которые можно привнести
в существующий дизайн, а именно:
в существующий дизайн, а именно:
1) Сужение полосы обзора
Суженная полоса обзора более удобна для чтения. Наличие правильного количества символов в каждой строке – ключ к простому восприятию текста. Поскольку строка слишком длинная, читателю будет трудно сосредоточиться на тексте. Это связано с тем, что длина строки затрудняет определение места ее начала и конца. Кроме того, может быть трудно перейти на нужную строку в больших блоках текста.
2) Добавление кнопки действия для большей вовлеченности
Чтобы сузить полосу обзора, карточка пользователя была сдвинута в сторону карточки отзыва. Чтобы увеличить вовлеченность, мы добавили кнопку «Следить» под пользователем. Таким образом, если пользователь находит кого-то с похожими проблемами/особенностями кожи, он может легко подписаться, нажав кнопку.
3) Отображение представленных данных
Сравнение карточек отзывов
Дизайн-система карточки отзыва
Дизайн-система состоит из схемы карточки отзыва, требований к странице и элементов. Создавая систему дизайна, мы не только разрабатываем новый дизайн, но также взаимодействуем и улучшаем связь с разработчиком.
Дизайн-система карточки отзыва
Размышление
Чтобы понять суть проблемы, нужно мыслить шире. Нам дают простую задачу для решения. Но чем глубже мы копаем, тем более серьезные проблемы всплывают на поверхность. Создание
дизайн-системы решает не только текущую проблему, но и обеспечивает согласованность между платформами.
дизайн-системы решает не только текущую проблему, но и обеспечивает согласованность между платформами.