இன்னும் கவர்ச்சியாகத் தோன்றும் வகையில் நிறக்குறைபாடு உள்ளவர்களுக்கு ஏற்ற பக்கங்களை வடிவமைத்தல்

இன்னும் கவர்ச்சியாகத் தோன்றும் வகையில் நிறக்குறைபாடு உள்ளவர்களுக்கு ஏற்ற பக்கங்களை வடிவமைத்தல்

ஜூலை என்பது பல குழுக்கள் திடீரென தங்களின் கோடை விற்பனை பக்கம், முகாம் பதிவு, நிகழ்வு லேண்டிங் பக்கம், அல்லது பள்ளி தொடக்கப் பிரச்சாரப் பக்கம் “இப்போதே” வெளியேற வேண்டும் என்று நினைவுபடும் காலம். வடிவமைப்பாளர் பிரகாசமான நிறத் தொகுப்பைக் கொண்டுவருகிறார். மார்க்கெட்டர் அவசரத்தை விரும்புகிறார். மேலாளர் பட்டன் சத்தமாக பேச வேண்டும் என்கிறார். அந்த நடுவில், ஒரு நல்ல அளவு பார்வையாளர்கள், பச்சை பேட்ஜில் சிவப்பு உரையைப் படிக்க முயல்கிறார்கள் அல்லது நிறம் மட்டுமே வைத்து “சிறந்த மதிப்பு” எந்த திட்டம் என்று கண்டுபிடிக்க முயல்கிறார்கள்.

நிறக்குறைபாடு உள்ளவர்களுக்கு ஏற்ற வடிவமைப்பு என்பது எல்லாவற்றையும் சாம்பலாகவும் சலிப்பாகவும் மாற்றுவது பற்றியதல்ல. அணுகல் வசதி (accessibility) பணியைச் சுற்றி இருக்கும் ஒரு பொதுக் கட்டுக்கதை அது. உண்மையில், நிறம் மட்டும் செய்தியை முழுமையாக சுமக்காமல் இருப்பதையும், உண்மையான திரைகள், சோர்ந்த கண்கள், சூரிய ஒளி, நைட் மோடு, மலிவான மானிட்டர்கள், ஆம்—நிறக் காட்சி குறைபாட்டின் பொதுவான வகைகளையும் சமாளிக்கும் அளவுக்கு உரை மற்றும் முக்கிய வடிவங்களுக்கு போதுமான கான்ட்ராஸ்ட் இருப்பதையும் உறுதி செய்வதுதான்.

இதற்கு ஒரு நடைமுறை வழி இருக்கிறது—ஒரே குறிப்பிட்ட சூழ்நிலையை எடுத்துக் கொண்டு: ஒரு சிறிய வணிகம் கோடை விற்பனை லேண்டிங் பக்கத்தை உருவாக்குகிறது என்று வைத்துக் கொள்வோம். அதில் ஹீரோ பேனர், பொருள் கார்டுகள், தள்ளுபடி லேபல், மற்றும் ஒரு முக்கிய அழைப்புப் பட்டன் (call-to-action button) உள்ளது.

நிறத் தொகுப்புக்கு முன் செய்தியிலிருந்து தொடங்குங்கள்

நிறங்களை தேர்வு செய்யும் முன், அந்த பக்கம் என்ன தெரிவிக்க வேண்டும் என்று எழுதுங்கள். வடிவமைப்பு மொழியில் அல்ல. எளிய சொற்களில்.

எடுத்துக்காட்டில், பக்கம் சொல்ல வேண்டியது: கோடை விற்பனை, 25% தள்ளுபடி, மூன்று சிறப்பு பொருட்கள், ஒரு பொருள் கிட்டத்தட்ட முடிந்துவிட்டது, மேலும் பார்வையாளர் “Shop the sale” என்பதைக் கிளிக் செய்ய வேண்டும். அவ்வளவுதான். வடிவமைப்பு செய்ய வேண்டிய வேலைகள் இவை.

