Инструменты 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. Добавьте мораль

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


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

#методы

Бритва Оккама, мудборды, дизайн-тренды и сторителлинг...

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

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

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

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

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

- Тренды в портфолио дизайн-агенств

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

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

5 шагов для создания успешного кейса на Behance

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

1. Придумать обложку
2. Наполнить деталями
3. Загрузить видео
4. Передать атмосферу
5. Добавить ключевые фразы

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

Также советую почитать мои старые посты по теме, если планируете выложить новые работы в портфолио 

> Как правильно создавать кейсы

> Как продвигать свои работы на Behance

> Как составить портфолио 1

> Как составить портфолио 2

Психология в дизайне - Ошибка выжившего

Ошибка выжившего – это когнитивное искажение, в основе которого лежит непонимание причины и следствия приводящее к неверному суждению.

Одним из примеров ошибки выжившего является исследование проведенное в ходе Второй мировой войны. Американская авиация несла немалые потери, а уцелевшие самолеты, вернувшиеся на базу, имели множество пробоин. Чтобы сохранить самолеты, напрашивалось очевидное решение – укрепить наиболее поврежденные части. Но в ходе дальнейших исследований венгерский математик Абрахам Вальд пришел к полностью противоположному выводу. Большинство попаданий у "выживших" самолетов приходилось на не критичные части. Поэтому бронировать нужно те места, где у «выживших» машин не было пробоин, что в дальнейшем помогло значительно снизить потери американской авиации и сохранить много жизней.

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


Как применять в дизайне

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

– Избегайте шаблонного мышления. То, что работало с одним клиентом, необязательно принесет те же результаты с другим

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

– Ищите уникальный подход для каждого проекта принимая во внимание индивидуальные аспекты и переменные

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


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

ТОП 6 плагинов Figma для работы с типографикой и текстами

Небольшая подборка полезностей облегчающих работу с шрифтами и типографикой

Typestyles
Генерирует текстовые стили используя font-size, font-family и многое другое...


SBOL Typograph
Плагин для исправления и форматирования кириллического текста на основе правил типографики


Font Viewer
Добавляет предпросмотр локальных шрифтов в Figma


Font Scale
Практичный инструмент для создания гармоничной типографской иерархии


Change Text
Позволяет редактировать текст сразу в нескольких слоях, группах и фреймах.


Typography Styleguide
Создает стайлгайды типографики на основе стилей документа


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

Что такое UX-бенчмаркинг

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

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

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

Виды UX-бенчмаркинга

Рассмотрим основные два вида бенчмаркинга и когда их стоит применять

1. Сравнительный конкурентный анализ

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

2. Оценка эффективности продукта

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

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

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

#методы

Ролик Google о стилистике Material Design

В ролике отображена визуализация Material You, последней итерации дизайн системы Material Design. Основная тема – атомарный дизайн и микроинтеракции. Ролик создан в сотрудничестве с немецкой анимационной студией Someform.

Как вам креатив?

Сторителлинг в UX #3 - упаковка историй

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

1. Мономиф

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

Кстати, Дэн Хармон, один из создателей сериала «Рик и Морти», придумал собственный сценарный метод на основе мономифа, который так и называют «круг Хармона»


2. Рамка

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


3. Сравнение

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


4. Начало с середины

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


5. Лепестки

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


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


Как сторителлинг может помочь решить UX задачи

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


Напоследок несколько примеров сторителлинга

Пример двух рекламных постов
Один написан "по классике" с описанием проблемы и призывом, а другой — с историей. Второе объявление показало х10 кратную эффективность.


Интернет-маркетинг по-деревенски: как фермер клиентов в соцсетях искал
Пример хорошо написанного бизнес кейса. История привлекла новых клиентов и инвестора.


Рекламный ролик Axe «Make love, not war»  
Преподносит продукт в другом свете интригуя неожиданной развязкой


The Boat
Интерактивная графическая новелла 


Вебстраница изготовителя сумок Bagigia
Продуктовая страница, где главным героем выступает сам продукт (смотреть версию на десктопе)


На этом все! Если было полезно, дайте вашего 🔥

#методы

Ошибка выжившего, UX бенчмаркиг, упаковка историй...

Темы статей вышедшие на этой неделе:

5 шагов для создания успешного кейса на Behance


Психология в дизайне - Ошибка выжившего


ТОП 6 плагинов Figma для работы с типографикой и текстами


Что такое UX-бенчмаркинг


Сторителлинг в UX #3 - упаковка историй


Как вам темы статей? Если есть предложения о чем стоит написать, кидайте в бот @uxtrends_bot или комметарии.