Tagincev

_{Соавтор:Кузнецова Юлия Андреевна - UX-писатель Экосистемы РСХБ}

Каким должен быть дизайнер в банке, чтобы и продукт хороший создавал, и коллеги не жаловались. Смотрим через призму софт-навыков вместе с UX-дизайнерами РСХБ.

#1 Коммуникабельность: не просто коллега человек

Дизайнер отличная профессия для интровертов. Рисуешь интерфейсы, слушаешь музыку, ни с кем не общаешься На самом деле, нет!

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

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

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

#2 Презентация: готов объяснить свою работу

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

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

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

#3 Аналитика: думает не только о красоте

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

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

С одной стороны, ты должен на интуитивном уровне понимать психологию взаимодействия с интерфейсом. А с другой всегда остаешься скептиком и тестировать свои гипотезы. Порой пользователи воспринимают ту или иную функцию абсолютно непредсказуемо и не понимают твоей задумки. Одна только фраза Мне нравится. Думаю пользователям понравится тоже не поможет. Нужна аналитика. Много аналитики.

Итог: относись к своим решениям непредвзято. Любая хорошая идея может оказаться плохой во время теста. Исследования помогут тебе делать качественный продукт и соответственно лучше понимать пользователей.

#4 Понимание бизнес-процесса: переводит с банковского языка на человеческий

Юный дизайнер: мастерски работает в Фигме, любит компоненты, боготворит филигранную верстку.

Продвинутый дизайнер: понимает, как устроен бизнес и финансы.

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

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

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

#5 Любознательность: постоянно учится новому

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

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

Немного истории

С 2013 года, в обиходе аббревиатура UI (точное обозначение User Interface), а в 2015 году добавилась новая UX (точное обозначение User experience).

Под UI понимается дизайн интерфейса, а под UX аналитика, ключевой опыт и удобство в пользовательских интерфейсах.

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

И всё ж, UI и UX, это не только интерфейсы и дизайн в диджитал.

UI в глобальном смысле обеспечивает внешнее визуальное восприятие, с которыми сталкивается человек. Работа UI эксперта это придумать, как будет выглядеть глазами человека Ваша дорожка и куст у дома, мебель, светильники, и все то, что вас окружает.

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

UX обеспечивает удобство взаимодействия человека с окружающими его предметами. Вот Вам пример: такой тип дизайна подразумевает даже планирование удобства направления дороги. Вы можете такое видеть во дворах: есть четко проложенные дороги для людей, они красивые, люди вместе с архитекторами думали, старались и строили их. Но люди ходят напрямик и срезают углы, это видно по стоптанной траве. Вокруг нас масса таких примеров. А вот умные архитекторы только намечают дороги, а спустя несколько месяцев, когда люди протопчут себе удобный пусть, делают их именно по тому пути, который удобен людям. Это как AB тестирование на сайтах, когда есть несколько дизайнов, и запускаются одновременно две разные версии сайта, которые отличаются по каким-то критериям, а люди уже просто выбирают, что им удобнее.

Даже самый большой штат аналитиков не обеспечит идеальный пользовательский опыт.

Почему на смену UI/UX придет UXD

Мы подошли к новой аббревиатуре UXD (User Experience Design). UXD объединяет в себе работу UI и UX и формирует новый подход к проектированию пользовательского взаимодействия.

Пойдем по порядку:

Любая идея UXD продукта создается прежде всего для человека-пользователя, для которого мы работаем. Мы изучаем его предпочтения и привычки, вне зависимости от того, какой предмет создаем. Затем к работе приступают аналитики, которые создают прототип решения, и на следующем этапе подключаются дизайнеры.

Мы в Экосистеме РСХБ, словно скульпторы: придумываем, делаем каркас и украшаем все, соединяя воедино, чтобы получился тот продукт, которым будут пользоваться вечно. Мы стараемся максимально минимизировать негативный фидбэк от конечного потребителя. Делаем это всегда до реализации и запуска продукта.

Что ждет нас в будущем? Или к чему мы идем?

Еще одна новая аббревиатура UXZ, где Z от слова zero (ноль). Эта аббревиатура хорошо подходит под описание развития интерфейсов в VR и AR, где нет мышки, клавиатуры и нет плоского монитора нет ничего, чем мы привыкли пользоваться. Набор кнопок и инструментов в UXZ должен быть минимальным, грубо говоря, ничего лишнего. Это своего рода минимализм в области дизайна и прототипирования. К этому идеалу сейчас стремятся, сознательно или нет, все интерфейсы и все предметы вокруг нас. Это будущее, к которому идут все дизайн-решения, и мы в Экосистеме РСХБ держим руку на пульсе.

Практический пример наших кейсов с использование подхода UXD

