Про идеальные формулы

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

Похожее, кажется, происходит и в дизайне. Вместо экспериментов и рискованных решений всё как будто свелось к «идеальным формулам». Достаточно взглянуть на современные смартфоны или автомобили (особенно боком), чтобы заметить, как они стали практически идентичными. Лишь иногда кто-то осмеливается на эксперимент, создает продукт с авторским дизайном, проваливается в продажах (или изначально не ориентируется на массовый рынок) — и этим укрепляет остальных в вере в «проверенные решения».

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

Чтобы развлечься, предлагаю сыграть в игру: попробуйте угадать, какой это маркетплейс, если я уберу узнаваемые элементы.😁
Нет, я уверен, что опытные пользователи всё равно разберутся. Но так или иначе, видно, что дизайн становится всё более единообразным.


- - - -
#дизайн #uxui #маркетплейс #интерфейс #викторина

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

* Пока пишется вторая часть (осталось совсем немного), небольшое дополнение.

Нужно ли отображать все состояния в вариантах компонента в Figma?

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

Часто вижу, как для каждой кнопки в Figma прорисовывают disabled, focus и другие состояния...

А вы часто используете все эти свойства в макетах? Если какого-то состояния нет в варианте, но есть в документации для разработчика и для дизайнера инструкция, как его получить, это, на мой взгляд, гораздо эффективнее. Посмотрите на обложке поста, как это выглядело у компонента в одной из моих дизайн-систем: в вариантах нет состояний, а способ получения disabled описан только в документации, с примером на инстансе компонента. За два года работы с этой системой ни разу не пожалели о таком подходе. Пару раз, когда мне или дизайнеру таки понадобился disabled в макете, мы добавляли его за 30 секунд, а поддерживать компоненты в библиотеке стало значительно проще.

Наверное какой-то смысл отражать всё в вариантах появился с внедрением девмода, чтобы из песочницы разработчик мог бы потыкать сам состояния. Но всё равно на мой взгляд это очень избыточно, и проще это лечить через процессы.

- - - -
#дизайн #uxui #дизайнсистемы #состояния #figma

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Что-то навеяло 😂

- - - -
#дизайн #мемы

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Короче, я сделал сайт (на самом деле ещё нет 😬)

Я уже делился планами сделать себе сайт. И вот, дело, наконец, сдвинулось! Выбрал для этого Тильду по нескольким причинам: её удобно оплатить из РФ, есть прямые интеграции с нужными сервисами, например, с Telegram-ботом для парсинга контента с канала.

Когда сам верстаешь свой же дизайн, открывается пара забавных инсайтов.

Первый — оказывается, делать сайт для себя невероятно лень, и, садясь за работу, вдруг не знаешь, чего хочешь, какая будет структура, что главное (становишься типичным «заказчиком»).

Второй — если верстка не выходит в точности по макету, просто делаешь «как смотрится норм», а потом просто правишь в макете 👀

Короче, упражнение «Сверстай свой дизайн» до сих пор работает. Только теперь не на понимание, как лучше сделать макет, а чтобы лучше понять лень боль верстальщиков и заказчиков 😂

- - - -
#дизайн #сайт #боль

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

В продолжение, вот пример неведомой фигни, особенно дизайнерам полезно.

Когда вроде бы всё понятно, что надо сделать, но у кода своё мнение. Хотел скруглить в шаблоне новостного блока все фоточки. Всё просто — скругляешь родительский контейнер и чтобы переполнение было content clip (overflow: hidden).

Но почему-то это каким-то образом влияет на размер элемента... Просидел, наверное, час, пытаясь понять, что не так, в итоге углы остались прямые🐱

Вот если за одно, тут есть знатоки тильды, подскажут, как это, блин, побороть😬

- - - -

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Слоты в компонентах

Наткнулся на пост о том, что в Material Design внедрили концепцию слотов в компонентах. Честно говоря, ощущение, что про слоты дизайнеры дизайн-систем говорят уже пару лет минимум. А тут весь такой большой, технологичный и богатый MD… Может, это у меня завышенные ожидания от систем такого уровня, но, кажется, они могли бы придумать что-то более продвинутое для вариативности дизайн-системы, чем концепция слотов, которой уже пара лет (тот же SDUI из коробки, например 😉).

Но как бы там ни было, для тех, чьи дизайн-системы базируются на нативном MD, это явно приятное событие. И в целом, как описание механики работы слотов, пост получился полезный. К тому же от самих Google!

- - - -
#дизайн #MD #materialdesign #дизайнсистемы #google #android

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Настало время ответить на самый важный вопрос проектирования дизайн-систем — да что там, всего IT!

И это не как назвать правильно токены, и не сколько нужно видов кнопок в системе, это:
Сколько же стоит перекрасить кнопку в крупной компании?

И опережая ваши догадки, ответ не 42...

Давайте посчитаем на примере нашего процесса в мобильном приложении.

1. Дизайн
Кажется, что час работы дизайнера с запасом покрывает задачу. Но не забываем про прототип: мы же в продуктовой компании! Это исследования, юзертесты...

