Поиск решений для своих задач

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

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. Работа с задачей.

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

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

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

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

  • Где можно упростить?
  • Как сделать еще понятнее?
  • Как можно сократить действия пользователя для выполнения своей задачи?

Далее — финальная отшлифовка, и отдаём на исследование нашей целевой аудитории, где собираем фидбек.

СайтИнстаграмТелеграм-канал

Подкаст «Заметки дизайнера»:
Apple PodcastЯндекс.МузыкаGoogle Podcasts

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Владимир Белов

Владимир Белов

Продуктовый дизайнер в компании Group-IB. Телеграм-канал t.me/uiuxdesignotes

More from Medium

HBO Max usability flaws

Design is not just about visualization

Daydream: next-gen camera

How to Test Your Design’s Learnability