Атомарный дизайн. Делаем по-быстрому

Привет-привет! Сначала немного основ :)

Атомарный дизайн помогает:

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

В атомарном дизайне интерфейс выстроен иерархично:

"Атомы" (цвета, шрифты, базовые формы и пр)
"Молекулы" (кнопки, поля, какие-то отдельные элементы интерфейса)
"организмы" (блоки страницы, например шапка)
Шаблоны

Каждый уровень прорабатывается, в результате образуя хорошо построенный UI.

Про атомарный дизайн есть замечательная книга Брэда Фроста. Рекомендую её перевод на русский: https://medium.com/атомарный-дизайн/tagged/атомарный-дизайн-глава-1

Пример из менторинга:

Один из моих учеников делает собственный проект с поиском комплектующих для теплотехники.

Вот часть его прототипа:

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

Можно искать 1-2 разных запчасти, а можно целый список.

Когда я спросил, "а как убирать ненужную запчасть?" — студент сказал "ой".

И быстро добавил крестик (на скриншоте уже с крестиками) :) И сам потом удивился, что не подумал о такой простой вещи.

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

Если этого не делать — есть риск упустить кучу состояний. Хорошо, если о них спросят разработчики, или тестировщики (тогда просто в авральном режиме наляпаете решений). А если нет?

И вот атомарный дизайн как раз учит спускаться на уровень отдельный компонент и продумывать деталюшечки. А потом — снова взмывать вверх.

Позитивный пример из моей практики:

В феврале-марте 2019 мне потребовалось нарисовать большую и сложную схему о поведении... простого инпута. Дело в том, что мы (dsx.uk) — биржа, и этот контрол для нас — чуть ли не центральный.

В этом видео я подробно про это расскажу (я уже упоминал про эту схему в своих видео, теперь будет подробнее):

Но так заморачиваться с АБСОЛЮТНО ВСЕМИ контролами — избыточно. Где золотая середина?

Вот так можно хорошо обрисовать важные контролы:

Нарисовали страницу или несколько;
выделили самые ключевые и важные контролы;
прошлись по ним по тому алгоритму, что в видео:

жизненный цикл;
действия;
цепочки состояний и действий;
поглядели на цепочки и поняли, что нужно нарисовать в дизайне;
нарисовали дизайн;
накидали адаптив.

4. всё остальное проработали немного более поверхностно.

Важно понимать — это только кусочек атомарного дизайна. И придуманный мной велосипед в рамках этого подхода :)

Как это встроить в продуктовый процесс?

Если у вас уже прошел кастдев и другие исследования, если функциональность продукта понятна и надо реализовать конкретный сценарий, то...

Рисуем схему с "жизненным сценарием" пользователя;
добавляем на схему, какими скринами и контролами этот сценарий можно покрыть
рисуем прототип;
пишем план-скрипт и проводим юзабилити-тестирование;
вносим правки (тут у вас появляется общая канва интерфейса, с которой скорее всего пойдете дальше)
Выделяем самые критичные скрины и самые критичные контролы.
Действуем по предыдущему списку :)

Заключение

Это довольно краткий подход к атомарному дизайну. Ближе к осени 2019 мы хотим выпустить большой интенсив по дизайн системам и там разобрать атомарный дизайн в подробностях.

А пока — я открыт для вопросов и каментов:

@Serebrennikov_i

И не забывай подписываться на мой канал о UX!

P.S.

Мы возобновляем обучение конверсионным метрикам. На майский интенсив есть пара билетов:)