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

Не раз уже упоминал о сторителлинге на канале. Хочется более подробно разобрать этот маркетинговый приём, который стоит взять на заметку и UX дизайнерам. Поехали...

Что такое сторителлинг?

Если переводить дословно (англ. storytelling), то это "рассказывание историй" или сказительство. В маркетинге под термином подразумевают прием, который передает нужную информацию целевой аудитории через рассказ или историю.

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

Как истории помогают бизнесу

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

Бизнесу истории помогают решить следующие задачи:

1. Создать позитивный имидж

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

2. Продать товар или услугу

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

3. Сформировать связь с клиентом

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

На этом все! В следующей статье расскажу о том, из каких элементов строятся "продающие" истории и как вам это поможет в решении UX задач. Дайте знать если интересно!

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

Карточка товара – одна из наиболее важных страниц интернет-магазина, где пользователь решает - купить товар или пойти искать дальше. Собрал для вас советы основанные на передовом опыте в проектировании 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 примеров пользовательских интерфейсов

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