Command Palette

Search for a command to run...

UX Laws & Principles

UX விதிகள் & கோட்பாடுகள்

The complete collection of User Experience (UX) laws, psychological principles, and heuristics.

பயனர் அனுபவ (UX) விதிகள், உளவியல் கோட்பாடுகள் மற்றும் வழிகாட்டுதல்களின் முழுமையான தொகுப்பு.

தொடர்பு
பிட்ஸ் விதி

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

தவறு

சிறிய இலக்கு, வெகு தொலைவில்.

தட்டல்கள்: 0

சரி

தட்டல்கள்: 0

ஏன் முக்கியம்:

பெரிய மற்றும் அருகில் உள்ள இலக்குகளை கிளிக் செய்வது எளிது மற்றும் வேகமானது. மொபைல் திரைகளில் பொத்தான்களின் அளவு மற்றும் மெனு அமைப்புகளை வடிவமைக்க இது மிகவும் அவசியம்.

எடுத்துக்காட்டு:

மூலையில் இருக்கும் சிறிய பொத்தான்களைத் தொட உங்கள் கட்டைவிரல் மிகவும் சிரமப்படும்.

சரிபார்ப்பு பட்டியல்:

  • தொடு இலக்குகள் குறைந்தபட்சம் 44×44px (iOS) அல்லது 48×48px (Android) அளவில் இருப்பதை உறுதி செய்யவும்
  • முதன்மையான செயல்களுக்கு இரண்டாம் நிலை செயல்களை விடப் பெரிய பொத்தான்களைப் பயன்படுத்தவும்
  • அடிக்கடி பயன்படுத்தப்படும் பொத்தான்களை விரல்கள் எளிதில் தொடும் திரையின் ஓரங்களில் வைக்கவும்
  • தொடர்புடைய கட்டுப்பாடுகளை ஒன்றுக்கொன்று நெருக்கமாகக் குழுவாக்கவும்
  • தவறான கிளிக்குகளைத் தவிர்க்க முக்கியமான செயல்களுக்கு இடையே போதிய இடைவெளி விடவும்
அறிவாற்றல்
ஹிக் விதி

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

சிக்கலானது
எளிமையானது

தென் மாநிலங்கள்

மேலும் 8 மாநிலங்கள் வகைப்படுத்தப்பட்டுள்ளன

ஏன் முக்கியம்:

தேர்வுகளை குறைப்பது பயனர்கள் விரைவாக முடிவெடுக்க உதவுகிறது. வழிசெலுத்தல் (Navigation), மெனுக்கள் மற்றும் படிவங்களை (Forms) எளிமைப்படுத்த இது முக்கியம்.

எடுத்துக்காட்டு:

ஒவ்வொரு கூடுதல் தேர்வும் பயனரின் முடிவெடுக்கும் வேகத்தை மெதுவாக்குகிறது.

சரிபார்ப்பு பட்டியல்:

  • முதன்மை வழிசெலுத்தல் மெனுவில் 5-7 தேர்வுகளுக்கு மேல் வைக்க வேண்டாம்
  • பெரிய படிவங்களை (Forms) பல எளிய படிகளாகப் பிரிக்கவும்
  • மேம்பட்ட தேர்வுகளைத் தேவைப்படும்போது மட்டும் காட்டும் முறையைப் பயன்படுத்தவும்
  • சிறந்த இயல்புநிலைத் தேர்வுகளையும் பரிந்துரைக்கப்பட்ட தேர்வுகளையும் வழங்கவும்
  • பெரிய அளவிலான தேர்வுகளை முறையான பிரிவுகளாக வகைப்படுத்தவும்
அறிவாற்றல்
மில்லர் விதி

ஒரு சாதாரண மனிதனால் ஒரே நேரத்தில் 7 (±2) விஷயங்களை மட்டுமே நினைவில் வைத்துக்கொள்ள முடியும்.

நினைவில் கொள்வது கடினம்
9876543210
பகுத்தல் (Chunking)
987 654 3210

ஏன் முக்கியம்:

தகவல்களை சிறிய பகுதிகளாக (Chunking) பிரிப்பது, பயனர்கள் அதை எளிதில் புரிந்துகொள்ளவும் நினைவில் கொள்ளவும் உதவுகிறது. பயனர்களைப் பல தகவல்களை நினைவில் வைத்துக்கொள்ளக் கட்டாயப்படுத்த வேண்டாம்.

எடுத்துக்காட்டு:

பயனர்களை எதையும் நினைவில் வைக்கக் கட்டாயப்படுத்தாதீர்கள்; அவர்கள் செய்ய மாட்டார்கள்.

சரிபார்ப்பு பட்டியல்:

  • தொடர்புடைய விஷயங்களை 5 முதல் 9 கூறுகள் கொண்ட குழுக்களாகப் பிரிக்கவும்
  • தகவல்களை வரிசைப்படுத்தச் சிறந்த காட்சி அமைப்பைப் பயன்படுத்தவும்
  • நீண்ட பட்டியல்களை முறையான பிரிவுகளாகவோ அல்லது பக்கங்களாகவோ பிரிக்கவும்
  • முக்கிய அளவீடுகளை 3-5 கொண்ட குழுக்களாகக் காட்டவும்
  • வழிசெலுத்தல் பாதையைத் தெளிவாகக் காட்ட பிரெட்க்ரம்ப்ஸ் (Breadcrumbs) பயன்படுத்தவும்
தொடர்பு
டோஹெர்டி வரம்பு

கணினியும் அதன் பயனர்களும் ஒருவருக்கொருவர் காத்திருக்கத் தேவையில்லாத வேகத்தில் தொடர்பு கொள்ளும்போது உற்பத்தித்திறன் உயர்கிறது.

சோதனை வேகம் (மில்லிசெகண்ட்)

ஏன் முக்கியம்:

கணினியும் பயனரும் ஒருவருக்கொருவர் காத்திருக்கத் தேவையில்லாத வேகத்தில் தொடர்பு கொள்ளும்போது உற்பத்தித்திறன் உயர்கிறது. பயனர்களின் கவனத்தை ஈர்க்க இடைமுகங்கள் 400 மில்லிசெகண்டிற்குள் பதிலளிக்க வேண்டும்.

எடுத்துக்காட்டு:

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

சரிபார்ப்பு பட்டியல்:

  • பயனரின் செயல்களுக்கு 100 மில்லிசெகண்டிற்குள் உடனடி எதிர்வினை காட்டவும்
  • 1 வினாடிக்கு மேல் எடுக்கும் செயல்களுக்கு லோடிங் குறிகாட்டிகளைக் காட்டவும்
  • முடிவு வருவதற்கு முன்பே வெற்றிகரமாக முடிந்தது போல் காட்டும் முறையை (Optimistic UI) பயன்படுத்தவும்
  • ஒவ்வொரு கிளிக்கிற்கும் உடனடி காட்சிப் பதிலை வழங்கவும்
  • அனிமேஷன்களை 300 மில்லிசெகண்டிற்குள் வைத்துக்கொள்ளவும்
அறிவாற்றல்
உச்ச-முடிவு விதி

மக்கள் ஒரு அனுபவத்தை அதன் உச்சக்கட்ட நிலை மற்றும் இறுதி நிலையை வைத்தே மதிப்பிடுகிறார்கள்.

இரண்டு வெவ்வேறு முன்பதிவு முறைகளை சோதிக்கவும்:

ஏன் முக்கியம்:

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

எடுத்துக்காட்டு:

இறுதி முடிவு ஒரு வெற்றியாக உணர்த்தப்பட்டால், பயனர்கள் நடுவில் உள்ள குளறுபடிகளை எளிதாக மன்னித்து விடுவார்கள்.

