По мере развития технологий и понимания, как в идеале должны работать продукты, появляются все новые инструменты и тренды в UX/UI дизайне. У неопытного дизайнера или начинающего стартапера могут возникнуть проблемы с выделением главной, нужной информации. В большом интервью дизайнеры Fingers Media Даша и Денис поделились ключевыми принципами и элементами красивого UI и удобного UX, своим отношением к трендам и примерами реальных работающих продуктов.
Денис Дягилев - 5+ лет опыта в UX/UI и графическом дизайне, 10+ проектов в Fingers Media
Дарья Базарова - 4 года опыта в UX/UI и графическом дизайне, 5 проектов в Fingers Media
- Давайте начнем с инструментов. Что вы используете как для вдохновения и создания дизайна, так и для организации своей работы?
Денис: В последнее время большую часть инструментов мне заменяет Figma, в которой в основном и создаются все проекты нашей компании. Решение стало стандартом в индустрии, а функционал на данный момент и правда поражает. При этом он постоянно расширяется, в том числе и аддонами (англ. addons), которые создает комьюнити сервиса.
Figma заточена под создание интерфейсов. Можно создавать кликабельные прототипы и в процессе открывать их на устройстве. Мы широко используем функцию Smart Animate, которая позволяет создавать анимации интерфейса в прототипе. Это позволяет приблизить прототип к конечному продукту и дать детальную инструкцию разработчикам.
Также Figma позволяет работать с вектором. Но работать с растром в Figma в целом не удобно, поэтому в этом плане Figma не заменяет Adobe Photoshop. Он необходим в большинстве случаев для двух вещей: визуализация и создание композиций. То есть если нужно вырезать фон, сделать ретушь, мокапы для презентаций, композинг из нескольких элементов для скриншотов или самого приложения, то фотошоп в этом незаменим.
Из продуктов Adobe я также использую Illustrator, для векторизации и подготовки иллюстраций к анимации, и After Effects, для создания сложных комплексных анимаций иллюстраций и логотипов. На Windows я использовал Vector Magic - прекрасное приложение, которое позволяет переводить растровые изображения в вектры.
Для вдохновения и поиска идей я перестал использовать Behance или Dribbble, потому что в основном они мало чего имеют общего с реальностью. Зачастую смотрю на приложения крупных игроков на рынке и анализирую слабые и сильные стороны интерфейса. Для организации и фиксирования рабочих моментов использую YouTrack и весь пул Google Drive.
Даша: Один из моих любимых сервисов для вдохновения это Muzli, который можно установить как расширение для браузера и закрепить как домашнюю страницу. Каждое утро я начинаю с их подборки трендовых и топовых проектов. Ну и также Behance, Dribbble для отслеживания лучших студий и дизайнеров. Я, в свою очередь, нахожу там много интересных и впечатляющих проектов. Что касается самой работы и создания дизайна, я также использую Figma и инструменты Adobe (Photoshop, Illustrator).
- Как вы подходите к выбору айдентики приложения: созданию логотипа, определению стиля, цветовой палитры, заливки и т.д?
Денис: Вопрос достаточно комплексный. К нам приходят разные клиенты с абсолютно разными проектами. Иногда клиенты приходят с готовой продуманной айдентикой, иногда - только с идеей в голове, а иногда - дизайн приложений разрабатывается у нас, а айдентика заказывается у дизайн-студии.
Если клиент приходит со своей айдентикой или же это устоявшаяся компания, у которой уже есть брендбук, то мы просто берем их основные цвета, фирменные шрифты, паттерны и т.д. Для палитры приложения обычно выбираем один активный яркий цвет, а остальные цвета это в основном белый и оттенки серого. Также могут добавляться цвета для индикации, например, красный, зеленый, чтобы обозначить пользователю правильность либо ошибочность его действий.
Например, проект Getblogger. Это площадка для коммуникации блогеров и рекламодателей. У них уже была готовая веб-платформа и свой фирменный стиль. При создании мобильного приложения, мы, конечно, внедряли новые штуки, но все это вписывалось в рамки их стиля.
Если клиент приходит к нам без какой-либо айдентики, чаще всего у него уже есть представление о названии проекта. Мы не углубляемся в эту работу настолько как крупные дизайн-студии, которые неделями делают логотип, но в целом всегда стараемся выдать наилучший результат в сжатые сроки.
Трудно говорить об айдентике в общем, так как каждый раз это что-то уникальное. Уникален и сам проект, и требования клиента. Наши клиенты из стартапа Shares пришли к нам только с именем и идеей проекта. Они хотели сделать приложение для удобной торговли акциями с возможностью копирования инвестиционных портфелей у экспертов платформы. Первоначально они пришли с именем Alfa team. Мы подготовили ряд вариантов, и они решили сменить концепцию и пришли к названию Shares. Буквально за два дня мы сделали новый логотип и презентацию. Основной идеей стало объединение визуальных образов графиков, которые часто применяют для визуализации долей рынка и заглавной буквы S в названии.
Для того, чтобы подчеркнуть идею в дизайне, мы сделали ряд анимаций для презентации, в том числе и анимацию для экрана загрузки приложения. В результате все остались довольны, а логотип был принят без правок.
Другой пример - проект Lookoshko. Это приложение для подбора оптимальной по стоимости и маршруту корзины товаров. Мы сделали шрифтовое начертание “Лукошко” + фирменный знак в виде корзинки. Мы предложили писать название на русском, что должно хорошо воспринимается русскоязычным реципиентом. Также, по задумке знак должен был стать иконкой приложения, а ручка корзинки повторяла бы форму буквы Л в начертании.
Но у клиента была идея вложить в название главную цель приложения - поиск выгодных покупок (англ. look - смотреть, искать). Поэтому мы остановились на написании латиницей - ‘Lookoshko’.
Главный цвет приложения - очень приятный и вкусный оранжевый. Это отличный активный цвет для интерфейса. Он здорово смотрится как фон для продуктов, что помогло при оформлении рекламы и нашего кейса. Также мы сделали паттерн для приложения. Он состоит из большого количества кругов, которые при пересечении образуют узор похожий на плетенку. Если посмотреть на сам дизайн приложения, то активные элементы выделены оранжевым. Это помогает сориентироваться пользователю и понять какие элементы на экране ключевые. Для поиска продуктов мы сделали систему тегов и под каждую категорию продуктов выделили отдельный цвет, что позволяет пользователю быстрее ориентироваться в поиске.
Даша: В первую очередь после получения основных требований клиента, конечно, проводится ресерч похожих проектов и конкурентов. Если, например, мы занимаемся созданием мобильного приложения, то учитываем не только дизайн уже существующих мобильных приложений, но и сайтов и веб-платформ. Наряду с анализом требований клиента и конкурентов, проводится анализ ЦА и выстраивается ассоциативный ряд.
Например, в собственном проекте компании Donate у нас был слуховой концепт схожести donate и donut (англ. doughnut, donut - пончик), от которого мы уже в дальнейшем отталкивались в дизайне приложения.
Что касается логотипа, мы идем от различных визуальных решений, делаем его понятным для пользователя и прорабатываем концепт. То есть нужно не просто нарисовать логотип без какого-либо бэкграунда, а стоит отталкиваться от концепта и главной идеи проекта к визуальным образам. Например, в том же проекте Donate главным визуальным образом стал пончик, который мы уже при создании экранов включали в различные иллюстрации в понятной для пользователя форме.
- Учитываете ли вы тренды при создании дизайна? Например, глассморфизм, неоморфизм, градиент. Или концентрируетесь только на конкретном проекте, идее, требованиях клиента?
Денис: К трендам, которые сейчас возникают, например, тому же неоморфизму, многие дизайнеры, в том числе и я, относятся скептически. Сейчас мощной базы в виде внятной концепции либо средств разработки под ними нет. В начале 2000-х скевоморфизм был основным трендом в создании интерфейсов. Представлял он собой перенос свойств реального мира в виртуальный интерфейс. Например, если мы делаем кнопку в интерфейсе, то она должна быть похожа на реальную кнопку, если мы создаем приложение для создания заметок, то фон по текстуре мы делаем похожим на настоящую бумагу, или же приложение компас должно выглядеть как реальный компас. Связан был такой тренд с возросшими мощностями устройств тех лет. Они уже могли отрисовывать тени, градиенты и блики. И человеку было проще ориентироваться в знакомых образах и формах. С течением времени тренд стал сходить на нет из-за того, что он стал сильно перегружать интерфейс и все перешли на более плоский дизайн. Суть всех трендов в дизайне состоит в том, что человек любит изменение картинки перед ним, и именно поэтому одни и те же тренды то уходят, то приходят. Темная тема, градиенты, объемные иконки - это всё уже было. К примеру, я недавно обновил macOS на Big Sur (система, анонсированная в 2020 году) и большая часть иконок снова приобрела объем. Применяю ли я такие тренды в своей работе? Периодически да, но это не основополагающее при подборе визуального стиля приложения.
Что касается цветовой палитры, входят в моду то пастельные цвета, то, наоборот, очень яркие. Я бы посоветовал не пытаться гнаться за модой. Существует некоторый диапазон дизайна, который выглядит хорошо в любое время. Если мы возьмем типографические плакаты, к примеру, 60-70-х годов, и уберём налет времени, то это будет смотреться как какой-то модный, хипстерский проект популярного дизайнера. Время идет, а основы дизайна не меняются. Люди давно пришли к тому, что простота форм и начертаний, это то, к чему нужно стремиться. Сейчас главная задача дизайнера это, грубо говоря, каждый год стараться менять цвет. Например, все приложения были белыми, а теперь давайте сделаем их черными и скажем, что темная тема отлично подходит для работы в них ночью. Или, например, основным цветом был какой-то пастельный, а потом добавили градиент, чтобы приложение смотрелось свежо. Кажется, люди придумывают что-то новое, но если покопаться, то можно найти такие же решения десятки лет назад.
Даша: С моей точки зрения, степень использования трендов чаще всего зависит от ЦА приложения или сайта. Например, если мы делаем какое-то молодежное приложение для блоггеров, конечно, мы можем включить некоторые дизайнерские тренды, чтобы им было приятнее пользоваться и интересно пробовать что-то новое. Если же мы создаем приложение для аудитории с меньшей насмотренностью или же для предприятия со строгой корпоративной айдентикой, то в таком случае приложение будет максимально лаконичным, нативным и простым.
Также тренды зависят от обновления iOS и Android платформ. Как только обновляются, например, iOS kits, при которых меняются и добавляются новые элементы и фичи, мы все это отслеживаем и стараемся учитывать в дизайне все эти нативные вещи.
- Вы упомянули такие понятия как “чистая картинка”, “незахламленность”, “лаконичность”. Что же в вашем понимании есть чистый дизайн?
Денис: Дизайнер всегда ходит по тонкой грани: пытается убрать все лишнее, но при этом оставить дизайн функциональным. Проблема в том, что если из интерфейса убрать всё, то это уже будет не интерфейс, так как с ним нельзя будет взаимодействовать, но зато это будет чистый дизайн. Если мы наполним интерфейс кучей элементов, символов, деталей, он будет функционален, но также будет и неприятен в использовании из-за перегруженности.
Чистый дизайн - это баланс. Баланс исходит из того, что мы четко понимаем, что пользователю нужно на каждом конкретном экране, какие элементы первичны, а какие вторичны, на чем нужно сфокусировать внимание пользователя, а чем можно пренебречь. Например, какие-то детали на превью карточки мы скрываем внутри карточки, а некоторые детали, наоборот, выносим на превью, чтобы пользователю было проще ориентироваться в выборе. То же самое касается иконок на нижнем баре, куда мы выносим только самые важные экраны приложения, а все аккаунты и настройки стараемся выносить вверх, куда палец чуть хуже дотягивается и пользователь будет заходить только по необходимости.
Вообще, с точки зрения подхода к дизайну, мне нравится цитата Дитера Рамса: «Хороший дизайн — это как можно меньше дизайна». То есть чем меньше элементов для украшения ты вносишь в свою работу, тем она лучше выглядит. Но есть один нюанс. Что касается графического дизайна, в нем должна оставаться интересная деталь, которая будет делать его дизайном. Если мы просто на белом холсте напишем слово, то это не будет интересно. Но если мы к какой-то букве в этом слове добавим деталь, которая будет намекать на это слово, то это уже будет дизайн. Сейчас можно заметить, что большая часть логотипов очень просты по своей форме и содержит минимум деталей. Мысль передается как можно меньшим количеством средств и это то, к чему нужно стремиться.
Есть, конечно же, обратная сторона этой темы - чем проще дизайн, тем меньше он понятен рядовому пользователю. Поэтому нужно учитывать целевую аудиторию. Хороший дизайн, с моей точки зрения, должен донести мысль до пользователя и выглядеть эстетически красиво.
Даша: Я бы еще добавила, что есть такое понятие как “дизайн ради дизайна”, который чаще всего поймут лишь дизайнеры. Чистый дизайн - это, в первуй очередь, грамотный UX и красиво подобранный UI и их сочетаемость.
Если все выверено и выровнено, грамотно подобраны шрифты и размеры шрифтов, цветовая палитра, иллюстрации, все читабельно и удобно в использовании, то это, в моем понимании, и есть чистый дизайн.
- Вы уже упомянули о главных элементах в дизайне. А какие основные инструменты вы используете для их выделения и расставления акцентов?
Денис: В графическом дизайне существует огромное количество инструментов, с помощью которых можно акцентировать внимание. Я стараюсь сокращать их количество в рамках одного проекта для того, чтобы дизайн смотрелся более целостным. В последнее время главный инструмент, которым я пользуюсь, это контраст цветов. Он позволяет отделить подложку от фона, выделить текст или сделать акцент на кнопке или иконке и выделить ее как активный элемент. Если посмотреть на наши проекты Getblogger и CartaMe, то мы не найдем теней.
Раньше мне казалось, что тень это более аккуратный способ выделить какой-то объект, но сейчас я понимаю, что тени загрязняют и нагружают дизайн. Я лишь изредка использую еле заметную обводку, чтобы обозначить границы элементов, что смотрится приятнее. Я бы посоветовал не перегружать дизайн инструментами выделения.
Даша: Также существует такой важный инструмент расставления акцентов как размер и форма шрифтов. Например, в проекте Donate мы использовали заругленный шрифт в лого и, придерживаясь этого правила и концепта, у нас нигде нет прямых углов. Используем закругленные углы на карточках, кнопках, что выделяет главные элементы и связывает их с концептом приложения. Очень часто главные элементы UI зависят от айдентики самого приложения и определяются ею.
- Какие элементы дизайна помогают пользователю с навигацией в приложении и дают понять, что делать и куда нажимать?
Денис: Первый элемент, который помогает пользователю понять что делать, это естественно текст. Эта та вещь, которая направляет пользователя по экранам и помогает понять, что происходит, зачем он здесь и как с этим всем взаимодействовать. Следующий элемент это иконки. Чаще всего это простая иллюстрация действия. Я стараюсь освободить экраны от большого количества кнопок с текстом и добавлять понятные иконки. Смотря на иконку, пользователь должен понимать, что произойдет при нажатии на нее. Наравне с этим элементом идут кнопки, в которых мы можем применять и текст, и иконки. О выделении главных элементов цветом я уже упомянул. Также помочь в навигации пользователю можно при помощи иллюстраций и фотографий.
Даша: В случае элементов навигации хорошо использовать стандартные решения и не слишком выдумывать что-то новое, так как это может запутать пользователя.
Например, всегда хорошо работает tab bar/ menu bar. Каждый пользователь уже на интуитивном уровне знает, что для переключения между экранами чаще всего нужно использовать меню снизу. Также помогают нативные иконки как, например, троеточие или зажатие клавиши для удаления. Поэтому мы можем просто такие нативные функции немного приукрасить, внести изменения в форму и цвет иконки, но привычное действие, к которому пользователь уже привык, мы оставляем и не даем ему запутаться и заново изучать весь функционал нового для него приложения.
- Какие элементы используются для большей вовлеченности пользователя и интерактивности приложения?
Денис: Здесь уже начинается тонкая дорожка с геймификацией приложения, использованием различных бонусов для пользователя, чтобы он почаще заходил в приложение. В некоторых проектах мы создаем большое количество иллюстраций, которые быстрее помогают пользователю понять, что от него хотят, а также задают тон всему приложению, делают его более ярким, веселым и приятным. Например, в приложении для самокат-шеринга во время завершения поездки появляется не просто сухой попап, на котором выводится информация о поездке, а также изображена красивая иллюстрация мальчика с самокатом, что смотрится классно. А для групповой поездки иллюстрация уже другая - с несколькими людьми.
Еще один крутой элемент был добавлен на экран оплаты - кошелек, в котором баланс отображается с помощью иллюстраций банкнот и монет, т.е. если пользователь добавил 5р, в кошельке появляется пятирублевая купюра. Максимум отображается 50р. С одной стороны, кажется, что эта деталь не влияет на работу приложения и опыт пользователя. На самом деле, это воздействует на вовлеченность и подталкивает пользователя закидывать разные суммы, чтобы увидеть, как они будут отображаться, а также узнать, какой у этого кошелька лимит.
В другом нашем проекте, приложении CartaMe, есть лента новостей. В нее мы позаимствовали рекомендательную систему из Instagram - сразу отображаются предложения магазинов, на которые пользователь подписан, а дальше идут рекомендации, сгенерированные на основе предпочтений пользователя.
В каждом продукте можно придумать крючки, привлекающие больше пользовался приложением. На этапе проектирования UX мы выстраиваем путь пользователя и пытаемся понять, как сделать его комфортнее и что нужно добавить для большей вовлеченности.
Даша: Изначально пользователь находит приложение в app store/google play или по рекламе. Поэтому, мне кажется, процесс вовлечения начинается еще со сплэш скринов и логотипа, которые должны понравиться пользователю, чтобы он перешел к установке приложения. Если даже без установки скрины приложения кажутся приятными и удобными, дизайн уже в большой степени сделал свое дело.
Для вовлечения пользователя после начала использования приложения, должны присутствовать грамотно подобранные и визуально приятные иллюстрации и анимации, которые вызовут эмоции и заставлят поразглядывать экран подольше, а также кастомные элементы, которые не повторяются из приложения в приложение, и персонализация (к примеру, обращение к пользователю с использованием имени, подсказки для конкретного пользователя, уникальные оповещения).
В том же приложении Donate мы использовали вкладку с награждениями пользователя, где, например, при подписке на новый проект появляется попап “вау! ты подписался на первый проект. мы тебя поздравляем”, а при донате “ты молодец! ты задонатил 3му проекту”. Так пользователь открывает новые достижения, а мы его в этом поддерживаем и всячески напоминаем.
Для большей персонализации мы также используем такой элемент как быстрый опрос через чат-бот или заполнение небольшой анкеты. Данный подход изучения пользователя и кастомизации контента используется практически во всех стриминговых сервисах (как в музыкальных - Spotify, так и видео - Netflix). Настройки в приложении тоже включают множество элементов персонализации: язык, голос, оповещения, тема (светлая/темная). Например, в плеере приложения для медитаций Flow мы добавили такие настройки как громкость музыки, пол и громкость голоса диктора.
Денис: Я бы еще добавил, что в теории количество фич и элементов дизайна не ограничено, но не всегда можно осуществить на практике то, что хочется. Для этого дизайнеры должны хорошо понимать нужды заказчика, его бюджет и требуемые сроки, а также тесно взаимодействовать с разработчиками. Чаще всего я консультируюсь с нашими разработчиками по поводу анимаций и способов их реализации. Они стараются в полной мере отобразить то, что я нарисовал, а я, в свою очередь, стараюсь облегчить им жизнь и максимально адаптировать дизайн. В этом и есть секрет самых крутых проектов.
