Старомодному здесь не место! Или хороший тон в UI/UX 2019

Старомодному здесь не место! Или хороший тон в UI/UX 2019

10 июля 2019

в разделе Дизайн

Адекватный и качественный дизайн продукта или сайта – это давно требование «по умолчанию», а не преимущество. Пользователь не будет тратить драгоценное время на то, чтобы разобраться как что работает, он просто уйдет к конкурентам.

Что делать?


Быть на волне тенденций в подходах к пользовательскому опыту и дизайну интерфейса.


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

Эра минимализма и простоты восприятия

Общий принцип в UI 2019 остается тем же: дизайн интерфейса не должен конкурировать с контентом. Но основные тренды этого года  весьма противоречивы. С одной стороны, мы говорим о минимализме в цвете, простых, плоских формах и сдержанности, с другой - на сцену врываются яркие цвета, 3D изображения, ландшафты. Однако победа минимализма очевидна, с его читабельными шрифтами, белыми пространствами и контрастностью для облегчения восприятия.

Минимализм как тренд UI в 2019

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

Комфорт восприятия в 2019 ценится превыше всего, поэтому неестественно правильные геометрические фигуры уступают место привычному для глаз несовершенству ассиметричных форм.

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

Мобильный UI все больше походит на приложения, стирая грань между сайтами и программами. И новые возможности для этого созданы благодаря технологии PWA (Progressive Web App).

Большие надписи, большие картинки, особая история

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

Тогда что же зацепит пользователя? Как выиграть в конкурентной борьбе брендов?

Ответ прост – сторителлинг. Сторителлинг буквально переводится как «рассказывание историй». Именно при помощи историй с позиции наблюдателя лучше всего донести тот или иной месседж.

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

Вообще, тексты все чаще выходят на первый план. И те, которые рассказывают историю, и те, которые “цепляют” глаз.

Большая типографика на всю страницу, переплетающаяся с функционалом – вот где тренд. Часто именно правильный подбор дизайна надписей – иерархия, шрифт, размер – играет ключевую роль в UI-дизайне.

Большие шрифты в Ui/UX 2019

В оформлении все так же преобладают огромные, полноэкранные картинки, помогающие собрать воедино композицию экрана. Так, например,  для проекта «Бабий яр» мы воплотили еще два важных тренда сезона: креативный анимированный лоадер и 3D ландшафтную картинку.

Выразительная картинка тут привлекает внимание, а надпись – удерживает интерес. Слоганы или подзаголовки ловят внимание читателя и заставляет взаимодействовать с контентом страницы. 

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

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

Пользователь как пуп дизайна

В разработке UI важно действовать так же, как и в программировании: вносим маленькое изменение в дизайн – тестируем с пользователями – внедряем. Только потом приступаем к следующему изменению. 

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

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

Что естественно - то не без дизайна

Удобство и особое отношение к пользователю выдвигает в тренды voice user interface. Передача команд через голос естественна для человека и пользовательский опыт движется именно в эту сторону.

Майкрософт, Эпл, Гугл, Фейсбук и Амазон – все пять гигантов и тренд-сеттеров разработали голосовые ассистенты на базе АІ. Против этого не попрешь. Люди устали от экранов. Они хотят общаться! Поэтому VUI в скором времени станет очень популярным и у нас.

А пока что основополагающим является взаимодействие и отклик дизайна на управление руками.

"Ламповый" дизайн

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

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

Ловкость рук как пользовательский опыт

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

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

Управление одной рукой в UI

DDDM в дизайне - Вместо послесловия

Тренд, активный рост которого не прекращается в последние годы, связан скорее не с визуальными формами, а с культурой взаимодействия с клиентами. DDDM (Data driven decision making of design - решения в дизайне, принимаемые на основе данных о пользовании) позволяет судить об успешности дизайна не только со слов людей в фокус-группах, а оценивая внутреннюю аналитику пользования интерфейсами. 

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

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

Еще почитать

  • Работа над улучшением интерфейса

    10 июля 2019

  • Типографика: смайлики, кавычки и тире с дефисом

    10 июля 2019

  • Мобайлгеддон, или Google улучшает мобильный поиск

    10 июля 2019

Кейсы по теме

Узнайте, почему клиентам так нравится работать с нами