Strávil jsem více než dvě desetiletí v zákopech designu uživatelské zkušenosti. Pamatuji si přechod od tabulkových rozložení ke CSS, přechod k responzivnímu designu, když byl uveden iPhone, a vzestup „ekonomiky pozornosti“. Ale jak se pohybujeme v roce 2026, průmysl čelí dosud nejvýznamnějšímu posunu. Přesouváme se za éru „designu za každou cenu“ do éry udržitelného UX. Není to něco, o čem přemýšlí většina designérů, včetně mě, dokud jsem nebyl pobídnut tím, že jsem o tom slyšel jako o konceptu. Po léta jsme s internetem zacházeli jako s éterickým, beztížným mrakem. Předpokládali jsme, že digitální produkty jsou „zelené“ jednoduše proto, že nebyly vytištěny na papíře. Dřív jsem si to myslel také a než se objevil koncept klimatických změn, šlo spíše o záchranu stromů. Mýlili jsme se. Cloud je fyzická infrastruktura, rozlehlá síť datových center, podmořských kabelů a chladicích systémů, které hučí 24/7. Zatímco datová centra zaměřená na umělou inteligenci odpovídají spotřebě energie masivním hutím hliníku, jejich vysoká geografická hustota vytváří ještě intenzivnější a lokalizovanější zátěž životního prostředí. Jako UX designéři jsme architekty této spotřeby energie. Každý obrázek hrdiny ve vysokém rozlišení, každé automaticky přehrávané video na pozadí a každá složitá JavaScriptová animace, kterou schválíme, je přímým pokynem pro procesor, aby spotřeboval energii. Pokud chceme vybudovat budoucnost, která vydrží, musíme přestat navrhovat pro „wow“ a začít navrhovat pro efektivitu. Tmavý režim Na počátku 21. století byla bílá pozadí standardem, protože napodobovala známost papíru. Hardware se však vyvíjel a naše filozofie designu musí následovat. Posun od LCD k technologii OLED (Organic Light Emitting Diode) zásadně změnil způsob, jakým barvy ovlivňují energii.
Logika Na rozdíl od tradičních LCD obrazovek, které vyžadují podsvícení, které je vždy zapnuté (i při zobrazení černé), OLED obrazovky osvětlují každý pixel samostatně. Když je pixel nastaven na skutečnou černou (#000000), tato konkrétní dioda se zcela vypne. Má nulovou spotřebu. Navrhováním rozhraní, která upřednostňují tmavší palety, nesledujeme pouze trend; fyzicky snižujeme energetickou náročnost zařízení uživatele. Data Úspora energie není zdaleka zanedbatelná. Přelomová studie Purdue University z roku 2021, která se stala zlatým standardem této diskuse, odhalila, že při 100% jasu může přepnutí ze světlého režimu do tmavého ušetřit v průměru 39 % až 47 % energie baterie. Pokud by v globálním měřítku každá hlavní aplikace přešla do tmavého režimu, snížení poptávky po síti by bylo astronomické. Cíl designu V roce 2026 by již tmavý režim neměl být sekundárním „tématem“ zastrčeným v nabídce nastavení. Měli bychom navrhovat s mentalitou „první temnoty“. To neznamená, že každý web musí vypadat jako The Matrix, ale znamená to upřednostnění vysoce kontrastních tmavých motivů jako výchozího stavu preferovaného systémem. To prodlužuje životnost hardwaru zařízení a snižuje uhlíkovou stopu každé interakce. Osobně preferuji pro čtení režim Light-Mode, takže má smysl mít k dispozici možnosti světlého i tmavého režimu. Existují také úvahy o přístupnosti při poskytování obou možností. Optimalizace obrazu a videa Stali se z nás líní návrháři. Díky vysokorychlostnímu 5G a optickým vláknům jsme se přestali starat o velikost souborů. Průměrná váha mobilní stránky se za poslední desetiletí zvýšila o více než 500 %, především kvůli neoptimalizovaným vizuálním aktivům. Logika „Digitální tuk“ webové stránky (tyto 4 MB fotky Unsplash a 15 MB videa na pozadí) je jediným největším přispěvatelem energie při načítání stránek. Každý megabajt přenesený ze serveru na klienta vyžaduje elektřinu pro přenos, zpracování serveru a vykreslovací modul uživatele. Když používáme masivní soubory, v podstatě „spalujeme“ energii, abychom ukázali obrázek, který by mohl být stejně účinný při zlomku velikosti. Nemluvě o tom, že také poskytujete lepší uživatelský dojem se stránkou, která se načítá mnohem rychleji.
Data Podle HTTP Archive obrázky a video trvale tvoří lví podíl na celkové váze stránky. Posun k moderním formátům, jako je AVIF a WebP, však může snížit hmotnost obrazu až o 50 % ve srovnání s JPEG, aniž by došlo k jakékoli znatelné ztrátě kvality. I když mi tyto formáty nejsou tak známé jako JPG a PNG, rozhodně se těším, až je použiji ke zmenšení stránky. TheCíl designu Nedávno jsem vedl redesign platformy kybernetické bezpečnosti. Zavedením auditu „Před a po“ jsme zjistili, že jejich domovská stránka načítala 5,5 MB dat. Nahrazením fotografie ve vysokém rozlišení uměním SVG (Scalable Vector Graphics) a použitím chytrých přechodů CSS namísto obrazových prostředků jsme snížili zatížení na 1,2 MB. To je 78% snížení energetické zátěže! Jako designér by vaše první otázka měla vždy znít: "Potřebuji k tomu fotku, nebo mohu dosáhnout stejné emocionální rezonance s kódem?"
Záměrný pohyb: Řezání „hlasitých“ animací Žijeme v éře „scroll-jackingu“ a komplexních 3D paralaxových efektů. I když mohou získat ocenění na Awwwards.com, často se jedná o ekologické katastrofy. Logika Animace není zdarma. Pro vykreslení složité animace musí GPU (Graphics Processing Unit) zařízení pracovat s vysokou kapacitou. To zvyšuje teplotu CPU, spouští chladicí ventilátory (u notebooků) a rychle vybíjí baterii. „Hlasité“ animace, které neustále běží na pozadí nebo spouštějí masivní překreslování prohlížeče, jsou energetickým ekvivalentem ponechání auta na volnoběhu na příjezdové cestě.
Data Pokyny společnosti Google pro Material Design zdůrazňují „Smysluplný pohyb“. Tvrdí, že animace by měla sloužit pouze k orientaci uživatele nebo poskytnutí zpětné vazby. A použití WebP místo JPEG může ušetřit 25-50 % dat na stránce. Cíl designu Musíme přijmout smysluplný pohyb. Pokud animace nepomůže uživateli dokončit úkol nebo pochopit hierarchii, je to plýtvání. Pokud je to možné, měli bychom upřednostňovat přechody CSS před náročnými knihovnami JavaScriptu, jako je GSAP nebo Lottie, protože CSS je hardwarově akcelerované a pro prohlížeč mnohem efektivnější při výpočtu. Jako designér UX nemohu tento přístup argumentovat. To nejen pomáhá snížit plýtvání daty, ale také zlepšuje uživatelské prostředí pro naše uživatele. Nastavení „Datového rozpočtu“ pro každý projekt Za mých 20+ let UX byly nejúspěšnější projekty obecně ty s nejpřísnějšími omezeními. Stejně jako má projekt finanční rozpočet, měl by mít také uhlíkový a datový rozpočet. Logika Datový rozpočet je pevný limit na celkovou velikost stránky (např. „Tato vstupní stránka nesmí přesáhnout 1 MB“). To nutí designérský tým činit obtížná, záměrná rozhodnutí. Pokud chcete přidat nový sledovací skript nebo ozdobnou váhu písma, musíte za to „zaplatit“ optimalizací nebo odstraněním něčeho jiného. To zabraňuje tomu, aby se „tečení vlastností“ změnilo na „tečení uhlíku“. Data Model Sustainable Web Design, vyvinutý průkopníky, jako je Wholegrain Digital, poskytuje vzorec pro výpočet CO2 na zobrazení stránky. Průměrný web vyprodukuje asi 0,5 gramu CO2 na jedno zobrazení. Pro web s 1 milionem zhlédnutí měsíčně to je 6 metrických tun CO2 ročně, což odpovídá ujetí 15 000 mil autem. Cíl designu Kontrolní seznam pro udržitelné UX
Snižte nutnost použití ImagesQuestion každého vizuálu a používejte nejmenší rozlišení a nejúčinnější formáty souborů (jako AVIF), abyste minimalizovali přenos dat. Optimalizujte video Eliminujte automaticky přehrávaná média a upřednostněte vysoce komprimované krátké smyčky, abyste zajistili, že energie bude vynaložena pouze na obsah, který má uživatel v úmyslu sledovat. Omezte písma Použijte maximálně dvě tloušťky webových písem nebo se držte klasických systémových písem, abyste odstranili zbytečné požadavky serveru a vykreslování nadýmání. Recycle AssetsZměňte použití jednoho obrázku nebo videa několikrát pomocí CSS filtrů a překryvů, abyste vytvořili vizuální rozmanitost bez zvýšení celkové hmotnosti stránky. Vyberte si Green HostingHostujte své digitální produkty na serverech ověřených organizací The Green Web Foundation, abyste měli jistotu, že jsou poháněny obnovitelnými zdroji energie. Minimalizujte vzdálenost datVyberte umístění serverů geograficky blízko vašeho primárního publika, abyste snížili energii potřebnou k přenosu dat fyzickou infrastrukturou.
Obchodní pouzdro pro ekologický design Někdo by mohl namítnout, že „Green UX“ zní jako kompromis v kvalitě. Naopak je to konkurenční výhoda. Udržitelný design je výkonný design. Když snížíte váhu stránky, váš web se načte rychleji. Když se vaše stránky načítají rychleji, vaše Core Web Vitals se zlepší. Když se vaše Core Web Vitals zlepší, vaše hodnocení SEO se zvýší. Navíc uživatelé na starších zařízeních nebo pomalejších datových tarifech (zejména na rozvíjejících se trzích) mohou skutečně přistupovat k vašemu produktu. Toto je definice „Inkluzivního designu“. Odříznutím „digitálního tuku“ vytváříme štíhlejší, rychlejší a dostupnější web. Odstupujeme od „designu na jedno použití“ roku 2010 směrem k atrvalejší, respektující digitální architekturu. Závěr: Budoucnost „čistého“ designu Během svých dvou desetiletí designu jsem viděl mnoho trendů přicházejících a odcházejících. Skeuomorfismus, plochý design, neumorfismus – to všechno byly estetické volby. Ale udržitelné UX není trend; je to nyní nutnost. Jsme první generací designérů, kteří musí počítat s fyzickými důsledky naší digitální práce. Udržitelné UX je „win-win-win“. Je to lepší pro planetu, protože snižuje spotřebu energie. Je to pro uživatele lepší, protože má za následek rychlejší a citlivější rozhraní. A je to pro firmu lepší, protože snižuje náklady na hosting A zlepšuje míru konverze. Éra „neomezených pixelů“ skončila. V roce 2026 je nejpropracovanějším designem ten, který zanechává nejmenší stopu. Už nejsme jen designéři; jsme strážci baterie uživatele, jeho datového plánu a nakonec i životního prostředí. Výzva k akci Vyzývám vás, abyste dnes provedli audit pouze jedné stránky svého aktuálního projektu. Použijte nástroj, jako je Webová kalkulačka uhlíku, abyste viděli její dopad. Pak hledejte „neviditelný odpad“. Může být ten obrázek SVG? Může to video být statický hrdina? Dá se ta „hlasitá“ animace ztišit? Začněte v malém. Nejelegantnější řešení je často to s nejmenším počtem bajtů.
