ఇంకా పాప్ అయ్యేలా, కలర్‌బ్లైండ్‌కు అనుకూలంగా పేజీలను డిజైన్ చేయడం

ఇంకా పాప్ అయ్యేలా, కలర్‌బ్లైండ్‌కు అనుకూలంగా పేజీలను డిజైన్ చేయడం

జూలై అంటే చాలా టీమ్‌లు ఒక్కసారిగా తమ సమ్మర్ సేల్ పేజీ, క్యాంప్ సైన్‌అప్, ఈవెంట్ ల్యాండింగ్ పేజీ లేదా బ్యాక్-టు-స్కూల్ ప్రమోని “నిన్ననే” లైవ్ చేయాల్సి ఉందని గుర్తుకు తెచ్చుకునే సమయం. డిజైనర్‌కి రంగులతో నిండిన ప్యాలెట్ ఉంది. మార్కెటర్‌కి అత్యవసరం కావాలి. బాస్‌కి బటన్ గట్టిగా అరిచేలా ఉండాలి. ఇంకా ఆ లోపలే, కొంతమంది సందర్శకులు ఎరుపు రంగు టెక్స్ట్‌ని ఆకుపచ్చ బ్యాడ్జ్‌పై చదవడానికి ప్రయత్నిస్తుండగా లేదా రంగు ఆధారంగా మాత్రమే “best value” ఏ ప్లాన్‌దో గుర్తించేందుకు ప్రయత్నిస్తారు.

కలర్‌బ్లైండ్‌కు అనుకూలమైన డిజైన్ అంటే అన్నీ బూడిదగా చేసి బోరింగ్‌గా చేయడం కాదు. యాక్సెసిబిలిటీ పని చుట్టూ ఉన్న ఒక మిత్ అది. అసలు విషయం ఏమిటంటే—సందేశాన్ని రంగుపైనే పూర్తిగా ఆధారపడకుండా చేయడం, మరియు టెక్స్ట్‌తో పాటు కీలక ఆకారాలకు కూడా నిజమైన స్క్రీన్‌లు, అలసిపోయిన కళ్లూ, ఎండలో కనిపించే పరిస్థితులు, నైట్ మోడ్, చవక మానిటర్లు, అవును, సాధారణంగా ఉండే కలర్ విజన్ లోపాలనూ తట్టుకునేంత కాంట్రాస్ట్ ఉండేలా చూసుకోవడం.

దీన్ని ప్రాక్టికల్‌గా ఎలా చేయాలో ఒక్క నిర్దిష్ట పరిస్థితి ద్వారా చూపిస్తాం: ఒక చిన్న వ్యాపారం సమ్మర్ సేల్ ల్యాండింగ్ పేజీ తయారు చేస్తోంది—హీరో బ్యానర్, ప్రొడక్ట్ కార్డులు, డిస్కౌంట్ లేబల్, ఒక ప్రధాన కాల్-టు-యాక్షన్ బటన్‌తో.

ప్యాలెట్‌కి ముందు సందేశంతోనే మొదలుపెట్టండి

రంగులు ఎంచుకునే ముందు, పేజీ ఏమి చెప్పాల్సి ఉందో రాయండి. డిజైన్ భాషలో కాదు. సాదా మాటల్లో.

మన ఉదాహరణలో పేజీ ఇలా చెప్పాలి: సమ్మర్ సేల్, 25% ఆఫ్, మూడు ఫీచర్డ్ ప్రొడక్ట్‌లు, అందులో ఒక ప్రొడక్ట్ దాదాపు సొల్డ్ అవుట్, మరియు సందర్శకుడు “Shop the sale” పై క్లిక్ చేయాలి. అంతే. డిజైన్ పూర్తి చేయాల్సిన పనులు ఇవే.

ఇది ముఖ్యం ఎందుకంటే రంగు చాలాసార్లు షార్ట్‌కట్‌లా జారిపోతుంది. ఎరుపు అంటే హెచ్చరిక. ఆకుపచ్చ అంటే మంచిది. నీలం అంటే ప్రశాంతం. పసుపు అంటే సేల్. ఓకే, కానీ సందేశం ఎవరో ఆ ఖచ్చితమైన హ్యూని చూస్తేనే పనిచేస్తే, అది చాలా బలహీనంగా ఉంటుంది. కలర్‌బ్లైండ్ షాపర్‌కు ఎరుపు బ్యాడ్జ్ ఎరుపుగా కనిపించకపోవచ్చు. లేదా ఆకుపచ్చ “available” లేబల్, నారింజ “limited stock” లేబల్—ఇవి దగ్గరగా ఉన్న సమానమైన బ్యాక్‌గ్రౌండ్‌లపై ఉంటే—వాటి తేడాను గమనించకపోవచ్చు.