Свое | Фермерство (https://svoefermerstvo.ru/) инновационная платформа, которая предоставляет доступ фермам и малым предприятиям к целому ряду сервисов и ресурсов, необходимых для ведения сельскохозяйственного бизнеса. Главное преимущество для аграриев состоит в том, что экосистема включает именно те цифровые решения, которые без дополнительных затрат позволят им автоматизировать многие процессы, сэкономить время, ресурсы и вывести свой бизнес на новый уровень. Все управляют предприятиями, банками, но мало кто помогает фермерам с внедрением готовых технологических решений.

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

Привет, мы дизайнеры экосистемы Своё для фермеров и банковских сервисов Россельхозбанка. Рассказываем, зачем нам понадобился SVGator.

Как мы пришли к SVGator.com

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

Наш путь начался с lottie, как с более популярного сервиса. Ключевой недостаток: встроенная api. Нам хотелось найти более прагматичное решение без интеграции, поэтому выбор пал на SVGator. В наши цели попадало закрытие микроанимаций элементов интерфейса, оформительские детали и т.п.

Что за зверь и какие задачи решает

SVGator.com это web-платформа для создания svg-анимаций, то есть svg-файлов со встроенными анимациями, которые без каких-либо проблем интегрируются в html. Можно задать последовательную обработку таких анимаций. Возможен экспорт как js, так и чистым CSS. Возможности js немного шире, но разница не существенная.

В рамках продуктов группы Своё мы создавали различные анимации для лоадеров, микроэлементов (таких как стрелка дропдауна), логотипов и элементов оформления. Мы ещё находимся на стадии экспериментов с SVGator, но уже чётко понимаем, в каких моментах он имеет преимущества и что можно создать с его помощью:

Небольшие функциональные элементы интерфейса. Например, интерактивные состояния компонентов и вытекающая микроанимация

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

Элементы дизайна. Например, иллюстрации

Интерфейс и функционал

На данный момент SVGator располагает исключительно веб-платформой, но весь необходимый функционал присутствует. Интерфейс напоминает классическое решение канувшего в Лету Flash и взявшего бразды правления After Effects. Слева слои файла. Сверху панель инструментов. Снизу таймлайн, а по центру сама рабочая область. Если есть навыки работы с АЕ, совершенно точно SVGator покажется очень простым. Но в этом и его преимущество порог входа значительно ниже.

Инструмент включает в себя следующие функции: работа с размером, положением, поворотом, наклоном, цветом, прозрачностью, а также богатый функционал для работы с обводкой. Помимо этого, поддерживается работа с масками и векторами движения. Этого достаточно для работы с классическими решениями анимации. Ещё один важный момент работа с easing, которые также встраиваются в svg-файл. Это упрощает работу на этапе front-end, и дизайнеру не приходится тревожить разработчика скоростью анимации.

Механика работы несколько отличается от привычных решений After Effects, вы выбираете необходимый элемент в меню слева и добавляете на него нужный эффект. После этого слой появляется в области таймлайна и можно менять значения, добиваясь нужной анимации. Сами значения находятся на панели справа. Easing могут быть привязаны как ко всему таймлайну, так и к конкретному отрезку между keyframes.

Чем svg отличается от sequence, gif, video? А также основные конкуренты:
Lottie и Keyshape

Ключевые преимущества svg вес, отсутствие api и возможность давать плавную анимацию. Разберём каждую из альтернатив.

Sequence. Работа с секвенциями никогда не была популярна, поскольку вес каждой отдельной png с прозрачностью может быть существенным и это скажется на производительности.

Gif. Решение потеряло свою актуальность также из-за веса. Однако есть и другой минус отсутствие плавности анимации. Часто в погоне за оптимизацией размера дизайнерам приходится поскупиться количеством кадров в секунду, а также сама постобработка оставляет желать лучшего.

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

Lottie. Это один из ключевых конкурентов SVGator. Компания раньше вышла на рынок и имеет значительно больше почитателей. Плюс возможности анимации значительно больше, поскольку базовая анимация собирается в Аfter Еffects, а lottie является своего рода оболочкой для такой анимации. Но для работы с данным решением необходимо предустановить api на платформу, что не всегда хорошо для продакшена больших нагруженных систем.

Keyshape. Очень близкая по возможностям платформа, различия лишь в деталях. Текущий функционал Keyshape несколько выше и позволяет делать экспорт чистым svg + css. К недостаткам можно отнести её стационарность и возможность работать исключительно на macOS.

Вот поэтому и стоит обратить внимание на SVGator. Плавные анимации, реализованные кодом, кроссплатформенные, без каких-либо api и с нормальным весом.

SVGator в экосистеме Своё

На наших продуктах Своё Фермерство, Своё Жильё, Своё Родное, Монеты, Подбор персонала, Своё Село и т.д. уже присутствуют наработки в SVGator: лоадер, интерактивные состояния компонентов, логотипы, а также иллюстрации для оформления разделов. Мы планируем увеличивать их долю и продолжать экспериментировать.

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

Перспективы

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

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

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