మీరు ఎండ్పాయింట్ను ఆప్టిమైజ్ చేశారు. మీ resend-email API అర సెకను కంటే తక్కువ సమయంలో స్పందిస్తుంది. అయినప్పటికీ, లింక్ అసలు రాలేదని చెబుతూ వినియోగదారులు ఇంకా సపోర్ట్ టికెట్లు తెరుస్తున్నారు. వారు రెండుసార్లు క్లిక్ చేస్తారు. ఇన్బాక్స్ను తనిఖీ చేయకముందే వారు ఆ ప్రక్రియను వదిలేస్తారు. ఏదో లోపం ఉన్నట్లు అనిపిస్తుంది.
ఈ అసమతుల్యత దాదాపు ఎప్పుడూ ఇంటర్ఫేస్లోనే ఉంటుంది, ఇన్ఫ్రాస్ట్రక్చర్లో కాదు. బ్యాకెండ్ 400 మిల్లీసెకన్లలో 200 OKను తిరిగి ఇవ్వగలదు, కానీ ఫ్రంటెండ్ ఒక జంపింగ్ లేఅవుట్ మరియు ఫ్లాషింగ్ బ్యానర్తో స్పందిస్తే, వినియోగదారుడు ఏదో విఫలమైందని భావిస్తారు. ఒక వ్యక్తి బటన్ను క్లిక్ చేసినప్పుడు స్క్రీన్ వారి కర్సర్ కింద కదిలితే, వారు ఫీడ్బ్యాక్ లూప్లు లేదా నెట్వర్క్ లాటెన్సీ గురించి ఆలోచించరు. యాప్ పాడైపోయిందని వారు అనుకుంటారు.
అసలు సమస్య చాలా అరుదుగా వేగం గురించి మాత్రమే ఉంటుంది
React టీమ్లు తరచుగా ఈమెయిల్ కన్ఫర్మేషన్ను ఒక సాధారణ స్టేట్ మెషీన్గా పరిగణిస్తాయి: idle, loading, success, error. కాంపోనెంట్ ఒక mutationను ఫైర్ చేస్తుంది, isLoadingను trueగా సెట్ చేస్తుంది, ఆపై promise రిజాల్వ్ అయినప్పుడు ఒక మెసేజ్ను మారుస్తుంది. ఆ మార్పు (swap) జరిగినప్పుడే అసలు నష్టం జరుగుతుంది. బ్రౌజర్ లేఅవుట్ను తిరిగి లెక్కిస్తుంది, ప్రభావిత ప్రాంతాన్ని రీపెయింట్ చేస్తుంది మరియు కొన్నిసార్లు మొత్తం కార్డ్ లేదా పేజీని రీఫ్లో చేస్తుంది. వినియోగదారుడు నిశ్చలతను ఆశించిన చోట కదలికను చూస్తారు. వారికి, అప్లికేషన్ ఆ చర్యను కన్ఫర్మ్ చేయలేదు, అది వికటించింది.
అందుకే టైమింగ్ కంటే అవగాహన (perception) ముఖ్యం. రెండు వందల మిల్లీసెకన్లు తీసుకునే అస్థిరమైన ఇంటర్ఫేస్ కంటే, ఐదు వందల మిల్లీసెకన్లు తీసుకునే స్థిరమైన ఇంటర్ఫేస్ వేగంగా మరియు సురక్షితంగా అనిపిస్తుంది. వినియోగదారులు లాటెన్సీని కొలవలేరు, కానీ వారు నమ్మకాన్ని కొలవగలరు. UI ఊగిసలాడినప్పుడు, రిక్వెస్ట్ కూడా దానితో పాటే తప్పుగా జరిగిందని వారు భావిస్తారు.
చెడు ఫీడ్బ్యాక్ నమ్మ
యాక్సెసిబిలిటీ కోసం role="status"ని aria-live="polite"తో కలిపి ఉపయోగించండి. మీ మార్కప్లో మొదటి రెండర్ (render) నుండే ఉండేలా ఒక లైవ్ రీజియన్ను సృష్టించండి. స్టేట్ మారినప్పుడు, React ఆ రీజియన్ లోపల ఉన్న టెక్స్ట్ నోడ్ను అప్డేట్ చేస్తుంది. స్క్రీన్ రీడర్లు కీబోర్డ్ ఫోకస్ను మార్చకుండా లేదా వినియోగదారుని ఇబ్బంది పెట్టకుండా ఆ మార్పును తెలియజేస్తాయి. సాధారణ కన్ఫర్మేషన్ల కోసం ఎప్పుడూ aria-live="assertive"ని ఉపయోగించకండి. ఇది అరుస్తున్నట్లుగా ఉంటుంది.
బటన్ను అన్మౌంట్ (unmount) చేయకండి. ఒక మెసేజ్ చూపించడానికి బటన్ను DOM నుండి తొలగించినప్పుడు, మీరు కీబోర్డ్ వినియోగదారులను అయోమయానికి గురిచేస్తారు. వారి ఫోకస్ మాయమవుతుంది. స్క్రీన్ రీడర్లు తెలియని మూలకాల (ancestors) పైకి చేరుకుంటాయి. దానికి బదులుగా, బటన్ను మౌంట్ చేసినట్లే ఉంచండి. aria-disabledతో దానిని డిసేబుల్ చేయండి, దాని లేబుల్ను "Sending..." లేదా "Sent," అని మార్చండి, లేదా కౌంట్డౌన్ టైమర్తో మార్చండి. ఎలిమెంట్ అక్కడే ఉంటుంది, కేవలం దాని స్టేట్ మాత్రమే మారుతుంది.
prefers-reduced-motionను గౌరవించండి. ప్రతి ఒక్కరికీ యానిమేషన్లు (celebration) అవసరం లేదు. ఏదైనా ట్రాన్సిషన్లను (transitions) మీడియా క్వెరీ (media query) లో ఉంచండి. వినియోగదారుడు తన ఆపరేటింగ్ సిస్టమ్ను మోషన్ను తగ్గించమని కోరితే, వారికి తక్షణ టెక్స్ట్ మార్పు లేదా స్వల్పమైన ఒపాసిటీ ఫేడ్ (opacity fade) ఇవ్వండి. బౌన్స్లు, స్పిన్లు లేదా స్లైడ్లు ఉండకూడదు. మోషన్ను తగ్గించడం అంటే అర్థాన్ని తగ్గించడం కాదు.
పనిచేసే ఒక స్థిరమైన పద్ధతి
ఉత్తమమైన పద్ధతి బోరింగ్గా ఉంటుంది, అదే దీని ముఖ్య ఉద్దేశ్యం.
మొదటి రెండర్ నుండే మెసేజ్ కోసం స్థలాన్ని కేటాయించండి. బటన్ కింద నేరుగా ఒక చిన్న, ఖాళీ కంటైనర్ను ఉంచండి. దానికి ఒక ఫిక్స్డ్ లేదా కనిష్ట ఎత్తును ఇవ్వండి, తద్వారా టెక్స్ట్ వచ్చినప్పుడు తదుపరి సెక్షన్ కిందకు నెట్టబడదు. గ్లోబల్ టోస్ట్ల (global toasts) కంటే ఫీడ్బ్యాక్ను బటన్కు దగ్గరగా ఉంచండి. టోస్ట్లు సిస్టమ్ మొత్తం వచ్చే ఎర్రర్లకు ఉపయోగపడతాయి, కానీ సాధారణ ఈమెయిల్ కన్ఫర్మేషన్ల కోసం అవి దృష్టిని మళ్లించి, కంటిని అటు ఇటు తిరిగేలా చేస్తాయి.
కనీస కదలికలను మాత్రమే ఉపయోగించండి. మీరు యానిమేట్ చేయాల్సి వస్తే, ట్రాన్సిషన్లను రెండు వందల మిల్లీసెకన్ల కంటే తక్కువగా ఉంచండి మరియు వాటిని ఒపాసిటీ లేదా స్వల్ప రంగు మార్పుకు మాత్రమే పరిమితం చేయండి. లేఅవుట్ రీకాల్క్యులేషన్ (layout recalculation) అవసరమయ్యేలా బ్లాక్-లెవల్ ఎలిమెంట్లను చేర్చడం లేదా తొలగించడం చేయకండి. బటన్ లోపల లోడింగ్ స్టేట్ను చూపించాలనుకుంటే, సాధారణ టెక్స్ట్ మార్పు లేదా స్టాటిక్ ఐకాన్ను ఉపయోగించండి. బటన్ను స్కేల్ చేయవద్దు, దాన్ని ఊపవద్దు (shake) మరియు స్క్రీన్ను ఫ్లాష్ చేయవద్దు.
సక్సెస్ స్టేట్ వచ్చినప్పుడు, ఒక చిన్న, స్థిరమైన హింట్ను కనిపించేలా ఉంచండి. "Check your inbox" అనేది సరిపోతుంది. మూడు సెకన్ల తర్వాత దానిని ఆటోమేటిక్గా తొలగించవద్దు. తప్పుడు సమయంలో వేరే వైపు చూసిన వినియోగదారుడు, ఏం జరిగిందో అని ఆలోచించాల్సిన అవసరం ఉండకూడదు.
ఇది నిజంగా సమయాన్ని ఎలా ఆదా చేస్తుంది
మీరు ఈ చిన్న వివరాలను సరిదిద్దినప్పుడు, మీ ఇన్ఫ్రాస్ట్రక్చర్ బడ్జెట్తో సంబంధం లేని నిజమైన ఫలితాలను మీరు చూస్తారు.
ఒకే బటన్పై డబుల్ క్లిక్లు తగ్గుతాయి. డిసేబుల్డ్ స్టేట్ మరియు లోకల్ ఫీడ్బ్యాక్ వల్ల మొదటి క్లిక్ నమోదైందని స్పష్టంగా తెలుస్తుంది.
సెండ్ క్లిక్ చేసిన తర్వాత ఫ్లోను వదిలి వెళ్లే వినియోగదారులు తగ్గుతారు. ప్రశాంతమైన సంకేతాలు సిస్టమ్ పనిచేస్తోందని మెదడుకు తెలియజేస్తాయి, కాబట్టి వినియోగదారులు వేచి ఉంటారు.
ఈమెయిల్ అందలేదని ఫిర్యాదు చేసే సపోర్ట్ టికెట్లు తగ్గుతాయి, నిజానికి అవి అందే ఉంటాయి. అటువంటి టికెట్లు మెయిల్ మిస్ అవ్వడం వల్ల కాదు, ఇంటర్ఫేస్ పానిక్ (interface panic) వల్ల వస్తాయి.
వేగవంతమైన పనితీరు అనుభూతి. ఒకే విధమైన లేటెన్సీ (latency) ఉన్నప్పటికీ, అస్తవ్యస్తంగా ఉన్న UI కంటే స్థిరమైన UI ఎప్పుడూ వేగంగా అనిపిస్తుంది.
దీనిని ట్రాక్ చేయడానికి మీకు సంక్లిష్టమైన సాధనాలు అవసరం లేదు. డూప్లికేట్ రిక్వెస్ట్ల కోసం మీ ఎర్రర్ లాగ్లను గమనించండి. మీ సపోర్ట్ క్యూను గమనించండి. కన్ఫర్మేషన్ స్క్రీన్పై యూజర్ రిటెన్షన్ (retention) ద్వారా వినియోగదారుల స్థిరత్వాన్ని కొలవండి. ప్రశాంతమైన, ఊహించదగిన ఇంటర్ఫేస్ సిస్టమ్కు ఏం చేయాలో తెలుసని సంకేతం ఇస్తుంది. ఆ ఊహించదగిన స్వభావమే నమ్మకాన్ని పెంచుతుంది.