Я провел более двух десятилетий в разработке пользовательского опыта. Я помню переход от табличного макета к CSS, переход к адаптивному дизайну с появлением iPhone и рост «экономики внимания». Но когда мы вступаем в 2026 год, отрасль сталкивается с самыми значительными изменениями. Мы выходим из эпохи «дизайна любой ценой» Устойчивый UX.
Большинство дизайнеров, в том числе и я, не думают об этом, пока меня не вдохновило, когда я услышал об этом как о концепции. В течение многих лет мы относились к Интернету как к эфирному, невесомому облаку. Мы предполагали, что цифровые продукты являются «зелеными» просто потому, что они не печатаются на бумаге. Раньше я думал то же самое, и до того, как появилась концепция изменения климата, речь шла больше о спасении деревьев.
мы были неправы. Облако — это физическая инфраструктура, обширная сеть центров обработки данных, подводных кабелей и систем охлаждения, которые гудят. 24⁄7. Хотя центры обработки данных, ориентированные на искусственный интеллект, соответствуют энергопотреблению крупных алюминиевых заводов, их высокая географическая плотность создает еще более интенсивную и локализованную нагрузку на окружающую среду.
Как UX-дизайнеры, мы являемся архитекторами этого энергопотребления. Каждое главное изображение в высоком разрешении, каждое автоматически воспроизводимое фоновое видео и каждая сложная анимация JavaScript, которую мы одобряем, — это прямая инструкция процессору потреблять энергию. Если мы хотим создать устойчивое будущее, мы должны перестать проектировать для «вау» и начать проектировать для Емкость.
темный режим
В начале 2000-х белый фон был стандартом, потому что он имитировал знакомую бумагу. Однако аппаратное обеспечение развивается, и наша философия дизайна должна следовать ему. Переход от технологии LCD к технологии OLED (органический светоизлучающий диод) фундаментально изменил то, как цвета влияют на энергию.
логика
В отличие от традиционных ЖК-экранов, которым требуется постоянная подсветка (даже при отображении черного цвета), OLED-экраны подсвечивают каждый пиксель индивидуально. Когда для пикселя установлен истинно черный цвет (#000000), этот конкретный диод полностью выключается. Он потребляет нулевую мощность.
фигура
Экономия энергии далеко не ничтожна. Историческое исследование, проведенное Университет Пердью В 2021 году то, что стало золотым стандартом для этой дискуссии, показало, что при 100% яркости переключение из светлого режима в темный может сэкономить в среднем от 39% до 47% мощности аккумулятора. В глобальном масштабе, если бы каждое крупное приложение по умолчанию перешло в темный режим, сокращение спроса на сеть было бы огромным.
цели дизайна
В 2026 году тёмный режим больше не должен быть второстепенной «темой», скрытой в меню «Настройки». мы должны проектировать с «Тьма прежде всего» менталитет. Это не означает, что все сайты должны выглядеть одинаково. математический вопросНо это означает, что в качестве предпочтительного для системы состояния по умолчанию следует предпочесть высококонтрастную темную тему. Это продлевает срок службы оборудования устройства и снижает выбросы углекислого газа при каждом взаимодействии.
Лично я предпочитаю светлый режим для чтения, поэтому имеет смысл иметь как светлый, так и темный режимы. есть также соображения доступности При наличии обоих вариантов.
Оптимизация изображений и видео
Мы стали ленивыми дизайнерами. Благодаря высокоскоростному 5G и оптоволоконному кабелю мы перестали беспокоиться о размере файла. Средний вес мобильной страницы увеличился более чем на 500 %. В последнее десятилетие в основном из-за неоптимизированных визуальных ресурсов.
логика
«Цифровой жир» веб-сайта (эти изображения unsplash размером 4 МБ и фоновое видео размером 15 МБ) вносит наибольший вклад в энергию загрузки страницы. Каждый мегабайт, передаваемый с сервера клиенту, требует мощности для передачи, обработки сервера и механизма рендеринга пользователя. Когда мы используем файлы большего размера, мы, по сути, «сжигаем» энергию для отображения фотографии, которая могла бы быть столь же эффективной при небольшом размере. Излишне говорить, что вы также обеспечиваете лучший пользовательский опыт благодаря странице, которая загружается намного быстрее.
фигура
в соответствии с HTTP-архивИзображения и видео неизменно составляют львиную долю общего веса страницы. Однако изменения в современных форматах, таких как живо И вебпи могу сделать Уменьшите вес изображения до 50% по сравнению с JPEG, Без какой-либо прямой потери качества.
Хотя эти форматы мне не так знакомы, как JPG и PNG, я определенно с нетерпением жду возможности использовать их для уменьшения размера страницы.
цели дизайна
Недавно я провел редизайн платформы кибербезопасности. Проведя аудит «до и после», мы обнаружили, что их домашняя страница загружала 5,5 МБ данных. Заменяя фотографии высокого разрешения SVG (масштабируемая векторная графика) используя искусство и изобретательность CSS градиент Вместо графических ресурсов мы снизили нагрузку до 1,2 МБ. Он Снижение энергетической нагрузки на 78%! Как дизайнер, ваш первый вопрос всегда должен быть:
«Нужна ли для этого фотография или я могу получить такой же эмоциональный резонанс с помощью кода?»
Намеренное движение: «громкая» резка анимации.
Мы живем в эпохупрокрутка» и сложные трехмерные эффекты параллакса. Хотя они могут получить награды на Awwwards.com, они часто приводят к экологической катастрофе.
логика
Анимация не бесплатная. Для рендеринга сложной анимации графический процессор устройства должен работать с высокой производительностью. Это увеличивает температуру процессораВключает охлаждающие вентиляторы (в ноутбуках) и быстрее разряжает батарею. «Громкие» анимации, которые постоянно работают в фоновом режиме или вызывают массовую перерисовку браузера, являются энергетическим эквивалентом того, как если бы вы оставили машину на холостом ходу на подъездной дорожке.
фигура
Рекомендации Google по дизайну материалов подчеркивать “значительная скоростьОни утверждают, что анимацию следует использовать только для ориентации пользователя или обеспечения обратной связи. WebP вместо JPEG позволяет сэкономить 25-50% данных на странице.
цели дизайна
мы должны принять Значимый темп. Если анимация не помогает пользователю выполнить задачу или понять иерархию, это пустая трата времени. мы должны оказать услугу изменение CSS Там, где это возможно, используйте тяжелые библиотеки JavaScript, такие как GSAP или Lottie. CSS имеет аппаратное ускорение И браузер гораздо эффективнее вычисляет.
Как UX-дизайнер, я не могу спорить с таким подходом. Это не только помогает сократить потери данных, но и улучшает UX для наших пользователей.
Установка «бюджета данных» для каждого проекта
За 20 с лишним лет работы в UX наиболее успешными проектами обычно были проекты с самыми жесткими ограничениями.
логика
Бюджет данных – это жесткое ограничение общего размера страницы (например, «Эта целевая страница не может превышать 1 МБ»). Это заставляет команду дизайнеров делать трудный и осознанный выбор. Если вы хотите добавить новый скрипт отслеживания или необычную толщину шрифта, вам придется «заплатить» за это, настроив или удалив что-то еще. Это предотвращает превращение «ползучести функций» в «ползучесть углерода».
фигура
Модель устойчивого веб-дизайнаразработанные пионерами, такими как цельнозерновой цифровойПредоставляет формулу для расчета CO2 на просмотр страницы. Средний веб-сайт генерирует примерно 0,5 грамма CO2 за просмотр. Для сайта с 1 миллионом просмотров в месяц это 6 тонн выбросов CO2 в год, что эквивалентно проезду на автомобиле 15 000 миль.
цели дизайна
Контрольный список устойчивого UX
- уменьшить изображения
Подумайте о необходимости каждой сцены и используйте наименьшее разрешение и наиболее эффективные форматы файлов (например, AVIF), чтобы минимизировать передачу данных. - оптимизировать видео
Откажитесь от автоматического воспроизведения мультимедиа и отдайте предпочтение коротким циклам с высокой степенью сжатия, чтобы гарантировать, что энергия тратится только на тот контент, который пользователь хочет посмотреть. - ограничить шрифт
Используйте до двух вариантов толщины веб-шрифта или придерживайтесь классического системного шрифта, чтобы исключить ненужные запросы к серверу и раздувание. - перерабатывать активы
Измените одно и то же изображение или видео несколько раз, используя фильтры CSS и наложения, чтобы создать визуальные вариации без увеличения общего веса страницы. - Выбирайте зеленый хостинг
Размещайте свои цифровые продукты на серверах, проверенных Фонд Зеленой Паутины Чтобы гарантировать, что они питаются от возобновляемых источников энергии. - минимизировать расстояние передачи данных
Выбирайте местоположения серверов, географически близкие к вашей основной аудитории, чтобы снизить энергопотребление, необходимое для передачи данных через физическую инфраструктуру.
Экономическое обоснование экологически чистого дизайна
Некоторые могут возразить, что «зеленый UX» звучит как компромисс по качеству. Наоборот, это конкурентное преимущество. имеет прочную конструкцию Дизайн дисплея.
Когда вы уменьшаете вес страницы, ваш сайт загружается быстрее. Когда ваш сайт загружается быстрее, ваш Основные веб-показатели Улучшение. когда твой Основные веб-показатели улучшить свой SEO-рейтинг идет вверх. Кроме того, пользователи со старыми устройствами или более медленными тарифными планами (особенно на развивающихся рынках) могут получить доступ к вашему продукту. Это определение «инклюзивного дизайна».
Отказавшись от «цифрового жира», мы создаем более компактную, быструю и доступную сеть. Мы отходим от «одноразового дизайна» 2010-х годов к более устойчивой и уважительной цифровой архитектуре.
Вывод: будущее «чистого» дизайна
За два десятилетия моей работы в дизайне я видел, как приходят и уходят многие тенденции. Скевоморфизм, плоский дизайн, неоморфизм – все это был эстетический выбор. Но устойчивый UX — это не тенденция; Теперь это необходимость. Мы — первое поколение дизайнеров, которое учитывает физические последствия нашей цифровой работы.
Устойчивый UX — это «беспроигрышный вариант». Это лучше для планеты, поскольку снижает потребление энергии. Это лучше для пользователя, поскольку в результате интерфейс становится более быстрым и отзывчивым. И это лучше для бизнеса, поскольку снижает затраты на хостинг и повышает коэффициент конверсии.
Эпоха «бесконечных пикселей» закончилась. В 2026 году самый изысканный дизайн — это тот, который оставляет наименьший след. Мы больше не просто дизайнеры; Мы являемся хранителями аккумулятора пользователя, его тарифного плана и, в конечном итоге, окружающей среды.
призыв к действию
Я просто призываю вас пройти аудит одна страница вашего текущего проекта сегодня. используйте такие инструменты, как Калькулятор выбросов углерода на сайте Чтобы увидеть его эффект. Затем найдите «невидимые отходы». Может ли это изображение быть SVG? Может ли это видео быть Static Hero? Можно ли приглушить эту «громкую» анимацию?
начните с малого. Самым элегантным решением часто является решение с наименьшим количеством байтов.
(ок)
