Разбор кейса интернет-магазина перкуссии
Замечания по UX-логике и рекомендации по работе с композицией и усилению визуальной части.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam и Figma, которые передаются автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Екатерина Короткова, подписчица DL PRO
Проект можно посмотреть на Behance
Какие ключевые вопросы по работе у тебя есть к менторам?
Работа с компонентами и автолейаутами. Возможно ли сделать компоненты из карточек каталога на главной странице. Наполнение у них одинаковое, но положение элементов разное
Задача
Концепт интернет-магазина перкуссии. Увеличить продажи за счёт расширения географии покупателей, привлечение новых подписчиков в Инстаграм
Большое спасибо, что поделилась своей работой! Мы разобрали кейс и макеты в Фигме.
Что понравилось в работе
Ты очень интересно описала логику создания проекта. Большинство твоих решений имеют причину, и ты об этом рассказываешь. Есть стремление понять целевую аудиторию интернет-магазина, выявить их проблемы, боли.
Понравилась работа с цветом и применение нестандартных визуальных решений.
Логика
В презентации работы есть описание ЦА и разбивка на две группы. Но не понятно, на основании чего (исследования, данные аналитики и т.п) получены данные о целевой аудитории? Не ясно также, как были выявлены проблемы ЦА и почему там не учитывается деление на группы.
На сайте не хватает информации об оплате и способах оплаты. В шапке нет раздела Оплата. В карточке товара и в корзине нет указания на способы оплаты. Получается, о способах оплаты человек может узнать только, когда перейдёт к самой оплате в корзине. То есть пользователю нужно пройти весь путь, потратить время, и в конце он может узнать, что у вас способы оплаты, которые ему не подходят. В таких случаях потенциальный покупатель может отвалиться ещё задолго до перехода в корзину.
Простое расположение в шапке или в подвале, в корзине где-нибудь иконок Visa, MasterСard, Qiwi и т.п. уже бы визуально подсказывало потенциальному покупателю, какими способами он сможет оплатить понравившийся товар ещё до совершения покупки.
Видно, что ещё не хватает насмотренности в сайтах e-commerce и в интерфейсах в целом.
Например, элементы фильтрации, которые визуально одинаковы, имеют разный функционал. По виду это radio buttons, то есть допускают одиночный выбор: или то, или другое. Так они себя и ведут в сортировке по цене и по популярности над карточками. Однако в боковой панели фильтров эти же элементы уже ведут себя как check box. Это явно вызовет сомнения и заставит человека «думать» над интерфейсом и взаимодействием с ним.
Сортировка по цене может быть по убыванию (от большей к меньшей), по возрастанию (от меньшей к большей). Какая сортировка будет тут? Что ждать пользователю?
Бизнес
Одной из задач указано привлечение новых подписчиков в Instagram. Это можно сделать и в самом Instagram путём грамотной организации работы с аккаунтом. В случае небольших интернет-магазинов логичнее через соцсети привлекать покупателей и увеличивать количество продаж.
Согласно статистическим и исследовательским отчётам уже в 2020 году процент людей, совершающих покупки с мобильного устройства составил около 40%, а по некоторым категориям товаров доходит до 70%. Поэтому странно, что в макете в Фигме отсутствует мобильная версия сайта. Намёки на мобильную версию есть лишь в конце презентации.
Если, как написано в презентации, задача увеличить количество подписчиков в Инстаграм, вообще желателен был бы подход mobile first, поскольку пользователи Инстаграм в основном туда заходят с мобильных устройств.
Визуал
Катя, ты очень здорово оформила каталог: обратила внимание на особенность инструментов и смогла использовать это для улучшения визуала. Такое необычное расположение фотографий инструментов выделяет твою работу на фоне других.
Типографика
Ты выбрала очень хорошие шрифты, каждый из них прекрасно выполняет свою функцию. Акцентный шрифт классно подходит теме проекта. И ты молодец, что обратила внимание на то, что текст должен хорошо читаться. Sourse sans pro действительно очень удобен для чтения, особенно больших блоков текста.
Но эти два шрифта слишком похожи между собой и шрифтовая пара получилась недостаточно контрастной. Такую пару можно использовать, только если дать достаточно разницы между шрифтами в цвете и размере. Например, использовать Underdog только с кеглями выше 36, а SSP только меньше 24.
Фон
Ты добавила в кейс много информации, рассказала про исследования — это здорово. Но для наглядности стоит визуально разделять блоки. Ты везде используешь фотографию как фон-подложку, лучше делать это более акцентно.
Здорово, что ты решила использовать нестандартный фон.
Но обрати внимание, как сейчас используют разные фоны в других проектах на Беханс: чередуют спокойный и акцентный фон, если акцентный — то с выраженной структурой или цветом.
Не стоит делать фон, отвлекающий от текста на всём проекте.
Сейчас фон из-за плохого качества пошёл пикселями и стилистически переносит дизайн к 2000 годам.
На самом сайте ты классно обыграла такой фон, но в карточках это смотрится хорошо.
Ты спрашивала про компоненты из карточек на главной. Это просто сделать, если использовать варианты: сделать расположение текста вариантами, а слой с изображением сделать отдельно и заменять непосредственно в карточке.
Но советую расположить текст у всех карточек с одной стороны — будет легче читаться.
Композиция
Ты хорошо поработала с сеткой, но сейчас в макете не хватает визуального ритма. Попробуй использовать принципы вот из этой статьи.
Для более сбалансированной композиции не забывай проверять элементы на соблюдение правил внутренних и внешних отступов.
В карточках каталога одновременно используется два выравнивания: по левому и по правому краю. Для того, чтобы считать информацию, приходится бегать глазами направо-налево, это не очень удобно. Будет лучше, если перенести фото инструмента вправо, а всю информацию выровнять по левому краю.
Помни, что основная функция композиции — управление вниманием пользователя. Например, в оформлении кейса ты очень интересный текст (описание того, почему ты выбираешь те или иные решения) прячешь.
Блоки с текстом-объяснением выступают за сетку. Обычно в таких местах используют стилистические изображения для настроения. Здесь достаточно важный и интересный текст, дай ему больше места и внимания читающих.
Цвет
Ты хорошо используешь выбранные голубой и синий цвета. Для контраста и ассоциации с музыкой можно использовать более яркие: желтый, красный.
Синий и голубой не контрастные цвета, вместе составляют спокойную пару. Для такой темы, как магазин перкуссии хочется добавить больше энергии, больше яркости. Например, как ты оформила главный экран — яркие цветные пятна краски.
Команда
Хорошо, что была работа по созданию UI Kit, видно желание работать с компонентами.
В целом макет слабо готов к передаче его в разработку. Беспорядок в слоях, не для всех элементов показаны состояния, что приведёт или к встречным вопросам от вёрстки, или к тому, что сверстают, как поняли.
Необходимо улучшать работу с наименованием элементов и с созданием компонентов. Лучше всего подходить к созданию компонентов с точки зрения атомарного дизайна.
Есть недопонимание, как правильно создаются текстовые стили для проектов. Созданно много одинаковых стилей, которые отличаются лишь местом их использования в макете. Достаточно к стилю сделать описание, где на сайте он будет использоваться.
Чтобы понять, как работать с autolayout в Фигме есть много материалов в Community. Набираешь в строке поиска figma playground и увидишь много полезных материалов, которые помогут разобраться как работают autolayout, variants и пр.
Что посмотреть
Композиция как средство управления вниманием зрителя
Видеоурок по работе с компонентами и Variants в Фигме
Пара полезных статей по разработке дизайна для интернет-магазинов. Про фильтрацию и сортировку и про основные ошибки в оформлении заказа, которые мешают совершать покупки посетителям интернет-магазина.
Работу разобрали Ксения Маркелова и Наталья Бухтиярова
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: