Guidelines
Status Display
நிலை காட்சி வடிவமைப்பு
Design guidelines and interactive UI examples for every error state, HTTP status code, offline condition, empty state, and maintenance screen in a digital product.
வலைத்தள பிழை நிலைகள் (404, 500 முதலியன), ஆஃப்லைன் திரைகள், காலி நிலைகள் மற்றும் பராமரிப்பு பக்கங்களுக்கான வடிவமைப்பு வழிகாட்டுதல்கள் மற்றும் இடைமுக எடுத்துக்காட்டுகள்.
1. நிலை பக்க ஆய்வாளர்
HTTP பிழைகள் (404, 500) முதல் காலி நிலைகள் மற்றும் ஆஃப்லைன் திரைகள் வரை — ஒவ்வொரு நிலையும் கவனமாக வடிவமைக்கப்பட்ட UI பதிலைப் பெற வேண்டும். கீழே ஒரு நிலை வகையை தேர்ந்தெடுக்கவும்.
திட்டமிட்ட பிழை வடிவமைப்பு ஏன் முக்கியம்?
- நம்பிக்கை பாதுகாப்பு: நன்கு வடிவமைக்கப்பட்ட பிழை பக்கம் எதோ தகராறு ஏற்பட்டாலும் பயனரின் நம்பிக்கையை பாதுகாக்கிறது.
- மீட்பு வாய்ப்பு: தெளிவான CTA பொத்தான்கள் (மீண்டும் முயற்சி, முகப்புக்கு செல்) பயன்படுத்துவோர் தளத்தை விட்டு வெளியேறுவதை கணிசமாக குறைக்கும்.
- சமத்துவம்:தமிழகத்தில் முதல் தலைமுறை இணைய பயனர்களுக்கு "503" என்ன என்று தெரியாது — தமிழ் மொழியில் எளிமையான செய்திகள் கட்டாயம்.
2. நிலை பக்கத்தின் அமைப்பு
ஒவ்வொரு நிலை பக்கமும் இந்த எட்டு கட்டமைப்பு கூறுகளை கொண்டிருக்க வேண்டும். ஒரு கூறு இல்லாமலும் பயனர் அனுபவம் பாதிக்கப்படும்.
3. செய்ய வேண்டியவை & தவிர்க்க வேண்டியவை
மிகவும் பொதுவான தவறு என்னவென்றால் பயனருக்கு தொழில்நுட்ப பிழை செய்திகளை காட்டுவது. கீழே "தொழில்நுட்ப குப்பை" (இடது) மற்றும் மனித-மையமான அணுகுமுறையை (வலது) ஒப்பிடுங்கள்:
முக்கிய கொள்கைகள்
- ஸ்டாக் ட்ரேஸ் காட்டவேண்டாம்: இவை டெவலப்பர்களுக்கு மட்டுமே — பயனர்களுக்கு கவலை மற்றும் பாதுகாப்பு அபாயம் ஆகும்.
- எண்களை மட்டுமல்ல, ஐகான்களை பயன்படுத்துங்கள்: ஒரு ஐகான் HTTP அறிவு இல்லாமலே பிழை வகையை தெரிவிக்கும்.
- மீட்கக்கூடியதையும் மீட்க முடியாததையும் வேறுபடுத்துங்கள்:
404மீட்கக்கூடியது,500காத்திருக்க வேண்டியது. - தமிழ் மொழியில் செய்திகள்: அரசு சேவைகளுக்கு தமிழ் பிழை செய்திகள் சமம் அல்லது முன்னுரிமை பாதை ஆக இருக்க வேண்டும்.
- W3C உணர்வுசார் பண்புகள் (WCAG 1.3.3): பிழையைக் குறிக்க நிறத்தையோ (எ.கா. "சிவப்பு நிறம்") வடிவத்தையோ மட்டுமே நம்பியிருக்கக் கூடாது. நிறக்குருடு உள்ளவர்களுக்கும் திரை வாசிப்பான்களுக்கும் புரியும் வகையில், நிறத்தோடு சேர்த்து எழுத்துகளையும் ஐகான்களையும் (Icons) கட்டாயம் பயன்படுத்த வேண்டும்.
4. HTTP நிலைக் குறியீடு குறிப்பு
பொதுவான நிலைக் குறியீடுகள் மற்றும் அவற்றின் பயனர் பக்க வடிவமைப்பு தாக்கங்கள்:
| குறியீடு | பெயர் | பயனர் தலைப்பு | முதன்மை செயல் |
|---|---|---|---|
400 | மோசமான கோரிக்கை | ஏதோ சரியில்லை | உள்ளீட்டை சரிபார்க்கவும் |
401 | அங்கீகாரமில்லை | உள்நுழைவு தேவை | உள்நுழை |
403 | தடைசெய்யப்பட்டது | அணுகல் இல்லை | அணுகல் கோரு |
404 | கிடைக்கவில்லை | பக்கம் இல்லை | முகப்புக்கு செல் |
408 | காலாவதி | கோரிக்கை காலாவதியானது | மீண்டும் முயற்சி |
429 | அதிக கோரிக்கை | வரம்பை மீறினீர்கள் | காத்திருங்கள் |
500 | சர்வர் பிழை | ஏதோ தவறானது | புதுப்பி / புகாரளி |
502 | மோசமான நுழைவாயில் | இணைப்பு சிக்கல் | மீண்டும் முயற்சி |
503 | சேவை இல்லை | பராமரிப்பில் உள்ளது | நிலையை சரிபார் |
504 | தாமதம் | மிகவும் நீண்டது | மீண்டும் முயற்சி |