В начале своей первой статьи хотел бы начать с базы для поиска правильных решений для ваших продуктов.
1. Дизайн-системы
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.
2. Личное исследование приложения
Второе, чем я хотел бы поделиться: как искать и исследовать приложения. Я часто изучаю продукты из разных сфер: информационная безопасность, финтех, разработка, инструменты для дизайнеров. В этом случае находить стартапы и сервисы помогает агрегатор ProductHunt. В найденных продуктах вы сможете зарегистрироваться, записаться на бета, запустить демо, после этого начать изучать интерфейс, посмотреть, как работает тот или иной компонент, разные ux-решения: как положительные, так и отрицательные. Можете записывать или запоминать такие вещи, тут уж как вам удобно.
Кроме этого, есть много дизайнерских телеграм-каналов, которые присылают ссылки на сервисы, тем самым пополняете список полезных решений и исследуете интерфейс. Например, Timestripe, MakeSpace, Roamresearch, Spline, Linear.app, Openphone.
Если я преследую определенное решение, то анализ продуктов может затянуться, так как нужно выбирать точечно.
Из последних коротких кейсов: мне нужно было спроектировать быстрый фильтр, состоящий из трех выпадающих списков, в которых пользователь может выбрать неограниченное количество чекбоксов в каждом из дропдаунов. Возникает вопрос «Каким образом пользователь сбросит весь фильтр? Только определенный?». Мой поиск начался с сервисов: ClickUp, Trello, Jira, Notion, так как в них есть система быстрой фильтрации.
Собрав необходимую информацию, спроектировал решение, которое мы протестировали, получив положительный фидбек.
3. Работа с задачей.
Далее чем я хотел бы с вами поделиться — это работа с задачей, декомпозиция, умение ставить себе правильные вопросы для бОльшего понимания и проектирования решения.
- Если это большая и глобальная задача, мне помогает организация встречи с разработчиками и product owner для пояснения алгоритма действий, задать уточняющие вопросы, получить какие-либо ограничения: технические, ресурсные, информационные и прочее. Мне лично не импонирует переписываться из-за сложности интерпретации, но при этом я фиксирую важные тезисы во время встречи.
- Изначально задача ставится таким образом, чтобы я понимал для кого проектирую, что хочет пользователь, и что в результате получит, а также проверочную часть, в которой описывается путь от начала до конца, где упомянуты важные действия. Поэтому у нас есть параметры “Я, как…”, “Хочу” и “Чтобы”. Это помогает объяснить, как нужно строить задачу без лишней информации. Пример:
Я, как — пользователь продукта;
Хочу — поиск;
Чтобы — получить данные. - Перед стартом проектирования начните с решений у конкурентов, ответив на вопросы:
- Какие плюсы этого решения?
- Почему они сделали именно так?
- Каким образом я могу использовать этот паттерн внутри своей задачи?
Собрав необходимые референсы, начинаю проектировать очевидный сценарий взаимодействий, без какого-либо креатива, исключая трендовые элементы. Важно решить поставленную задачу и проблему пользователя паттернами и инструментами, которые работают. По моему опыту, нужно быстро отобразить рабочий сценарий для утверждения с руководителем / product owner, нежели тратить много времени и сил, а в итоге не получить согласование.
После идет субъективное тестирование решения, в котором ищу:
- Где можно упростить?
- Как сделать еще понятнее?
- Как можно сократить действия пользователя для выполнения своей задачи?
Далее — финальная отшлифовка, и отдаём на исследование нашей целевой аудитории, где собираем фидбек.
Загрузка...
