Учимся на ошибках других: фатальный фейл в новом обновлении Линго

Эта история о том, насколько важен сайдбар в десктопных приложениях.

Линго — это сервис для синхронизации символов между скетч-файлами, который на днях обновился до версии 4.0.1.

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

Что-то пошло не так
Но в Линго список китов — важнейший блок, на котором завязана вся навигация приложения. И если ты не знаешь где ты, контент тебе уже никакой не нужен. Теперь список китов открывается по клику, как выпадающее меню. Что совсем трагично, в нём не виден текущий выделенный кит, и это ещё больше усложняет навигацию: развернул меню и тут же забыл, в каком ты был ките, потому что оно загораживает заголовок с названием текущего.

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

О системе названий символов
Перевёл синхронизацию символов на Sketch Libraries. Для этого пришлось менять названия всем символам. Линго позволял, чтобы они назывались максимально лаконично:

icons / icon-name-size-color

Единственный уровень вложенности не требует при создании каждого символа держать в голове всю структуру названий и его положение в ней: эта задача перекладывалась на Линго. Было удобно создавать иконку, добавлять в начало icons и отправлять её в кит.

Но если подключить UI-кит в качестве библиотеки, в папке icons все они идут сплошной простынёй, потому что ничто их не делит на категории. Теперь я пришёл к формату:

icons / icon-name / size / icon-name-size-color

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


Выводы

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

2. Учитывай неочевидные сценарии, такие как перетаскивание объектов.

3. Пользователь быстро теряет лояльность, если его фидбэк не слышат. Альтернативу всегда найдёт.

4. Поразительно, что дизайнеры, делающие продукт для других дизайнеров, так косячат. Объяснение одно: они не пользуются своим продуктом сами. Если не пользуешься, не увидишь очевидных ошибок.

#первые_шаги #UX #дизайн_системы

Обновились дизайн-гайдлайны Альфа-Банка

На сайте про дизайн-систему Feather появились новые разделы и UI-kit Альфы.

Кому полезны: дизайнеры в крупных продуктовых командах могут найти для себя много ценного и неочевидного. Сайт позволяет заглянуть в кухню Альфа-Банка, посмотреть на их философию и дизайн-материалы.

Интересная деталь, что дизайнеры Альфы работают в тандеме с фронтенд-разработчиками. Это значит, что дизайнеры знают JavaScript и React, либо стремятся их выучить. Это позволяет разговаривать с разработчиками на одном языке.

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

На сайте:

Принципы
design.alfabank.ru/principles

Альфа задумывается о едином пользовательском опыте и базе паттернов, которые можно применять многократно, использует Mobile First, а дизайн для мобильных платформ делает единым, оставляя системные контролы и паттерны стандартными.


Принципы / Метод
design.alfabank.ru/method

Статья про последовательность шагов при работе над проектом. Даёт самое базовое представление о том, что такое дизайн-мышление.

Кратко: Понять задачу, определить метрики, сформулировать гипотезы решения, составить CJM, протестировать решение.


Компоненты
design.alfabank.ru/components

Библиотека компонентов на Реакте — основной инструмент фронтенд-разработчиков Альфы. Её можно развернуть у себя.

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


Иконки
design.alfabank.ru/style/icons

Более 250 svg-иконок оформлены в виде витрины, по которой удобно искать иконку по названию, цвету и размеру.


Паттерны
design.alfabank.ru/patterns

Новый многообещающий раздел, в котором появились первые 4 статьи: правила реализации СМС-паролей, вёрстки сумм, номера счёта и телефонов.


Инструкции для разработчиков и UI-kit для дизайнеров
design.alfabank.ru/usage

Как установить библиотеку компонентов на Реакте через npm. Два скетч-файла, для iOS и Android, в которых надо разбираться. О них поговорим отдельно.

#дизайн_системы
—
#для_профи — рубрика для тех, кто уже нашёл работу

Material Design 2.0

На днях прошла ежегодная конференция Google I/O, которая по количеству полезного не уступает эпловскому WWDC.