Час уходит на прототипирование, ещё 3–4 часа — на работу исследователя (разработка эксперимента, загрузка в Pathway, сбор данных). После этого дизайнеру нужно подготовить макеты для разработки.

Итог: 6 часов работы. Со средней ставкой в 1500 ₽/час это 9000 ₽.

2. Разработка
Допустим, цвет кнопки не управляется с бэкенда. Тогда в дело вступают iOS- и Android-разработчики (по часу работы каждого). Затем — тестировщики (по часу на каждую платформу). Если обнаружатся баги, это ещё по часу на исправление и проверку для каждой платформы.

Итог: 8 часов работы. Со средней ставкой в 2000 ₽/час это 16 000 ₽.

Общая сумма на данном этапе: 9000 + 16 000 = 25 000 ₽.

А если кнопка сквозная, например "добавить в корзину"?

Ну, это совсем другой разговор. Привет зависимости. 😬
Это из-за того, что кнопка используется в компонентах/экранах других команд.
Во-первых, требуется участие архитектора. Это человек, который первым лишится премии или работы, если что-то сломается. Поэтому любое изменение с зависимостями проходит через него. Скажем, его ставка минимум 4000 ₽/час: час на включить компьютер, час на подготовку, час на изучение задачи, час на составление заключения.

Дальше — сложнее. Допустим, кнопка используется в компонентах и экранах пяти команд. Значит, затраты на разработку (16 000 ₽) умножаются на 5.

Итого:
— Разработка: 80 000 ₽
— Дизайн и исследования: 9000 ₽
— Архитектор: 16 000 ₽

Сумма к этому моменту: 105 000 ₽.

Добавляем 30% на встречи, правки и риски, плюс ещё 10% на A/B тестирование. А чтобы оценить результаты тестирования, нужны данные, т.е. нужны логи... ещё 10%.
А ещё забыл совсем про аналитиков😱 Эти ребята сначала должны описать все случаи использования кнопки и все компоненты, в которых она используется. Часов 4-6 со средней ставкой 1500 ₽.

Окончательная сумма: около 170 000 ₽, чтобы просто перекрасить кнопку.

Понятно, что подсчёты грубые. Но в реальности бывает очень похоже, а то и похлеще. Например, мы уже год пытаемся занести задачу перекрасить ценники в приложении, но постоянно проигрываем гонку приоритетов. Нет ресурсов. 😬

- - - -
#деньги #перекраситькнопку #разработка #дизайнсистемы

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

⚡️АНОНС

Что такое абстракции, и зачем ими мыслить? Как это помогает делать масштабируемые дизайн-системы? Что такое модели состояний и рецепты компонентов?

Рассказываю на мини вебинаре
в сообществе ❤️ pinkman experience

🗓 Дата: 17 декабря
🔜 Время: 16:00 (мск)
🆓 Участие бесплатное


🔗 РЕГИСТРАЦИЯ ТУТ 🔗

- - - -
#вебинар #pinkman #дизайнсистемы #анонс

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

А вот и запись!

📱 Смотреть на youtube

- - - -
#вебинар #pinkman #дизайнсистемы #запись

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Итоги съела собака кошка, по этому...

ДАЙДЖЕСТ 2024 ГОДА

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

▶️У МЕНЯ ПОЯВИЛСЯ САЙТ
Пока там не так много эксклюзивного контента. Но, как минимум, там можно найти все статьи и выступления в одном месте, а также почитать про мой опыт в формате CV и полистать кейсы.

▶️ ВЫСТУПЛЕНИЯ
Хотелось бы, чтобы было их больше. Зато, будет хорошая цель на следующий год 😉

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

То самое выступление на Дизайн-выходных про SDUI платформу, MVP которой мы построили во ВкусВилл.
Очень нетривиальное решение сразу и многих проблем интеграции дизайна в разработку, и безрелизных изменений, и даже "собственная Фигма".
А ещё было много крутых вопросов от зрителей.

▶️ СТАТЬИ

Лонгрид в двух частях о том, что такое наследуемые свойства, зачем я их придумал, и как это помогает в SDUI подходе.
Часть 1 и Часть 2

Типографика во ВкусВилл — как я организовал работу с текстом в нашей дизайн-платформе.


▶️ ИНТЕРЕСНЫЕ ПОСТЫ

Ответ на важнейший вопрос всего ИТ — сколько стоит перекрасить кнопку

Весь мой карьерный путь в дизайне.

Кто такой дизайнер дизайн-систем

Должен ли дизайнер делать CJM и портреты пользователей?

Испытание купоном. Наше задание, которым мы тестировали соискателей в формате witeboard.

Серия постов про работу с состояниями компонентов:
— Состояние фокус, подходы и варианты реализации
— Нужно ли отображать все состояния в вариантах?
— Модели состояний. Как можно упростить работу с состояниями сделать их более консистентными.

Пост о тенденции к унификации UI в крупных сервисах, а ещё ВИКТОРИНА: Угадай маркетплейс

Почему не нужно продумывать всё детально "на берегу", а просто нужно начать делать. Как выбор имени токена может задержать вас на месяцы.

Мои мысли про грейды, и как я выстраиваю грейды и роли в своей команде.

