Как провести UX-аудит, организовать дизайн-систему и структурировать план развития? Подборка материалов по UX-дизайну
Предпочтения пользователей меняются все чаще, поэтому важно быть в курсе актуальных тенденций. В тексте вы найдете полезные материалы, которые помогут развить карьеру в UX-дизайне, научиться новым подходам на практике и не только.
Используйте навигацию, если не хотите читать текст полностью
Входим в профессию
UX-дизайнер — это специалист, который отвечает за проектирование удобного и интуитивно понятного пользовательского интерфейса (user experience design). Он уделяет внимание не только внешнему виду, но и функциональности, навигации, удобству взаимодействия.
Проектировщиком интерфейсов может работать не каждый. Разработка макета и вывод интерфейса в продакшн — лишь верхушка айсберга. В его основании — много общения, аналитической и исследовательской работы.
Чтобы эффективно справляться с этими задачами, специалист должен обладать набором качеств и навыков. Их можно поделить на три уровня: фундаментальный, базовый и профессиональный.
На фундаментальном уровне — личностные качества. Среди них — наблюдательность, эмпатийность, рефлексивность. Специалист должен понимать пользователя и замечать его неудобства.
На базовом — навыки, которые нарабатываются с опытом: научно-рациональный подход, критическое мышление, умение доносить свои мысли. Важно уметь докапываться до сути и подкреплять решения аналитикой. Здесь же актуально умение управлять своим временем и ценить время других людей.
На профессиональном уровне UX-дизайнеру будут на руку разносторонность и интерес к различным областям знаний. Например, социологии, психологии, редактуре, нейробиологии, менеджменту, дизайну, статистике и т. д. Получили образование по одной из специальностей или проходили курсы? У вас уже есть задел, чтобы стать проектировщиком интерфейсов. Главное — продолжать учиться чему-то новому.
А вот из наименее важного в работе UX-дизайнера можно выделить довольно неочевидные пункты.
- Красота и выверенность макетов. Главное — их ясность и читабельность.
- Скорость работы. Дедлайны, конечно, существуют для всех. Но если вы понимаете, что вам нужно провести еще один опрос пользователей или коридорное тестирование, скорее всего, вас в этом поддержат. Глубина проработки темы важнее скорости внедрения.
- Выбор инструментов. Вы можете делать макет в Figma, а можете накидать понятный скетч на обычном листе A4.
Разрабатываем PDP
PDP (personal development plan) — это план развития, созданный под ваши потребности.
Как правило, формат используется в контексте развития карьеры. В нем сформулированы:
- профессиональные цели;
- действия, которые приведут к этим целям;
- сроки их реализации;
- метрики для отслеживания их эффективности.
Шаг 1. Выбрать цели
Первый вариант — оценить себя самостоятельно. Так вы сможете заметить недостаток специфического навыка, которого нет в матрице компетенций, но который важен для работы и команды. Подумайте, какие задачи вам нравится делать. С какими сложностями сталкивались на последних проектах? Бывает, что рефлексия дается с трудом. В таких случаях отталкивайтесь от подходящей матрицы компетенций.
Второй вариант — запросить обратную связь. Каждый из коллег в зависимости от своей роли и компетенций сможет дать вам отклик по определенному набору навыков. Комбинация двух подходов позволит получить более полную оценку.
Шаг 2. Выбрать стратегии
Теперь у вас на руках список навыков, которые можно развить. Важно понять, с каких начать и сколько из них прокачивать в рамках одного PDP. Словом, нужно определиться со стратегией. Здесь есть выбор.
- Подтянуть все до одного уровня, ориентируясь на описание грейда. Такой подход позволит быть универсальным специалистом.
- Вложиться в развитие навыков, которые уже находятся на высоком уровне. Это позволит вам стать экспертом в конкретной области.
- Освоить компетенции для новой роли. Актуально, если в ближайшем будущем хотите перейти в смежную область.
Шаг 3. Зафиксировать точки А и Б
Необходимо понимать всю шкалу владения навыком. Важно разделять их категории: знаю, умею, владею. Знать — понимать в теории, уметь воспроизводить и объяснять материал. Уметь — решать типовые задачи за счет стандартных алгоритмов решения. Владеть — решать усложненные задачи в нетипичных ситуациях и уметь передать этот опыт.
Составление PDP — не обязательная задача для каждого члена команды. Решение должно быть добровольным. Навязывать развитие «сверху» — бесперспективная идея.
Проводим UX-аудит сложного продукта
UX-аудит — оценка продукта или его отдельных фичей на предмет удовлетворения пользовательских потребностей и попадания в бизнес-цели.
Но с чего начать аудит, как провести его быстро и качественно? Распространенная ошибка на старте — скатиться в оценку UI (user interface). Хоть проблемы в визуальной части негативно влияют на UX, обычно это лишь верхушка айсберга. Чтобы дойти до его основания, следует придерживаться определенного порядка действий.
- Зафиксируйте ключевые цели продукта для пользователя и бизнеса. Сосредоточьтесь на фичах, которые помогают достичь и тех, и других – именно такие нововведения в долгосрочной перспективе обеспечивают успех продукта.
- Проанализируйте данные о продукте и фиче. Посмотрите на показатели, которые собирают системы веб-аналитики. Если таких нет — стоит просигнализировать команде, что нет важного источника данных о поведении пользователей, и завести задачку с высоким приоритетом.
- Оцените, насколько интерфейс попадает в представления пользователя о том, как должен работать продукт по методике эвристической оценки. Эвристика — это рекомендация, правило или суждение эксперта, которое принято считать верным.
- Подготовьте отчет для команды. К финальному этапу у вас будет много материалов, которые следует собрать в емком формате. Оптимальный вариант — подготовить презентацию с выводами по каждому шагу, провести демо на интерактивной доске.
Перезапускаем дизайн-систему: ошибки и лучшие практики
В 2022 году мы создали свою дизайн-систему (ДС). Это был сложный путь, в результате которого вынесли для себя множество профессиональных уроков. Цель была следующей: создать 45 компонентов и 10 паттернов. Этот набор закрыл бы 99% потребностей при проектировании. Пробежимся по нескольким из уроков.
Урок 1. Выделите одного владельца системы
К этому нас подтолкнули некоторые предпосылки. К примеру, над проектом работала вся UX- и FE-команда: мы распределили нагрузку и запланировали процессы, но не четко зафиксировали роли. Казалось, что ответственность за результат (несмотря на то, что есть менеджер проекта) лежит на всех участниках. И что все смотрят на важность ДС и ее необходимость для будущей работы.
На самом деле, это ловушка. Когда ответственных несколько, можно считать, что ответственного нет. Наличие одного владельца гарантирует единую точку для принятия решений и помогает следить за порядком в процессах.
Урок 2. Учитывайте уровень сложности, ресурсы и опыт команды при планировании работ
Не стоит брать за референс время разработки черновика для одного компонента. Во-первых, выборка слишком маленькая для масштабирования. Во-вторых, компоненты и уровень навыков у коллег в команде всегда разные.
Работая с командой в первый раз, лучше относиться к первой итерации как к тестовой и не строить ожиданий. Затем вы можете провести ретро и построить предположения по срокам.
Урок 3. Фиксируйте договоренности в публичном пространстве
Знания не должны храниться локально у некоторых дизайнеров и разработчиков. Следует создать единое пространство для фиксации договоренностей, а также повышать общую вовлеченность команды.
К примеру, хорошей практикой будет, если вести записи по ежедневным синкам каждый раз будет новый сотрудник. Так у вас всегда будут логи и повысится вовлеченность в обсуждения.
Во внутренней базе знаний компании всегда должен быть порядок. Дерево данных следует организовать так, чтобы по заголовку было сразу понятно содержание страницы. Если это сделать, время на поиск ответа и выяснение деталей заметно сократится.
Создаем паттерн проектирования
Однажды нам нужно было разработать интерфейс формы создания облачного сервера. Но часто в подобных задачах есть нюанс — конфигуратор при большом наборе функций должен оставаться интуитивно понятным для пользователей. С задачей мы справились, а позже и переложили наработанный опыт в паттерн.
Паттерны взаимодействия пользователя с интерфейсом — одна из ключевых частей дизайн-системы. Они должны состоять из распространенных компонентов, чтобы пользователи лучше воспринимали UX, а проектировщики готовили объекты наиболее простым путем. Помимо прочего, с помощью паттернов можно сократить не только время разработки, но и экономические издержки. Как их применить на практике? Посмотрим по шагам.
Шаг 1. Выбираем форму создания объекта
После формирования требований к процессу создания объекта проектировщику нужно выбрать подходящую форму. Через нее он будет проектировать сценарий взаимодействия. Это может быть модальное окно, пошаговый мастер создания или одна страница.
Шаг 2. Планируем структуру
Поля объединяются в логические блоки и располагаются в форме от наиболее важных до дополняющих или второстепенных. Таким образом, во время создания облачного сервера пользователя будет интересовать операционная система и конфигурация, а при создании файрвола — сеть и настройка правил фильтрации трафика.
Шаг 3. Снижаем когнитивную нагрузку
Поля формы по возможности заполняются за пользователя наиболее оптимальным образом. Мы должны упростить процесс за счет работы лишь с необходимыми опциями. Классический пример — имя объекта. Не всегда оно имеет какое-то принципиальное значение, поэтому паттерн предлагает предзаполнять подобные поля.
Шаг 4. Сокращаем время ответа системы
Во-первых, следует максимально сократить время отклика интерфейса на действия пользователя. Речь не только про скорость работы системы, но и про заметность отклика, контакт интерфейса с человеком. В этот пункт можно отнести и правила валидации вводимой информации. Если мы можем проверять данные в момент ввода, то должны это делать, чтобы быстрее уведомить пользователя об ошибке.
Во-вторых, Учитываем особенности создания объектов. В какой момент пользователь создает объект? Как часто он это делает? Вся ли информация для этого доступна?
Чтобы не упустить такие особенности интерфейса, рекомендуем создавать интерактивные прототипы и проходить различные пути. А после — проводить подобное тестирование уже на ваших пользователях. Так, тестируя в Figma интерфейс, мы определили, какие поля можно запоминать, чтобы не вводить их каждый раз.
Стоит помнить о важности исследований и тестирований, чтобы создавать продукты, которые будет понятно и удобно использовать. А с какими трудностями сталкивались вы в работе c UX-дизайном? Делитесь в комментариях!
Навыки, которые необходимо развивать, и как это сделать — все очень доступно и понятно описано