இதன் முக்கியத்துவம் என்னவென்றால், நிறம் பெரும்பாலும் “ஷார்ட்கட்” ஆக ஒளிந்துவிடும். சிவப்பு எச்சரிக்கை. பச்சை நல்லது. நீலம் அமைதி. மஞ்சள் விற்பனை. சரி, ஆனால் ஒருவர் அந்த குறிப்பிட்ட நிற நிழலைப் பார்க்க முடிந்தால்தான் செய்தி வேலை செய்யும் என்றால் அது பலவீனம். நிறக் குறைபாடு உள்ள ஷாப்பர் அந்த பேட்ஜை சிவப்பு என்று பார்க்காமல் போகலாம், அல்லது பச்சை “கிடைக்கிறது” லேபல் மற்றும் ஆரஞ்சு “வரையறுக்கப்பட்ட ஸ்டாக்” லேபல் ஆகியவற்றுக்கு இடையிலான வேறுபாடு ஒத்த பின்னணிகளில் இருந்தால் கவனிக்காமல் போகலாம்.

எனவே முதல் படி “அணுகலுக்கான நிறங்களைத் தேர்வு செய்வது” அல்ல. “நிறம் இல்லாமலிருந்தாலும் செய்தி இருக்குமாறு செய்வது.” சிறிய மாற்றம்தான், ஆனாலும் முழு பக்கத்தையும் அது மாற்றிவிடும்.

சிறிய நடைமுறைப் பார்வை: ஒரு விற்பனை பொருள் கார்டை சரிசெய்தல்

ஒரு பொருள் கார்டில் இலகு பச்சை பின்னணி, சிவப்பு “Limited stock” லேபல், அடர் சாம்பலில் பொருள் பெயர், ஒரு விலை, மற்றும் “Add to cart” என்று எழுதப்பட்ட பச்சை பட்டன் உள்ளது என்று வைத்துக் கொள்ளுங்கள். இது குழுவுக்கு விழாக்காலமாகத் தெரியும். ஆனால் இது ஆபத்தானது.

1. நிலையை உரையாக வாசிக்கக்கூடியதாக மாற்றுங்கள். “Limited stock” என்ற வார்த்தைகள் தெளிவாக இருக்க வேண்டும். அதை சிவப்பு புள்ளி அல்லது சிவப்பு எல்லை (border) மட்டும் வைத்து மாற்றிவிடாதீர்கள். ஐகான் இருந்தால், அந்த லேபலோடு சேர்த்து காட்டுங்கள்.
2. நிறமல்லாத ஒரு சிக்னலை சேருங்கள். “Limited stock” லேபலை பில் (pill) வடிவத்தில் வையுங்கள்; சிறிய கடிகாரம் அல்லது எச்சரிக்கை ஐகானை சேருங்கள்; அல்லது தற்சட்ட (dashed) அவுட்லைன் பயன்படுத்துங்கள். நிறம் கலந்திருந்தாலும், அந்த வடிவம் “இது வேறுபட்டது” என்று சொல்லும் மாதிரி இருக்க வேண்டும்.
3. உரையை பின்னணியுடன் ஒப்பிட்டு சரிபார்க்குங்கள். பொருள் பெயர், விலை, மற்றும் பட்டன் லேபல் ஆகியவற்றுக்கு வலுவான கான்ட்ராஸ்ட் தேவை. சிறிய விற்பனை லேபல்கள் என்றால் இன்னும் கூடுதலாக கவனம் தேவை; ஏனெனில் சிறிய உரை வேகமாக மங்கிவிடும்.
4. பட்டன் நிறத்தை நிலை நிறத்திலிருந்து பிரித்து வைத்துக்கொள்ளுங்கள். பச்சை என்பது “கிடைக்கிறது”க்கும் “இங்கே கிளிக்”க்கும் இரண்டுக்கும் என்றால், பக்கம் சத்தமாகத் தோன்றும். ஒரே மாதிரியான பட்டன் ஸ்டைலை பயன்படுத்தி, வார்த்தைகளே வேலை செய்யட்டும்.
5. கார்டை கிரேஸ்கேல் (grayscale) முறையில் சோதிக்கவும். இது வேகமான உண்மைச் சோதனை. லேபல், விலை, பட்டன் ஆகியவை நிறம் நீக்கப்பட்டபோதும் ஒன்றிலிருந்து ஒன்று தெளிவாகத் தெரியுமா என்பதுதான். அப்படித் தெரிந்தால், வடிவமைப்பு சரியான திசையில் இருக்க வாய்ப்புள்ளது.

