Тенденции UX/UI-дизайна, за которыми стоит следить в 2024 году

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

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

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

Асимметрия

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

Брутализм

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

Градиент

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

Персонализация

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

Ностальгия

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

Эко-дизайн

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

Цифровое благополучие

По мере развития сетевого мира мы все больше осознаем его негативное влияние на физическое и психическое здоровье. В обзоре исследований, приведенном журналом Time, говорится, что "среднее время работы с экраном для взрослых в США и других странах увеличилось на 60-80% по сравнению с периодом до начала пандемии". Как и многое другое в этом мире, здоровый подход зависит от нашей способности осознавать и устанавливать границы. Однако и источник воздействия может быть скорректирован. В случае с цифровым миром появляется все больше инструментов, помогающих пользователям сохранять хорошее самочувствие.
Например, некоторые приложения предлагают таймеры, которые помогают пользователям понять, сколько времени они проводят на платформе. В Instagram есть такие инструменты, а также функции, позволяющие родителям помогать подросткам общаться только с теми, кто не желает им зла, и ограничивать время, которое они проводят в сети. Другой пример - операционная система Android, которая содержит инструменты, помогающие пользователям понять, сколько времени они тратят на каждое приложение и на свой телефон в целом.
Цифровое благополучие может быть достигнуто и другими способами: от таймеров, оповещающих сотрудников, работающих в сфере знаний, о том, что пора встать из-за компьютера и размяться, до успокаивающих цветов экрана, которые помогают успокоиться в течение дня. Некоторые приложения даже разработаны специально для улучшения самочувствия: в них особое внимание уделяется медитации, сну, питанию и употреблению достаточного количества воды. 

Графика ручной работы

Графика ручной работы - это ответ на чрезмерное использование стоковых изображений в таких сервисах, как Canva и Adobe Stock. Такой контент может ускорить и упростить разработку дизайна, но он также может быть проблематичным, а иногда даже вызывать неприязнь, поскольку в нем представлены определенные группы людей, элементы дизайна иногда выглядят глупо и могут сильно не сочетаться с вашим брендом. 
С другой стороны, элементы ручной работы могут быть разработаны таким образом, чтобы идеально поддерживать ваш бренд и выражать те сообщения, которые вы хотите передать о людях и темах. Они также могут придать изюминку веб-сайту или приложению, потенциально привлекая зрителей и клиентов и давая им повод вернуться. В сообщении Shakuro отмечается: "Такие визуальные образы создают прочную связь с потребителями на основе эмоциональной связи. Люди узнают продукт, просто взглянув на изображения, как будто бренд - их старый друг". 

Микровзаимодействия

Микровзаимодействия - это небольшие, но важные события, происходящие при использовании клиентами веб-сайта или приложения. Один из самых простых примеров - кнопка Like, появившаяся в Facebook и ставшая привычным элементом многих онлайн-пространств. 
Другие примеры: полоса прокрутки, показывающая, насколько глубоко вы проникли в статью; прыгающие точки, появляющиеся, когда кто-то пишет вам сообщение, чтобы вы знали, что он отвечает; индикатор выполнения, показывающий, как далеко продвинулась загрузка; забавное сообщение об ошибке, появляющееся, когда запрашиваемая вами страница сайта не может загрузиться.
Такое взаимодействие обеспечивает более высокое качество UX, убеждая пользователей сайтов и приложений в том, что их действия имеют эффект и что что-то происходит. Дизайнеры находят все более творческие способы их использования для повышения качества обслуживания. 

UX для разных устройств

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

Дизайн курсора

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

Доступность

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

Карточки

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

Иммерсивный скроллинг

Такая обыденная вещь, как прокрутка, не может показаться элементом дизайна, но это несомненно так. С годами способ прокрутки изменился от простого статичного движения, ведущего зрителя через контент определенным образом, до гораздо более динамичного представления, позволяющего исследовать и перемещаться по сайту более интуитивно. 
С помощью иммерсивной прокрутки дизайнеры могут детально продемонстрировать продукты. Иммерсивный скроллинг также называют "прокруткой" (scrollytelling), когда он отображает контент с повествовательной направленностью. Такие презентации могут включать анимацию и другие динамические элементы на фоне статичных изображений. Такой способ прокрутки очень увлекателен и привлекает внимание, давая зрителям повод вернуться на сайт. Дизайнеры, скорее всего, продолжат экспериментировать с этим методом, однако он подходит только для некоторых сайтов, поэтому следует проявлять осторожность.

Темный режим

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

3D-изображения

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

Дизайн, ориентированный на мобильные устройства

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

VR

Многие веб-сайты и приложения являются идеальным местом для использования технологии виртуальной реальности (VR) с целью создания более качественного пользовательского интерфейса. Хотя игры являются очевидным примером применения этой технологии, она находит практически безграничное применение и в других сферах. Например, риэлторы могут использовать ее для демонстрации домов заинтересованным лицам без необходимости выезжать на место. Преподаватели могут использовать ее для того, чтобы перенести пользователей в исторические эпохи, о которых они рассказывают. А ритейлеры могут использовать ее для демонстрации мельчайших деталей своих товаров. 
Дополненная реальность - это смежная технология, которая также может быть очень полезной. Например, музей может создать приложение, которое будет предоставлять посетителям информацию об экспонатах по мере их приближения и логически направлять их по коллекции. 

Биометрический доступ 

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

Иммерсивный опыт

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

Выбор UX и UI зависит от целевого рынка

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

См. также: Корпоративные порталы, Лучшие методологии разработки корпоративного программного обеспечения, Разработка ПО.