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

Дизайн-системы

Material Design by Google.

Эта дизайн-система довольно популярна, но мало кто её хорошо знает: когда её лучше использовать, и какие решения она предлагает. И давайте будем честны, читать мало кому хочется, но, как по мне, самое лучшее усвоение — это на практике. Возьмите любой проект и возьмите дизайн-систему материала для изучения работы компонентов, принципов, которые разрабатывала команда дизайнеров в Google. Вы ощутите и поймете, как на самом деле работает эта дизайн-система, все её плюсы и минусы.

Human Interface Guidelines by Apple.

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

Carbon Design System by IBM.

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

Упомяну ещё дизайн-системы: Atlassian (Jira, Confluence, Trello), Pajamas (GitLab), Fluent (Microsoft) для изучения. Они есть в открытом доступе как в вебе, так и в Figma.

Личное исследование приложения

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

Кроме этого, есть много дизайнерских телеграм-каналов, которые присылают ссылки на сервисы, тем самым пополняете список полезных решений и исследуете интерфейс. Например, Timestripe, MakeSpace, Roamresearch, Spline, Linear.app, Openphone.

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

Из последних коротких кейсов: мне нужно было спроектировать быстрый фильтр, состоящий из трех выпадающих списков, в которых пользователь может выбрать неограниченное количество чекбоксов в каждом из дропдаунов. Возникает вопрос «Каким образом пользователь сбросит весь фильтр? Только определенный?». Мой поиск начался с сервисов: ClickUp, Trello, Jira, Notion, так как в них есть система быстрой фильтрации.

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

Работа с задачей.

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

1. Если это большая и глобальная задача, мне помогает организация встречи с разработчиками и product owner для пояснения алгоритма действий, задать уточняющие вопросы, получить какие-либо ограничения: технические, ресурсные, информационные и прочее. Мне лично не импонирует переписываться из-за сложности интерпретации, но при этом я фиксирую важные тезисы во время встречи.
2. Изначально задача ставится таким образом, чтобы я понимал для кого проектирую, что хочет пользователь, и что в результате получит, а также проверочную часть, в которой описывается путь от начала до конца, где упомянуты важные действия. Поэтому у нас есть параметры “Я, как…”, “Хочу” и “Чтобы”. Это помогает объяснить, как нужно строить задачу без лишней информации.
   Пример: Я, как — пользователь продукта; Хочу — поиск; Чтобы — получить данные.
3. Перед стартом проектирования начните с решений у конкурентов, ответив на вопросы:

• Какие плюсы этого решения?
• Почему они сделали именно так?
• Каким образом я могу использовать этот паттерн внутри своей задачи?

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

После идет субъективное тестирование решения, в котором ищу:

• Где можно упростить?
• Как сделать еще понятнее?
• Как можно сократить действия пользователя для выполнения своей задачи?
• Далее — финальная отшлифовка, и отдаём на исследование нашей целевой аудитории, где собираем фидбек.