சரிபார்ப்பு பட்டியல்:

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

ஒரு வரிசையில் உள்ள முதல் மற்றும் இறுதிப் பொருட்களை மட்டுமே பயனர்கள் நன்கு நினைவில் வைத்திருப்பார்கள்.

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

ஏன் முக்கியம்:

பட்டியலின் தொடக்கத்திலோ அல்லது முடிவிலோ முக்கிய செயல்களையும் தகவல்களையும் வைக்கவும். இது வழிசெலுத்தல், மெனுக்கள் மற்றும் அம்சப் பட்டியல்களுக்கு இன்றியமையாதது.

எடுத்துக்காட்டு:

உங்கள் பட்டியலின் நடுப்பகுதி கண்ணுக்குத் தெரியாத மறைமுக மண்டலமாகும்.

சரிபார்ப்பு பட்டியல்:

  • முக்கியமான செயல்களைப் பட்டியலின் தொடக்கத்திலோ அல்லது முடிவிலோ வைக்கவும்
  • முக்கியத் தகவல்களைப் பக்கத்தின் மேல் அல்லது கீழ் பகுதியில் வைக்கவும்
  • முக்கியமான மெனு உருப்படிகளை முதலாவதாகவோ அல்லது கடைசியாகவோ வைக்கவும்
  • குறைந்த முக்கியத்துவம் வாய்ந்த தகவல்களுக்குப் பட்டியலின் நடுப்பகுதியைப் பயன்படுத்தவும்
  • பயனர்களின் வாசிப்பு முறைகளைக் (F-வடிவம், Z-வடிவம்) கருத்தில் கொள்ளவும்
தகவல் கட்டமைப்பு
டெஸ்லர் விதி (சிக்கல் பாதுகாப்பு விதி)

எந்தவொரு அமைப்பிலும், குறைக்க முடியாத ஒரு குறிப்பிட்ட அளவு சிக்கல் எப்போதும் இருக்கும்.

சிக்கல் யாருக்கு?

பயனர் அனைத்தையும் டைப் செய்ய வேண்டும்:

ஏன் முக்கியம்:

சிக்கலை ஒரு இடத்திலிருந்து மற்றொரு இடத்திற்கு மாற்றலாமே தவிர முற்றிலும் நீக்க முடியாது. சிக்கல் எங்கு இருக்க வேண்டும் - பயனர் இடைமுகத்திலா அல்லது கணினி அமைப்பிலா என்பதை வடிவமைப்பாளர்கள் தீர்மானிக்க வேண்டும்.

எடுத்துக்காட்டு:

சிக்கல் ஒருபோதும் மறைந்துவிடாது - அது பயனருக்கோ அல்லது மென்பொருள் உருவாக்குநருக்கோ மட்டுமே மாற்றப்படும்.

சரிபார்ப்பு பட்டியல்:

  • உங்கள் தயாரிப்பில் குறைக்கவே முடியாத அடிப்படைச் சிக்கல்களைக் கண்டறியவும்
  • சிக்கலை எங்கு வைக்க வேண்டும் - பயனர் இடைமுகத்திலா அல்லது கணினி அமைப்பிலா என்பதைத் தீர்மானிக்கவும்
  • எளிய இயல்புநிலைத் தேர்வுகளுடன் மேம்பட்ட விருப்பங்களையும் வழங்கவும்
  • தேவைப்படும்போது மட்டும் சிக்கலான அம்சங்களைக் காட்டும் முறையைப் பயன்படுத்தவும்
  • சிக்கலான அம்சங்களை முழுமையாக ஆவணப்படுத்தவும்
தகவல் கட்டமைப்பு
பரேட்டோ கொள்கை (80/20 விதி)

தோராயமாக 80% விளைவுகள் 20% காரணங்களிலிருந்தே வருகின்றன.

