Тренды UX/UI дизайна 2020

Дизайн спасает репутацию, бренд, продажи и лояльность, если создан правильно.

Правильно — то есть с учетом трендов, без шаблонов из Интернета и устаревших два года назад фишек. Удобно и с осознанным креативом.

Без понимания UX/UI дизайна не обойтись. Давайте разбираться.

В чем суть

UX-дизайн — пользовательский опыт

Задача UX-дизайна — создать удобный и интерфейс. Не просто красивый, а от которого есть польза и вам, и клиентам. Нужно подобрать графику, функционал, архитектуру и текст так, чтобы человек дошел от точки А до точки Б — целевого действия. Заплатил, подписался, дал контакты, проголосовал.

Основа UX-дизайна — анализ психологических портретов и поведения ЦА, ее впечатлений, осознанных и не очень желаний, привычек.

UI-дизайн — пользовательский интерфейс

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

Основа UI-дизайна — аналитика из UX-дизайна. Законы эстетики. Брендинг компании.

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

UX — аналитика, логика, выдвижение и тестирование гипотез, создание прототипов, изучение ЦА. Пользователь должен достигнуть результата и совершить целевое действие.

UI — «работа руками» над визуальным контентом. Пользователь должен увидеть нечто привлекательное и почувствовать комфорт, заботу.

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

Как влияет на продажи?

1.Увеличивает конверсию

Если пользователь оставил заявку, а ему не перезвонили;

Если логика разделов нарушена;

Если путь до оплаты требует слишком много шагов;

Если поиск службы поддержки занимает полчаса...

Если пользователь получает негативный опыт, это знак плохого UX-дизайна. И низкой конверсии: вы теряете клиентов по пути.

Качественный дизайн повышает доходимость от состояния «я вас не знаю» до «держите мои деньги».

2.Укрепляет брендинг

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

Вспомните Apple. Их стиль ни с чем не спутаешь. Покадровая презентация IPhone c плавными переходами, анимациями и цветовой палитрой очень узнаваема.

3.Задействует триггеры

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

Хотите расслабить человека, пока он ждет звонка от менеджера? Покажите забавную анимацию, позвольте «понажимать» куда-нибудь. Это снижает риск услышать недовольный голос, если менеджер задержался или сообщил неприятную новость.

Чтобы продажи росли, дизайн должен быть:

— единообразным: визуальное оформление перекликается на всех платформах;

— лаконичным: без лишних анимаций, подсказок и всплывающих окон;

— отзывчивым: пользователь должен сразу увидеть, прошла ли оплата, добавился ли товар в корзину, отправилось ли сообщение в поддержку;

— эстетичным: ничто не раздражает и не отвлекает;

— экономичным: не тратит время на десятки переходов, не отправляет каждый раз в начало каталога;

— заботливым: обеспечьте отмену действий и подготовьте сообщения на случай, если что-то пошло не так;

— трендовым: не по шаблону, а с индивидуальной адаптацией и пониманием ЦА. Например, дизайны-анархизмы, о которых мы скажем ниже, подойдут точно не всем.

Тренды 2020-2021

В UI-дизайне

• «Темный режим» — Instagram, Telegram, iOS и MacOS от Apple и Android предлагают оформление в черных оттенках. Выглядит ярко и необычно, отдельные элементы выделены, заряд аккумулятора экономится и глаза устают меньше.

• 3D-элементы — они провоцируют побыть на странице подольше. Как минимум — чтобы рассмотреть красоту, а дальше — как пойдет. И если раньше сайт с 3D-элементами бесил 10-минутной загрузкой, теперь новые фреймворки (программные платформы) ускоряют процесс.

Сюда относятся другие виды анимаций, motion-эффекты. Чем насыщеннее — тем лучше. Иногда они рассказывают историю бренда лучше всех.

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

• Микровзаимодействия — изменение цвета в разных состояниях сайта/приложения, тактильные отзывы (звуковые, визуальные), визуализация загрузки (как в Sims), анимация переходов между страницами, реакция на нажатие кнопок. Забавные мелочи нравятся людям, о них приятно рассказать знакомым или в сторис.

• Уникальные шрифты — эпоха минимализма, который не позволяет отличить лендинг репетитора по английскому от сайта слесарной мастерской, проходит. Дизайнеры украшают тексты и ищут для брендов интересные фишки: засечки, сочетание полупрозрачного и непрозрачного шрифта, курсивы.

• Адаптация под новые смартфоны — без рамок и с закругленными краями. Интерфейсы нужно переделывать, чтобы они выглядели привлекательно и не портили качество изображений.
• Адаптация под AR, дополненную реальность — AR используют во время конференций, презентаций, рекламы. Сайты и приложения должны отображаться в разных местах, не «съезжать» и не «лагать».
• Градиенты — лучше создавать контрастные. Попробуйте добавить градиенты не только на фоны и фотографии, но и при наведении на ссылку, в 3D-эффекты, в тексты и заголовки, иконки.

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

В UX-дизайне

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

• Неоморфизмы — новый формат скевоморфизмов, то есть обыденных вещей, встроенных в дизайн. Как старые иконки Instagram и Google или виджеты у Apple.

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

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

• Дизайны-анархизмы — сочетание несочетаемого и простор для безумия. Черпайте вдохновение на сайтах 2000-ых, идите против цветовой сетки и симметрии, создавайте дикие шрифты, перекрывайте элементы друг другом. Анархия не подойдет для хранения важных и объемных данных, но для анонсов, промо-акций, коллабораций, розничной торговли и инфобизнеса — вполне.