events.google.com/io

Уже начали выкладывать видео с выступлений на канал Google Design:
youtube.com/channel/UClKO7be7O9cUGL94PHnAeOA/videos

Много внимания посвятили дизайну: дизайн-система Google Material была существенно обновлена и теперь позволяет достичь больше гибкости. Это замечательный повод ещё раз изучить сайт material.io/design/, если позволяет английский. Теперь разработчики могут использовать готовые системные компоненты под любую из платформ.

Юрий Ветров в своём посте для vc.ru проанализировал визуальные изменения: больше белого и скруглений.

vc.ru/37728-teper-material-design-polnocennaya-dizayn-sistema

Визуально новая операционная система Android P сближается с iOS и я нахожу эту унификацию хорошим трендом, который упрощает дизайн для разных платформ.

#дизайн_системы

Как решить эти проблемы

1. Делать символы максимально обезличенными
Хорошо: поле ввода с текстом «Текст поля». Плохо, если в общий кит попало поле ввода с надписью «Пароль» и иконкой глаза. Ему место только в сценарии входа. Если символ используется во всей системе лишь один раз и тем более, содержит осмысленный конкретный контент, это тревожный признак.

2. Вынести все символы из библиотеки в файл витрины — гайд
Китом будут пользоваться только тогда, когда вся его структура прозрачна и перед глазами. Это возможно, если команда имеет понятное и удобное место, где узнавать о том, что можно использовать.

Я ввёл гайды — третий тип файлов помимо библиотек и сценариев, который решает именно эту проблему. Гайды содержат уже вставленные символы из библиотеки, которые можно копировать и вставлять.

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

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

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

02-buttons / button-big / button-big -blue -disabled

—
#для_профи #дизайн_системы

После вчерашнего поста несколько человек задали вопрос, почему бы не объединить файл UI-кита (библиотеку) и файл гайда, в котором описаны правила. Ведь так удобно создавать символы и в том же файле описывать им правила. Расскажу, почему так не стоит делать.

Библиотека — это файл, где хранятся мастер-символы и откуда они распределяются по сценариям.

Гайд — это специальный файл, описывающий правила и демонстрирующий символы из библиотеки. Это место, откуда можно копировать ссылки символов, не зная их названия и не используя поиск.

Если объединить гайд и библиотеку, ссылки символов в гайде будут локальными, а не внешними. Это значит, что если Олечка скопирует экземпляр символа из такого гайда, у неё в локальном макете будет создан новый мастер, который никак не связан с библиотекой. А значит, его нельзя будет централизовано обновлять. Кроме того, возникает дублирование сущностей.

Итог: никто не сможет копировать символы из такого файла.

—
#для_профи #дизайн_системы

Холизм: дизайн-система Газпромбанка

medium.com/slashdesigner/holism-23aaeb1cf8f8

В публичный доступ вышла дизайн-система родного Газпромбанка. Теперь доступен промо-сайт и библиотека React-компонентов.

Сделал её обзор, вспомнил напряжённый и продуктивный прошлый год. Рассказал о своей роли в проекте и глубинном смысле названия. О шрифтах, иконках, цветах, компонентах, сетках и вот этом всём.

—
#для_профи #дизайн_системы

Как называть цвета в Figma

medium.com/slashdesigner/colors-c14cf9446b7

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

Кратко: не привязывать названия стилей к их функции и яркости, а оставлять абстрактными.

В качестве бонуса накидал пару ссылок на полезные сервисы для подбора палитр: color.adobe.com и Shade Generator.

—
#первые_шаги #дизайн_системы

Про ребрендинг Мейла в VK и их библиотеки компонентов

Холдинг Mail ru Group объвил о масштабном ребрендинге. Единым брендом всех сервисов компании стал VK. Название «ВКонтакте» сохранится как бренд соцсети.

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

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

Об этом ребрендинге на VC вышла статья, в которой можно прочитать о предыстории такого решения и любопытных деталях.

Читать на vc.ru →

