Правила создания карточки товара в интернет-магазине

Карточка товара – одна из наиболее важных страниц интернет-магазина, где пользователь решает - купить товар или пойти искать дальше. Собрал для вас советы основанные на передовом опыте в проектировании e-commerce сайтов. Надеюсь, статья будет вам ориентиром при создании собственных проектов.


1. Фотографии

Первое на что смотрит покупатель, это то как выглядит товар.

— Предоставьте как можно больше фотографий в высоком качестве. Если у вас есть видео или фото 360°, оно может помочь пользователю принять решение.

– Покажите как продукт выглядит в момент его непосредственного использования. Важно чтобы покупатель понял масштабы и размер товара. Если вы продаете одежду или аксессуары, обязательно покажите как они выглядят на модели

– Если у вас несколько вариантов, в галерее должны присутствовать как минимум 2-4 изображений каждого варианта 

– Если вы продаете товар с дополнительными компонентами (например электронику) покажите их также на фотографии

2. Описание товара

Немаловажно и описание товара. Очень многие пользователи досконально изучают характеристики, сравнивают разные модели из сегмента. 

– Не стоит прятать важные характеристики в таб-навигации. По опросам, проведенным Baymard Institute около четверти пользователей их не заметят.

– Если у вас несколько вариантов товара, все варианты должны быть взаимосвязаны. Если у варианта товара другого цвета отличается описание, это только запутает покупателя.

– Для технических продуктов, предоставьте пользователю легко читаемые характеристики в таблице. Если есть варианты или покупатель выбирает из похожих товаров, можно вывести данные в сравнительную таблицу. 

3. Цена

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

– Отображайте перечеркнутую старую цену во время распродаж. Также можно показать скидку в процентах или суммой.

– Покажите цену за единицу товара, продаваемого в разном количестве или на разную сумму. Например, цена за грамм для продуктов питания или цену за штуку в упаковке

– Предварительно показывайте скидку или бонусы при покупке нескольких товаров или на определенную сумму

4. Доставка

Всегда отображайте информацию о доставке в карточке товара, такую как: цена доставки, предполагаемая дата доставки, а также в наличии товар или нет.

– Разместите информацию о бесплатной доставке рядом с кнопкой "положить в корзину"

– Обязательно отображайте условия возврата. Это поможет подтолкнуть покупателя к принятию решения.

5. Отзывы

Отзывы других клиентов помогут снять часть страхов, которые мешают осуществить покупку. 

– Предоставьте диаграмму распределения оценок в верхней части раздела отзывов

– Мотивируйте пользователей оставлять отзывы

– Частая ошибка - привязывание отзывов к вариантам товаров. Таким образом получится неравномерное количество отзывов распределенное по вариантам. Указать какой вариант купил пользователь можно в самом отзыве. А все отзывы вывести для карточки товара в целом.

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

Гайдлайны, сторителлинг, карточка товавра...

По традиции недельный дайджест.

– 28 Figma-плагинов для экспорта, импорта и конвертации данных

– Психология в дизайне — эффект «эстетика в юзабилити»

– Зачем нужны гайдлайны

– Могут ли интерфейсы быть предметом искусства?

– Сторителлинг в UX #1

– Правила создания карточки товара в интернет-магазине

Если неделя была для вас полезной, жмакаем по реакциям!

7 разделов сайта, где пользователи ждут от вас креативных решений

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

1. Пустые состояния
2. Онбординг
3. Страницы ошибок
4. Иконки и анимация загрузки
5. Экран отсутствия интернет-соединения
6. Уведомления
7. Технические рассылки

Более подробно с конкретными примерами можно ознакомится по ссылке:
→ Ссылка на статью

Психология в дизайне – Закон Постела

Закон Постела также известный как принцип надёжности сформулировал Джон Постел — один из первых инженеров в интернет-сфере — в первую очередь для компьютерных сетей и протоколов.  Изначально, закон звучал так:

Будьте консервативны в том, что отправляете, и либеральны в том, что принимаете.

Цель принципа – создание надёжных систем, способных гибко реагировать на запросы пользователя. Применимо к дизайну, закон можно перефразировать как: Относись лояльно к пользователям и критично к себе.
Задача дизайнера – предусмотреть все требования пользователя и реализовать их в цифровом продукте.  В первую очередь, это касается того, как система должна реагировать на действия пользователя:

– преобразуйте вводимые данные в соответствие с ожиданиями

– используйте автозаполнение полей, где это возможно

– отображайте подсказки (пользователь не обязан заранее знать как все работает)

– собирайте обратную связь, чтобы учесть потребности конечных пользователей

Обратите внимание на пример на гифке внизу. Номер телефона преобразовывается именно в тот формат, в котором пользователь привык его видеть.

Было полезно? Дайте знать в реакциях!

Как не потерять покупателя в начале пути. Лучшие практики онлайн регистрации

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