செயல்பாடுகளைக் கிளிக் செய்து சோதிக்கவும் (மொத்த கிளிக்குகளில் 80% முக்கிய 20% கூறுகளையே சேரும்):

ஏன் முக்கியம்:

80% மதிப்பை வழங்கும் 20% அம்சங்களின் வடிவமைப்பில் அதிக கவனம் செலுத்துங்கள். அம்சங்களை முன்னுரிமைப்படுத்துவதற்கும் எளிய தயாரிப்பு உருவாக்கத்திற்கும் (MVP) இது இன்றியமையாதது.

எடுத்துக்காட்டு:

உங்கள் 20% முக்கிய அம்சங்கள் தான் 80% வேலைகளைச் செய்கின்றன. அங்கு கவனம் செலுத்துங்கள்.

சரிபார்ப்பு பட்டியல்:

  • அதிகம் பயன்படுத்தப்படும் 20% முக்கிய அம்சங்களைக் கண்டறியவும்
  • இந்த முக்கிய அம்சங்களை மெனுவிலும் தள அமைப்பிலும் முன்னுரிமைப்படுத்தவும்
  • அடிக்கடி செய்யப்படும் செயல்களை மிக எளிதாக அணுகும் வகையில் அமைக்கவும்
  • அரிதாகப் பயன்படுத்தப்படும் அம்சங்களை எளிமையாக்கவும் அல்லது மறைக்கவும்
  • உங்கள் கற்பிதங்களைச் சரிபார்க்கப் பயன்பாட்டுத் தரவுகளைப் பகுப்பாய்வு செய்யவும்
காட்சி வடிவமைப்பு
அழகியல்-பயன்பாட்டு விளைவு

அழகாக இருக்கும் வடிவமைப்புகளை பயனர்கள் எளிதாகப் பயன்படுத்தக்கூடியவையாகக் கருதுகிறார்கள்.

வடிவமைப்பு ஒப்பீடு

LOGIN FORM

ஏன் முக்கியம்:

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

எடுத்துக்காட்டு:

அழகு என்பது சிறிய பிழைகளுக்கான மன்னிப்பை உங்களுக்கு வாங்கித் தரும்.

சரிபார்ப்பு பட்டியல்:

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

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

தனிப்படுத்துதல் (Von Restorff)

அடிப்படைத் திட்டம்

₹0

எப்போதும் இலவசம்

  • 5 திட்டங்கள்
  • 1 GB சேமிப்பு
  • மின்னஞ்சல் ஆதரவு

முன்னோடித் திட்டம்

பிரபலம்!

₹499

மாதம் / பயனர்

  • வரம்பற்ற திட்டங்கள்
  • 100 GB சேமிப்பு
  • முன்னுரிமை ஆதரவு

வணிகத் திட்டம்

₹1,999

மாதம் / குழு

  • தனிப்பயன் ஒருங்கிணைப்பு
  • வரம்பற்ற சேமிப்பு
  • 24/7 ஆதரவு

ஏன் முக்கியம்:

முக்கிய செயல்கள் அல்லது தகவல்கள் மீது கவனத்தை ஈர்க்க காட்சிக் கட்டமைப்பில் தனித்துவத்தைப் பயன்படுத்தவும். இது அழைப்புகள் (CTA), எச்சரிக்கைகள் மற்றும் சிறப்பம்சங்களுக்கு முக்கியமானது.

எடுத்துக்காட்டு:

எல்லாமே தடிமனாகவோ தனித்துவமாகவோ இருந்தால், எதுவும் தனித்துத் தெரியாது.

