பயனர் அனுபவ வடிவமைப்பின் அகழிகளில் இரண்டு தசாப்தங்களுக்கும் மேலாக நான் செலவிட்டேன். அட்டவணை அடிப்படையிலான தளவமைப்புகளிலிருந்து CSS க்கு மாறியது, ஐபோன் தொடங்கப்பட்டபோது பதிலளிக்கக்கூடிய வடிவமைப்பிற்கான பிவோட் மற்றும் "கவனம் பொருளாதாரத்தின்" எழுச்சி எனக்கு நினைவிருக்கிறது. ஆனால் நாம் 2026 இல் செல்லும்போது, தொழில்துறை அதன் மிக முக்கியமான மாற்றத்தை எதிர்கொள்கிறது. "எந்த விலையிலும் வடிவமைப்பு" என்ற சகாப்தத்தை நாங்கள் கடந்து நிலையான UX இன் சகாப்தத்திற்கு நகர்கிறோம். இதை ஒரு கருத்தாகக் கேட்கும் வரையில், நான் உட்பட, பெரும்பாலான வடிவமைப்பாளர்கள் இதைப் பற்றி நினைக்கவில்லை. பல ஆண்டுகளாக, நாங்கள் இணையத்தை ஒரு ஒளிமயமான, எடையற்ற மேகமாக கருதுகிறோம். டிஜிட்டல் தயாரிப்புகள் காகிதத்தில் அச்சிடப்படாததால் "பச்சை" என்று நாங்கள் கருதுகிறோம். நானும் அப்படித்தான் நினைத்திருந்தேன், காலநிலை மாற்றம் என்ற கருத்து தோன்றுவதற்கு முன்பு, அது மரங்களை காப்பாற்றுவது பற்றி அதிகம். நாங்கள் தவறு செய்தோம். கிளவுட் என்பது ஒரு இயற்பியல் உள்கட்டமைப்பு, தரவு மையங்களின் பரந்த நெட்வொர்க், கடலுக்கடியில் கேபிள்கள் மற்றும் 24/7 ஒலிக்கும் குளிரூட்டும் அமைப்புகள். AI-மையப்படுத்தப்பட்ட தரவு மையங்கள் பாரிய அலுமினிய ஸ்மெல்ட்டர்களின் மின் நுகர்வுடன் பொருந்துகின்றன, அவற்றின் அதிக புவியியல் அடர்த்தி இன்னும் தீவிரமான மற்றும் உள்ளூர்மயமாக்கப்பட்ட சுற்றுச்சூழல் விகாரத்தை உருவாக்குகிறது. UX வடிவமைப்பாளர்களாகிய நாங்கள் இந்த ஆற்றல் நுகர்வுக்கான வடிவமைப்பாளர்கள். ஒவ்வொரு உயர் தெளிவுத்திறன் கொண்ட ஹீரோ படமும், ஒவ்வொரு தானாக இயங்கும் பின்னணி வீடியோவும், நாங்கள் அங்கீகரிக்கும் ஒவ்வொரு சிக்கலான ஜாவாஸ்கிரிப்ட் அனிமேஷனும் ஒரு செயலிக்கு சக்தியைப் பயன்படுத்துவதற்கான நேரடி அறிவுறுத்தலாகும். நீடித்திருக்கும் எதிர்காலத்தை நாம் உருவாக்க விரும்பினால், "வாவ்" க்காக வடிவமைப்பதை நிறுத்திவிட்டு, செயல்திறனுக்காக வடிவமைக்கத் தொடங்க வேண்டும். இருண்ட பயன்முறை 2000 களின் முற்பகுதியில், வெள்ளைப் பின்னணிகள் தரநிலையாக இருந்தன, ஏனெனில் அவை காகிதத்தின் பரிச்சயத்தைப் பிரதிபலித்தன. இருப்பினும், வன்பொருள் உருவாகியுள்ளது, மேலும் எங்கள் வடிவமைப்பு தத்துவம் பின்பற்ற வேண்டும். LCD இலிருந்து OLED (ஆர்கானிக் லைட் எமிட்டிங் டையோடு) தொழில்நுட்பத்திற்கு மாறியது, நிறம் எவ்வாறு ஆற்றலை பாதிக்கிறது என்பதை அடிப்படையாக மாற்றியுள்ளது.
த லாஜிக் பாரம்பரிய LCD திரைகளைப் போலல்லாமல், எப்பொழுதும் இயக்கத்தில் இருக்கும் பின்னொளி தேவைப்படும் (கருப்பு நிறத்தைக் காட்டினாலும்), OLED திரைகள் ஒவ்வொரு பிக்சலையும் தனித்தனியாக ஒளிரச் செய்கின்றன. ஒரு பிக்சல் உண்மையான கருப்புக்கு (#000000) அமைக்கப்பட்டால், அந்த குறிப்பிட்ட டையோடு முற்றிலும் அணைக்கப்படும். இது பூஜ்ஜிய சக்தியை ஈர்க்கிறது. இருண்ட தட்டுகளுக்கு ஆதரவான இடைமுகங்களை வடிவமைப்பதன் மூலம், நாங்கள் ஒரு போக்கை மட்டும் பின்பற்றவில்லை; பயனரின் சாதனத்தின் ஆற்றல் தேவையை உடல் ரீதியாக குறைக்கிறோம். தரவு ஆற்றல் சேமிப்பு மிகக் குறைவு. 2021 இல் பர்டூ பல்கலைக்கழகத்தின் ஒரு முக்கிய ஆய்வு, இந்த விவாதத்திற்கான தங்கத் தரமாக மாறியுள்ளது, 100% பிரகாசத்தில், ஒளி பயன்முறையில் இருந்து இருண்ட பயன்முறைக்கு மாறுவது சராசரியாக 39% முதல் 47% பேட்டரி ஆற்றலைச் சேமிக்கும் என்பதை வெளிப்படுத்தியது. உலக அளவில், ஒவ்வொரு முக்கிய ஆப்ஸும் டார்க் பயன்முறைக்கு இயல்புநிலையாக இருந்தால், கட்டத்தின் தேவை குறைவது வானியல் சார்ந்ததாக இருக்கும். வடிவமைப்பு இலக்கு 2026 ஆம் ஆண்டில், அமைப்புகள் மெனுவில் டார்க் பயன்முறையானது இரண்டாம் நிலை "தீம்" ஆக இருக்கக்கூடாது. நாம் "இருண்ட முதல்" மனநிலையுடன் வடிவமைக்க வேண்டும். ஒவ்வொரு தளமும் தி மேட்ரிக்ஸ் போல இருக்க வேண்டும் என்று இது அர்த்தப்படுத்துவதில்லை, ஆனால் இது இயல்புநிலை அமைப்பு-விருப்பமான நிலையாக உயர்-மாறுபட்ட இருண்ட தீம்களுக்கு முன்னுரிமை அளிப்பதைக் குறிக்கிறது. இது சாதனத்தின் வன்பொருள் ஆயுளை நீட்டிக்கிறது மற்றும் ஒவ்வொரு தொடர்புகளின் கார்பன் தடயத்தையும் குறைக்கிறது. நான் தனிப்பட்ட முறையில் லைட்-மோடைப் படிக்க விரும்புகிறேன், எனவே லைட் மற்றும் டார்க் மோட் ஆகிய இரண்டு விருப்பங்களும் கிடைப்பது அர்த்தமுள்ளதாக இருக்கிறது. இரண்டு விருப்பங்களையும் வழங்குவதில் அணுகல் பரிசீலனைகள் உள்ளன. படம் மற்றும் வீடியோ உகப்பாக்கம் நாங்கள் சோம்பேறி வடிவமைப்பாளர்களாகிவிட்டோம். அதிவேக 5G மற்றும் ஃபைபர் ஆப்டிக்ஸ் மூலம், கோப்பு அளவுகளைப் பற்றி கவலைப்படுவதை நிறுத்திவிட்டோம். கடந்த தசாப்தத்தில் மொபைல் பக்கத்தின் சராசரி எடை 500%க்கும் அதிகமாக அதிகரித்துள்ளது, பெரும்பாலும் மேம்படுத்தப்படாத காட்சி சொத்துக்கள் காரணமாகும். த லாஜிக் இணையதளத்தின் "டிஜிட்டல் ஃபேட்" (அந்த 4எம்பி அன்ஸ்ப்ளாஷ் புகைப்படங்கள் மற்றும் 15எம்பி பின்னணி வீடியோக்கள்) பக்கம்-ஏற்ற ஆற்றலுக்கு மிகப்பெரிய பங்களிப்பாகும். சேவையகத்திலிருந்து கிளையண்டிற்கு மாற்றப்படும் ஒவ்வொரு மெகாபைட்டிற்கும் பரிமாற்றம், சேவையகத்தின் செயலாக்கம் மற்றும் பயனரின் ரெண்டரிங் இயந்திரம் ஆகியவற்றிற்கு மின்சாரம் தேவைப்படுகிறது. நாம் பாரிய கோப்புகளைப் பயன்படுத்தும் போது, அளவின் ஒரு பகுதியிலேயே பயனுள்ளதாக இருந்திருக்கும் ஒரு படத்தைக் காட்டுவதற்கு நாம் "எரியும்" ஆற்றலைப் பயன்படுத்துகிறோம். மிக வேகமாக ஏற்றப்படும் பக்கத்துடன் சிறந்த பயனர் அனுபவத்தையும் வழங்குகிறீர்கள் என்று குறிப்பிடவில்லை.
தரவு HTTP காப்பகத்தின்படி, ஒரு பக்கத்தின் மொத்த எடையில் படங்களும் வீடியோவும் தொடர்ந்து சிங்கத்தின் பங்கைக் கொண்டுள்ளன. இருப்பினும், AVIF மற்றும் WebP போன்ற நவீன வடிவங்களுக்கு மாறுவதால், JPEG உடன் ஒப்பிடும்போது, தரத்தில் எந்த புலனுணர்வும் இழப்பு இல்லாமல், படத்தின் எடையை 50% வரை குறைக்க முடியும். இந்த வடிவங்கள் எனக்கு JPG மற்றும் PNG போன்ற பரிச்சயமானவை அல்ல என்றாலும், பக்க அளவைக் குறைக்க அவற்றைப் பயன்படுத்த நான் நிச்சயமாக ஆவலுடன் இருக்கிறேன். திவடிவமைப்பு இலக்கு நான் சமீபத்தில் இணைய பாதுகாப்பு தளத்திற்கான மறுவடிவமைப்புக்கு தலைமை தாங்கினேன். "முன் மற்றும் பின்" தணிக்கையைச் செயல்படுத்துவதன் மூலம், அவர்களின் முகப்புப் பக்கத்தில் 5.5MB தரவு ஏற்றப்படுவதைக் கண்டறிந்தோம். உயர்-ரெஸ் புகைப்படத்தை SVG (அளவிடக்கூடிய வெக்டர் கிராபிக்ஸ்) கலையுடன் மாற்றுவதன் மூலமும், பட சொத்துக்களுக்குப் பதிலாக புத்திசாலித்தனமான CSS சாய்வுகளைப் பயன்படுத்துவதன் மூலமும், சுமையை 1.2MB ஆகக் குறைத்தோம். அதாவது ஆற்றல் சுமையில் 78% குறைப்பு! ஒரு வடிவமைப்பாளராக, உங்கள் முதல் கேள்வி எப்போதும் இருக்க வேண்டும்: "இதற்கு எனக்கு ஒரு புகைப்படம் தேவையா, அல்லது குறியீட்டின் மூலம் அதே உணர்வுபூர்வமான அதிர்வுகளை நான் அடைய முடியுமா?"
வேண்டுமென்றே இயக்கம்: "சத்தமாக" அனிமேஷன்களை வெட்டுதல் நாம் "ஸ்க்ரோல்-ஜாக்கிங்" மற்றும் சிக்கலான 3D இடமாறு விளைவுகளின் சகாப்தத்தில் வாழ்கிறோம். இவை Awwwards.com இல் விருதுகளை வென்றாலும், அவை பெரும்பாலும் சுற்றுச்சூழல் பேரழிவுகளாகும். த லாஜிக் அனிமேஷன் இலவசம் அல்ல. சிக்கலான அனிமேஷனை வழங்க, சாதனத்தின் GPU (கிராபிக்ஸ் ப்ராசசிங் யூனிட்) அதிக திறனில் வேலை செய்ய வேண்டும். இது CPU வெப்பநிலையை அதிகரிக்கிறது, குளிர்விக்கும் விசிறிகளை (மடிக்கணினிகளில்) தூண்டுகிறது மற்றும் பேட்டரியை விரைவாக வடிகட்டுகிறது. பின்னணியில் தொடர்ந்து இயங்கும் அல்லது பிரவுசரின் பாரிய ரீ-பெயின்ட்களைத் தூண்டும் "லவுட்" அனிமேஷன்கள் உங்கள் காரை டிரைவ்வேயில் செயலிழக்கச் செய்வதற்குச் சமமான ஆற்றலாகும்.
தரவு கூகுளின் மெட்டீரியல் டிசைன் வழிகாட்டுதல்கள் "அர்த்தமுள்ள இயக்கம்" என்பதை வலியுறுத்துகின்றன. அனிமேஷன் பயனரை திசைதிருப்ப அல்லது கருத்துக்களை வழங்க மட்டுமே பயன்படுத்தப்பட வேண்டும் என்று அவர்கள் வாதிடுகின்றனர். மேலும் JPEGக்குப் பதிலாக WebPஐப் பயன்படுத்தினால் ஒரு பக்கத்தில் 25-50% தரவைச் சேமிக்க முடியும். வடிவமைப்பு இலக்கு அர்த்தமுள்ள இயக்கத்தை நாம் ஏற்றுக்கொள்ள வேண்டும். ஒரு பணியை முடிக்கவோ அல்லது படிநிலையைப் புரிந்துகொள்ளவோ அனிமேஷன் பயனருக்கு உதவவில்லை என்றால், அது வீணாகும். GSAP அல்லது Lottie போன்ற கனரக ஜாவாஸ்கிரிப்ட் லைப்ரரிகளில் CSS மாற்றங்களை நாங்கள் விரும்புகிறோம், ஏனெனில் CSS வன்பொருள்-துரிதப்படுத்தப்பட்டது மற்றும் உலாவி கணக்கிடுவதற்கு மிகவும் திறமையானது. UX வடிவமைப்பாளராக, இந்த அணுகுமுறையை என்னால் வாதிட முடியாது. இது தரவு வீணாவதைக் குறைக்க உதவுவது மட்டுமல்லாமல், எங்கள் பயனர்களுக்கு UX ஐ மேம்படுத்துகிறது. ஒவ்வொரு திட்டத்திற்கும் "தரவு பட்ஜெட்" அமைத்தல் எனது 20+ வருட UX இல், மிகவும் வெற்றிகரமான திட்டங்கள் பொதுவாக மிகவும் இறுக்கமான கட்டுப்பாடுகளைக் கொண்டவை. ஒரு திட்டத்திற்கு நிதி பட்ஜெட் இருப்பது போல், அது கார்பன் மற்றும் டேட்டா பட்ஜெட்டையும் கொண்டிருக்க வேண்டும். த லாஜிக் டேட்டா பட்ஜெட் என்பது ஒரு பக்கத்தின் மொத்த அளவு (எ.கா., "இந்த இறங்கும் பக்கம் 1MB ஐ விட அதிகமாக இருக்கக்கூடாது"). இது கடினமான, வேண்டுமென்றே தேர்வுகளைச் செய்ய வடிவமைப்புக் குழுவைத் தூண்டுகிறது. நீங்கள் ஒரு புதிய டிராக்கிங் ஸ்கிரிப்ட் அல்லது ஆடம்பரமான எழுத்துரு எடையைச் சேர்க்க விரும்பினால், வேறு எதையாவது மேம்படுத்துவதன் மூலம் அல்லது அகற்றுவதன் மூலம் அதை "கட்டணம்" செய்ய வேண்டும். இது "ஃபீச்சர் க்ரீப்" "கார்பன் க்ரீப்" ஆக மாறுவதைத் தடுக்கிறது. தரவு முழு கிரெய்ன் டிஜிட்டல் போன்ற முன்னோடிகளால் உருவாக்கப்பட்ட நிலையான வலை வடிவமைப்பு மாதிரியானது, ஒரு பக்க பார்வைக்கு CO2 ஐ கணக்கிடுவதற்கான சூத்திரத்தை வழங்குகிறது. சராசரி இணையதளம் ஒரு பார்வைக்கு 0.5 கிராம் CO2 ஐ உற்பத்தி செய்கிறது. 1 மில்லியன் மாதாந்திர பார்வைகளைக் கொண்ட ஒரு தளத்திற்கு, அது ஒரு வருடத்திற்கு 6 மெட்ரிக் டன் CO2 ஆகும், இது ஒரு காரை 15,000 மைல்கள் ஓட்டுவதற்குச் சமம். வடிவமைப்பு இலக்கு நிலையான UX சரிபார்ப்பு பட்டியல்
படங்களைக் குறைத்து, ஒவ்வொரு காட்சியின் அவசியத்தையும் கேள்விக்குள்ளாக்குங்கள் மற்றும் தரவு பரிமாற்றத்தைக் குறைக்க சிறிய தெளிவுத்திறன் மற்றும் மிகவும் திறமையான கோப்பு வடிவங்களைப் (AVIF போன்றவை) பயன்படுத்தவும். வீடியோவை மேம்படுத்து தானாக இயங்கும் மீடியாவை நீக்கி, பயனர் பார்க்க விரும்பும் உள்ளடக்கத்திற்கு மட்டுமே ஆற்றல் செலவிடப்படுவதை உறுதிசெய்ய, அதிக சுருக்கப்பட்ட, குறுகிய சுழல்களுக்கு முன்னுரிமை கொடுங்கள். வரம்பு எழுத்துருக்கள் தேவையற்ற சர்வர் கோரிக்கைகள் மற்றும் ரெண்டரிங் ப்ளோட்டை அகற்ற அதிகபட்சம் இரண்டு வலை எழுத்துரு எடைகளைப் பயன்படுத்தவும் அல்லது கிளாசிக் சிஸ்டம் எழுத்துருக்களுடன் ஒட்டிக்கொள்ளவும். மறுசுழற்சி சொத்துக்கள் மொத்த பக்க எடையை அதிகரிக்காமல் காட்சி வகைகளை உருவாக்க CSS வடிப்பான்கள் மற்றும் மேலடுக்குகளைப் பயன்படுத்தி ஒரு படம் அல்லது வீடியோவை பல முறை மீண்டும் பயன்படுத்தவும். கிரீன் வெப் ஃபவுண்டேஷனால் சரிபார்க்கப்பட்ட சர்வர்களில் உங்கள் டிஜிட்டல் தயாரிப்புகளை Green HostingHost என்பதைத் தேர்வுசெய்து, அவை புதுப்பிக்கத்தக்க எரிசக்தி ஆதாரங்களால் இயக்கப்படுகின்றன. டேட்டா தூரத்தைக் குறைக்கவும், புவியியல் ரீதியாக உங்கள் முதன்மை பார்வையாளர்களுக்கு நெருக்கமான சர்வர் இருப்பிடங்களைத் தேர்ந்தெடுங்கள்.
சுற்றுச்சூழல் நட்பு வடிவமைப்புக்கான வணிக வழக்கு "கிரீன் யுஎக்ஸ்" தரத்தில் சமரசம் செய்வது போல் இருப்பதாக சிலர் வாதிடலாம். மாறாக, இது ஒரு போட்டி நன்மை. நிலையான வடிவமைப்பு செயல்திறன் வடிவமைப்பு ஆகும். பக்க எடையைக் குறைக்கும் போது, உங்கள் தளம் வேகமாக ஏற்றப்படும். உங்கள் தளம் வேகமாக ஏற்றப்படும் போது, உங்கள் முக்கிய இணைய உயிர்கள் மேம்படும். உங்கள் கோர் வெப் வைட்டல்கள் மேம்படும்போது, உங்கள் எஸ்சிஓ தரவரிசை உயர்கிறது. மேலும், பழைய சாதனங்கள் அல்லது மெதுவான தரவுத் திட்டங்களில் உள்ள பயனர்கள் (குறிப்பாக வளர்ந்து வரும் சந்தைகளில்) உண்மையில் உங்கள் தயாரிப்பை அணுக முடியும். இது "உள்ளடக்கிய வடிவமைப்பு" என்பதன் வரையறை. "டிஜிட்டல் கொழுப்பை" குறைப்பதன் மூலம், மெலிந்த, வேகமான மற்றும் அணுகக்கூடிய வலையை உருவாக்குகிறோம். 2010 களின் "ஒருமுறை செலவழிக்கக்கூடிய வடிவமைப்பிலிருந்து" நாங்கள் விலகி ஒரு நோக்கி நகர்கிறோம்மிகவும் நிரந்தரமான, மரியாதைக்குரிய டிஜிட்டல் கட்டிடக்கலை. முடிவு: "சுத்தமான" வடிவமைப்பின் எதிர்காலம் எனது இரண்டு தசாப்தகால வடிவமைப்பில், பல போக்குகள் வந்து போவதை நான் பார்த்திருக்கிறேன். ஸ்கூமோர்பிசம், பிளாட் டிசைன், நியூமார்பிசம் - இவை அனைத்தும் அழகியல் தேர்வுகள். ஆனால் நிலையான UX ஒரு போக்கு அல்ல; அது இப்போது அவசியம். எங்கள் டிஜிட்டல் வேலையின் உடல்ரீதியான விளைவுகளைக் கணக்கிட வேண்டிய முதல் தலைமுறை வடிவமைப்பாளர்கள் நாங்கள். நிலையான UX என்பது "வெற்றி-வெற்றி". இது கிரகத்திற்கு சிறந்தது, ஏனெனில் இது ஆற்றல் நுகர்வு குறைக்கிறது. இது பயனருக்கு சிறந்தது, ஏனெனில் இது வேகமான, அதிக பதிலளிக்கக்கூடிய இடைமுகங்களை விளைவிக்கிறது. மேலும் இது வணிகத்திற்கு சிறந்தது, ஏனெனில் இது ஹோஸ்டிங் செலவுகளைக் குறைக்கிறது மற்றும் மாற்று விகிதங்களை மேம்படுத்துகிறது. "வரம்பற்ற பிக்சல்கள்" சகாப்தம் முடிந்துவிட்டது. 2026 ஆம் ஆண்டில், மிகவும் அதிநவீன வடிவமைப்பு சிறிய தடயத்தை விட்டுச்செல்கிறது. நாங்கள் இனி வடிவமைப்பாளர்கள் மட்டுமல்ல; பயனரின் பேட்டரி, அவர்களின் தரவுத் திட்டம் மற்றும் இறுதியில் சுற்றுச்சூழலின் பாதுகாவலர்கள் நாங்கள். நடவடிக்கைக்கான அழைப்பு உங்கள் தற்போதைய திட்டப்பணியின் ஒரு பக்கத்தை மட்டும் இன்று தணிக்கை செய்யும்படி நான் உங்களுக்கு சவால் விடுகிறேன். அதன் தாக்கத்தைக் காண இணையதள கார்பன் கால்குலேட்டர் போன்ற கருவியைப் பயன்படுத்தவும். பின்னர், "கண்ணுக்கு தெரியாத கழிவுகளை" தேடுங்கள். அந்த படம் SVG ஆக இருக்க முடியுமா? அந்த வீடியோ ஒரு நிலையான ஹீரோவாக இருக்க முடியுமா? அந்த "உரத்த" அனிமேஷனை அமைதியாக்க முடியுமா? சிறியதாக தொடங்குங்கள். மிக நேர்த்தியான தீர்வு பெரும்பாலும் குறைவான பைட்டுகளைக் கொண்டதாகும்.