Если признаться, я не люблю регистрироваться когда покупаю что-то онлайн, и в этом я наверно не одинок. Регистрация – трудоемкий процесс. Поэтому многие магазины предлагают опцию "гостевой покупки". Но если у вас маркетплейс, то без регистрации никак не обойтись. Авторы статьи подробно и с кучей примеров проанализировали авторизацию AliExpress, OZON, Wildberries, СберМегаМаркет и Яндекс; разобрали ошибки и выделили лучшие методы, которые не дадут покупателю "соскочить".

На самом деле, показанные практики применимы не только к интернет-магазинам, но и к любым сайтам, где нужна регистрация. Поэтому очень рекомендую к прочтению!

Ссылка на статью

Зачем нужны дизайн-мудборды

Не раз упоминал этот инструмент в статьях. Решил, что пришло время подробней разобрать, что такое мудборд и как его использовать.

Если переводить дословно с английского, то мудборд — это доска («board») настроения («mood»).
В дизайне мудборд — это подборка изображений, с примерами дизайна, фотографиями, цветовыми палитрами, текстурами и типографикой. Также его принято называть – коллаж настроений. Все элементы размещаются в виде коллажа на одном поле для проработки визуального образа продукта.


Зачем нужен мудборд?

Выделю четыре основных пункта:

1. Определить визуальный язык продукта

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


2. Сэкономить время

Проработка первых концептов макета может быть довольно трудоемким процессом. В то время как за короткое время собранный мудборд может служить концептной наработкой для обсуждения первых идей с заказчиком.


3. Согласовать визуальный стиль с заказчиком

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


4. Облегчить коммуникацию с заказчиком

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

На этом все! В следующей статье по этапам рассмотрим как создавать мудборд и на что стоит обратить особое внимание. Если интересно, дайте знать в реакциях!

Проверьте себя, насколько вы в состоянии нарисовать ровный круг 🤩 Кидайте ваши шедевры в комменты!


https://vole.wtf/perfect-circle

Инструменты UX – Интервью

Продолжаем тему UX-исследований, на этот раз разберем как проводить пользовательские интервью, какие ошибки стоит избегать, как анализировать и как все это работает в связке с другими инструментами UX. Разобрал на личном примере. Погнали...

Интервью – популярный метод UX-исследования, позволяющий изучить потребности пользователей. Его можно использовать как и на начальной стадии разработки продукта, чтобы определить, каким требованиям должен отвечать будущий продукт, так и для определения проблем и потенциалов в уже существующем проекте. 

Интервью – свежий пример из личного опыта

Одной IT-компании нужно было внедрить инструменты для улучшения взаимодействия разработчиков, улучшить Developer Experience (DX). Изучив структуру IT-отдела, мы выделили следующие основные группы: фронтенд, бэкенд, DevOps-инженеры и разработчики ИИ. Из каждой группы отобрали по два человека для интервью. Получилось всего 8 участников. Один из наиболее важных шагов на этом этапе – подобрать правильные вопросы.

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

Как мы проводили интервью

На каждого участника выделялось по 20 мин. Для начала задавались вопросы для разогрева: как долго работаешь в команде? Над каким проектом? Какие инструменты используешь итд. После чего интервью плавно переходило к тематике онбординга: сколько времени понадобилось, чтобы "влился" в команду? С какими проблемами столкнулся? Что-бы хотел улучшить? Также мы просили привести пример хорошего опыта онбординга из других компаний.

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

Несколько советов для подготовки интервью:
– заранее создайте шаблон с вопросами и полями для ответов, куда будете все записывать
– не перебарщивайте с вопросами. Интервью не должно стать скучным допросом! Мы, например, удалили треть вопросов из первоначального варианта
– проводите интервью в комфортной, знакомой для респондента обстановке

Конспект ответов

Важно не только задавать вопросы, но и документировать все ответы. Многие детали из разговора вы можете позабыть, поэтому советую проводить интервью вдвоем. Если один ведет непринужденную беседу, то напарник может спокойно конспектировать, следить за реакцией собеседника. Все вопросы и ответы мы отсортировали на доске FigJam. Далее пометили наиболее важные выводы и предложения.

- Вопросы и ответы одного из участников интервью


Анализ данных

На основе полученных данных мы смогли более четко определить потребности нашей ЦА и составить портрет пользователей по методу персон. С учетом ожиданий и болей пользователей мы смогли наметить конкретные цели для будущей реализации.

- Портрет одного из пользователей собранный в FigJam

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

- Карта пользовательского пути фронтенд-разработчика

Статья хоть и получилась длинной, зато я надеюсь, наглядно показала, как все инструменты исследования взаимосвязано работают на конкретном примере.
На этом у меня все. Если было полезно, вдарьте по реакциям!

#методы

Закон Постела, дизайн-мудборды, как проводить интервью...

По традиции дайджест полезных материалов за неделю:

– 7 разделов сайта, где пользователи ждут от вас креативных решений

– Психология в дизайне – Закон Постела

– Как не потерять покупателя в начале пути. Лучшие практики онлайн регистрации

– Зачем нужны дизайн-мудборды

– Инструменты UX – Интервью

Вдарьте по реакциям если неделя была для вас полезной!

Ресурсы для поиска референсов элементов интерфейса

