Men yigirma yildan ortiq vaqtimni foydalanuvchi tajribasini loyihalash xandaqlarida o'tkazdim. Jadvalga asoslangan maketlardan CSS-ga o'tishni, iPhone ishga tushirilganda sezgir dizaynga o'tishni va "diqqat iqtisodiyoti" ning o'sishini eslayman. Ammo biz 2026 yilga borar ekanmiz, sanoat hali ham eng muhim o'zgarishlarga duch kelmoqda. Biz "har qanday narxda dizayn" davridan Barqaror UX davriga o'tmoqdamiz. Bu ko'pchilik dizaynerlar, shu jumladan o'zim ham o'ylagan narsa emas, men buni kontseptsiya sifatida eshitmagunimcha. Ko'p yillar davomida biz internetga efir, vaznsiz bulut sifatida qaradik. Biz raqamli mahsulotlar qog'ozda chop etilmagani uchun "yashil" deb taxmin qildik. Men ham shunday deb o'ylardim va iqlim o'zgarishi tushunchasi paydo bo'lishidan oldin, bu ko'proq daraxtlarni saqlash haqida edi. Biz xato qildik. Bulut - bu jismoniy infratuzilma, ma'lumotlar markazlarining keng tarmog'i, dengiz osti kabellari va 24/7 ishlaydigan sovutish tizimlari. Sun'iy intellektga yo'naltirilgan ma'lumotlar markazlari yirik alyuminiy eritish zavodlarining energiya iste'moliga mos keladigan bo'lsa-da, ularning yuqori geografik zichligi yanada kuchliroq va mahalliylashtirilgan ekologik kuchlanishni keltirib chiqaradi. UX dizaynerlari sifatida biz ushbu energiya iste'molining me'morlarimiz. Har bir yuqori aniqlikdagi qahramon tasviri, har bir avtomatik ijro etiladigan fon videosi va biz ma'qullagan har bir murakkab JavaScript animatsiyasi protsessorga quvvat iste'mol qilish bo'yicha to'g'ridan-to'g'ri ko'rsatmadir. Agar biz uzoq davom etadigan kelajakni qurmoqchi bo'lsak, "voy" uchun dizaynni to'xtatib, samaradorlik uchun loyihalashni boshlashimiz kerak. Qorong'i rejim 2000-yillarning boshlarida oq fon standart edi, chunki ular qog'ozning tanishligini taqlid qilgan. Biroq, apparat rivojlandi va bizning dizayn falsafamiz amal qilishi kerak. LCD displeydan OLED (Organik yorug'lik chiqaradigan diod) texnologiyasiga o'tish rangning energiyaga ta'sirini tubdan o'zgartirdi.
Mantiq Har doim yonib turadigan (qora rangni ko'rsatganda ham) orqa yorug'likni talab qiladigan an'anaviy LCD displeylardan farqli o'laroq, OLED ekranlari har bir pikselni alohida yoritadi. Agar piksel haqiqiy qora rangga (#000000) o'rnatilgan bo'lsa, bu maxsus diod butunlay o'chiriladi. U nol quvvat sarflaydi. To'q rangli palitralarni qo'llab-quvvatlaydigan interfeyslarni loyihalash orqali biz shunchaki trendga amal qilmaymiz; biz foydalanuvchi qurilmasining energiya talabini jismonan kamaytirmoqdamiz. Ma'lumotlar Energiyani tejash ahamiyatsiz emas. 2021 yilda Purdue universiteti tomonidan olib borilgan ushbu muhokama uchun oltin standartga aylangan muhim tadqiqot shuni ko'rsatdiki, 100% yorqinlikda yorug'lik rejimidan qorong'i rejimga o'tish batareya quvvatini o'rtacha 39% dan 47% gacha tejash imkonini beradi. Global miqyosda, agar har bir yirik ilova sukut bo'yicha qorong'i rejimga o'tgan bo'lsa, tarmoq talabining pasayishi astronomik bo'lar edi. Dizayn maqsadi 2026 yilda Dark Mode endi sozlamalar menyusida joylashgan ikkinchi darajali "mavzu" bo'lmasligi kerak. Biz "Dark-First" mentaliteti bilan loyihalashimiz kerak. Bu har bir sayt Matritsaga o'xshab ko'rinishi kerak degani emas, lekin bu yuqori kontrastli qorong'u mavzularni standart tizim afzal ko'rgan holat sifatida ustuvorligini bildiradi. Bu qurilmaning uskunaning ishlash muddatini uzaytiradi va har bir shovqinning uglerod izini kamaytiradi. Shaxsan men o'qish uchun yorug'lik rejimini afzal ko'raman, shuning uchun ham yorug'lik, ham qorong'i rejim variantlari mavjud bo'lishi mantiqan. Ikkala variantni taqdim etishda ham foydalanish imkoniyatini hisobga olish mumkin. Rasm va video optimallashtirish Biz dangasa dizaynerlarga aylandik. Yuqori tezlikdagi 5G va optik tolalar bilan biz fayl o'lchamlari haqida tashvishlanishni to'xtatdik. So'nggi o'n yillikda mobil sahifaning o'rtacha og'irligi 500% dan oshdi, bu asosan optimallashtirilmagan vizual aktivlar tufayli. Mantiq Veb-saytning "Raqamli yog'i" (bu 4MB Unsplash fotosuratlari va 15MB fon videolari) sahifa yuklash energiyasiga eng katta hissa qo'shadigan yagona vositadir. Serverdan mijozga uzatiladigan har bir megabayt uzatish, serverni qayta ishlash va foydalanuvchining renderlash mexanizmi uchun elektr energiyasini talab qiladi. Biz katta hajmdagi fayllardan foydalanganda, biz o'lchamning bir qismida samarali bo'lishi mumkin bo'lgan rasmni ko'rsatish uchun aslida energiyani "yondiramiz". Shuni ta'kidlash kerakki, siz tezroq yuklanadigan sahifa bilan yaxshi foydalanuvchi tajribasini taqdim etasiz.
Ma'lumotlar HTTP arxiviga ko'ra, rasmlar va videolar doimiy ravishda sahifaning umumiy og'irligidagi asosiy ulushini tashkil qiladi. Biroq, AVIF va WebP kabi zamonaviy formatlarga o'tish JPEG bilan solishtirganda, sifatni sezilarli darajada yo'qotmasdan tasvir og'irligini 50% gacha kamaytirishi mumkin. Garchi bu formatlar menga JPG va PNG kabi tanish bo'lmasa-da, men ulardan sahifa hajmini kamaytirish uchun foydalanishni intiqlik bilan kutaman. TheDizayn maqsadi Men yaqinda kiberxavfsizlik platformasini qayta loyihalashga rahbarlik qildim. “Oldin va keyin” auditini amalga oshirish orqali biz ularning bosh sahifasi 5,5 MB ma’lumot yuklayotganini aniqladik. Yuqori aniqlikdagi fotografiyani SVG (Scalable Vector Graphics) sanʼati bilan almashtirish va tasvir aktivlari oʻrniga aqlli CSS gradientlaridan foydalanish orqali biz yukni 1,2MB ga tushirdik. Bu energiya yukining 78% ga qisqarishini anglatadi! Dizayner sifatida sizning birinchi savolingiz har doim bo'lishi kerak: "Buning uchun menga fotosurat kerakmi yoki kod bilan bir xil hissiy rezonansga erisha olamanmi?"
Qasddan harakat: “Baland ovozli” animatsiyalarni kesish Biz "scroll-jacking" va murakkab 3D Parallax effektlari davrida yashayapmiz. Ular Awwwards.com saytida mukofotlarga sazovor bo'lishlari mumkin bo'lsa-da, ular ko'pincha ekologik ofatlardir. Mantiq Animatsiya bepul emas. Murakkab animatsiyani yaratish uchun qurilmaning GPU (Grafik ishlov berish birligi) yuqori quvvatda ishlashi kerak. Bu protsessor haroratini oshiradi, sovutish fanatlarini (noutbuklarda) ishga tushiradi va batareyani tezda zaryadsizlantiradi. Doimiy ravishda fonda ishlaydigan yoki brauzerni katta hajmda qayta bo'yashga olib keladigan "baland ovozli" animatsiyalar avtomobilingizni yo'lda harakatsiz qoldirish uchun energiya ekvivalentidir.
Ma'lumotlar Google-ning Material Design yo'riqnomalarida "Ma'noli harakat" ga urg'u beriladi. Ular animatsiya faqat foydalanuvchini yo'naltirish yoki fikr-mulohaza bildirish uchun ishlatilishi kerak, deb ta'kidlaydilar. Va JPEG o'rniga WebP-dan foydalanish sahifadagi ma'lumotlarni 25-50% tejash imkonini beradi. Dizayn maqsadi Biz mazmunli harakatni qabul qilishimiz kerak. Agar animatsiya foydalanuvchiga vazifani bajarishga yoki ierarxiyani tushunishga yordam bermasa, bu behuda. Iloji bo'lsa, GSAP yoki Lottie kabi og'ir JavaScript kutubxonalariga nisbatan CSS o'tishlarini afzal ko'rishimiz kerak, chunki CSS apparat tomonidan tezlashtirilgan va brauzer hisoblash uchun ancha samarali. UX dizayneri sifatida men bu yondashuv haqida bahslasha olmayman. Bu nafaqat ma'lumotlar sarfini kamaytirishga yordam beradi, balki foydalanuvchilarimiz uchun UXni ham yaxshilaydi. Har bir loyiha uchun "ma'lumotlar byudjeti" ni belgilash Mening 20+ yillik UX faoliyatim davomida eng muvaffaqiyatli loyihalar, odatda, eng qattiq cheklovlarga ega bo'lgan loyihalar edi. Loyihaning moliyaviy byudjeti bo'lgani kabi, u ham uglerod va ma'lumotlar byudjetiga ega bo'lishi kerak. Mantiq Ma'lumotlar budjeti - bu sahifaning umumiy hajmiga nisbatan qattiq chegara (masalan, "Ushbu ochilish sahifasi 1MB dan oshmasligi kerak"). Bu dizayn jamoasini qiyin, qasddan tanlov qilishga majbur qiladi. Agar siz yangi kuzatuv skripti yoki chiroyli shrift vaznini qo'shmoqchi bo'lsangiz, boshqa narsani optimallashtirish yoki olib tashlash orqali buning uchun "to'lashingiz" kerak. Bu "xususiyatlar siljishi" ning "uglerod emirilishiga" aylanishining oldini oladi. Ma'lumotlar Wholegrain Digital kabi kashshoflar tomonidan ishlab chiqilgan Barqaror veb-dizayn modeli har bir sahifani ko'rish uchun CO2 ni hisoblash formulasini taqdim etadi. O'rtacha veb-sayt har bir ko'rish uchun taxminan 0,5 gramm CO2 ishlab chiqaradi. Oyiga 1 million marta ko'rilgan sayt uchun bu yiliga 6 metrik tonna CO2, ya'ni 15 000 milya yo'l bosib o'tgan avtomobilga teng. Dizayn maqsadi Barqaror UX nazorat ro'yxati
Tasvirlarni kamaytiring, har bir vizualning zarurligini so'rang va ma'lumotlar uzatishni minimallashtirish uchun eng kichik o'lchamdagi va eng samarali fayl formatlaridan (masalan, AVIF) foydalaning. Videoni optimallashtirish Avtomatik ijro etuvchi mediani yo‘q qiling va energiya faqat foydalanuvchi ko‘rmoqchi bo‘lgan kontentga sarflanishini ta’minlash uchun yuqori darajada siqilgan, qisqa halqalarga ustunlik bering. Shriftlarni cheklash. Keraksiz server so'rovlarini va shishishni olib tashlash uchun maksimal ikkita veb-shrift og'irligidan foydalaning yoki klassik tizim shriftlariga yopishib oling. Aktivlarni qayta ishlash.Sahifaning umumiy og'irligini oshirmasdan vizual xilma-xillikni yaratish uchun CSS filtrlari va qoplamalaridan foydalanib, bitta rasm yoki videoni bir necha marta qayta ishlating. Raqamli mahsulotlaringiz qayta tiklanadigan energiya manbalaridan quvvat olishiga ishonch hosil qilish uchun Green Web Foundation tomonidan tasdiqlangan serverlarda Green HostingHost-ni tanlang. Ma'lumotlar masofasini minimallashtiring. Ma'lumotlarning jismoniy infratuzilma orqali harakatlanishi uchun zarur bo'lgan energiyani kamaytirish uchun asosiy auditoriyangizga geografik jihatdan yaqin joylashgan server manzillarini tanlang.
Ekologik toza dizayn uchun biznes ishi Ba'zilar "Yashil UX" sifat bo'yicha murosaga o'xshaydi, deb ta'kidlashi mumkin. Aksincha, bu raqobatdosh ustunlikdir. Barqaror dizayn - bu ishlash dizayni. Agar sahifa vaznini kamaytirsangiz, saytingiz tezroq yuklanadi. Saytingiz tezroq yuklanganda, Core Web Vitals yaxshilanadi. Sizning Core Web Vitals yaxshilanganda, SEO reytingingiz ko'tariladi. Bundan tashqari, eski qurilmalarda yoki sekinroq ma'lumot rejalarida (ayniqsa, rivojlanayotgan bozorlarda) foydalanuvchilar sizning mahsulotingizga kirishlari mumkin. Bu "inklyuziv dizayn" ta'rifi. "Raqamli yog'ni" kesib, biz yanada nozik, tezroq va qulayroq veb-sayt yaratamiz. Biz 2010-yillardagi "bir martalik dizayn" dan uzoqlashmoqdamizyanada doimiy, hurmatli raqamli arxitektura. Xulosa: "Toza" dizayn kelajagi Yigirma yillik dizaynerlik faoliyatimda men ko'plab tendentsiyalar paydo bo'lganini ko'rdim. Skeuomorfizm, Yassi dizayn, Neymorfizm - bularning barchasi estetik tanlov edi. Ammo barqaror UX bu tendentsiya emas; bu endi zarurat. Biz raqamli ishimizning jismoniy oqibatlari bilan hisoblashishi kerak bo'lgan dizaynerlarning birinchi avlodimiz. Barqaror UX bu “yut-g‘alaba”dir. Bu sayyora uchun yaxshiroqdir, chunki u energiya sarfini kamaytiradi. Bu foydalanuvchi uchun yaxshiroqdir, chunki u tezroq va sezgir interfeyslarni keltirib chiqaradi. Va bu biznes uchun yaxshiroqdir, chunki u hosting xarajatlarini pasaytiradi va konversiya stavkalarini yaxshilaydi. "Cheksiz piksellar" davri tugadi. 2026 yilda eng murakkab dizayn eng kichik iz qoldiradigan dizayndir. Biz endi shunchaki dizaynerlar emasmiz; biz foydalanuvchi batareyasining, ularning ma'lumotlar rejasining va oxir-oqibat, atrof-muhitning qo'riqchilarimiz. Harakatga chaqiruv Men sizni bugungi loyihangizning faqat bitta sahifasini tekshirishga chaqiraman. Uning ta'sirini ko'rish uchun Website Carbon Calculator kabi vositadan foydalaning. Keyin, "ko'rinmas chiqindilar" ni qidiring. Ushbu rasm SVG bo'lishi mumkinmi? Bu video statik qahramon bo'lishi mumkinmi? Bu "baland" animatsiyani o'chirish mumkinmi? Kichikdan boshlang. Eng oqlangan yechim ko'pincha eng kam baytga ega bo'lgan echimdir.
