મેં વપરાશકર્તા અનુભવ ડિઝાઇનના ખાઈમાં બે દાયકાથી વધુ સમય પસાર કર્યો છે. મને ટેબલ-આધારિત લેઆઉટથી CSS પરનું સંક્રમણ, જ્યારે iPhone લૉન્ચ થયો ત્યારે રિસ્પોન્સિવ ડિઝાઇન તરફનો મુખ્ય ભાગ અને "ધ્યાન અર્થતંત્ર"નો ઉદય યાદ છે. પરંતુ જેમ જેમ આપણે 2026 નેવિગેટ કરીએ છીએ, ઉદ્યોગ હજુ સુધી તેના સૌથી નોંધપાત્ર પરિવર્તનનો સામનો કરી રહ્યો છે. અમે "કોઈપણ કિંમતે" ડિઝાઇનના યુગને સસ્ટેનેબલ યુએક્સના યુગમાં આગળ વધી રહ્યા છીએ. જ્યાં સુધી મને આ વિશે એક ખ્યાલ તરીકે સાંભળીને પૂછવામાં ન આવ્યું ત્યાં સુધી તે મારા સહિત, મોટાભાગના ડિઝાઇનરો વિશે વિચારે છે તેવું નથી. વર્ષોથી, અમે ઈન્ટરનેટને ઈથરીયલ, વેઈટલેસ ક્લાઉડ તરીકે માનીએ છીએ. અમે માની લીધું છે કે ડિજિટલ ઉત્પાદનો "ગ્રીન" હતા કારણ કે તે કાગળ પર છાપવામાં આવ્યા ન હતા. હું પણ એવું વિચારતો હતો, અને ક્લાઈમેટ ચેન્જનો ખ્યાલ આવે તે પહેલાં, તે વૃક્ષોને બચાવવા વિશે વધુ હતું. અમે ખોટા હતા. ક્લાઉડ એ ભૌતિક ઇન્ફ્રાસ્ટ્રક્ચર છે, ડેટા સેન્ટર્સનું વિસ્તરેલું નેટવર્ક, દરિયાની અંદરના કેબલ અને કુલિંગ સિસ્ટમ્સ જે 24/7 હમ કરે છે. જ્યારે AI-કેન્દ્રિત ડેટા કેન્દ્રો મોટા પ્રમાણમાં એલ્યુમિનિયમ સ્મેલ્ટરના પાવર વપરાશ સાથે મેળ ખાય છે, ત્યારે તેમની ઉચ્ચ ભૌગોલિક ઘનતા વધુ તીવ્ર અને સ્થાનિક પર્યાવરણીય તાણ બનાવે છે. UX ડિઝાઇનર્સ તરીકે, અમે આ ઉર્જા વપરાશના આર્કિટેક્ટ છીએ. દરેક હાઇ-રિઝોલ્યુશન હીરો ઇમેજ, દરેક ઑટો-પ્લેઇંગ બેકગ્રાઉન્ડ વિડિયો અને અમે મંજૂર કરીએ છીએ તે દરેક જટિલ JavaScript એનિમેશન એ પાવર વપરાશ કરવાની પ્રોસેસરને સીધી સૂચના છે. જો આપણે ટકી રહે તેવા ભવિષ્યનું નિર્માણ કરવા માગીએ છીએ, તો આપણે "વાહ" માટે ડિઝાઇન કરવાનું બંધ કરવું જોઈએ અને કાર્યક્ષમતા માટે ડિઝાઇન કરવાનું શરૂ કરવું જોઈએ. ડાર્ક મોડ 2000 ના દાયકાની શરૂઆતમાં, સફેદ પૃષ્ઠભૂમિ પ્રમાણભૂત હતા કારણ કે તેઓ કાગળની પરિચિતતાની નકલ કરતા હતા. જો કે, હાર્ડવેરનો વિકાસ થયો છે, અને અમારી ડિઝાઇન ફિલસૂફીને અનુસરવી આવશ્યક છે. LCD થી OLED (ઓર્ગેનિક લાઇટ એમિટિંગ ડાયોડ) ટેક્નોલોજીમાં પરિવર્તન એ મૂળભૂત રીતે બદલ્યું છે કે કેવી રીતે રંગ ઊર્જાને અસર કરે છે.
ધ લોજિક પરંપરાગત LCD સ્ક્રીનોથી વિપરીત, જેમાં બેકલાઇટની જરૂર પડે છે જે હંમેશા ચાલુ હોય છે (કાળો દર્શાવતી વખતે પણ), OLED સ્ક્રીન દરેક પિક્સેલને વ્યક્તિગત રીતે પ્રકાશિત કરે છે. જ્યારે પિક્સેલને સાચા કાળા (#000000) પર સેટ કરવામાં આવે છે, ત્યારે તે ચોક્કસ ડાયોડ સંપૂર્ણપણે બંધ થઈ જાય છે. તે શૂન્ય શક્તિ ખેંચે છે. ઘાટા પૅલેટની તરફેણ કરતા ઇન્ટરફેસ ડિઝાઇન કરીને, અમે માત્ર એક વલણને અનુસરતા નથી; અમે વપરાશકર્તાના ઉપકરણની ઉર્જાની જરૂરિયાત ભૌતિક રીતે ઘટાડી રહ્યા છીએ. ડેટા ઊર્જા બચત નહિવત્ છે. 2021 માં પરડ્યુ યુનિવર્સિટી દ્વારા એક સીમાચિહ્નરૂપ અભ્યાસ, જે આ ચર્ચા માટે સુવર્ણ ધોરણ બની ગયું છે, તે બહાર આવ્યું છે કે 100% બ્રાઇટનેસ પર, લાઇટ મોડમાંથી ડાર્ક મોડમાં સ્વિચ કરવાથી બેટરી પાવરની સરેરાશ 39% થી 47% બચત થઈ શકે છે. વૈશ્વિક સ્તરે, જો દરેક મોટી એપ્લિકેશન ડાર્ક મોડમાં ડિફોલ્ટ થાય છે, તો ગ્રીડની માંગમાં ઘટાડો ખગોળીય હશે. ડિઝાઇન ધ્યેય 2026 માં, ડાર્ક મોડ હવેથી સેટિંગ મેનૂમાં ગૌણ "થીમ" ન હોવો જોઈએ. આપણે "ડાર્ક-ફર્સ્ટ" માનસિકતા સાથે ડિઝાઇન કરવી જોઈએ. આનો અર્થ એ નથી કે દરેક સાઇટ ધ મેટ્રિક્સ જેવી હોવી જોઈએ, પરંતુ તેનો અર્થ એ છે કે ડિફોલ્ટ સિસ્ટમ-પ્રિફર્ડ સ્ટેટ તરીકે ઉચ્ચ-કોન્ટ્રાસ્ટ ડાર્ક થીમ્સને પ્રાધાન્ય આપવું. આ ઉપકરણના હાર્ડવેર જીવનકાળને વિસ્તૃત કરે છે અને દરેક ક્રિયાપ્રતિક્રિયાના કાર્બન ફૂટપ્રિન્ટને ઘટાડે છે. હું વ્યક્તિગત રીતે વાંચવા માટે લાઇટ-મોડ પસંદ કરું છું, તેથી પ્રકાશ અને શ્યામ મોડ વિકલ્પો ઉપલબ્ધ હોવાનો અર્થ થાય છે. બંને વિકલ્પો પ્રદાન કરવા સાથે સુલભતા વિચારણાઓ પણ છે. છબી અને વિડિઓ ઓપ્ટિમાઇઝેશન અમે આળસુ ડિઝાઇનર બની ગયા છીએ. હાઇ-સ્પીડ 5G અને ફાઇબર ઓપ્ટિક્સ સાથે, અમે ફાઇલના કદ વિશે ચિંતા કરવાનું બંધ કર્યું છે. છેલ્લા દાયકામાં સરેરાશ મોબાઇલ પેજના વજનમાં 500% થી વધુનો વધારો થયો છે, મોટાભાગે અનઓપ્ટિમાઇઝ વિઝ્યુઅલ એસેટ્સને કારણે. ધ લોજિક વેબસાઈટની "ડિજિટલ ફેટ" (તે 4MB અનસ્પ્લેશ ફોટા અને 15MB પૃષ્ઠભૂમિ વિડિયો) એ પેજ-લોડ ઊર્જામાં એકમાત્ર સૌથી મોટો ફાળો છે. સર્વરથી ક્લાયન્ટમાં ટ્રાન્સફર કરાયેલ દરેક મેગાબાઈટને ટ્રાન્સમિશન, સર્વરની પ્રક્રિયા અને વપરાશકર્તાના રેન્ડરિંગ એન્જિન માટે વીજળીની જરૂર પડે છે. જ્યારે આપણે મોટી ફાઇલોનો ઉપયોગ કરીએ છીએ, ત્યારે આપણે એક ચિત્ર બતાવવા માટે અનિવાર્યપણે "બર્નિંગ" ઊર્જા કરીએ છીએ જે કદના અપૂર્ણાંક પર એટલું જ અસરકારક હોઈ શકે. ઉલ્લેખ ન કરવો, તમે વધુ ઝડપથી લોડ થતા પૃષ્ઠ સાથે વધુ સારો વપરાશકર્તા અનુભવ પણ પ્રદાન કરી રહ્યાં છો.
ડેટા HTTP આર્કાઇવ મુજબ, છબીઓ અને વિડિયો પૃષ્ઠના કુલ વજનના સિંહના હિસ્સા માટે સતત હિસ્સો ધરાવે છે. જો કે, AVIF અને WebP જેવા આધુનિક ફોર્મેટમાં સ્થાનાંતરિત થવાથી JPEG ની સરખામણીમાં 50% સુધી ઇમેજનું વજન ઘટાડી શકાય છે, ગુણવત્તામાં કોઈ પણ ગ્રહણક્ષમ નુકશાન વિના. જો કે આ ફોર્મેટ્સ મને JPG અને PNG જેટલા પરિચિત નથી, હું ચોક્કસપણે પૃષ્ઠ કદ ઘટાડવા માટે તેનો ઉપયોગ કરવા માટે આતુર છું. આડિઝાઇન ધ્યેય મેં તાજેતરમાં સાયબર સિક્યુરિટી પ્લેટફોર્મ માટે ફરીથી ડિઝાઇનનું નેતૃત્વ કર્યું છે. "પહેલાં અને પછી" ઑડિટનો અમલ કરીને, અમે શોધ્યું કે તેમનું હોમપેજ 5.5MB ડેટા લોડ કરી રહ્યું છે. ઉચ્ચ-રિઝોલ્યુશન ફોટોગ્રાફીને SVG (સ્કેલેબલ વેક્ટર ગ્રાફિક્સ) આર્ટ સાથે બદલીને અને ઇમેજ એસેટ્સને બદલે હોંશિયાર CSS ગ્રેડિએન્ટ્સનો ઉપયોગ કરીને, અમે લોડને 1.2MB સુધી ઘટાડ્યો. તે ઊર્જા ભારમાં 78% ઘટાડો છે! ડિઝાઇનર તરીકે, તમારો પ્રથમ પ્રશ્ન હંમેશા હોવો જોઈએ: "શું મને આ માટે ફોટોની જરૂર છે, અથવા હું કોડ સાથે સમાન ભાવનાત્મક પડઘો મેળવી શકું?"
ઇરાદાપૂર્વકની ગતિ: "મોટેથી" એનિમેશન કાપવું અમે "સ્ક્રોલ-જેકિંગ" અને જટિલ 3D લંબન અસરોના યુગમાં જીવીએ છીએ. જ્યારે આ Awwwards.com પર પુરસ્કારો જીતી શકે છે, તે ઘણીવાર ઇકોલોજીકલ આફતો હોય છે. ધ લોજિક એનિમેશન મફત નથી. જટિલ એનિમેશન રેન્ડર કરવા માટે, ઉપકરણના GPU (ગ્રાફિક્સ પ્રોસેસિંગ યુનિટ) એ ઉચ્ચ ક્ષમતા પર કામ કરવું આવશ્યક છે. આનાથી CPU તાપમાન વધે છે, કૂલિંગ ફેન્સ (લેપટોપમાં) ટ્રિગર થાય છે અને બેટરી ઝડપથી નીકળી જાય છે. "લાઉડ" એનિમેશન કે જે સતત બેકગ્રાઉન્ડમાં ચાલે છે અથવા બ્રાઉઝરને મોટા પાયે ફરીથી પેઈન્ટ્સ ટ્રિગર કરે છે તે તમારી કારને ડ્રાઇવ વેમાં સુસ્તી છોડવા જેવી ઊર્જા સમાન છે.
ડેટા Google ની સામગ્રી ડિઝાઇન માર્ગદર્શિકા "અર્થપૂર્ણ ગતિ" પર ભાર મૂકે છે. તેઓ દલીલ કરે છે કે એનિમેશનનો ઉપયોગ ફક્ત વપરાશકર્તાને દિશા આપવા અથવા પ્રતિસાદ આપવા માટે થવો જોઈએ. અને JPEG ને બદલે WebP નો ઉપયોગ કરવાથી પેજ પર 25-50% ડેટા બચાવી શકાય છે. ડિઝાઇન ધ્યેય આપણે અર્થપૂર્ણ ગતિ અપનાવવી જોઈએ. જો એનિમેશન વપરાશકર્તાને કાર્ય પૂર્ણ કરવામાં અથવા વંશવેલોને સમજવામાં મદદ કરતું નથી, તો તે કચરો છે. આપણે જ્યાં શક્ય હોય ત્યાં GSAP અથવા Lottie જેવી ભારે JavaScript લાઇબ્રેરીઓ પર CSS ટ્રાન્ઝિશનની તરફેણ કરવી જોઈએ, કારણ કે CSS હાર્ડવેર-એક્સિલરેટેડ છે અને બ્રાઉઝરની ગણતરી કરવા માટે વધુ કાર્યક્ષમ છે. યુએક્સ ડિઝાઇનર તરીકે, હું આ અભિગમની દલીલ કરી શકતો નથી. આ માત્ર ડેટાનો બગાડ ઘટાડવામાં મદદ કરે છે પરંતુ અમારા વપરાશકર્તાઓ માટે UX ને પણ બહેતર બનાવે છે. દરેક પ્રોજેક્ટ માટે "ડેટા બજેટ" સેટ કરવું મારા UX ના 20+ વર્ષોમાં, સૌથી વધુ સફળ પ્રોજેક્ટ સામાન્ય રીતે સૌથી ચુસ્ત અવરોધો ધરાવતા હોય છે. જેમ કોઈ પ્રોજેક્ટનું નાણાકીય બજેટ હોય છે તેમ તેમાં કાર્બન અને ડેટા બજેટ પણ હોવું જોઈએ. ધ લોજિક ડેટા બજેટ એ પૃષ્ઠના કુલ કદ પર સખત કેપ છે (દા.ત., "આ લેન્ડિંગ પૃષ્ઠ 1MB થી વધુ ન હોઈ શકે"). આ ડિઝાઇન ટીમને મુશ્કેલ, ઇરાદાપૂર્વકની પસંદગીઓ કરવા દબાણ કરે છે. જો તમે નવી ટ્રેકિંગ સ્ક્રિપ્ટ અથવા ફેન્સી ફોન્ટ વજન ઉમેરવા માંગતા હો, તો તમારે તેના માટે કંઈક બીજું ઑપ્ટિમાઇઝ કરીને અથવા દૂર કરીને "ચુકવણી" કરવી પડશે. આ "ફીચર ક્રીપ" ને "કાર્બન ક્રીપ" માં ફેરવાતા અટકાવે છે. ડેટા હોલગ્રેન ડિજિટલ જેવા અગ્રણીઓ દ્વારા વિકસાવવામાં આવેલ સસ્ટેનેબલ વેબ ડિઝાઇન મોડલ, પ્રતિ પૃષ્ઠ દૃશ્ય CO2 ની ગણતરી કરવા માટે એક સૂત્ર પૂરું પાડે છે. સરેરાશ વેબસાઇટ પ્રતિ વ્યુ લગભગ 0.5 ગ્રામ CO2 ઉત્પન્ન કરે છે. 1 મિલિયન માસિક દૃશ્યો ધરાવતી સાઇટ માટે, તે વર્ષે 6 મેટ્રિક ટન CO2 છે, જે કારને 15,000 માઇલ ચલાવવાની સમકક્ષ છે. ડિઝાઇન ધ્યેય સસ્ટેનેબલ યુએક્સ ચેકલિસ્ટ
છબીઓ પ્રત્યેક વિઝ્યુઅલની આવશ્યકતાનો પ્રશ્ન ઓછો કરો અને ડેટા ટ્રાન્સફર ઘટાડવા માટે સૌથી નાના રિઝોલ્યુશન અને સૌથી કાર્યક્ષમ ફાઇલ ફોર્મેટ (જેમ કે AVIF) નો ઉપયોગ કરો. ઑપ્ટિમાઇઝ વિડિયોને ઑટો-પ્લેઇંગ મીડિયાને નાબૂદ કરો અને ઉચ્ચ સંકુચિત, ટૂંકા લૂપ્સને પ્રાધાન્ય આપો તેની ખાતરી કરવા માટે કે ઊર્જા ફક્ત વપરાશકર્તા જોવા માગે છે તે સામગ્રી પર ખર્ચવામાં આવે છે. મર્યાદા ફોન્ટ્સનો મહત્તમ બે વેબ ફોન્ટ વજનનો ઉપયોગ કરો અથવા બિનજરૂરી સર્વર વિનંતીઓ અને રેન્ડરિંગ બ્લોટને દૂર કરવા માટે ક્લાસિક સિસ્ટમ ફોન્ટ્સને વળગી રહો. કુલ પૃષ્ઠ વજનમાં વધારો કર્યા વિના વિઝ્યુઅલ વિવિધતા બનાવવા માટે CSS ફિલ્ટર્સ અને ઓવરલેનો ઉપયોગ કરીને અસ્કયામતો રિસાયકલ કરો. ગ્રીન હોસ્ટિંગ પસંદ કરો ગ્રીન વેબ ફાઉન્ડેશન દ્વારા ચકાસાયેલ સર્વર્સ પર તમારા ડિજિટલ ઉત્પાદનો હોસ્ટ કરો જેથી તેઓ નવીનીકરણીય ઉર્જા સ્ત્રોતો દ્વારા સંચાલિત હોય તેની ખાતરી કરો. ડેટા ડિસ્ટન્સ નાનું કરો, ભૌતિક ઇન્ફ્રાસ્ટ્રક્ચર દ્વારા ડેટાને મુસાફરી કરવા માટે જરૂરી ઊર્જા ઘટાડવા માટે ભૌગોલિક રીતે તમારા પ્રાથમિક પ્રેક્ષકોની નજીકના સર્વર સ્થાનો પસંદ કરો.
ઇકો-ફ્રેન્ડલી ડિઝાઇન માટેનો વ્યવસાય કેસ કેટલાક દલીલ કરી શકે છે કે "ગ્રીન યુએક્સ" ગુણવત્તા સાથે સમાધાન જેવું લાગે છે. તેનાથી વિપરીત, તે એક સ્પર્ધાત્મક લાભ છે. ટકાઉ ડિઝાઇન કામગીરી ડિઝાઇન છે. જ્યારે તમે પૃષ્ઠનું વજન ઓછું કરો છો, ત્યારે તમારી સાઇટ ઝડપથી લોડ થાય છે. જ્યારે તમારી સાઇટ ઝડપથી લોડ થાય છે, ત્યારે તમારા કોર વેબ વાઇટલ્સમાં સુધારો થાય છે. જ્યારે તમારા કોર વેબ વાઇટલ્સમાં સુધારો થાય છે, ત્યારે તમારી SEO રેન્કિંગ વધે છે. વધુમાં, જૂના ઉપકરણો અથવા ધીમા ડેટા પ્લાન્સ (ખાસ કરીને ઉભરતા બજારોમાં) વપરાશકર્તાઓ ખરેખર તમારા ઉત્પાદનને ઍક્સેસ કરી શકે છે. આ “સમાવેશક ડિઝાઇન” ની વ્યાખ્યા છે. "ડિજિટલ ચરબી" ને કાપીને, અમે એક પાતળું, ઝડપી અને વધુ સુલભ વેબ બનાવીએ છીએ. અમે 2010 ના દાયકાની "નિકાલજોગ ડિઝાઇન" થી દૂર a તરફ આગળ વધી રહ્યા છીએવધુ કાયમી, આદરણીય ડિજિટલ આર્કિટેક્ચર. નિષ્કર્ષ: "સ્વચ્છ" ડિઝાઇનનું ભવિષ્ય મારા બે દાયકાના ડિઝાઇનમાં, મેં ઘણા વલણો આવતા અને જતા જોયા છે. સ્ક્યુઓમોર્ફિઝમ, ફ્લેટ ડિઝાઇન, ન્યુમોર્ફિઝમ - તે બધી સૌંદર્યલક્ષી પસંદગીઓ હતી. પરંતુ ટકાઉ UX એ વલણ નથી; તે હવે એક આવશ્યકતા છે. અમે ડિઝાઇનર્સની પ્રથમ પેઢી છીએ જેમણે અમારા ડિજિટલ કાર્યના ભૌતિક પરિણામોની ગણતરી કરવી પડશે. ટકાઉ UX એ "જીત-જીત-જીત" છે. તે ગ્રહ માટે વધુ સારું છે કારણ કે તે ઊર્જાનો વપરાશ ઘટાડે છે. તે વપરાશકર્તા માટે વધુ સારું છે કારણ કે તે ઝડપી, વધુ પ્રતિભાવશીલ ઇન્ટરફેસમાં પરિણમે છે. અને તે વ્યવસાય માટે વધુ સારું છે કારણ કે તે હોસ્ટિંગ ખર્ચ ઘટાડે છે અને રૂપાંતરણ દરમાં સુધારો કરે છે. "અમર્યાદિત પિક્સેલ" નો યુગ પૂરો થયો. 2026 માં, સૌથી વધુ અત્યાધુનિક ડિઝાઇન એવી છે જે સૌથી નાની ફૂટપ્રિન્ટ છોડે છે. અમે હવે માત્ર ડિઝાઇનર્સ નથી; અમે વપરાશકર્તાની બેટરી, તેમના ડેટા પ્લાન અને આખરે પર્યાવરણના રક્ષક છીએ. ધ કોલ ટુ એક્શન હું તમને પડકાર આપું છું કે આજે તમારા વર્તમાન પ્રોજેક્ટના માત્ર એક પૃષ્ઠનું ઓડિટ કરો. તેની અસર જોવા માટે વેબસાઈટ કાર્બન કેલ્ક્યુલેટર જેવા સાધનનો ઉપયોગ કરો. પછી, "અદ્રશ્ય કચરો" શોધો. શું તે છબી SVG હોઈ શકે છે? શું તે વિડિયો સ્ટેટિક હીરો હોઈ શકે? શું તે "મોટેથી" એનિમેશનને શાંત કરી શકાય છે? નાની શરૂઆત કરો. સૌથી ભવ્ય સોલ્યુશન એ ઘણીવાર સૌથી ઓછા બાઇટ્સ ધરાવતું હોય છે.
