Почему UI3 в Figma не равно UX3
Вот я и оказался среди тех, кому одному из первых посчастливилось потыкать в новый UI Фигмы. Спустя неделю работы меня не покинули вопросы: настолько ли нужен был этот редизайн и чего им хотела достичь продуктовая команда?
Давайте разбираться, что так и что не так с UI3 и почему дизайнеров бомбит от редизайна.
Не чини то, что не сломано
«Not all who wander are lost» — говорил как-то Гэндальф Белый (в то время Серый). Так и каждый дизайнер перед тем, как сесть за работу или обозначить проблему, должен спросить себя: «А действительно ли эти вещи требуют исправления, или мне просто скучно?». Кажется, что дизайн-команда Фигмы пропустила этот вопрос, поэтому редизайн начала с тех вещей, которые и без него работали хорошо и никаких проблем не вызывали.
Floating pannels
Честно говоря, кому-то было неудобно работать с панельками Фигмы? За свою практику я ни разу не встречал такого человека, ни лично, ни на форумах. Может, такие и существуют, но готов побиться об заклад, что таких людей абсолютное меньшинство. Однако, свои изменения команда Фигмы начала именно с них.
В своей предыдущей статье об альтернативах Фигмы я разбирал кейс Lunacy, где как раз были парящие панели, которые вызывали довольно много неудобств с наслаиванием на контент. Панели Фигмы в данном случае ничем не лучше: контент по-прежнему видно в зазоре между панелью и краем экрана, что создает лишний визуальный шум и размывает границы рабочей зоны. Кроме того, сами панели хоть немного, но больше. В принципе, эта разница не доставляет неудобств на больших экранах, однако уже острее ощущается на ноутбуках
Сама панель может и меньше, однако пустое место вокруг нее увеличивает её реальное место на экране примерно на 5%.
Что изменилось в левой панели
Теперь название файла отображается в левой панели, а не наверху, как было раньше. Однако, при переезде куда-то пропал статус бренчей. Не критично, но удобства явно не добавляет.
Теперь можно скрывать панельки через UI, и это не одно и то же, что спрятать весь интерфейс через сочетание клавиш «CMD+\». При включенной опции миниверсии панелек остаются на своих местах, а правая появляется только при выборе элемента. С одной стороны, это удобно, и возможно, именно такой вариант является основным паттерном использования этих панелек. Однако вопрос, можно ли было реализовать это без радикальных перемен, остается открытым.
Ruler
Линейка, безусловно, является не самым часто используемым инструментом в Фигме, однако её наличие уже стало определённым стандартом графических редакторов на протяжении десятилетий. Конечно, флоу работы меняется, и задач, для которых нам нужна линейка (особенно в рамках Фигмы), остаётся всё меньше и меньше. Поэтому давайте на момент оставим философские рассуждения в стороне и оценим функционал с формальных критериев: он есть, и им надо пользоваться.
Теперь линейка находится за панелью, что ещё раз подчеркивает её вторичность (или даже третичность), но ещё больше размывает границы рабочей области и делает взаимодействие довольно странным и неестественным, будто ты тащишь её откуда-то из глубины веков. Плюс, скорее всего баг (надеюсь, что это он), который не изменяет курсор на стрелочки, не добавляет удобства к первому использованию.
Что изменилось в правой панели
Тут всё гораздо хуже сложнее. В правой панели действительно много изменений, от расположения элементов до логики их работы. Поэтому давайте пойдём сверху вниз.
Традиционно самый верх правой панели занимали настройки фрейма. Логично было предположить, что занятые в продуктовом дизайне люди чаще всё же используют компоненты, чем настраивают фрейм. Поэтому настройки фрейма и опции компонента поменяли местами, что логично. Также все nested-компоненты по умолчанию скрыты. Вдобавок панель унаследовала часть контролов файла, которые ранее находились в хедере.
С виду всё логично и правильно: часто используемые опции наверху, редко используемые — внизу. Но, как вы уже успели догадаться, не всё так классно, как выглядит на первый взгляд.
Контролы компонента
В старом UI всегда хотелось скрыть вложенные компоненты, особенно когда их много. Но на практике их скрытие привело к тому, что теперь требуется два клика вместо одного: сначала открыть секцию, затем применить опцию. А если секций несколько и вы не особенно помните, где что находится, то количество кликов растёт пропорционально числу этих опций, а вместе с кликами растёт и время, затраченное на задачу.
Да, панель стала меньше, но добавило ли это понятности?
Следующая вещь, которая тоже не добавляет удобства, — это действия с инстансом, которые исчезают и появляются в зависимости от обстоятельств. Причём предсказать, что сейчас появится, а что исчезнет, и сколько их будет, довольно проблематично.
Вероятно, тут тоже была светлая идея сделать действия более контекстными, но по факту нарушено старое доброе правило UX, что узнавание лучше запоминание. Пользователю предлагается каждый раз думать, какую вариацию примет эта панель в данный момент, и даже кнопка перехода к основному компоненту постоянно меняет своё место.
Если кого-то интересует, где теперь сбросить инстанс, то по традиции нового UI всё спрятано в «шашлык».
Настройки фрейма
Тут тоже довольно много изменений. Теперь действия совмещены с настройками автолейаута. Посмотреть ширину и высоту находящегося в другом контейнере автолейаута можно только при наведении на соответствующее свойство.
С одной стороны, логика понятна: дочерний контейнер наследует ширину или высоту родительского. С другой стороны, это дополнительное действие, которого раньше не было.
С опцией «Clip Content» тоже не всё гладко. Раньше это был чекбокс, и опция включалась и выключалась одним кликом. Теперь это дропдаун с двумя опциями, и любое переключение требует уже двух кликов. Места не сэкономили, UX-правило нарушили, кликов добавили. Зачем? Не ясно.
Констрейнты тоже не были самым часто используемым функционалом в последнее время, видимо, поэтому их решили спрятать под малозаметную маленькую иконку и открывать в поповере. Ещё плюс два клика.
Тулбар
Как мы видим, у нового UI есть тренд на то, чтобы прятать редко используемые элементы. Наверное, именно поэтому они решили разместить на самом видном месте вещь, которую меньше всего используют мышкой.
Лично для меня непонятно, почему весь функционал прячут, кроме того, на каждый элемент которого есть шорткаты, а выбранный режим я могу легко определить по состоянию курсора.
Actions
В панели действий тоже есть несколько изменений.
Если вызывать панель через шорткат, то из неё пропали плагины и виджеты, доступные через Shift+I. То есть это сочетание клавиш служит исключительно для выбора компонентов из дизайн-системы. Кроме того, панель можно закрыть только вставив компонент через нажатие Enter. Перетаскивание компонента или повторное нажатие Shift+I или Escape её не закроют. На мой взгляд, это не очень удобно, но здесь можно предполагать, что это вопрос вкуса.
Более привычная панель вызывается по сочетанию клавиш CMD+/ или CMD+K. Однако плагины потеряли свои превью и описания.
Как мы видим, эти панельки открываются в одном и том же месте. Причём клик мышью по иконке откроет последний вариант вызванной панели, будь то Shift+I или CMD+/. К слову, нет другого способа переключаться между этими видами панелей, кроме использования хоткеев. В чём их фундаментальное отличие, кроме описанного выше, тоже непонятно.
Accessability
Контрастность шрифтов в светлой теме оставляет желать лучшего. Честно говоря, странно, как в США, где инклюзивности в интерфейсах уделяется такое большое внимание, могли выпустить нечто подобное. Эти цвета плохо читаются даже на ретине, что уж говорить про обычные мониторы. Да и вообще, всё выглядит как задизейбленные опции.
Резюме
Пока что UI3 является одним из ярких примеров редизайна ради редизайна, где много внимания уделено местам, которые не вызывали проблем, и абсолютно не затронуты вещи, которые реально требовали бы улучшения. К тому же нельзя не отметить довольно большое количество «детских» ошибок, которыми пестрит дизайн.
А вот короткий список вещей, которые мы действительно хотели бы видеть в Фигме:
Включение свойств нестедов при массовом выборе компонентов
Иерархия страниц и папок
Менять порядок нестедов внутри компонентов. Например в списках и в меню будет очень полезно
Добавить this в переменные
Хоткеи на Hug и Fill
Выбирать опции каких нестедов показывать в компонентах
Реальное поведение flex-box в автолейауте
И это только то, что первое приходит на ум. На самом деле этот список гораздо больше.
Давайте сделаем скидку на то, что новый UI ещё находится в бете, поэтому не будем воспринимать его как финальный. Надеюсь, что команда Фигмы учтёт комментарии своих пользователей, которые в большинстве своём сами являются профессионалами индустрии.
В следующей статье мы разберем работу с переменными с учетом нововведений. Подписывайтесь и следите за обновлениями. Всем спасибо!