Система слоёв при проектировании системы всплывающих окон.

Много полезного по дизайн-системам:
— Референсная палитра — отдельная группа токенов цвета с перечислением всех уникальных оттенков.
— Инструменты генерации палитры — небольшой обзор средств по построению растяжек цветов и мой личный опыт.
— Семантическая палитра — слой токенов цвета с семантической привязкой.
— Сем. палитра во ВкусВилл — пример семантической палитры текущего мобильного приложения ВВ.
— Бывают ли неатомарные ДС — рассуждения на тему "Is atomic design dead"
— Атомарность в нашей ДС — почему дизайн-система и платформа у нас это разное, и как выстроена атомарность на уровне ДС.
— Что такое SDUI — Краткое описание понятия.
— Дизайн-токены — что это, и зачем.
— Рецепты компонентов — техника описания основных характеристик групп компонентов.

Так всего было много, что всё, кажется не поместится. В прошлом дайджесте за первые пол года можно найти ещё много интересного.

🎄🎄🎄
А я всех поздравляю с наступающим новым годом! 🥳
Всем в новом году взрывного роста, красивого UI, логичного и удобного UX, ну и не забывайте мыслить абстракциями!
Ну а я обещаю в новом году попробовать писать посты чаще, чем это получается у меня в этом году... но это не точно😁

- - - -
#дизайн #дайджест #итоги2024

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Первые две недели года я провёл в отпуске, и по этому пропустил самую короткую рабочую неделю в году, и только в понедельник начну "вливаться в работу". Думаю, я такой не один 😁. Чтобы немного размяться перед рабочими буднями, предлагаю небольшой интерактив.

Первый раз захотелось подрезать идею поста (отсюда). Читая оригинал, подумал, что моё бинго выглядело бы совсем иначе. Поэтому представляю вам свою версию бинго душного дизайнера.

Делитесь в комментариях, что совпало у вас, и предлагайте, что ещё можно было бы добавить в это бинго! 😉

- - - -
#дизайн #бинго #не_своровал_а_интерпритировал

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Просто мысли вслух

В последние дни я снова вернулся к работе над Китом в Figma. Ранее я показывал, как можно управлять свойствами через variables, даже после отвязки от библиотеки, и применял это в рецептах компонентов. А сейчас я пошёл дальше — вынес часть параметров из вариантов в modes и variables.

Поймал себя на мысли, что теперь хочу Enterprise-тариф с почти бесконечным количеством модов, чтобы вынести в управление через переменные практически всё, что раньше было в вариантах. В теории это должно быть невероятно удобно: все параметры компонента видны в табличке, сразу понятна их связь с токенами. Блин, в такой системе я начинаю понимать, чем полезны токены компонента 😁.

Конечно, такой душный подход подходит не всем. Но для меня, с моим складом мышления, табличное отображение параметров гораздо удобнее, чем визуальное управление через варианты частными пересечениями свойств компонента. Главное, чтобы не было ограничений на количество модов, а переменные можно было привязать ко всему.

- - - -
#дизайн #дизайнсистемы #figma #переменные

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru

Редизайны и ловушка метрик в крупных компаниях

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

В крупных компаниях часто возникает соблазн цепляться за цифры. У нас уже есть успешный продукт, и, казалось бы, всё, что нужно — не испортить его и немного улучшить. Каждое решение должно одновременно улучшать все показатели. Если хотя бы одна метрика идёт вниз, это воспринимается как сигнал бедствия. В результате — невозможность вносить даже небольшие, но необходимые изменения.

Но время идёт, проблемы накапливаются, продукт теряет актуальность. И наступает момент, когда «по чуть-чуть» уже не работает, и продукту нужно обновление — например, редизайн. Это почти всегда процесс, в котором неизбежно происходит ухудшение некоторых метрик. Когда вы меняете значительную часть продукта, невозможно удержать все показатели на прежнем уровне. Иногда ради важного улучшения приходится чем-то пожертвовать.

Ситуация усугубляется тем, что такие изменения затрагивают интересы множества стейкхолдеров. Бесконечные согласования, аналитика и исследования превращаются в замкнутый круг. Команды теряются в попытках ответить на вопрос: «Кто мы и чего хотим?» В итоге наступает паралич решений.

В этой ситуации важно помнить, что успех подобных задач зависит от умения расставлять приоритеты:

— Что мы действительно хотим улучшить?
— Что для нас важнее: конкретные метрики или долгосрочная стратегия продукта? (У вас ведь есть стратегия?)
— Чем мы готовы пожертвовать ради главных целей?

Ответы на эти вопросы должны быть ясны всей команде. Без общего понимания метрики превращаются из инструмента развития в инструмент торможения. И не забывайте про эффект принятия изменений: любые сильные преобразования (например, в интерфейсе) сначала всегда вызывают отторжение. Даже если метрики ухудшаются, важно выждать. Со временем кривая выправится, и можно будет проанализировать более достоверные данные.

- - - -
#дизайн #редизайн #метрики

🛫Канал: UXFLOW • Сергей Мухин | Сайт: uxflow.ru