Kullanıcı deneyimi tasarımının siperlerinde yirmi yıldan fazla zaman geçirdim. Tablo tabanlı düzenlerden CSS'ye geçişi, iPhone piyasaya sürüldüğünde duyarlı tasarıma geçişi ve “dikkat ekonomisinin” yükselişini hatırlıyorum. "Ancak 2026 'ya doğru ilerlerken, sektör şimdiye kadarki en önemli değişimiyle karşı karşıya.“ Her ne pahasına olursa olsun tasarım ”çağını geride bırakarak,Sürdürülebilir UX.
Ben de dahil olmak üzere çoğu tasarımcının düşündüğü bir şey değil, ta ki bunu bir kavram olarak duyduğumda harekete geçene kadar. Yıllardır interneti eterik, ağırlıksız bir bulut olarak ele aldık. Dijital ürünlerin sadece kağıda basılmadıkları için “yeşil” olduğunu varsaydık. Ben de öyle düşünürdüm ve iklim değişikliği kavramı ortaya çıkmadan önce daha çok ağaçları kurtarmakla ilgiliydi.
Yanıldık. Bulut, fiziksel bir altyapı, genişleyen bir veri merkezi ağı, denizaltı kabloları ve 7/24 uğultu yapan soğutma sistemleridir. Yapay zeka odaklı veri merkezleri güçle eşleşirkenbüyük alüminyum eriticilerin tüketimiyüksek coğrafi yoğunlukları daha da yoğun ve yerel bir çevresel gerginlik yaratır.
UX tasarımcıları olarak bu enerji tüketiminin mimarlarıyız. Her yüksek çözünürlüklü Hero görüntüsü, her otomatik oynatılan arka plan videosu ve onayladığımız her karmaşık JavaScript animasyonu, bir işlemciye güç tüketmesi için doğrudan bir talimattır. Kalıcı bir gelecek inşa etmek istiyorsak, “vay canına” için tasarlamayı bırakmalı veEczacıların etkinliğini ve verimliliğini artırmak için teknoloji ve görev değişikliğini kullanmalıyız.
Karanlık mod2000 'lerin başında, beyaz arka planlar standarttı çünkü kağıdın aşinalığını taklit ediyorlardı. Bununla birlikte, donanım gelişti ve tasarım felsefemiz bunu takip etmeli. LCD'den OLED (Organik Işık Yayan Diyot) teknolojisine geçiş, rengin enerjiyi nasıl etkilediğini temelden değiştirdi.
Mantık
Her zaman açık olan bir arka ışık gerektiren geleneksel LCD ekranların aksine (siyah görüntülerken bile),OLED ekranlar her pikseli ayrı ayrı aydınlatır. Bir piksel gerçek siyah olarak ayarlandığında (#000000), bu belirli diyot tamamen kapatılır. Sıfır güç çeker.
Daha koyu paletleri tercih eden arayüzler tasarlayarak, sadece bir trendi takip etmiyoruz; kullanıcının cihazının enerji ihtiyacını fiziksel olarak azaltıyoruz.
Veri
Enerji tasarrufu ihmal edilebilir olmaktan uzaktır. A landmark study byPurdue Üniversitesibu tartışma için altın standart haline gelen 2021 'de, % 100 parlaklıkta, ışık modundan karanlık moduna geçmenin ortalama bir tasarruf sağlayabileceğini ortaya koydu.% 39 ila % 47küresel ölçekte, her büyük uygulama varsayılan olarak karanlık moda geçerse, şebeke talebindeki azalma astronomik olacaktır.
TASARIM
2026 'da Karanlık Mod artık ayarlar menüsünde saklanan ikincil bir "tema" olmamalı. Şununla tasarlamalıyız:"Karanlık Öncelik"zihniyet. Bu, her sitenin görünmesi gerektiği anlamına gelmez.The MatrixNameancak bu, varsayılan sistem tarafından tercih edilen durum olarak yüksek kontrastlı karanlık temalara öncelik verilmesi anlamına gelir. Bu, cihazın donanım ömrünü uzatır ve her etkileşimin karbon ayak izini azaltır.
Şahsen okumak için Işık Modunu tercih ederim, bu nedenle hem aydınlık hem de karanlık mod seçeneklerinin mevcut olması mantıklıdır. Ayrıcaerişilebilirlik hususlarıher iki seçeneği de sunarak.
Görüntü ve Video OptimizasyonuTembel tasarımcılar olduk. Yüksek hızlı 5G ve fiber optik ile dosya boyutları konusunda endişelenmeyi bıraktık.ortalama mobil sayfa ağırlığı % 500 'ün üzerinde arttıson on yılda, büyük ölçüde optimize edilmemiş görsel varlıklar nedeniyle.
Mantık
Bir web sitesinin "Dijital Yağ" ı (bu 4MB Unsplash fotoğraflar ve 15MB arka plan videoları), sayfa yükleme enerjisine en büyük katkıyı sağlar. Bir sunucudan bir istemciye aktarılan her megabayt, iletim, sunucunun işlenmesi ve kullanıcının oluşturma motoru için elektrik gerektirir. Büyük dosyalar kullandığımızda, aslında boyutunun çok küçük bir kısmı kadar etkili olabilecek bir resmi göstermek için enerjiyi "yakıyoruz ". Ayrıca, çok daha hızlı yüklenen bir sayfa ile daha iyi bir kullanıcı deneyimi sağlıyorsunuz.
Veri
göreHttp Arşivi, resim ve video, bir sayfanın toplam ağırlığındaki aslan payını tutarlı bir şekilde açıklar. Bununla birlikte, modern formatlara geçişAVIFVeWebPkavanozgörüntü ağırlığını % 50 'ye kadar azaltırjPEG ile karşılaştırıldığında,fark edilebilir herhangi bir kalite kaybı olmadan.
Bu formatlar bana JPG ve PNG kadar tanıdık gelmese de, sayfa boyutunu küçültmek için bunları kullanmayı dört gözle bekliyorum.
TASARIM
Yakın zamanda bir siber güvenlik platformunun yeniden tasarlanmasına öncülük ettim. "Önce ve Sonra" denetimini uygulayarak, ana sayfalarının 5,5 MB veri yüklediğini keşfettik. Yüksek çözünürlüklü fotoğrafçılığı şununla değiştirerek:SVG - Scalable Vector Graphicssanat ve zekice kullanmaCSS gradyanlarıgörüntü varlıkları yerine, yükü 1,2 MB'ye düşürdük. Bu birEnerji yükünde % 78 azalma!Bir tasarımcı olarak ilk sorunuz her zaman şu olmalıdır:
"Bunun için bir fotoğrafa ihtiyacım var mı, yoksa kodla aynı duygusal rezonansı elde edebilir miyim ?"Kasıtlı Hareket: “Yüksek Sesli” Animasyonları Kesmek
“Bir çağda yaşıyoruz”scroll - jacking" ve karmaşık 3D Paralaks efektleri. Bunlar Awwwards.com'da ödül kazanabilirken, genellikle ekolojik felaketlerdir.
Mantık
Animasyon ücretsiz değildir. Karmaşık bir animasyon oluşturmak için cihazın GPU'su (Grafik İşlem Birimi) yüksek kapasitede çalışmalıdır.Bu, CPU sıcaklığını artırır, soğutma fanlarını (dizüstü bilgisayarlarda) tetikler ve pili hızla boşaltır. Sürekli arka planda çalışan veya tarayıcının yeniden boyanmasını tetikleyen "yüksek sesli" animasyonlar, arabanızı garaj yolunda boşta bırakmanın enerji eşdeğeridir.
Veri
Google'ın Materyal Tasarımı yönergelerivurgulamakAnlamlı Hareket”Animasyonun sadece kullanıcıyı yönlendirmek veya geri bildirim sağlamak için kullanılması gerektiğini savunuyorlar.JPEG yerine WebP % 25 -50 tasarruf sağlayabilir/bir sayfadaki veriler.
TASARIM
BenimsemeliyizAnlamlı hareket.Bir animasyon, bir kullanıcının bir görevi tamamlamasına veya bir hiyerarşiyi anlamasına yardımcı olmazsa, bu bir israftır.CSS geçişlerimümkün olduğunda GSAP veya Lottie gibi ağır JavaScript kütüphaneleri üzerinde,CSS donanımla hızlandırılmıştırve tarayıcının hesaplaması için çok daha verimlidir.
Bir UX tasarımcısı olarak bu yaklaşımı tartışamam. Bu sadece veri israfını azaltmaya yardımcı olmakla kalmaz, aynı zamanda kullanıcılarımız için UX'i de geliştirir.
Her Proje için “Veri Bütçesi” Belirleme20+ yıllık kullanıcı deneyimimde, en başarılı projeler genellikle en sıkı kısıtlara sahip olanlar olmuştur.
Bir projenin mali bütçesi olduğu gibi karbon ve veri bütçesi de olmalıdır.
Mantık
Veri Bütçesi, bir sayfanın toplam boyutunda sabit bir üst sınırdır (örneğin, "Bu açılış sayfası 1 MB'yi aşamaz "). Bu, tasarım ekibini zor ve kasıtlı seçimler yapmaya zorlar. Yeni bir izleme komut dosyası veya süslü bir yazı tipi ağırlığı eklemek istiyorsanız, başka bir şeyi optimize ederek veya kaldırarak bunun için" ödeme yapmanız "gerekir. Bu," özellik sürünmesinin "" karbon sürünmesine "dönüşmesini önler.
Veri
. Sürdürülebilir Web Tasarım modeligibi öncüler tarafından geliştirilmiştirWholegrain Digital, sayfa görünümü başına CO2 'yi hesaplamak için bir formül sağlar. Ortalama bir web sitesi, görüntüleme başına yaklaşık 0,5 gram CO2 üretir. Aylık 1 milyon görüntülenmeye sahip bir site için bu, yılda 6 metrik ton CO2' dir, bu da 15.000 mil araba sürmeye eşdeğerdir.
TASARIM
Sürdürülebilir Kullanıcı Deneyimi Kontrol Listesi
- Resimleri Küçült
Her görselin gerekliliğini sorgulayın ve veri aktarımını en aza indirmek için en küçük çözünürlüklü ve en verimli dosya formatlarını (AVIF gibi) kullanın. - Videoyu Optimize Et
Otomatik oynatılan ortamları ortadan kaldırın ve enerjinin yalnızca kullanıcının görüntülemek istediği içeriğe harcanmasını sağlamak için yüksek oranda sıkıştırılmış, kısa döngülere öncelik verin. - Yazı Tiplerini Sınırla
Gereksiz sunucu isteklerini kaldırmak ve şişirmek için en fazla iki web yazı tipi ağırlığı kullanın veya klasik sistem yazı tiplerine bağlı kalın. - Varlıkların Geri Dönüşümü
Toplam sayfa ağırlığını artırmadan görsel çeşitlilik oluşturmak için CSS filtreleri ve bindirmeleri kullanarak tek bir görüntüyü veya videoyu birden çok kez yeniden kullanın. - Yeşil Ev Sahipliğini Seçin
Tarafından doğrulanan sunucularda dijital ürünlerinizi barındırınYeşil Web Vakfıyenilenebilir enerji kaynaklarından güç aldıklarından emin olmak için. - Veri Mesafesini En Aza İndir
Verilerin fiziksel altyapıdan geçmesi için gereken enerjiyi azaltmak amacıyla birincil hedef kitlenize coğrafi olarak yakın sunucu konumlarını seçin.
Bazıları “Yeşil UX” in kaliteden ödün vermek gibi göründüğünü iddia edebilir. Aksine bir rekabet avantajıdır.Sürdürülebilir tasarımperformans tasarımı.
Sayfa ağırlığını azalttığınızda siteniz daha hızlı yüklenir. Siteniz daha hızlı yüklendiğinde,Çekirdek Web Hayati Değerlerigelişir. Ne zamanÇekirdek Web Hayati DeğerleriTemel SistemleriSEO sıralamasıyükselir. Ayrıca, eski cihazlardaki veya daha yavaş veri planlarındaki (özellikle gelişmekte olan pazarlardaki) kullanıcılar ürününüze gerçekten erişebilir. “Kapsayıcı Tasarım” ın tanımı budur.
“Dijital yağları” keserek daha yalın, daha hızlı ve daha erişilebilir bir web oluşturuyoruz. 2010 'ların “tek kullanımlık tasarımından” daha kalıcı, saygılı bir dijital mimariye doğru ilerliyoruz.
Sonuç: “Temiz” Tasarımın GeleceğiYirmi yıllık tasarım hayatımda birçok trendin gelip geçtiğini gördüm. Skeuomorphism, Flat Design, Neumorphism — hepsi estetik seçimlerdi. Ancak sürdürülebilir UX bir trend değil; artık bir zorunluluk. Dijital çalışmalarımızın fiziksel sonuçlarını hesaba katmak zorunda olan ilk nesil tasarımcıyız.
Sürdürülebilir UX bir “kazan - kazan - kazan” dır. "Enerji tüketimini azalttığı için gezegen için daha iyi. Kullanıcı için daha iyidir, çünkü daha hızlı, daha duyarlı arayüzlerle sonuçlanır. Ayrıca hosting maliyetlerini düşürdüğü VE dönüşüm oranlarını iyileştirdiği için işletme için daha iyidir.
“Sınırsız piksel” dönemi sona erdi. 2026 'da en sofistike tasarım, en küçük ayak izini bırakan tasarımdır. Artık sadece tasarımcı değiliz; kullanıcının bataryasının, veri planının ve nihayetinde çevrenin koruyucusuyuz.
Eylem ÇağrısıSadece denetlemeniz için size meydan okuyorumTek sayfabugünkü mevcut projenizin. Şunun gibi bir araç kullanın:Web Sitesi Karbon Hesaplayıcıetkisini görmek için. Ardından, “görünmez atıkları” arayın. "Bu görüntü bir SVG olabilir mi? Bu video statik bir kahraman olabilir mi? Bu“ yüksek sesli ”animasyon susturulabilir mi?
Küçük başlayın. En şık çözüm genellikle en az bayta sahip olandır.
