Разбор концепта интернет-магазина деревянных игрушек
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор Екатерина Сидорович. Работа подана на разбор во время DL INTENSIVE 2021.
Это был проект для портфолио — мне нужен был интернет-магазин. Задача была поставлена мною — минималистичный интернет магазин с понятным интерфейсом, дизайн карточки товара, заказа и оплаты — я все это делала впервые. Для потенциального пользователя нужно было показать в дизайне — акцент на товар, чтобы ничего не отвлекало от выбора игрушки, приглушённые цвета в натуральном стиле. Нужно довести пользователя до покупки, максимально рассказав о товаре.
Привет, Катя! Спасибо за работу и смелость) При подаче ты написала интересующие тебя вопросы по работе, ответим на них и параллельно посоветуем, что улучшить:
1. Как на ваш взгляд реализована система заказа и оплаты товаров? Чего не хватает, удобно ли в плане UX?
В плане UX неудобно тем, что нет сущности корзины, в макетах она не показана. Не была учтена возможность быстрого добавления товара в корзину без дополнительного проваливания в саму карточку товара. User Flow продуман не полностью — точкой входа может быть не главная, а карточка товара в таргетной рекламе; а конечным пунктом пути пользователя будет не размещение заказа, а подтверждение получения заказа. В процессе чекаута в списке товаров есть радиобаттоны, функция которых не ясна.
2. Удобно ли, на ваш профессиональный взгляд пользоваться таким магазином
Смотря кому) Выдвинем гипотезу: более технически подкованные люди смогут спустя какое-то время разобраться, а менее — могут уйти с сайта, ничего не купив. Эти вещи можно проверить на модериуемом юзабилити-тестировании, например через сервис толока
3. Какие очевидные для вас детали я не учла при проектировании этого проекта?
Снова укажем на невозможность добавить товар в корзину — лишний клик для пользователя. А так же был допущен ряд недочётов при проектировании мобильной версии — некоторые элементы слишком маленькие для нажатия. Рекомендуем почитать о принципе thumb-friendly
4. Сколько бы вы заплатили за такой дизайн?
Столько, сколько вам будет готов заплатить заказчик, на основе того, как вы его убедите и того бюджета, что у него есть. Цена может зависеть от многих факторов: регион, уровень бизнеса клиента и от вашей репутации.
5. Не кажется ли магазин слишком пустым?
Опять же, для кого он должен казаться пустым или наполненным? Для покупателей он может показаться пустым, так как нет явно визуально выделенных маркетинговых предложений нет корзины. С точки зрения дизайнера, магазин выглядит почти настоящим из-за подобранных фотографий товаров.
6. Что смотрится нелепым в этом проекте и выдает то, что это первый мой магазин?
В каталоге у товаров нет Call-to-Action, однообразная сетка в разделе News, в карточках категории товаров приём с единорогом использован единожды и нигде больше не повторяется, хотя он увеличивает стоимость разработки
7. Что вам нравится в этом проекте и в каком моменте я приняла верное решение, когда сделала этот блок/элемент/страницу?
Что нравится написали ниже, а о правильности принятого решения лучше всего говорить после исследования рынка, конкурентов и последующего тестирования прототипов
Что хорошо в макете
Хорошо, что показано User flow, то есть было желание лучше понять пользователя и его поведение.
Подобран реалистичный и осмысленный контент для макета, а не рыба-текст. Подобраны качественные, хорошо поддерживающие идею фотографии, в том числе и не связанные с самим интерфейсом, например, фотографии детской комнаты. Есть сетка для десктопных разрешений и стремление разместить контент по сетке. Правильно, что процесс покупки разбит на шаги.
Что можно улучшить
Логика
Не указана специфика бизнеса B2C, в частности, производитель это или поставщик. Не описана конкретно задача и поставленные KPI. Если нет клиента, придумайте себе ограничения сами, например: работаем в Карелии и производим игрушки сами из местного сырья, отправляем товар только почтой России наложенным платежом. Так вы продумаете весь сценарий от точки касания до получения товара, а ваш дизайн станет более осознанным и системным.
Также, недостаточно проработана навигация по сайту, что наиболее критично в мобильной версии.
В самой карточке товара недостаточно информации для быстрого принятия решения о покупке. Это игрушки, значит покупки совершают, как правило, родители, родственники детей. Помимо цены их в первую очередь интересуют безопасность игрушки, на какую возрастную категорию игрушка рассчитана (от года, 3+ лет, 5 лет и т.п). Часть важной информации для принятия решения о покупке должна считываться очень быстро.
Сам процесс окончательного оформления покупки запутанный. Есть процесс Checkout, но неясно это часть корзины (Cart) или вместо неё, может пользователь попасть туда только с Home page или всё таки с любой страницы сайта по клику на иконку корзины.
Визуал
По типографике: в логотипе странная шрифтовая пара — toys потеряется на малых размерах. В текстах встречаются задвоенные пробелы, используются неправильные типографические символы. Текст надо вычитывать и прогонять через сервис Типограф или плагины в Фигме.
Проблемы с контрастностью обнаруживаются фигма-плагином a11y. Он позволяет оценить контраст по стандарту от A до AAA и сразу исправить цвет шрифта или фона.
По оформлению кейса: тематику кейса можно передавать с помощью различных украшательных элементов. Например, вместо кругов использовать силуэты игрушек. Ещё оживить кейс через видео: сделать прототип и записать с экрана, как вы с ним взаимодействуете.
Команда
Тут мы оцениваем, насколько будет удобно работать с этим файлом другим специалистам — разработчикам, менеджерам. Например, насколько хорошо показаны состояния элементов: карточки товаров при наведении, поведение верхнего меню при прокрутке и так далее
Так же, к макетам должен прилагаться базовый Style Kit и он у вас есть, но разработчикам не хватит информации, указанной в нём. Лучше прописывать заголовки от H1 до H4 и добавлять стили текста для обычного параграфа и кнопок.
По некоторым экранам мобильной версии видно, что интерфейсы не тестировались на реальных устройствах. Это можно сделать при помощи приложения Figma Mirror.
Что посмотреть, почитать
Если интересна тема e-commerce, рекомендуем почитать статьи из этого блога:
https://vc.ru/u/594661-kislorod-e-commerce
Контур. Гайды. Раздел «Принципы»
Основы для дизайна веб интерфейсов на английском
Хочешь такой разбор? Подписывайся на сервис обучения и поддержки дизайнеров