இது முழு ரீடிசைன் அல்ல—சிறிய சரி செய்யும் மாற்றம். கார்டு இன்னும் சூரிய ஒளி போலவும் உங்கள் பிராண்டு ஸ்டைலாகவும் உணரலாம். ஒரே நேரத்தில் எல்லா வேலைக்கும் நிறத்தை கேட்டுக்கொள்வதை மட்டும் நிறுத்திவிடும்.

கான்ட்ராஸ்டை ஒரு வடிவமைப்பு பொருளைப் போலப் பயன்படுத்துங்கள்; கடமை நிறைவேற்றும் (compliance) வேலை போல அல்ல

அணுகலுக்கான பக்கங்கள் “கூர்மையுடனும் நம்பிக்கையுடனும்” ஆகவோ அல்லது “குழம்பாக” ஆகவோ செய்வதில் கான்ட்ராஸ்ட்தான் முக்கியம். மேலும் கான்ட்ராஸ்ட் என்பது வெள்ளை பின்னணியில் கருப்பு உரை மட்டுமல்ல. அது முன்னணி (foreground) மற்றும் பின்னணி (background) இடையிலான உறவு; பட்டன் உரை மற்றும் பட்டன் நிரப்பு (fill) இடையிலான உறவு; இணைப்பு உரை (link text) மற்றும் உட்பொருள் உரை (body copy) இடையிலான உறவு; ஐகான்கள் மற்றும் அவற்றின் பெட்டி இடையிலான உறவு; முடக்கப்பட்ட நிலைகள் (disabled) மற்றும் செயலில் இருக்கும் நிலைகள் (active) ஆகியவற்றின் உறவு.

ஒரு எளிய பொதுவிதி: கிளிக் செய்ய, வாசிக்க, அல்லது ஒப்பிட முக்கியமானதாக இருந்தால், அது நிற நிழலை மட்டும் நம்பாமல், கண்ணைச் சுருக்காமலே தெளிவாகத் தெரிந்திருக்க வேண்டும். நினைவில் வைத்துக்கொள்ள வேண்டியது இதுதான்.

சாதாரண உட்பொருள் உரைக்கு, வடிவமைப்பாளர்கள் பொதுவாக குறைந்தது 4.5:1 என்ற கான்ட்ராஸ்ட் விகிதத்தை இலக்காக வைப்பார்கள். பெரிய உரைக்கு பெரும்பாலும் 3:1 போதலாம்; ஆனால் குழப்பமான நிஜ உலகில் இன்னும் வலுவானது நல்லது. பட்டன் எல்லைகள் (button borders) மற்றும் focus outlines போன்ற இடைமுகக் கூறுகளுக்கும் கவனிக்கப்படுமளவுக்கு போதுமான கான்ட்ராஸ்ட் தேவை. இந்த எண்கள் மந்திரச் சொற்கள் அல்ல; ஆனால் வழிகாட்டும் பாதுகாப்புக் கம்பிகள். குறிப்பாக பிராண்டு நிறம் அழகாக இருந்தாலும் பலவீனமாக இருக்கும் போது.

