Olen viettänyt yli kaksi vuosikymmentä käyttäjäkokemuksen suunnittelun haudoissa. Muistan siirtymisen taulukkopohjaisista asetteluista CSS:ään, kääntymisen reagoivaan suunnitteluun iPhonen julkaisun yhteydessä ja "huomiotalouden" nousun. Mutta kun siirrymme vuoteen 2026, ala on edessään tähän mennessä merkittävin muutos. Siirrymme "suunnittelun hinnalla millä hyvänsä" aikakauden ohi kestävän käyttökokemuksen aikakauteen. Useimmat suunnittelijat, minä mukaan lukien, eivät ajattele sitä, ennen kuin kuulin tästä konseptina. Olemme vuosia kohdelleet Internetiä eteerisenä, painottomana pilvenä. Olemme olettaneet, että digitaaliset tuotteet olivat "vihreitä" yksinkertaisesti siksi, että niitä ei painettu paperille. Minäkin ajattelin niin, ja ennen ilmastonmuutoksen käsitteen syntymistä kyse oli enemmän puiden säästämisestä. Olimme väärässä. Pilvi on fyysinen infrastruktuuri, laaja datakeskusten, merenalaisten kaapelien ja jäähdytysjärjestelmien verkosto, joka huminaa 24/7. Tekoälyyn keskittyvät palvelinkeskukset vastaavat massiivisten alumiinisulattojen virrankulutusta, mutta niiden suuri maantieteellinen tiheys aiheuttaa entistä voimakkaamman ja paikallisemman ympäristörasituksen. UX-suunnittelijoina olemme tämän energiankulutuksen arkkitehtejä. Jokainen korkearesoluutioinen sankarikuva, jokainen automaattisesti toistettava taustavideo ja jokainen monimutkainen JavaScript-animaatio, jonka hyväksymme, on suora ohje prosessorille kuluttaa virtaa. Jos haluamme rakentaa kestävän tulevaisuuden, meidän on lopetettava "vau"-suunnittelu ja aloitettava tehokkuuden suunnittelu. Tumma tila 2000-luvun alussa valkoiset taustat olivat vakiona, koska ne matkivat paperin tuttua. Laitteisto on kuitenkin kehittynyt, ja suunnittelufilosofiamme on noudatettava. Siirtyminen LCD:stä OLED-tekniikkaan (Organic Light Emitting Diode) on muuttanut perusteellisesti värien vaikutusta energiaan.
Logiikka Toisin kuin perinteiset LCD-näytöt, jotka vaativat taustavalon, joka on aina päällä (myös mustana), OLED-näytöt valaisevat jokaisen pikselin erikseen. Kun pikseli on asetettu tosi mustaksi (#000000), kyseinen diodi sammuu kokonaan. Se vie nollatehoa. Suunnittelemalla käyttöliittymiä, jotka suosivat tummempia paletteja, emme seuraa vain trendiä; vähennämme fyysisesti käyttäjän laitteen energiantarvetta. Tiedot Energiansäästöt eivät ole vähäisiä. Purduen yliopiston vuonna 2021 tekemä maamerkkitutkimus, josta on tullut tämän keskustelun kultainen standardi, paljasti, että 100 %:n kirkkaudella vaihtaminen vaaleasta tilasta pimeään tilaan voi säästää keskimäärin 39–47 % akun virtaa. Maailmanlaajuisesti katsottuna, jos jokainen suuri sovellus siirtyisi oletusarvoisesti pimeään tilaan, verkon kysynnän väheneminen olisi tähtitieteellistä. Suunnittelun tavoite Vuonna 2026 Dark Moden ei pitäisi enää olla toissijainen "teema", joka on piilotettu asetusvalikossa. Meidän pitäisi suunnitella "Dark-First" - mentaliteetilla. Tämä ei tarkoita, että jokaisen sivuston on näytettävä Matrixilta, mutta se tarkoittaa sitä, että korkeakontrastiset tummat teemat asetetaan etusijalle järjestelmän oletusasetuksena. Tämä pidentää laitteen laitteiston käyttöikää ja pienentää jokaisen vuorovaikutuksen hiilijalanjälkeä. Itse pidän enemmän valotilasta lukemiseen, joten on järkevää, että käytettävissä on sekä vaalea että tumma tila. Molempien vaihtoehtojen tarjoamiseen liittyy myös saavutettavuusnäkökohtia. Kuvan ja videon optimointi Meistä on tullut laiskoja suunnittelijoita. Nopean 5G:n ja kuituoptiikan ansiosta olemme lakanneet murehtimasta tiedostokokoja. Mobiilisivujen keskimääräinen paino on kasvanut yli 500 % viimeisen vuosikymmenen aikana, mikä johtuu suurelta osin optimoimattomista visuaalisista resursseista. Logiikka Verkkosivuston "digitaalinen rasva" (ne 4 Mt Unsplash -kuvat ja 15 Mt taustavideot) on suurin yksittäinen sivunlatausenergian tekijä. Jokainen palvelimelta asiakkaalle siirretty megatavu vaatii sähköä siirtoon, palvelimen käsittelyyn ja käyttäjän renderöintikoneeseen. Kun käytämme massiivisia tiedostoja, "poltamme" energiaa näyttääksemme kuvan, joka olisi voinut olla yhtä tehokas murto-osalla koosta. Puhumattakaan, tarjoat myös paremman käyttökokemuksen sivulla, joka latautuu paljon nopeammin.
Tiedot HTTP-arkiston mukaan kuvat ja videot muodostavat jatkuvasti leijonanosan sivun kokonaispainosta. Kuitenkin siirtyminen nykyaikaisiin muotoihin, kuten AVIF ja WebP, voi vähentää kuvan painoa jopa 50 % verrattuna JPEG:iin ilman havaittavia laadun heikkenemistä. Vaikka nämä muodot eivät ole minulle niin tuttuja kuin JPG ja PNG, odotan ehdottomasti niiden käyttöä sivukoon pienentämiseen. TheSuunnittelun tavoite Johdin äskettäin kyberturvallisuusalustan uudelleensuunnittelua. Ottamalla käyttöön "Ennen ja jälkeen" -tarkastuksen havaitsimme, että heidän kotisivunsa lataa 5,5 Mt dataa. Korvaamalla korkearesoluutioisen valokuvauksen SVG-taiteella (Scalable Vector Graphics) ja käyttämällä älykkäitä CSS-gradientteja kuvamateriaalin sijaan, pudotimme kuorman 1,2 megatavuun. Se on 78 % pienempi energiakuormitus! Suunnittelijana ensimmäisen kysymyksesi tulisi aina olla: "Tarvitsenko tähän valokuvan, vai voinko saavuttaa saman tunneresonanssin koodilla?"
Tahallinen liike: "Äänevien" animaatioiden leikkaaminen Elämme "rullauksen" ja monimutkaisten 3D-parallax-tehosteiden aikakautta. Vaikka nämä saattavat voittaa palkintoja Awwwards.comissa, ne ovat usein ekologisia katastrofeja. Logiikka Animaatio ei ole ilmaista. Monimutkaisen animaation hahmontamiseksi laitteen GPU:n (Graphics Processing Unit) on toimittava suurella kapasiteetilla. Tämä nostaa suorittimen lämpötilaa, laukaisee jäähdytystuulettimet (kannettavissa tietokoneissa) ja tyhjentää akun nopeasti. "Äänet" animaatiot, jotka pyörivät jatkuvasti taustalla tai laukaisevat massiivisia selaimen uudelleenmaalauksia, vastaavat auton jättämistä tyhjäkäynnille ajotielle.
Tiedot Googlen materiaalisuunnitteluohjeissa korostetaan "merkittävää liikettä". He väittävät, että animaatiota tulisi käyttää vain käyttäjän suuntaamiseen tai palautteen antamiseen. WebP:n käyttäminen JPEG:n sijaan voi säästää 25–50 % sivun tiedoista. Suunnittelun tavoite Meidän on omaksuttava Meaningful Motion. Jos animaatio ei auta käyttäjää suorittamaan tehtävää tai ymmärtämään hierarkiaa, se on turhaa. Meidän tulisi suosia CSS-siirtymiä raskaiden JavaScript-kirjastojen, kuten GSAP:n tai Lottien, sijaan mahdollisuuksien mukaan, koska CSS on laitteistokiihdytetty ja paljon tehokkaampi selaimen laskennassa. UX-suunnittelijana en voi kiistää tätä lähestymistapaa. Tämä ei ainoastaan auta vähentämään datahukkaa, vaan myös parantaa käyttäjien käyttökokemusta. "Databudjetin" asettaminen jokaiselle projektille Yli 20 vuoden käyttökokemukseni aikana menestyneimmät projektit ovat yleensä olleet ne, joilla on tiukimmat rajoitukset. Aivan kuten hankkeella on taloudellinen budjetti, sillä pitäisi olla myös hiili- ja databudjetti. Logiikka Databudjetti on sivun kokonaiskoon rajoitus (esim. "Tämä aloitussivu ei saa ylittää 1 Mt"). Tämä pakottaa suunnittelutiimin tekemään vaikeita, tarkoituksellisia valintoja. Jos haluat lisätä uuden seurantaohjelman tai hienon kirjasimen painon, sinun on "maksettava" siitä optimoimalla tai poistamalla jotain muuta. Tämä estää "ominaisuuden virumisen" muuttumasta "hiilivirumiseksi". Tiedot Sustainable Web Design -malli, jonka ovat kehittäneet pioneerit, kuten Wholegrain Digital, tarjoaa kaavan sivun katselukohtaisen CO2-päästöjen laskemiseen. Keskimääräinen verkkosivusto tuottaa noin 0,5 grammaa CO2:ta katselukertaa kohden. Sivustolla, jolla on 1 miljoona kuukausittaista näyttökertaa, se on 6 tonnia hiilidioksidipäästöjä vuodessa, mikä vastaa 15 000 mailia autolla ajamista. Suunnittelun tavoite Kestävän käyttökokemuksen tarkistuslista
Vähennä ImagesQuestionin jokaisen visuaalisen sisällön tarvetta ja käytä pienintä resoluutiota ja tehokkaimpia tiedostomuotoja (kuten AVIF) tiedonsiirron minimoimiseksi. Optimoi VideoEliminate automaattisesti toistettava media ja aseta etusijalle erittäin pakatut, lyhyet silmukat varmistaaksesi, että energiaa kuluu vain sisältöön, jota käyttäjä aikoo katsella. Rajoita kirjasimiaKäytä enintään kahta verkkokirjasinten painoa tai pidä kiinni klassisista järjestelmäkirjasimista tarpeettomien palvelinpyyntöjen ja renderöinnin paisumisen poistamiseksi. Recycle Assets Käytä yksittäistä kuvaa tai videota useita kertoja käyttämällä CSS-suodattimia ja peittokuvia luodaksesi visuaalista vaihtelua lisäämättä sivun kokonaispainoa. Valitse Green Hosting Isännöi digitaalisia tuotteitasi The Green Web Foundationin vahvistamilla palvelimilla varmistaaksesi, että ne saavat virran uusiutuvista energialähteistä. Minimoi tiedon etäisyys Valitse palvelinsijainnit maantieteellisesti lähellä ensisijaista yleisöäsi vähentääksesi energiaa, joka tarvitaan tiedon kulkemiseen fyysisen infrastruktuurin läpi.
Business Case ympäristöystävälliselle suunnittelulle Jotkut saattavat väittää, että "Green UX" kuulostaa kompromissilta laadun suhteen. Päinvastoin, se on kilpailuetu. Kestävä muotoilu on suorituskykysuunnittelua. Kun pienennät sivun painoa, sivustosi latautuu nopeammin. Kun sivustosi latautuu nopeammin, Core Web Vital -arvosi paranee. Kun Core Web Vital -arvosi paranee, SEO-sijoituksesi nousee. Lisäksi vanhempien laitteiden tai hitaampien datapakettien käyttäjät (etenkin kehittyvillä markkinoilla) voivat todella käyttää tuotettasi. Tämä on "Inklusiivisen suunnittelun" määritelmä. Leikkaamalla "digitaalista rasvaa" luomme kevyemmän, nopeamman ja helpommin saavutettavan verkon. Olemme siirtymässä pois 2010-luvun "kertakäyttöisestä suunnittelusta" kohti apysyvämpi, kunnioittavampi digitaalinen arkkitehtuuri. Johtopäätös: "Puhtaan" suunnittelun tulevaisuus Kahden vuosikymmenen suunnittelussani olen nähnyt monia trendejä tulevan ja menevän. Skeuomorfismi, tasainen muotoilu, neumorfismi - ne olivat kaikki esteettisiä valintoja. Mutta kestävä käyttökokemus ei ole trendi; se on nyt välttämätöntä. Olemme ensimmäinen suunnittelijoiden sukupolvi, jonka on otettava huomioon digitaalisen työmme fyysiset seuraukset. Kestävä käyttökokemus on "win-win-win". Se on parempi planeetalle, koska se vähentää energiankulutusta. Se on parempi käyttäjälle, koska se johtaa nopeampiin ja reagoivampiin käyttöliittymiin. Ja se on parempi yritykselle, koska se alentaa isännöintikustannuksia JA parantaa tulosprosentteja. "Rajattomien pikselien" aikakausi on ohi. Vuonna 2026 hienostunein muotoilu on se, joka jättää pienimmän jalanjäljen. Emme ole enää vain suunnittelijoita; olemme käyttäjän akun, datasuunnitelman ja viime kädessä ympäristön vartijoita. Toimintakehotus Haastan sinut tarkastamaan vain yhden sivun nykyisestä projektistasi tänään. Käytä työkalua, kuten Website Carbon Calculator, nähdäksesi sen vaikutus. Etsi sitten "näkymätöntä jätettä". Voiko kuva olla SVG? Voiko video olla staattinen sankari? Voidaanko tuo "äänkä" animaatio hiljentää? Aloita pienestä. Tyylikkäin ratkaisu on usein se, jossa on vähiten tavuja.
