Правила юзабилити

UI/UX-дизайн тренды — что будет радовать пользователей весь 2019 год?

Команда AskUsers

Команда AskUsers


В прошлом году все говорили о важности адаптивного дизайна под мобильные устройства и только о нём, но в 2019 очевидно — по-настоящему важен контекст. Это тренд номер один. Больше никаких обобщений вроде «занимайтесь мобильными, десктоп в прошлом».


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


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


Мощь браузеров

Воспринимайте их как средство воздействия на своих пользователей. Именно их мощности, скорость и привлекательность дают нам современные возможности:


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

  2. Это возможно благодаря развитию потоковой компиляции. Например, Mozilla обещает ускориться в 10-15 раз благодаря новому компилятору.

  3. Все современные браузеры поддерживают технологию WebGL 2. Она отвечает за отображение 3D-текстур и рендеринга объектов.


Благодаря мобильным и веб-браузерам разрыв между концепцией дизайна и реальностью её воплощения всё время уменьшается. Просто взгляните на график развития технологий. Здесь данные только до 2012 года, но взрыв возможностей на лицо.


Эволюция веба


Проблема вот в чём — браузеры могут быть отличными, но сайты не очень. Но у нас есть советы как раскрыть их потенциал, улучшить юзабилити и соответствовать времени.


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


Целенаправленная анимация (purposeful animation)


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

Анимация


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


При этом, анимация давно не стоит на месте и выходит за рамки простого заполнения пространства/переходов. Например, логотипы — это вроде наших статичных тотемов. Но, что если прибавить им движения?


Анимация для логотипа


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

История через анимацию


Но помните, то, что видит дизайнер и пользователь — разные вещи. Именно поэтому мы начали с контекста. Старайтесь быть нейтральными в выборе, идите на эксперименты, но не забывайте об общей концепции услуги или продукта.


3D в интерфейсах и deep flat

Раньше дизайнеры избегали громоздкого 3D-рендеринга из-за недостаточной производительности. Сегодня браузеры превратили эту роскошь в доступную вещь. Так, что смелее! Сложные визуальные эффекты (VFX) становятся нормой в мире веб-сайтов.


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

3d-value.jpg


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


3D на мобильном


Посмотрите на реализацию меню и карточки товара. Это сочетания реальности и цифрового изображения вовлекает пользователей. Так и хочется свайпить туда-сюда:


Меню в 3D



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


Похожим образом работает deep flat — когда эффект объёма создаётся с помощью теней, света и отражений:


deep flat


Также есть простой способ придать жизнь объекту. Эффект, который эмулирует 3D. Делается с помощью Principle или After Effects.


Фэйковый 3D


Возможно, в 2019 вернётся даже скевоморфизм — эффект, который был на ранних моделях iPhone. Элемент виртуального дизайна в этом случае повторяет реальный объект. Например, иконка браузера выполнена в 3D. Слева скевоморфизм, справа — флэт.


скевоморфизм


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


Сюрреалистичный дизайн

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


Сюр в дизайне


Мультяшный стиль иллюстраций помогает сохранить свежесть образов. Такого авангарда и безобразия будет достаточно в 2019. Живём в век пост-иронии и можно не стесняться выглядеть комичными.


Градиенты 2.0, сверкающие цвета и темный фон

Благодаря новым экранам цветопередача становится фантастической. Градиенты способны привнести почти ощутимую глубину в интерфейс.


gradient.png


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


Яркие цвета

Но самый крутой тренд — это сочетание тёмного фона и ярких градиентов. Уже не так позитивно, но вызывает доверие. Есть исследование, почему нам так симпатичны темные цветовые схемы интерфейсов. А яркие цвета только раскроются и подчеркнут самое важное.


Темные цветовые решения


Минусы тоже имеются:

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

  • темные интерфейсы не дружат с солнечным светом

  • слишком большая контрастность плохо сказывается на внимание пользователей


Вариативные шрифты

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


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


Вариативные шрифты


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


Настройка вариативного шрифта


Что-нибудь ещё?

Конечно, например, дизайнеры массово переходят на Figma (облачный инструмент для разработки пользовательского интерфейса), а Sketch и Adobe XD остаются в прошлом. Можете проверить свежесть навыков вашего дизайнера, спросив его, в чём он работает :)


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


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


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


3744
Читать также