ஒரு பொதுக் கண்ணி (trap) pastel-on-pastel design. மாக்கப்பில் அது காற்றோட்டமாகத் தோன்றும். ஆனால் ஒருவரால் அதை போனில் வெளியே திறக்கும்போது, அல்லது brightness குறைக்கும்போது, முழுப் பக்கமும் கிட்டத்தட்ட கிசுகிசுக்குமாறு ஆகிவிடும். கிரீம் பேனரில் வெளிர் மஞ்சள் உரை, வெள்ளை உரையுடன் வெளிர் டீல் பட்டன்கள், வெள்ளை கார்ட்களில் மென்மையான பிங்க் பேட்ஜ்கள்—அத்தனையும் அழகுதான்; ஆனால் வாசிக்க முடியாத வரை இல்லை.

பிராண்டின் நிறங்களை வைத்துக்கொள்ளுங்கள்; ஆனால் அவற்றுக்கு மேலும் சரியான வேலைகளை கொடுங்கள்

ஒரு நிறம் கான்ட்ராஸ்ட் தேவையில் தோல்வியடைந்ததால் உங்கள் பிராண்டு நிறத் தொகுப்பை முழுதாக தூக்கி எறிய வேண்டியதில்லை. பொதுவாக நீங்கள் பாத்திரங்களை (roles) மாற்றிக்கொள்ளலாம். பலவீனமான மஞ்சள் உரையாக அல்ல, பின்னணி “wash” ஆக வேலை செய்யலாம். பிரகாசமான ஆரஞ்சு ஐகான்கள் அல்லது அசென்ட்களுக்கு பயன்படலாம்; ஆனால் அடர் ஆரஞ்சு பட்டன் நிரப்புகளுக்கு உதவும். பிராண்டு பச்சை விளக்கப்படங்களில் (illustrations) இருக்கலாம்; ஆனால் முக்கிய வெற்றி செய்தி (success message) அடர் எல்லை (dark border), உரை லேபல், மற்றும் ஐகான் ஆகியவற்றுடன் கூட சேர்ந்து வரும்.

அடுக்கு (layers) போல சிந்தியுங்கள். பின்னணி நிறங்கள் மென்மையாக இருக்கலாம். அலங்கார வடிவங்கள் ரசிக்கக்கூடியதாக இருக்கலாம். ஆனால் செயல்பாட்டு விஷயங்களுக்கு “பலம்” தேவை: உரை, லிங்குகள், படிவ (form) பிழைகள், செயலில் இருக்கும் தாப்கள் (active tabs), தேர்ந்தெடுக்கப்பட்ட ஃபில்டர்கள் (selected filters), முதன்மை பட்டன்கள் (primary buttons). சிஸ்டத்தில் அந்த கூறுகளுக்கு மிகவும் தெளிவான நிறங்களை ஒதுக்குங்கள்.

மேலும் focus states-ஐ மறக்க வேண்டாம். கீபோர்டு பயன்படுத்தும் பயனர்கள் பக்கத்தில் அவர்கள் எங்கே இருக்கிறார்கள் என்பதை பார்க்க வேண்டும். நீல பட்டனில் ஒரு சற்றே வேறுபட்ட நீல focus ring வைத்தால், அது போதாது. அது தெரியும்படி செய்யுங்கள். இன்னும் அழகாகவும் தோன்றலாம்.

மக்கள் அவற்றை வேகமாக ஒப்பிடும் வகையில் நிலைகளை (states) வடிவமைக்குங்கள்

பல அணுகல் பிரச்சினைகள் பக்கத்தில் states இருக்கும்போது உருவாகும்: தேர்ந்தெடுக்கப்பட்டது (selected) vs தேர்ந்தெடுக்கப்படாதது (unselected), கிடைக்கிறது (available) vs விற்றுத் தீர்ந்தது (sold out), பிழை (error) vs வெற்றி (success), தற்போதைய படி (current step) vs வரவிருக்கும் படி (upcoming step). இந்த states வெறும் சிவப்பு/பச்சை அல்லது நீலம்/ஊதா மட்டுமே வேறுபட்டால், சில பயனர்கள் அந்த வேறுபாட்டை தவறவிடலாம்.

