UX-дизайн

Обзор 20+ программ для UX-дизайнера: какую выбрать и когда

Собрал подборку программ, которые применяю в работе с заметками о пользе. Получился комплект инструментов для UX-дизайна, которые помогут проработать проект по стандартам d.school и NNGroup.
Иллюстрация Jerome Damey: https://dribbble.com/shots/13969693-Battle-in-the-Deep

Статья – это арсенал, который поможет справиться с крупными и повседневными задачами UX-дизайнера. Здесь вы узнаете для чего полезен каждый инструмент и сориентируетесь по плюсам и минусам. Среди инструментов: Figma, InVision Studio, Google Docs и другие.

Кстати, если вы увлекаетесь дизайном, вам может пригодиться свежий обзор курсов по UX-дизайну.

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

Содержание:

Разбираем инструменты UX-дизайнера в привязке к процессу дизайн-мышления

Процесс UX-дизайна полностью наследует процесс дизайн-мышления и включает 5 этапов, которые перетекают друг в друга 👇

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

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

ТОП программ для понимания задачи (эмпатия)

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

1. Zoom, Skype, Slack, Teams, Почта — инструменты для вытягивания данных о проекте

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

2. FigJam, Miro, xMind и UX-комплект — инструменты работы с фактами и выработки стратегии

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

FigJam, Miro, xMind – пригодятся для создания ментальных карт (mindmap). Ментальные карты хороши для подачи ландшафта фактов и ускоряют принятие решений в проекте. Чем нагляднее представляешь факты, тем проще принимать решения о следующих шагах.

UX-комплект (принтер, пробковая доска проекта, листы A4, карандаши, маркеры и стикеры) – пробковая доска и принтер настраивают на создание жизненных вещей. Сам факт печати настраивает на наглядную упаковку результатов каждого шага. В итоге все следы путешествия по фактам к цели удобно сохранять на пробковую доску, анализировать ландшафт размышлений и быстрее двигаться дальше.

3. Google-таблицы — инструмент для создания траектории и чек-листа движения по проекту

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

ТОП программ для UX-исследования и анализа (эмпатия)

Результат UX-исследования – инициатива (предложение) по трансформации продуктовой экосистемы. Каждый из инструментов помогает в детализации этой инициативы. Напомню, что познакомиться с картой, которая поможет быстрее находить точки для развития приложения, вы можете в обзоре методов исследований от NNGroup.

1. Google Docs, Notion — инструменты для создания журнала движения идей

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

Превратите Google Docs в журнал идей:

  1. в хронологическом порядке выписывайте все важные идеи, которые связаны с проектом и
  2. привязывайте их к дате возникновения
  3. Каждый день у вас должна быть минимум одна значимая заметка по проекту.

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

2. Google Analytics 360, OWOX BI, Amplitude — системы аналитики для количественных исследований сегментов

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

Подход к изучению 30 млн. аудитории сервиса с целью повышения ценности сервиса.

3. Screen Recorder, Audio Recorder, Zoom/Skype — инструменты для интервью, наблюдений и других культурных/качественных исследований в сегментах

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

4. Python, Retentioneering-tools, Google Sheets — расширенный набор инструментов для обработки данных

Данный комплект помогает методом творческого поиска проверить интересные идеи, которые возникнут в результате культурных исследований сегментов.

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

Retentioneering-tools наглядно зарисовывает все настоящие способы использования (User Flow Graph) цифровой системы кластерами пользователей (Behavioral segments). Каждый кластер взвешивает по перспективности для бизнеса и подсказывает где и что можно улучшить. А затем берет на себя вывод по A/B. Подробнее об инструменте

Google Sheets — это классика, когда есть небольшие объемы данных, по которым требуется выяснить обстановку, наметить дальнейший план действий и презентовать команде. Инструмент также полезен для построения карты событий.

5. Системы опросов, Google-опросы и uxfeedback – инструменты для сбора дополнительные информации о предпочтениях аудитории

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