Кстати, у VK есть публичная дизайн-система на Figma Community, в китах которой я с удовольствием поковырялся.

Об этом написал свой обзорный пост:

Библиотеки компонентов VK (часть 1) →

Остаётся открытым вопрос, как дизайн-система VK будет интегрироваться с Paradigm.

#для_профи #дизайн_системы #полезная_реклама #VK

Стрим про дизайн-системы в Ozon и апдейт по курсу

17 ноября приму участие в первом русскоязычном стриме от Figma на тему «Слияние дизайн-систем: опыт Ozon». Расскажу про наш путь с дизайн-системой, который мы проделали за последний год. Поговорим о том, как происходит слияние нескольких UI-китов и фронтенд-библиотек в одну большую систему, какие в этом процессе есть этапы и подводные камни. По этому поводу скоро будет отдельный анонс.

Из-за этого стрима и личных причин не успеваю дописать видео для своего курса «Портфолио продуктового дизайнера», который планировал запустить в начале ноября.

Первый поток откладываем до января 2022. Мне уже нравится то, что получается и не терпится этим поделиться! На этом проекте я осознал, насколько важна в разработке онлайн-курса роль методиста. Он упаковывает контент в что-то удобоваримое для студентов и оценивает эффективность обучения при помощи метрик, позволяя мне думать о том, что давать, а не как.

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

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

#первые_шаги #ППД #стрим #дизайн_системы

Стрим: Слияние дизайн-систем, опыт Ozon
17 ноября 2021, 14:00

Figma пригласили меня выступить на их первом русскоязычном стриме и рассказать о том пути к современной дизайн-системе, который Ozon прошёл за последний год.

Стрим будет интересен старшим продуктовым дизайнерам из крупных компаний.

У нас одновременно существует несколько дизайн-систем: для основного продукта Ozon, для панели продавца и других проектов. Без объединения не добиться консистентности продуктов, к которой мы стремимся.

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

Итогом стала новая дизайн-система с UI-китом на Фигме. Она заимствовала лучшие практики, которые удалось найти. Её раскатывают внутри Ozon до конца 2021.

Расскажу о этапах и возможных вариантах слияния, подводные камни и инсайты, а также подробности о реализации новой системы.

Зарегистрироваться на стрим →
Бесплатно

#для_профи #стрим #дизайн_системы #Figma

Лекция Школы дизайна Яндекса о дизайн-системах

youtu.be/4hKxbvse1_Y

В процессе подготовки к стриму наткнулся на свежую лекцию дизайнера Александра Дьякова, в которой он рассуждает о том, что такое дизайн-система, какие у неё задачи, из чего она состоит и как выглядит. Также он приводит примеры того, как дизайн-система работает в Яндекс Картах.

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

Задачи дизайн-системы
- Позволяет дизайнерам и разрабам говорить на одном языке
- Делает продукт консистентным и целостным
- Упрощает и ускоряет работу, минимизирует ошибки

Тезисы
1. Дизайн-систему делают таковой те правила и логика, которые реализованы в коде. Это отличает её от UI-кита.

2. Дизайн-система — это всегда конструктор. Примеры: лего и писменность.

3. Палитра в ДС Карт семантическая и делится на 4 группы: текст, фон, кнопки и иконки. Это позволяет избежать ошибок и не тратить время на ручное перекрашивание элементов.

4. Написали плагин Appearance, который позволяет менять макету тему в пару кликов, если стили заранее правильно названы.

5. Компонентами должны быть самые часто используемые сущности, которые стоит обезличивать. Это даёт вариативность и упрощает поддержку системы.

6. Яндекс Карты используют единый дизайн для обоих платформ (от себя добавлю, что Ozon тоже так делает).

7. Figma API позволяет автоматизировать обновление компонентов из Фигмы в код, когда это будет нужно разработчику, и это уже реализовано в системе Яндекса. Однако, такой подход делает систему хрупкой и поэтому написали бота для Слака, который палит ошибки и упоминает накосячивших.

#для_профи #дизайн_системы #Яндекс