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

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

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

И, как всегда, мы рассмотрим не только плюсы, но и минусы каждого из данных трендов.

Мощные браузеры

Браузер – это не только средство для использования Интернета, но и средство воздействия на пользователя. Сейчас браузеры становятся еще быстрее, мощнее и привлекательнее.

• Бенчмарки и тесты производительности доказывают значительное повышение производительности большинства популярных браузеров.
• Увеличение скорости происходит благодаря огромному влиянию потоковой компиляции на дизайн. Mozilla сообщает, что новый компилятор будет в 10–15 раз быстрее предыдущего оптимизирующего компилятора.
• Все современные браузеры поддерживают WebGL 2, который обеспечивает совершенно новый уровень 3D текстуры, рендеринга объектов, глубины фрагментов и массива вершин.

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

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

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

Продуманная анимация

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

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

Раньше пространство между экранами было ничейной землей. Теперь это ваш задний двор.

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

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

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

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

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

Обдумывайте свои решения.

Интерфейсы с 3D и плоскость с эффектом глубины

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

3D графика в интерфейсе размывает границу между реальностью и цифровой анимацией.

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

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

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

Плоскость с эффектом глубины – это новая, усовершенствованная плоскость.

Комбинация Real 3D и CG позволила пользователям взаимодействовать с реалистичными объектами. Плоский дизайн также способен достичь эффекта реалистичности с помощью так называемого псевдо-3D. Ощущение трехмерности создается благодаря наложению плоских слоев друг на друга. Немаловажную роль при получении объема играет расположение теней, света, а также отражения.

Существует также псевдо-3D тренд, который создается с помощью Principle и After Effects. Суть заключается в создании паттерна движения, эмулирующего 3D.

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

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

Мы можем создать впечатляющие изображения. Настало время наполнить их смыслом для человечества и заняться более глубокими проблемами. Как нам это сделать?

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

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

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

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

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

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

Для начала обретите аудиторию, а уже потом развлекайте ее.

Gradient 2.0, яркие цвета и темный фон

Новые экраны фантастически передают цвета. Поэтому дизайнеры исследуют границы доступности и осмеливаются использовать впечатляющие градиенты в UI дизайне.

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

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

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

Яркие цвета способны расположить к себе и выглядят оптимистично. Доверяете ли вы такому приложению для криптовалют?

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

Плоскость с эффектом глубины, яркие цвета и 3D на темном фоне.

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

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

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

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

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

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

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

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

Figma

Сегодня мы задаем давний вопрос: «Нужно ли дизайнерам кодить?» А затем: «Нужны ли разработчикам знания о UX?». При создании дизайна очень важно отсутствие несогласований. Так что, если речь идет о цели, следует учесть способы ее достижения.

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

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

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

Figma – это инструмент дизайна, созданный дизайнерами для дизайнеров. Многие относились к ней скептически, но вскоре сменили свое мнение.

Figma уничтожила Sketch.

Помимо основных плюсов она полностью заменяет Sketch и Adobe XD. Что еще более важно, каждый компонент Figma может быть преобразован в компонент React посредством API и реализован во фронт-энд. Пока Figma превосходит конкурентов по стоимости, скорости работы, возможности совместной работы, совместному использованию, внедрению, поддержке и так далее. С учетом вышесказанного, Figma все еще развивается, и появляется еще больше новых функций.

Но всякий раз, когда мы разрабатываем более качественный продукт и не устанавливаем этические принципы его использования, мы только вносим вклад в собственную погибель. Посмотрите на Twitter, который изо всех сил пытается вернуть себе доброе имя. В 2018 году неоднократно директоры технических компаний давали показания в суде. Оказывается, недостаточно просто дать инструменты, мы также должны следить за тем, как люди их используют. Защитит ли Figma пользователей от «темных паттернов» в UX, плохого дизайна и фейков?

Голосовой UI

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

Голосовой интерфейс настолько же чувственный, насколько и сложный.

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

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

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

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

UX копирайтинг и UX редактирование

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

Вы должны контролировать, как ваш бизнес общается с вашими клиентами.

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

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

UX копирайтинг – это просто, если вы уважительны и полезны.

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

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

Каждая крупная кампания по редизайну требует наличие UX-редактора.

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

Должность дизайнера продукта

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

Сфера проектирования услуг охватывает все отрасли и предоставляет  универсальные решения.

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

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

Дизайн продукта имеет значительное преимущество перед сервис-дизайном. А именно – доступ к аналитике и возможность тестировать дизайн-решения вживую.

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

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

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

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

Источник: UXPlanet

Читайте также:

10 лучших подкастов для UX-дизайнеров

Как структурируются команды UX разработчиков в «Shopify»

10 примеров по-настоящему качественного UX, который помогает изучать пользователей