Совет: Обратите внимание на uxfeedback. Сервис помогает собирать информацию когда пользователь находится в контексте использования продукта. Софт помогает организовать Intercept Surveys, True-Intent Studies

6. Google Docs/Google Slides, Figma, Loom – инструменты для упаковки результатов и презентации результатов UX-аналитики/UX-исследований

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

Например, огромный пласт наблюдений, интервью, юзабилити-тестов и анализа данных можно сжать в формат Customer Journey Map и презентовать команде с подсвеченными барьерами для корректировок.

Пример слайда с упаковкой комплексных исследований.

Совет: краткий отчет вы можете подать в формате Loom и отправить команде. Так каждый будет в курсе важных предложений.

Loom – сервис для обмена видеосообщениями с командой.

ТОП программ для генерации идей и разработки структуры (фокусировка)

На этапе «Эмпатия» вы погрузились в достаточный объем данных (качественных и количественных) и готовы взяться за проектирование и моделирование.

1. xMind, MindMeister, Miro — программы для структурирования информации

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

IA в формате «статус/свойства/операции».

2. Miro, Figma — программы для создания маршрута пользователя (CJM), информационной архитектуры (IA) и шагов достижения цели в продукте (User Flow)

Отличные инструменты для развития модели продукта. В них удобно собирать макеты, информационную архитектуру (IA) и пользовательские сценарии (User Flow).

3. BPMN — инструменты моделирования процессов и логики работы модели продуктовой экосистемы

BPMN (англ. Business Process Model and Notation, нотация и модель бизнес-процессов). С помощью синтаксиса BPMN можно удобно визуализировать потоки работы системы и их оркестровку. BPMN поможет наглядно подать полный процесс взаимодействия системы/продукта с пользователем, до, во время и после. А еще такая схема помогает вовлекать всех участников проектов в единый поток инженерной и конструкторской работы по развитию.

ТОП инструментов для проектирования, создания дизайн-концепций и прототипов (прототипирование)

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

1. Figma — онлайн-сервис для проектирования и дизайна интерфейсов

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

2. InVision Studio — софт для проектирования и дизайна интерфейсов

Годится как самостоятельный инструмент прототипирования или может сыграть роль напарника для Figma (если требуется проработать мягкое поведение системы и приблизить ее к боевому режиму работы или собрать шоурил для демонстрации). Прототип из InVision годится для тестирования по ссылке в боевой среде.

ТОП программ для UI-дизайна и стилизации (прототипирование)

Приложения для проработки экранов приложения и библиотеки компонентов, комбо для создания иллюстраций и знаков, а также приложения для создания 3D и анимации.

1. Figma — приложение для создания многоэкранных систем

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

2. Photoshop — софт для создания коллажей, уникальных графических ходов и фотоэффектов

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

3. Procreate — iPad-приложение для шустрого создания клевых иллюстраций

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

4. InVision Studio или ProtoPie, Principle, After Effects — программы для проработки анимации

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

ТОП инструментов для тестирования на реальных пользователях и сбора обратной связи (тестирование)

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

1. InVision Studio — программа для прототипирования и сбора обратной связи

InVision затачивают на отладку дизайн-решений прямо в полях. Об этом можно подробнее почитать в кейсе от Uber из гайда «Практика быстрого прототипирования и тестирования продуктовых решений».

2. Notion, Google Docs, Google Sheets — софт для создания и структурирования заметок

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

3. Google Drive — облако для материалов по проекту

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

Заметка: Для проведения A/B-тестов и других поведенческсих экспериментов с целью качнуть экономику вам также пригодится ТОП программ для UX-исследования и анализа.

Вывод и рекомендации

В подборке полезные инструменты, которые приходятся в UX-проектах. Figma – это must-have на всех этапах.

Натренировать дополнительные навыки UX-дизайна вы можете на платформе Breezzly. На Breezzly вас обеспечат серией проектов по дизайну на основе исследований, обучат системе работы и натренируют навыкам в целом комплексе инструментов (Figma, InVision Studio, Principle и другие) — все это поможет усилить ваше портфолио. Пробуйте!