Тренды UX/UI дизайна в 2024 году
Перевёл я тут и адаптировал на досуге одну занятную статью заморского дизайнера Punit Chawla, который пишет на недоступном нынче для российских пользователей Медиуме, при этом саму статью считаю актуальной и весьма полезной. Я сторонник того, что информация должна быть открыта и доступна для всех, вне зависимости от расы, национальности, цвета задницы, запаха изо рта и других признаков, поэтому все эти блокировки российских пользователей в цифровом пространстве пусть идут лесом. Статья не самая свежая, но по-прежнему релевантна, 2024 год ещё в самом разгаре, так что поехали.
Бенто-боксы (Bento Boxes)
Бенто-боксы — это такие традиционные японские обеды, упакованные в специальные коробки, которые содержат разнообразные блюда. Обычно в бенто-боксе можно найти рис, рыбу или мясо, а также овощи.
В России в таких коробках можно найти, например, моржовый хер, поскольку работяги исповедуют носить обеды в банках с гремящей ложкой, а не в этих ваших бентабоксах, но это не отдаляет нас от сути повествования. (примечание переводчика, то есть меня)
Основной принцип бенто заключается в сбалансированном сочетании различных ингредиентов, что обеспечивает питательность и эстетическую привлекательность блюда. Современные бенто-боксы часто представляют собой отдельные контейнеры с отсеками для разных видов пищи, что удобно для переноса и хранения обеда. Бенто-боксы стали популярны не только в Японии, но и во всем мире благодаря своей практичности и возможности создавать разнообразные и креативные обеды.
Я точно не знаю, кто именно был автором этой идеи, но эти вот бенто-боксы выглядят так же офигенно в интерфейсах, как и наполненные едой контейнеры в реальной жизни.
Bento — это не просто кулинарная история, а взрывной тренд в дизайне, завоевавший популярность на Dribbble и Behance и вдохновил не малую часть дизайнеров. Однако истоки «модульного» дизайна идут от создания информационных панелей для веб-сайтов, таких как панели аналитики продаж и финансов, например, на PayPal, или аналитические инструменты, такие как Google Ads.
Кстати, я хорошо помню Windows Phone и Lumia — их интерфейс был одним из первых воплощений Bento-дизайна. Позже Microsoft перенесла эту концепцию и в меню «Пуск» на рабочем столе Windows, демонстрируя, как изящно Bento преображает цифровую организацию и навигацию. Честно признаться, это подход на Винде у меня вызывает до фига много вопросов, равно как и его ценность для пользователя на декстопах, но это уже совсем другая история.
Дизайн Bento обрёл вторую жизнь, когда Apple впервые применила сетку Bento grid. Изначально она появилась на целевых страницах iPhone, а позже грациозно распространилась на слайды мероприятий и презентации Apple.
Давно известно, что Apple даёт старт многим мегатрендам, и Bento стал одним из них. Дизайнеры повсюду начали применять Bento в презентациях, веб-сайтах, при запуске продуктов, и этот список лишь растет. Главное отличие между старым дизайном, напоминающим бенто, и новым трендом заключается в том, что каждая секция сетки теперь представляет собой уникальное пространство, а не часть единой группы.
В отличие от множества других тенденций в дизайне пользовательского интерфейса, Bento трансформируется во что-то большее, чем просто привлекательный стиль вёрстки. Сейчас он включает в себя демонстрации продуктов, сочетает различные уникальные макеты и даже задает новые концепции в визуальном дизайне.
Пример выше взят с diagram.com, где используются bento grids для интерактивной демонстрации возможностей их инструмента. Это делает инструмент более привлекательным и помогает пользователям понять, чего ожидать.
Чтобы поддержать таких дизайнеров, как мы, существуют веб-сайты, посвящённые вдохновению для Bento-дизайна. Один из таких сайтов — bentogrids.com, где представлена обширная коллекция Bento grid для пользовательского интерфейса и графического дизайна. Респекты и уважуха, как говорится, создателям этого ресурса!
Тренды в AR, пространственный дизайн и дополненная реальность
Я только что проснулся, зевнул, потянулся за телефоном и заглянул в ленту новостей. Там, словно из каждого утюга, звучала информация о новом Vision Pro от Apple. Так начиналось утро 5 июня 2023 года.
В следующие недели мир технологий неслабо так поглощён этой темой, и каждый уважающий себя дизайнер задумался, как можно освоить навыки пространственного проектирования и примерить эти новые технологии на свои продукты. Помимо новой дизайнерской тенденции, в центре внимания оказались различные стартапы в области AR/VR, и их технологии, наконец, начали обсуждать на серьезном уровне. Это дало мощный импульс развитию этого направления, что было действительно необходимо для индустрии.
Великие технологии открывают огромные возможности для дизайнеров. От умных часов до складных телефонов — дизайнеры всегда стремились продемонстрировать свою способность адаптироваться. Пространственный дизайн не стал исключением, обещая новые горизонты для креативного самовыражения и инноваций.
Это связано с запуском популярного инструмента, ориентированного на дизайнера, под названием «Bezi». Он очень близок к инструментам проектирования, таким как Figma и Spline, но с добавлением 3-го измерения. Дизайнеры могут заняться пространственным дизайном, подключить рабочую гарнитуру AR / VR и создавать интерактивные пространственные впечатления.
Небольшой обзор того, что позволяет нам создавать Bezi:
Лучший UX вносит большой вклад в улучшение взаимодействия с AR / VR. Глубокое понимание технологий, стоящих за красивым дизайном, использование настоящей виртуальной гарнитуры, тестирование в пространственных средах — всё это будет частью нашей работы. По мере продвижения вперёд в нашем текущем понимании UX определённо будет появляться много новых уроков и изменений. Однако это один из тех навыков, которые вы хотите развить прямо сейчас и, возможно, использовать в будущем.
Несмотря на то, что проект Google «Google Очки» так и не коснулся реального крупного производства, компания RayBan, выпускающая солнцезащитные очки, вступила в гонку интеллектуальных носимых устройств со своим новым Meta Wayfarer.
Не позволяйте обычному дизайну RayBan ввести вас в заблуждение. Встроенные камеры и интеллектуальные функции позволяют хранить видео/изображения и транслировать их в социальных сетях. Это привносит новое измерение в пользовательский опыт и взаимодействие с клиентами. Возможно, это тренд 2025 года. Кто знает!
Анимировать может каждый!
Новый тренд часто рождается, когда новый навык становится доступным большему количеству людей.
Это была одна из задач LottieFiles. Учитывая спрос на анимацию lottie, они даже запустили плагин для Figma, который позволяет нам преобразовывать наши анимации Figma в экспортируемый файл lottie JSON.
Это устраняет необходимость в длительном обучении After Effects и подобному софту, следовательно, всё больше дизайнеров смогут пилить свои анимации быстро и не сильно заморачиваясь.
В настоящее время растёт спрос не только на микроанимации, но и полноценные анимированные истории на страницах продуктов. Возьмём для примера следующее взаимодействие с целевой страницей:
Благодаря анимации прокрутки посетители будут поглощены тем, что вы им представите. Инструменты без кода, такие как Webflow и Framer, постоянно совершенствуются, предоставляя дизайнерам реализовать сложную анимации без необходимости писать длинные строки кода.
Можно подумать, что на этом аттракцион заканчивается. Анимация, возможно, достигла своего пика, и больше ждать нечего. К счастью для нас, технические специалисты всегда ищут что-то новое. Кроме того, благодаря бесконечному количеству функциональных инструментов всё, что вы можете себе представить, становится возможным.
Одной из таких возможностей стал новый «тренд анимированных кнопок». Новый стиль пользовательского интерфейса, который использует методы анимации для оживления простой кнопки. Эти изменения варьируются от простой анимации обводки вокруг кнопки до буквальных звездочек, перемещающихся внутри кнопки при наведении курсора мыши.
Такие тенденции часто возникают в результате эффекта домино. Сначала пост одного дизайнера в социальной сети приобретает популярность, а затем за ним следуют другие известные дизайнеры.
Плоский дизайн — фсё?
В последнее время многие дизайнеры говорят о том, как мир дизайна переходит от плоского дизайна к более псевдореалистичным визуальным стилям (Слава Яйцам!). К ним относятся 3D-графика, эффекты глубины, неоморфизм, скевоморфизм и прочие морфизмы.
Недавно мы увидели, как множество компаний внедрили 3D в качестве основного стиля. Хотя сейчас это может не проявляться в веб-дизайне и дизайне приложений, логотипы обновляются с учетом этой новой тенденции.
Как и другие тенденции в дизайне, основной причиной для внедрения этих стилей является внедрение «простых в использовании» веб-3D-инструментов, таких как Spline и Vectary, которые упрощают использование 3D-ресурсов в Интернете и приложениях. Они также воплощают в жизнь 3D-ресурсы с помощью анимации, с некоторыми из самых коротких этапов обучения, с которыми я сталкивался.
Еще одна компания, которая всегда определяла дизайн и тенденции — Airbnb. Они широко известны благодаря своим простым, но эффективным дизайнам приложений и взаимодействиям. В 2023 году компания анонсировала обновление приложения, которое действительно привнесёт несколько новых важных функций.
Что они сделали? Они включили более десятка визуальных элементов 3D, а их видео-анонс почти полностью посвящен 3D.
Изометрические визуальные эффекты, 3D-персонажи и анимация, а также множество взаимодействий с приложениями вызывают у меня желание посмотреть их повторно. Переход от плоского к 3D происходит действительно медленно и неуклонно, вот почему я считаю, что эта тенденция сохранится.
Кто положил начало этому тренду, навсегда останется загадкой, но спрос на реалистичный и приемлемый дизайн подталкивает нас к инновациям для пользователей, и, конечно, по нашим собственным эгоистичным творческим соображениям.
Искуственный интеллект
Искусственный интеллект — наиболее используемое и узнаваемое слово в технологиях за последнее десятилетие. Хотя некоторые дизайнеры воспринимают его как угрозу будущему своей карьеры, большинство из нас использует эту технологию, чтобы быстрее создавать лучшие продукты.
В последние годы на рынке появляется множество дизайнерских инструментов, которые заявляют, что обладают «поддержкой ИИ». Эти инструменты обещают внедрение открытых API-интерфейсов искусственного интеллекта на разных уровнях и даже разрабатывают собственные модели ИИ. Тем не менее, большая часть этих функций искусственного интеллекта больше похожа на маркетинговые ходы. Они предлагают несложные решения для проектирования пользовательского интерфейса, перераспределения ресурсов и даже для некоторых сложных задач, но часто это оказывается обманчиво. Многие специалисты в сообществе разделяют эти критические замечания.
Однако, среди множества этих инструментов, есть несколько действительно полезных решений. Например, Relume — компания, ориентированная на веб-дизайн, которая сумела выделиться. Она представила Relume A.I. — мощный инструмент, который действительно помогает создавать каркас и структуру сайтов, и завоевал симпатию многих пользователей.
Более внимательный и чуткий UX
Современный мир стремительно движется к цифровизации, охватывая все аспекты жизни: от работы и образования до покупок и развлечений. В этом контексте обеспечение доступности цифровых продуктов и услуг для всех, включая людей с ограниченными возможностями, приобретает первостепенное значение. Такой подход не только свидетельствует о социально ответственной позиции компании, но и является стратегическим преимуществом в условиях конкурентного рынка.
Люди с ограниченными возможностями сталкиваются с различными препятствиями в использовании цифровых технологий. Это могут быть физические, сенсорные, когнитивные или иные ограничения, которые затрудняют использование традиционных дизайнов интерфейсов. Для решения этих проблем необходимы инклюзивные дизайн-решения, которые учитывают разнообразие пользователей и обеспечивают равный доступ ко всем функциям и услугам.
Рост внимания к инклюзивному дизайну
В следующих двух пунктах я много дополнил от себя, но сути не менял, сильно не ругайтесь. Просто в процессе перевода понял, что тему можно раскрыть немного лучше, ибо это не проходная тема, а действительно важная.
За последние годы внимание к инклюзивному дизайну значительно возросло. Это отчасти связано с принятием международных стандартов доступности, таких как Web Content Accessibility Guidelines (WCAG), которые определяют критерии для разработки доступных веб-сайтов и приложений. Компании, соблюдающие эти стандарты, не только соблюдают законодательные требования, но и продвигают этические принципы, укрепляя свой бренд и репутацию.
Инклюзивный дизайн делает продукцию более универсальной. Например, добавление субтитров в видео помогает не только людям с нарушениями слуха, но и пользователям, которые смотрят видео в тихом режиме. Возможность масштабирования текста на веб-страницах полезна для людей с нарушениями зрения, и в то же время облегчает чтение на небольших экранах.
Преимущества инклюзивного дизайна
- Расширение Аудитории: Делая продукты доступными для людей с ограниченными возможностями, компании открывают свои сервисы для более широкой аудитории.
- Улучшение Пользовательского Опыта: Упрощенные и более интуитивные интерфейсы улучшают пользовательский опыт для всех.
- Соблюдение Законодательства: Соблюдение стандартов доступности предотвращает юридические риски и штрафы.
- Социальная Ответственность: Инвестирование в инклюзивный дизайн демонстрирует приверженность компании к социальной ответственности и этическим бизнес-практикам.
Примеры успешных дизайн-решений
Опять так, Apple — один из лидеров по внедрению встроенных функций доступности в свои устройства. Например, технологии VoiceOver для экранных чтецов или AssistiveTouch для адаптации управления устройством под физические возможности. Эти функции стали важными шагами на пути к созданию моделей устройства, подходящих для всех пользователей.
Инструменты Google также акцентируют внимание на доступности, предлагая сервисы, такие как автоматические субтитры на YouTube и режимы высокой контрастности в своих приложениях. Эти технологии показывают, как крупные компании инвестируют в инклюзивные решения, принося пользу всем пользователям.
Персонализация
В современном цифровом мире помом доступности ключевым аспектом разработки интерфейсов становится персонализация. Доступность гарантирует, что платформу могут использовать все, включая людей с ограниченными возможностями, тогда как персонализация создает уникальный опыт для каждого пользователя, удерживая его внимание.
Персонализация адаптирует контент и функционал под предпочтения пользователя. Это повышает удовлетворенность, вовлеченность, конверсию и лояльность.
Методы интеграции:
- Анализ данных: Использование информации о предпочтениях и поведении пользователей для предложения релевантного контента.
Доступность
Персонализация и доступность должны работать вместе. Например, настройка интерфейса для людей с нарушениями зрения или когнитивными особенностями усиливает общий пользовательский опыт.
YouTube и Amazon демонстрируют успешное применение персонализации. YouTube предлагает рекомендации на основе прошлых просмотров, что стимулирует возвращение пользователей. Amazon использует данные о покупках для предложения товаров, повышая тем самым удержание клиентов.
На этом всё. В нагрузку могу порекомендовать годный видосик на эту же тему, но смотреть его нужно сами знаете с чем. Лежит на Youtube
А здесь я положу все свои ссылки, которые могут быть вам интересны. Смело нажимайте, переходите, подписывайтесь, читайте, думайте. Всегда следите за направлением ветра и чувствуйте грядущие перемены. Да пребудет с вами сила космоса!
Канал о дизайне «Батя пожил, батя знает»