விற்பனை பக்கத்தில், ஒரு பொருள் “sold out” என்றால் அது சாம்பல் நிறத் தோற்ற overlay மட்டும் கொண்டிருக்கக் கூடாது. “Sold out” என்று எழுதப்பட்ட வார்த்தைகளைச் சேருங்கள். பட்டனை “Notify me” என்று மாற்றுங்கள் அல்லது அதை தெளிவான லேபல் கொண்டு முடக்குங்கள். ஒருவேளை சாய்வுக் கோடு (diagonal) pattern பயன்படுத்தலாம் அல்லது படத்தின் (image) opacity-ஐ குறைக்கலாம்; ஆனால் அதில் நின்றுவிட வேண்டாம். விற்பனை டேக்குகளுக்கும் இதேதே. 25% தள்ளுபடி ஒரு துணிவான (bold) லேபல் மற்றும் இடத்தைக் கொண்டிருக்கலாம்; வெறும் சூடான நிறம் (warm color) மட்டுமே போதாது.

காம்பினேஷன்களை தேர்வு செய்யும்போது விரைவான கூடுதல் சோதனை வேண்டுமானால், ஒரு color blindness contrast checker எந்த ஒருவருக்கு சரியாகத் தெரிந்தாலும் மற்றவர்களுக்கு சிதறி விடும் ஜோடிகளை கண்டுபிடிக்க உதவும்.

சோர்ந்த பார்வையாளர் போல பக்கத்தைப் பாருங்கள்

நிறங்களை தேர்வு செய்த பிறகு, சரியான வடிவமைப்பு கோப்பிலிருந்து ஒரு படி பின்வாங்குங்கள். போனில் பக்கத்தைத் திறந்து பாருங்கள். திரையைச் சற்றே மங்கலாக்குங்கள். வேகமாக ஸ்க்ரோல் செய்யுங்கள். கொஞ்சம் சுருக்கிப் பாருங்கள்—உண்மையாகவே. முதலில் என்ன தெரிகிறது, என்ன மறைகிறது, மற்றும் முக்கிய செயல்பாடு இன்னும் தெளிவாக இருக்கிறதா என்று கேளுங்கள்.

கோடை விற்பனை எடுத்துக்காட்டில், பார்வையாளர் அந்த பக்கத்தில் வந்து உடனே சலுகையை புரிந்துகொள்ள வேண்டும்; பொருள் கார்டுகளை ஸ்கேன் செய்ய வேண்டும்; வரையறுக்கப்பட்ட ஸ்டாக்கை கவனிக்க வேண்டும்; உங்கள் நிறத் தொகுப்பை “டிகோட்” செய்யாமல் ஷாப்பிங் பட்டனை கண்டுபிடிக்க வேண்டும். இதை அவர்களால் செய்ய முடிந்தால், இந்த பக்கம் நிறக் குறைபாடு உள்ளவர்களுக்கு மட்டுமல்ல—கவனச்சிதறல் உள்ளவர்கள், அவசரத்தில் இருப்பவர்கள், வெளியே இருக்கும் போது பார்க்கிறவர்கள், வயதானவர்களுக்கான பார்வை மாற்றங்கள் உள்ளவர்கள், பழைய சாதனங்களைப் பயன்படுத்துகிறவர்கள், அல்லது பக்கத்துக்கு முழு கவனத்தையும் தராதவர்கள் அனைவருக்கும் கூட சிறந்தது.

நிறக்குறைபாடு உள்ளவர்களுக்கு ஏற்ற வடிவமைப்பில் இருக்கும் அமைதியான வெற்றிதான் இது. மூலையில் இருக்கும் ஒரு சிறிய ஓர்சுற்று (tiny edge case)க்காக நீங்கள் வடிவமைப்பது இல்லை. நீங்கள் காட்சி மொழியை மேலும் உறுதியாக்குகிறீர்கள். குறைவான யூகங்கள். குறைவான சிக்னல்கள் தவறுவது. இன்னும் பிரகாசமான, பருவத்திற்கேற்ற, அழகான வேலைக்காக போதுமான இடம் இருக்கும்.