Več kot dve desetletji sem preživel v okopih oblikovanja uporabniške izkušnje. Spominjam se prehoda s tabelnih postavitev na CSS, preobrata v odzivno zasnovo, ko je bil predstavljen iPhone, in porasta »ekonomije pozornosti«. Toda ko krmarimo po letu 2026, se industrija sooča z največjim premikom doslej. Prehajamo iz dobe »oblikovanje za vsako ceno« v dobo trajnostnega uporabniškega vmesnika. To ni nekaj, o čemer razmišlja večina oblikovalcev, vključno z mano, dokler nisem slišal za to kot koncept. Leta smo internet obravnavali kot eterični breztežni oblak. Domnevali smo, da so digitalni izdelki »zeleni« preprosto zato, ker niso bili natisnjeni na papirju. Tudi jaz sem včasih tako mislil in preden se je pojavil koncept podnebnih sprememb, je šlo bolj za reševanje dreves. Motili smo se. Oblak je fizična infrastruktura, razvejano omrežje podatkovnih centrov, podvodnih kablov in hladilnih sistemov, ki brnijo 24/7. Medtem ko podatkovni centri, osredotočeni na umetno inteligenco, dosegajo porabo energije velikih talilnic aluminija, njihova visoka geografska gostota ustvarja še intenzivnejšo in lokalizirano obremenitev okolja. Kot oblikovalci UX smo arhitekti te porabe energije. Vsaka glavna slika visoke ločljivosti, vsak samodejno predvajan videoposnetek v ozadju in vsaka zapletena animacija JavaScript, ki jo odobrimo, je neposredno navodilo procesorju za porabo energije. Če želimo zgraditi dolgotrajno prihodnost, moramo prenehati oblikovati za »vau« in začeti načrtovati za učinkovitost. Temni način V zgodnjih 2000-ih so bila bela ozadja standard, ker so posnemala običajen papir. Vendar se je strojna oprema razvila in naša oblikovalska filozofija mora slediti. Prehod s tehnologije LCD na tehnologijo OLED (Organic Light Emitting Diode) je temeljito spremenil vpliv barve na energijo.
Logika V nasprotju s tradicionalnimi zasloni LCD, ki zahtevajo osvetlitev ozadja, ki je vedno vključena (tudi ko je prikazana črna), zasloni OLED osvetljujejo vsako slikovno piko posebej. Ko je slikovna pika nastavljena na resnično črno (#000000), je ta posebna dioda popolnoma izklopljena. Porabi nič energije. Z oblikovanjem vmesnikov, ki dajejo prednost temnejšim paletam, ne sledimo le trendu; fizično zmanjšamo porabo energije uporabnikove naprave. Podatki Prihranki energije še zdaleč niso zanemarljivi. Prelomna študija univerze Purdue iz leta 2021, ki je postala zlati standard za to razpravo, je razkrila, da lahko pri 100-odstotni svetlosti preklop iz svetlega načina v temni način prihrani v povprečju od 39 % do 47 % energije baterije. V svetovnem merilu bi bilo zmanjšanje povpraševanja po omrežju astronomsko, če bi vsaka večja aplikacija privzeto preklopila na temni način. Cilj oblikovanja Leta 2026 temni način ne bi smel biti več sekundarna »tema«, skrita v meniju z nastavitvami. Morali bi načrtovati z miselnostjo »Najprej temno«. To ne pomeni, da mora biti vsako spletno mesto videti kot The Matrix, vendar pomeni, da imajo prednost temne teme z visokim kontrastom kot privzeto sistemsko prednostno stanje. To podaljša življenjsko dobo strojne opreme naprave in zmanjša ogljični odtis vsake interakcije. Osebno imam raje svetlobni način za branje, zato je smiselno imeti na voljo možnosti svetlega in temnega načina. Pri zagotavljanju obeh možnosti je treba upoštevati tudi dostopnost. Optimizacija slike in videa Postali smo leni oblikovalci. S hitrim 5G in optičnimi vlakni nas ni več skrbelo glede velikosti datotek. Povprečna teža mobilne strani se je v zadnjem desetletju povečala za več kot 500 %, predvsem zaradi neoptimiziranih vizualnih sredstev. Logika »Digitalna maščoba« spletnega mesta (tistih 4 MB Unsplash fotografij in 15 MB videoposnetkov v ozadju) največ prispeva k energiji nalaganja strani. Vsak megabajt, prenesen s strežnika na odjemalca, potrebuje elektriko za prenos, strežniško obdelavo in uporabniški mehanizem upodabljanja. Ko uporabljamo ogromne datoteke, v bistvu »kurimo« energijo, da prikažemo sliko, ki bi lahko bila enako učinkovita pri delčku velikosti. Da ne omenjam, zagotavljate tudi boljšo uporabniško izkušnjo s stranjo, ki se nalaga veliko hitreje.
Podatki Glede na HTTP Archive slike in video dosledno predstavljajo levji delež skupne teže strani. Vendar lahko prehod na sodobne formate, kot sta AVIF in WebP, zmanjša težo slike do 50 % v primerjavi z JPEG, brez opazne izgube kakovosti. Čeprav mi ti formati niso tako znani kot JPG in PNG, se vsekakor veselim njihove uporabe za zmanjšanje velikosti strani. TheCilj oblikovanja Pred kratkim sem vodil preoblikovanje platforme za kibernetsko varnost. Z izvedbo revizije »Prej in potem« smo ugotovili, da njihova domača stran nalaga 5,5 MB podatkov. Z zamenjavo fotografije visoke ločljivosti z umetnostjo SVG (razširljiva vektorska grafika) in uporabo pametnih gradientov CSS namesto slikovnih sredstev smo zmanjšali obremenitev na 1,2 MB. To je 78-odstotno zmanjšanje energetske obremenitve! Kot oblikovalec bi moralo biti vaše prvo vprašanje vedno: "Ali za to potrebujem fotografijo ali lahko dosežem enako čustveno resonanco s kodo?"
Namerno gibanje: rezanje "glasnih" animacij Živimo v dobi »scroll-jackinga« in zapletenih učinkov 3D paralakse. Čeprav bi ti lahko prejeli nagrade na Awwwards.com, so pogosto ekološke katastrofe. Logika Animacija ni brezplačna. Za upodabljanje kompleksne animacije mora GPE (grafična procesna enota) naprave delovati z visoko zmogljivostjo. To poveča temperaturo procesorja, sproži hladilne ventilatorje (v prenosnikih) in hitro izprazni baterijo. »Glasne« animacije, ki se nenehno izvajajo v ozadju ali sprožijo obsežna vnovična barvanja brskalnika, so enako energijsko enake, kot če bi vaš avto pustil v prostem teku na dovozu.
Podatki Googlove smernice za materialno oblikovanje poudarjajo "smiselno gibanje". Trdijo, da je treba animacijo uporabljati le za orientacijo uporabnika ali zagotavljanje povratne informacije. Z uporabo WebP namesto JPEG lahko prihranite 25–50 % podatkov na strani. Cilj oblikovanja Sprejeti moramo Smiselno gibanje. Če animacija uporabniku ne pomaga dokončati naloge ali razumeti hierarhijo, je škoda. Kjer je to mogoče, bi morali dati prednost prehodom CSS pred težkimi knjižnicami JavaScript, kot sta GSAP ali Lottie, saj je CSS strojno pospešen in brskalnik veliko bolj učinkovit pri računanju. Kot oblikovalec uporabniške izkušnje ne morem oporekati temu pristopu. To ne le pomaga zmanjšati izgubo podatkov, ampak tudi izboljša UX za naše uporabnike. Nastavitev »podatkovnega proračuna« za vsak projekt V mojih 20+ letih UX so bili najuspešnejši projekti na splošno tisti z najstrožjimi omejitvami. Tako kot ima projekt finančni proračun, mora imeti tudi proračun za ogljik in podatke. Logika Podatkovni proračun je trda omejitev skupne velikosti strani (npr. »Ta ciljna stran ne sme presegati 1 MB«). To sili oblikovalsko ekipo k težkim, namernim odločitvam. Če želite dodati nov skript za sledenje ali modno težo pisave, morate za to »plačati« z optimizacijo ali odstranitvijo nečesa drugega. To preprečuje, da bi se "lezenje lastnosti" spremenilo v "lezenje ogljika". Podatki Model trajnostnega spletnega oblikovanja, ki so ga razvili pionirji, kot je Wholegrain Digital, ponuja formulo za izračun CO2 na ogled strani. Povprečno spletno mesto proizvede približno 0,5 grama CO2 na ogled. Za spletno mesto z 1 milijonom mesečnih ogledov je to 6 metričnih ton CO2 na leto, kar ustreza vožnji z avtomobilom 15.000 milj. Cilj oblikovanja Kontrolni seznam za trajnostno uporabniško izkušnjo
Zmanjšajte slike. Preizkusite nujnost vsake slike in uporabite najmanjšo ločljivost in najučinkovitejše formate datotek (kot je AVIF), da zmanjšate prenos podatkov. Optimizirajte video. Odstranite samodejno predvajanje medijev in dajte prednost zelo stisnjenim, kratkim zankam, da zagotovite, da se energija porabi samo za vsebino, ki si jo uporabnik namerava ogledati. Omejite pisave. Uporabite največ dve teži spletnih pisav ali se držite klasičnih sistemskih pisav, da odstranite nepotrebne zahteve strežnika in napihnjenost upodabljanja. Recycle Assets Večkrat spremenite namen ene same slike ali videoposnetka z uporabo filtrov CSS in prekrivanj, da ustvarite vizualno raznolikost brez povečanja skupne teže strani. Izberite Green Hosting. Gostujte svoje digitalne izdelke na strežnikih, ki jih je preverila The Green Web Foundation, da zagotovite, da jih poganjajo obnovljivi viri energije. Zmanjšajte podatkovno razdaljo. Izberite lokacije strežnika, ki so geografsko blizu vaši primarni ciljni skupini, da zmanjšate energijo, ki je potrebna za prenos podatkov skozi fizično infrastrukturo.
Poslovni primer za okolju prijazen dizajn Nekateri bi morda trdili, da "Green UX" zveni kot kompromis glede kakovosti. Nasprotno, to je konkurenčna prednost. Trajnostno oblikovanje je oblikovanje uspešnosti. Ko zmanjšate težo strani, se vaše spletno mesto naloži hitreje. Ko se vaše spletno mesto naloži hitreje, se vaši osnovni spletni kazalci izboljšajo. Ko se vaši osnovni spletni kazalci izboljšajo, se vaša uvrstitev v SEO dvigne. Poleg tega lahko uporabniki na starejših napravah ali počasnejših podatkovnih paketih (zlasti na trgih v razvoju) dejansko dostopajo do vašega izdelka. To je definicija "vključujočega oblikovanja". Z zmanjšanjem »digitalne maščobe« ustvarimo vitkejši, hitrejši in bolj dostopen splet. Odmikamo se od »zasnove za enkratno uporabo« iz leta 2010 proti abolj trajno, spoštljivo digitalno arhitekturo. Zaključek: Prihodnost »čistega« oblikovanja V dveh desetletjih oblikovanja sem videl veliko trendov, ki prihajajo in gredo. Skeuomorfizem, ravno oblikovanje, nevmorfizem - vse so bile estetske izbire. Toda trajnostna uporabniška izkušnja ni trend; zdaj je nuja. Smo prva generacija oblikovalcev, ki mora računati s fizičnimi posledicami našega digitalnega dela. Trajnostni uporabniški vmesnik je "win-win-win". Bolje je za planet, ker zmanjša porabo energije. Bolje je za uporabnika, ker ima za posledico hitrejše in bolj odzivne vmesnike. In to je boljše za podjetje, ker znižuje stroške gostovanja IN izboljšuje stopnje konverzije. Obdobje "neomejenih slikovnih pik" je konec. Leta 2026 je najbolj prefinjen dizajn tisti, ki pusti najmanjši odtis. Nismo več samo oblikovalci; smo varuhi uporabnikove baterije, njihovega podatkovnega paketa in navsezadnje okolja. Poziv k dejanju Izzivam vas, da danes pregledate samo eno stran svojega trenutnega projekta. Uporabite orodje, kot je spletni kalkulator ogljika, da vidite njegov vpliv. Nato poiščite »nevidne odpadke«. Je lahko ta slika SVG? Je lahko ta video statični junak? Ali je mogoče to "glasno" animacijo utišati? Začni z majhnim. Najbolj elegantna rešitev je pogosto tista z najmanj bajti.