Небольшая подборка ресурсов для вдохновения и исследования компонентов интерфейса разных приложений и сайтов.

Mobbin.com - коллекция интерфейсов приложений
Огромная коллекция качественных скринов мобильных и веб-приложений. Можно искать по отдельным компонентам интерфейса, а также по паттернам пользовательского взаимодействия.

Checklist.design - популярные паттерны в UI
Подборка паттернов и элементов интерфейсов с подробным описанием и ссылками на живые примеры

Lookup.design - элементы UI и посадочные страницы
Большая коллекция с примерами элементов интерфейса. Также есть примеры комбинации типографики и лендинов популярных брэндов.

Interface-index.com - примеры интерфейсов для бизнес-сервисов и программ
Элементы интерфейса B2B, SaaS-сервисов и программ. В коллекции собрано 345 примеров пользовательских интерфейсов

Как вам подбока? Поделитесь в реакциях!

Психология в дизайне – Бритва Оккама

Бритва Оккама — методологический принцип, названный в честь английского философа Уильяма Оккамского, также называемый принципом бережливости, или законом экономии. В кратком варианте правило гласит: 

Не следует множить сущее без необходимости. 

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

Несколько примеров как этот принцип может работать в интерфейсах

Сокращать количество кликов
Упрощать структуру навигации и элементов взаимодействия (например авторизация через соцсети вместо регистрации)

Сокращать количества экранов
Уместить информацию на одной странице, вместо нескольких экранов (например одностраничные лендинги)

Сокращать количество информации
выбрасывайте всю "воду" оставляя только ключевой смысл

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

На этом все! Дайте знать в реакциях, если было познавательно.

Конференция Virtual Schema от Figma о дизайн системах

На прошлой неделе прошла конференция от Figma посвящённая дизайн системам. Если вы пропустили, то вот подборка наиболее интересных докладов:

1. Architecting subcomponents
Про консистентность компонентов и синхронизацию с кодом через API
> Ссылка на видео

2. Expanding your design system’s sphere of influence and other lessons I’m still learning
Доклад от продакт-менеджера Dropbox о политике внедрения дизайн мышления внутри компаний
> Ссылка на видео

3. Evolving systems with data and heart 
Доклад Uber о системе плагинов — Base, с помощью которых их команда управляет дизайн системой.
> Ссылка на видео

4. Navigating complex system updates
Доклад компании Zalando о процессе обновления большой дизайн системы
> Ссылка на видео

5. Rolling out design tokens to a branded house with 18+ products
В докладе от команды Atlassian рассказали, как они создают и внедряют дизайн токены в свои продукты
> Ссылка на видео

Более подробно можно почитать в статье на vc.

Как создавать мудборды

Зачем нужны мудборы, мы уже разобрались в прошлой статье, теперь рассмотрим как их правильно собирать.

1. Изучите вышу ЦА

В идеале у вас уже должны быть проработаны пользовательские персоны. На их основе будет проще определиться со стилем будущего проекта. Как референсы можно взять фотографии или цветовые палитры задающие нужный эмоциональный настрой.

2. Изучите тренды

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

Пример мудборда для страницы керамики ручной работы

Пример мудборда для приложения


3. Выделите основную тему

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

Пример мудборда для дашборда концепного автомобиля над которым мне довелось трудиться. Основная тема – светящиеся точки в пространстве формирующие элементы интерфейса.


В заключение

Не стоит останавливаться на одном стиле. В процессе творческого поиска вы можете собрать несколько мудбордов демонстрирующих разные идеи. Зачастую интересные решения получаются именно за счет слияния элементов из нескольких концептов.

На этом у меня все! Если было позновательно, дайте знать в реакциях.

Сторителлинг в UX #2

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


1. Определите цель

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


2. Определите героя

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


3. Продумайте сюжет

Не зависимо от того, реальная ваша история или вымышленная сюжет должен дать ответы на следующие вопросы: Что произошло? Где и с кем это случилось? Как повели себя герои? Чем все закончилось? Таким образом вы получите готовый скелет истории, который можно наполнять деталями: диалогами, другими действующими лицами и событиями. Важно, чтобы ваша история была максимально приближена к реальности. Можете рассказать о забавных жизненных случаях, описать свои эмоции и реакции клиентов. Поделитесь сложностями, которые возникали на пути решения задачи — читателю они часто интереснее результата.

Сам сюжет еще со времен Аристотеля строится на трех классических актах, которые продемонстрированы на графике внизу поста. А именно:

1) Завязка
Изложение сюжета, например "жила-была Красная шапочка и решила она навестить свою бабушку..."

2) Сюжетный поворот
Как правило тут обрисовывается проблема героя. В сказке - волк съедает бабушку...

3) Развязка
Позитивное (или не очень) разрешение проблемы. На примере Красной Шапочки – это успешное спасение бабушки.


4. Добавьте мораль

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


На этом всё на сегодня. В следующий раз поговорим об упаковке ваших историй в зависимости от контекста. Дайте знать в реакциях, если тема вам интересна.

#методы