சரிபார்ப்பு பட்டியல்:

  • முதன்மையான அழைப்புப் பொத்தான்களை (CTA) மற்றவற்றிலிருந்து தனித்துக் காட்டவும்
  • முக்கிய கூறுகளை முன்னிலைப்படுத்த நிறம், அளவு அல்லது நிலையைப் பயன்படுத்தவும்
  • அளவுக்கு அதிகமாக முன்னிலைப்படுத்த வேண்டாம் (எல்லாமே தனித்துத் தெரிந்தால் எதுவும் தெரியாது)
  • வண்ண வேறுபாடு அணுகல்தன்மைக்கான மாறுபாட்டு விகிதங்களைப் (Contrast ratio) பூர்த்தி செய்வதை உறுதிசெய்யவும்
  • முக்கிய கூறுகள் சூழலுக்குள் தனித்துத் தெரிவதைச் சோதித்துப் பார்க்கவும்
தொடர்பு
பாஸ்டல் விதி (வலுவான கொள்கை)

நீங்கள் ஏற்றுக்கொள்வதில் தாராளமாகவும், நீங்கள் அனுப்புவதில் கட்டுக்கோப்பாகவும் இருங்கள்.

உள்ளீட்டுப் பொருத்தம் (Postel's Law)

ஏன் முக்கியம்:

பயனர் உள்ளீடு செய்யும் பிழைகளை மன்னித்து, பல வடிவங்களை ஏற்றுக்கொள்ளுங்கள். படிவங்கள், தேடல்கள் மற்றும் தரவு உள்ளீட்டிற்கு இது மிகவும் அவசியம்.

எடுத்துக்காட்டு:

நீங்கள் உருவாக்குவதில் கண்டிப்புடன் இருங்கள், ஆனால் பயனர்கள் தட்டச்சு செய்வதில் தாராளமாக இருங்கள்.

சரிபார்ப்பு பட்டியல்:

  • பயனர் தட்டச்சு செய்யும் பல வகையான தேதி மற்றும் தொலைபேசி வடிவங்களை ஏற்றுக்கொள்ளவும்
  • பயனர் உள்ளீடுகளை முடிந்தவரை தானாகவே வடிவமைப்பு செய்யும்படி அமைக்கவும்
  • பிழைகளைத் திருத்துவதற்கான குறிப்புகளுடன் கூடிய பயனுள்ள பிழைச் செய்திகளை வழங்கவும்
  • நெகிழ்வான முறையில் தேடல்களைச் செய்ய அனுமதிக்கவும்
  • ஒவ்வொரு விசை அழுத்தத்திலும் தணிக்கை செய்யாமல், படிவத்தைச் சமர்ப்பிக்கும்போது மட்டும் சரிபார்க்கவும்
தகவல் கட்டமைப்பு
ஒக்காமின் கத்தி (எளிமை விதி)

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

எளிமை விதி (Occam's Razor)

எளிய தீர்வு, பிறவற்றை அமைப்பு தானாகக் கவனிக்கும்

கோப்பை இங்கே இழுக்கவும் அல்லது கிளிக் செய்கஅளவு வரம்பு: 100 MB

ஏன் முக்கியம்:

எளிய தீர்வுகளே பெரும்பாலும் சிறந்தவை. உங்கள் வடிவமைப்புகளிலிருந்து தேவையற்ற கூறுகளையும் சிக்கல்களையும் நீக்குங்கள்.

எடுத்துக்காட்டு:

எளிமையான தீர்வு என்பது அழகானது மட்டுமல்ல - அதுவே சரியானதாகவும் இருக்கும்.

சரிபார்ப்பு பட்டியல்:

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

ஒரு காரியத்தை முடிக்க எவ்வளவு நேரம் வழங்கப்படுகிறதோ, அவ்வளவு நேரமும் அந்த காரியத்தை முடிக்க எடுத்துக்கொள்ளப்படும்.

நேரக் கட்டுப்பாடு (Parkinson's Law)

15 வினாடிக்குள் உங்களை பற்றிய ஒரு சிறு குறிப்பு எழுதவும். நேர அழுத்தம் உங்கள் கவனத்தை எவ்வாறு குவிக்கிறது என்பதை அறியவும்!

ஏன் முக்கியம்:

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

எடுத்துக்காட்டு:

ஒரு வேலைக்கு 2 வாரங்கள் கொடுத்தால் 2 வாரங்கள் எடுக்கும், 2 மணிநேரம் கொடுத்தால் 2 மணிநேரத்தில் முடிந்துவிடும்.

சரிபார்ப்பு பட்டியல்:

  • பல படிகள் கொண்ட வழிமுறைகளில் முன்னேற்றக் குறிகாட்டிகளைச் சேர்க்கவும்
  • பணியை முடிக்க ஆகும் மதிப்பிடப்பட்ட நேரத்தைக் காட்டவும்
  • குறுகிய காலச் சலுகைகளுக்கு நேரக் கட்டுப்பாடுகளைப் பயன்படுத்தவும்
  • கைவிடப்பட்ட வண்டிகளில் (Abandoned carts) செயற்கையான அவசரத்தை உருவாக்கவும்
  • படிவங்களையும் செயல்பாடுகளையும் சுருக்கமாக வைத்துக்கொள்ளவும்
காட்சி வடிவமைப்பு
அருகமை விதி (கெஸ்டால்ட்)

ஒன்றுக்கொன்று நெருக்கமாக இருக்கும் பொருள்கள், ஒரு குழுவாகக் கருதப்படும் போக்கு கொண்டது.

தவறு (சமமான இடைவெளி)
விநியோக கட்டண படிவம்
முழுப் பெயர் (அரசு சான்றிதழில் உள்ளபடி)
அரசு அங்கீகரித்த குடும்ப அட்டையில் உள்ள பெயரை உள்ளிடவும்
மின்னஞ்சல் முகவரி
இதன் மூலமாகவே விநியோக ரசீதுகள் மற்றும் அறிவிப்புகள் அனுப்பப்படும்
குடும்ப அட்டை எண்
12 இலக்க எண்ணை பிழையின்றி உள்ளிடவும்

விளக்கம்: இங்கு படிவத்தின் லேபிள்கள், உள்ளீட்டு பெட்டிகள் மற்றும் விளக்கக் குறிப்புகள் அனைத்தும் சமமான 16px (gap-4) இடைவெளியில் உள்ளன. எந்த விளக்கம் அல்லது தலைப்பு எந்த பெட்டிக்குரியது என்று கண்டறிவது மூளைக்கு மிகுந்த குழப்பத்தை ஏற்படுத்துகிறது.

சரி (அருகமை விதி)
விநியோக கட்டண படிவம்

அரசு அங்கீகரித்த குடும்ப அட்டையில் உள்ள பெயரை உள்ளிடவும்

இதன் மூலமாகவே விநியோக ரசீதுகள் மற்றும் அறிவிப்புகள் அனுப்பப்படும்

12 இலக்க எண்ணை பிழையின்றி உள்ளிடவும்

விளக்கம்: இங்கு ஒவ்வொரு லேபிளும், அதற்குரிய பெட்டியும், விளக்கமும் மிக நெருக்கமாக (space-y-1.5) தொகுக்கப்பட்டுள்ளன. வெவ்வேறு உள்ளீட்டு தொகுப்புகள் தாராளமான இடைவெளியால் (space-y-6) பிரிக்கப்பட்டுள்ளதால், வாசிப்பதற்கும் பயன்படுத்துவதற்கும் மிக எளிமையாக உள்ளது.

ஏன் முக்கியம்:

கூறுகளுக்கு இடையிலான உறவைக் காட்ட இடைவெளியைப் பயன்படுத்தவும். படிவ வடிவமைப்பு, வழிசெலுத்தல் குழுவாக்கம் மற்றும் காட்சி வரிசைக்கு இது இன்றியமையாதது.

எடுத்துக்காட்டு:

உங்கள் மூளை படிப்பதற்கு முன்பே, உங்கள் கண்கள் பொருட்களை ஒன்றுசேர்த்து குழுவாக்கிவிடும்.

சரிபார்ப்பு பட்டியல்:

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

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

பயன்பாட்டு முறை (Jakob's Law)
தமிழ் மளிகை
🍍

மலை அன்னாசி

₹120/ kg

🥭

கிளி மாம்பழம்

₹80/ kg

🍌

நேந்திரன் வாழை

₹60/ bunch

முடிவு: 0 வினாடி விளக்கம். பயனர் உடனடியாக புரிந்துகொள்கிறார்.

ஏன் முக்கியம்:

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

எடுத்துக்காட்டு:

பெரும்பாலான பயனர்கள் 'புதிய அனுபவத்தை' விரும்புவதில்லை - அவர்கள் நன்கு பழகிய அனுபவத்தையே விரும்புகிறார்கள்.

சரிபார்ப்பு பட்டியல்:

  • நிலையான UI வடிவங்களைப் பயன்படுத்தவும் (எ.கா., லோகோவை அழுத்தினால் முகப்புப் பக்கத்திற்குச் செல்வது)
  • இயங்குதளங்களின் நிலையான வழிகாட்டுதல்களைப் (iOS, Android, Web) பின்பற்றவும்
  • பொதுவான கூறுகளைப் பயனர்கள் எதிர்பார்க்கும் இடத்தில் வைக்கவும்
  • தெளிவான மதிப்பைச் சேர்க்கும் போது மட்டுமே புதிய வடிவமைப்புகளை உருவாக்கவும்
  • பயனர்கள் வடிவமைப்பு முறைகளை எளிதில் கண்டறிகிறார்களா என்பதைச் சோதிக்கவும்
அறிவாற்றல்
செயல்முனைவுப் பயனரின் முரண்பாடு

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

செயல்முறை கற்றல் (Active User Paradox)

பயனர் கையேடு (10 பக்கங்கள்)

1. கோப்பை ஏற்றுமதி செய்ய முதலில் தேதி தேர்விக்குச் செல்லவும். 2. கடந்த 7 நாட்களைத் தேர்ந்தெடுக்கவும். 3. வடிகட்டியைச் சமர்ப்பிக்கவும். அதன் பின் மட்டுமே ஏற்றுமதி பொத்தானை அழுத்த வேண்டும். தவறினால் பிழை ஏற்படும்.

பயனர் செயல்பாடு பதிவு:

தயவுசெய்து மேலே உள்ள கூறுகளை இயக்கவும்...

ஏன் முக்கியம்:

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

எடுத்துக்காட்டு:

பயனர்கள் கையேடுகளைப் படிப்பதில்லை. அவர்கள் முதலில் கிளிக் செய்துவிட்டு, பின்னர் கேள்விகளைக் கேட்ப்பார்கள்.

சரிபார்ப்பு பட்டியல்:

  • வழிமுறைகள் இல்லாமல் பயனர்கள் தாங்களாகவே புரிந்து கொள்ளும் வகையில் இடைமுகத்தை வடிவமைக்கவும்
  • பயனர்களை இயல்பாக வழிநடத்தத் தேவைப்படும்போது மட்டும் தகவல்களைக் காட்டவும்
  • தேவையான இடங்களில் உதவிக்குறிப்புகள் மற்றும் டூல்டிப்களை வழங்கவும்
  • ஆவணங்களைப் படிப்பதற்குப் பதிலாகப் பயனர்கள் நேரடியாகச் செயல்படுமாறு வடிவமைக்கவும்
  • பயனர்களால் ஆவணங்கள் ஏதுமின்றி பணிகளை முடிக்க முடிகிறதா என்பதைச் சோதிக்கவும்
  • விளக்கம் தேவைப்படாத பழக்கமான வடிவமைப்பு முறைகளைப் பயன்படுத்தவும்
  • பிழைகளிலிருந்து மீண்டு வருவதை எளிமையாகவும் தாராளமாகவும் மாற்றவும்