కాబట్టి మొదటి స్టెప్ “accessibile colors ఎంచుకోండి” కాదు. “రంగు లేకుండానే సందేశం ఇప్పటికీ ఉండేలా చేయండి.” చిన్న షిఫ్ట్ే, కానీ అది మొత్తం పేజీని మార్చేస్తుంది.

చిన్న వాక్త్రూ: సేల్ ప్రొడక్ట్ కార్డ్‌ని సరిచేయడం

ఒక ప్రొడక్ట్ కార్డ్‌లో లేత ఆకుపచ్చ బ్యాక్‌గ్రౌండ్, ఎరుపు “Limited stock” లేబల్, డార్క్ గ్రేలో ప్రొడక్ట్ పేరు, ధర, అలాగే “Add to cart” అని చెప్పే ఆకుపచ్చ బటన్ ఉందనుకుందాం. టీమ్‌కి ఇది పండుగలా కనిపిస్తుంది. కానీ ఇది రిస్కీ.

1. స్టేటస్‌ని టెక్స్ట్‌గా స్పష్టంగా చదవగలిగేలా చేయండి. “Limited stock” అనే పదాలు కనిపించేలా ఉంచండి. వాటిని కేవలం ఎరుపు బిందువు లేదా ఎరుపు బోర్డర్‌తో మార్చేయకండి. ఐకాన్ ఉంటే, దాన్ని లేబల్‌తో జత చేయండి.
2. రంగు కాకుండా మరో సిగ్నల్ జోడించండి. “Limited stock” లేబల్‌ని పిల్ ఆకారంలో పెట్టండి, చిన్న క్లాక్ లేదా అలర్ట్ ఐకాన్ జోడించండి, లేదా డాష్డ్ అవుట్‌లైన్ వాడండి. రంగు కలిసిపోయినా, ఆ ఫార్మ్/ఆకారం ద్వారా “ఇది వేరే విషయం” అన్న సంకేతం రావాలి.
3. టెక్స్ట్‌ని బ్యాక్‌గ్రౌండ్‌తో చెక్ చేయండి. ప్రొడక్ట్ పేరు, ధర, బటన్ లేబల్‌కి బలమైన కాంట్రాస్ట్ అవసరం. చిన్న సేల్ లేబల్స్‌కి ఇంకా ఎక్కువ జాగ్రత్త అవసరం, ఎందుకంటే చిన్న టెక్స్ట్ త్వరగా మసకబారుతుంది.
4. బటన్ రంగుని స్టేటస్ రంగు నుంచి వేరు చేయండి. ఆకుపచ్చ అంటే “available” కూడా, “ఇక్కడ క్లిక్ చేయండి” కూడా అయితే పేజీకి నాయిస్ పెరుగుతుంది. ఒకే రకమైన బటన్ స్టైల్ వాడి, పదాలనే పని చేయనివ్వండి.
5. కార్డ్‌ని గ్రేస్కేల్‌లో టెస్ట్ చేయండి. ఇది వేగమైన రియాలిటీ చెక్. రంగు తీసేసాక కూడా లేబల్, ధర, బటన్ స్పష్టంగా వేరు పడితే, డిజైన్ సరైన దిశలో ఉంటుందని చెప్పొచ్చు.

ఇది చిన్న సవరణ, పెద్ద రీడిజైన్ కాదు. కార్డ్ ఇంకా సన్నీగా, బ్రాండెడ్‌గా అనిపించవచ్చు. అయితే ఒకేసారి అన్ని పనులూ రంగుని చేయమని అడగడం మాత్రం ఆగిపోతుంది.

కాంట్రాస్ట్‌ని కేవలం కంప్లయన్స్ పని కాదు—డిజైన్ మెటీరియల్‌లా వాడండి

కాంట్రాస్ట్ ఉన్నప్పుడు యాక్సెసిబుల్ పేజీలు పదునుగా, నమ్మకంగా కనిపిస్తాయి; లేదంటే అవి గందరగోళంగా మారిపోతాయి. కాంట్రాస్ట్ అంటే తెలుపుపై నలుపు రంగు టెక్స్ట్ మాత్రమే కాదు. ఫోర్‌గ్రౌండ్, బ్యాక్‌గ్రౌండ్ మధ్య సంబంధం; బటన్ టెక్స్ట్, బటన్ ఫిల్ మధ్య సంబంధం; లింక్ టెక్స్ట్, బాడీ కాపీ మధ్య సంబంధం; ఐకాన్‌లు, వాటి కంటైనర్; డిసేబుల్ స్టేట్స్, యాక్టివ్ స్టేట్స్—ఇవన్నీ కూడా.

ఒక సింపుల్ రూల్ ఆఫ్ థంబ్: ఇది క్లిక్ చేయడానికి, చదవడానికి, లేదా పోల్చడానికి అంత ముఖ్యమైతే—దాన్ని గట్టిగా కొడుతూ చూడకుండా, కేవలం హ్యూని ఆధారపడకుండా, అది స్పష్టంగా కనిపించాలి. ఇదే గుర్తుంచుకోవాల్సింది.

సాధారణ బాడీ టెక్స్ట్‌ కోసం డిజైనర్లు సాధారణంగా కనీసం 4.5:1 కాంట్రాస్ట్ రేషియో లక్ష్యంగా పెట్టుకుంటారు. పెద్ద టెక్స్ట్ తరచుగా 3:1 వద్ద కూడా పనిచేయొచ్చు, కానీ గందరగోళమైన నిజ ప్రపంచంలో మరింత బలంగా ఉండటం మంచిది. బటన్ బోర్డర్స్, ఫోకస్ అవుట్‌లైన్స్ లాంటి ఇంటర్‌ఫేస్ కంపోనెంట్స్‌కి కూడా గమనించడానికి సరిపోయేంత కాంట్రాస్ట్ అవసరం. ఈ సంఖ్యలు మంత్రాలు కావు, కానీ ఉపయోగపడే గార్డ్‌రైల్స్. ముఖ్యంగా బ్రాండ్ కలర్ అందంగా ఉన్నా కానీ బలహీనంగా ఉన్నప్పుడు.

కొంచెం సాధారణ ట్రాప్—పాస్టెల్‌ని పాస్టెల్‌పై పెట్టే డిజైన్. మాక్‌అప్‌లో అది ఎయిరీగా కనిపిస్తుంది. కానీ ఎవరో దాన్ని ఫోన్‌లో (లైట్ బయట/కాస్త తక్కువ బ్రైట్‌నెస్‌లో) ఓపెన్ చేసినప్పుడు, మొత్తం పేజీ దాదాపు చప్పుడు లేకుండా మాట్లాడుతున్నట్టే ఉంటుంది. క్రీమ్ బ్యానర్‌పై లేత పసుపు టెక్స్ట్, తెలుపు టెక్స్ట్‌తో లైట్ టీల్ బటన్‌లు, తెలుపు కార్డులపై సాఫ్ట్ పింక్ బ్యాడ్జ్‌లు—అన్నీ బాగానే ఉంటాయి, కానీ చదవలేనప్పుడు మాత్రం కాదు.

బ్రాండ్ కలర్స్‌ని అలాగే ఉంచండి—కానీ వాటికి మెరుగైన పనులు ఇవ్వండి

ఒక కలర్ కాంట్రాస్ట్‌లో ఫెయిల్ అవుతుందని భావించి మీరు మొత్తం బ్రాండ్ ప్యాలెట్‌ని వదిలేయాల్సిన అవసరం లేదు. సాధారణంగా మీరు పాత్రలు (roles) మార్చుకోవచ్చు. బలహీనమైన పసుపు రంగు టెక్స్ట్‌గా కాకుండా బ్యాక్‌గ్రౌండ్ వాష్‌గా పనిచేయొచ్చు. ప్రకాశవంతమైన నారింజ ఐకాన్‌లు లేదా యాక్సెంట్‌లకు సరిపోతుంది; అయితే ముదురు నారింజ బటన్ ఫిల్‌లను హ్యాండిల్ చేయగలదు. బ్రాండ్ ఆకుపచ్చ ఇలస్ట్రేషన్స్‌లో ఉండొచ్చు, కానీ ముఖ్యమైన విజయ సందేశానికి డార్క్ బోర్డర్, టెక్స్ట్ లేబల్, అలాగే ఐకాన్ కూడా ఇవ్వాలి.

లేయర్స్‌గా ఆలోచించండి. బ్యాక్‌గ్రౌండ్ రంగులు సాఫ్ట్‌గా ఉండొచ్చు. డెకరేటివ్ షేప్‌లు ప్లేఫుల్‌గా ఉండొచ్చు. కానీ ఫంక్షనల్ అంశాలకు బలం అవసరం: టెక్స్ట్, లింక్స్, ఫార్మ్ ఎర్రర్స్, యాక్టివ్ ట్యాబ్స్, సెలెక్ట్ అయిన ఫిల్టర్స్, ప్రైమరీ బటన్‌లు. సిస్టమ్‌లోని ఈ ఎలిమెంట్స్‌కి అత్యంత స్పష్టమైన రంగులను ఇవ్వండి.

ఫోకస్ స్టేట్స్‌ని మర్చిపోవద్దు. కీబోర్డ్ యూజర్లు పేజీలో తాము ఎక్కడ ఉన్నారో చూడాలి. ఒక ఫోకస్ రింగ్ కేవలం బ్లూ బటన్‌పై కొంచెం వేరే బ్లూ లాగా ఉంటే—అది సరిపోదు. కనిపించేలా చేయండి. అయినా అది బాగా కనిపించగలదు.

ప్రజలు వాటిని త్వరగా పోల్చుకునేలా స్టేట్స్‌ని డిజైన్ చేయండి

చాలా యాక్సెసిబిలిటీ సమస్యలు ఒక పేజీలో స్టేట్స్ ఉన్నప్పుడు కనిపిస్తాయి: సెలెక్ట్ అయ్యింది vs సెలెక్ట్ కాలేదు, available vs sold out, error vs success, ప్రస్తుత స్టెప్ vs రాబోయే స్టెప్. ఈ స్టేట్స్ కేవలం ఎరుపు/ఆకుపచ్చ లేదా నీలం/ఊదా తేడాతో మాత్రమే ఉంటే, కొంతమంది యూజర్లు ఆ తేడాని మిస్ చేస్తారు.

సేల్ పేజీకి వస్తే, సొల్డ్ అవుట్ అయిన ప్రొడక్ట్‌కి కేవలం గ్రేచిష్ ఇమేజ్ ఓవర్‌లే ఉండకూడదు. “Sold out.” అని మాటలు జోడించండి. బటన్‌ని “Notify me” గా మార్చండి లేదా క్లియర్ లేబల్‌తో దాన్ని డిసేబుల్ చేయండి. ఒక డయాగనల్ ప్యాటర్న్ వాడొచ్చు లేదా ఇమేజ్ ఓపాసిటీని తగ్గించొచ్చు, కానీ అక్కడే ఆపకండి. సేల్ ట్యాగ్‌లకు కూడా ఇదే. 25% డిస్కౌంట్‌కి కేవలం వెచ్చని రంగు కాకుండా, బోల్డ్ లేబల్ మరియు సరైన పొజిషన్ ఉండాలి.

కాంబినేషన్స్ ఎంచుకునే సమయంలో త్వరగా అదనపు చెక్ కావాలంటే, ఒక color blindness contrast checker వేర్వేరు వారికి బాగా కనిపించినా, మరికొందరికి కూలిపోయే జోడింపులను గుర్తించడంలో సహాయపడుతుంది.

అలసిపోయిన సందర్శకుడు ఎలా చూస్తాడో అలాగే పేజీని చూడండి

రంగులు ఎంచుకున్న తర్వాత, పర్ఫెక్ట్ డిజైన్ ఫైల్ నుంచి కాస్త వెనక్కి అడుగు వేయండి. ఫోన్‌లో పేజీని చూడండి. స్క్రీన్‌ని డిమ్ చేయండి. వేగంగా స్క్రోల్ చేయండి. కొంచెం ముద్దుగా (సీరియస్‌గా) గుసగుసగా చూసి చూడండి. మొదట ఏది ఎక్కువగా కనిపిస్తోంది, ఏది మాయమవుతోంది, ప్రధాన యాక్షన్ ఇప్పటికీ స్పష్టంగానే ఉందా అని అడగండి.

సమ్మర్ సేల్ ఉదాహరణలో, సందర్శకుడు పేజీకి వచ్చిన వెంటనే ఆ ఆఫర్‌ని అర్థం చేసుకోవాలి, ప్రొడక్ట్ కార్డులను స్కాన్ చేయాలి, limited stock గమనించాలి, మీ ప్యాలెట్‌ని డీకోడ్ చేయకుండా షాపింగ్ బటన్‌ని కనుగొనాలి. వారు అది చేయగలిగితే, పేజీ కేవలం కలర్‌బ్లైండ్ యూజర్లకే కాదు—పూర్తిగా డిస్ట్రాక్ట్ అయ్యే, తొందరగా ఉన్న, బయట ఉన్న, వయసు పెరుగుతున్న, పాత డివైస్ ఉపయోగిస్తున్న, లేదా పేజీకి పూర్తి శ్రద్ధ ఇవ్వలేని ప్రతి ఒక్కరికీ కూడా మెరుగ్గా ఉంటుంది.

కలర్‌బ్లైండ్‌కు అనుకూలమైన డిజైన్‌లో ఇదే నిశ్శబ్ద విజయం. మూలలో ఉన్న చిన్న ఎడ్జ్ కేస్ కోసం మీరు డిజైన్ చేయడం కాదు. మీరు విజువల్ భాషని మరింత బలంగా చేయుతున్నారు. తక్కువ అంచనాలు. తక్కువగా సిగ్నల్స్ మిస్ అవడం. ఇంకా ప్రకాశవంతమైన, సీజనల్, చక్కగా కనిపించే పని కోసం కూడా చాలానే స్థలం ఉంటుంది.