கீவேர்டுகளை வைத்து டேஷ்போர்டு ஐகான்களைத் தேர்ந்தெடுப்பதை நிறுத்துங்கள்
பெரும்பாலான டேஷ்போர்டு சிக்கல்கள் மோசமான ஐகான்களால் ஏற்படுவதில்லை.
அவை தவறான அர்த்தத்திற்காகப் பயன்படுத்தப்படும் நல்ல ஐகான்களால் ஏற்படுகின்றன.
நீங்கள் "users" என்று தேடி ஒரு தெளிவான SVG-ஐத் தேர்ந்தெடுத்தால், பிறகு சிக்கல்களைச் சந்திக்க நேரிடும். வாடிக்கையாளர்கள் (customers), குழு உறுப்பினர்கள் (team members), கணக்கு உரிமையாளர்கள் (account owners) மற்றும் நிர்வாகிகள் (admins) ஆகியோருக்காக வெவ்வேறு ஐகான்கள் உங்களுக்குத் தேவைப்படும். விரைவில், ஒரே ஒரு "user" ஐகான் பல அர்த்தங்களைச் சுமக்க வேண்டியிருக்கும். இது உங்கள் SaaS டேஷ்போர்டை குழப்பமடையச் செய்யும்.
கீவேர்டுகளை வைத்து ஐகான்களைத் தேர்ந்தெடுப்பதை நிறுத்துங்கள். அவற்றின் பங்களிப்பை (role) வைத்துத் தேர்ந்தெடுக்கத் தொடங்குங்கள்.
ஒரு கீவேர்டு ஒரு ஐகான் எதனுடன் தொடர்புடையது என்று சொல்கிறது. ஒரு ரோல் (role) ஒரு ஐகான் என்ன செய்கிறது என்று சொல்கிறது.
உங்கள் ஐகான்களை இந்த ஐந்து வகைகளாகப் பிரிக்கவும்:
- நேவிகேஷன் ஐகான்கள் (Navigation icons): இவை டேஷ்போர்டு (Dashboard), பில்லிங் (Billing) அல்லது செட்டிங்ஸ் (Settings) போன்ற இடங்களைக் குறிக்கின்றன. இவை எளிமையாகவும் நிலையானதாகவும் இருக்க வேண்டும்.
- ஸ்டேட்டஸ் ஐகான்கள் (Status icons): "இது செயல்பாட்டில் உள்ளதா?" அல்லது "இது தோல்வியடைந்துவிட்டதா?" போன்ற கேள்விகளுக்கு இவை பதிலளிக்கின்றன. செக் மார்க் (checks), எச்சரிக்கை (warnings) அல்லது பூட்டுகள் (locks) போன்ற நேரடிச் சின்னங்களைப் பயன்படுத்தவும்.
- ஆக்ஷன் ஐகான்கள் (Action icons): இவை எடிட் (edit), டெலீட் (delete) அல்லது எக்ஸ்போர்ட் (export) போன்ற செயல்பாடுகளைக் குறிக்கின்றன. செயல்பாடு சிக்கலானதாக இருந்தால், லேபிள்கள் (labels) இல்லாமல் இவற்றைத் தவிர்ப்பது நல்லது.
- ஆப்ஜெக்ட் ஐகான்கள் (Object icons): இவை ஒரு புராஜெக்ட் (project), இன்வாய்ஸ் (invoice) அல்லது ஃபோல்டர் (folder) போன்ற பொருட்களை அடையாளம் காட்டுகின்றன.
- எம்ப்டி ஸ்டேட் ஐகான்கள் (Empty state icons): தரவுகள் இல்லாதபோது இவை தோன்றும். இவற்றில் கூடுதல் தனித்துவத்தைக் காட்டலாம்.
மிக அழகான SVG-ஐ மட்டும் தேடாதீர்கள். ஒரு காட்சி மொழியை (visual vocabulary) உருவாக்குவதை நோக்கமாகக் கொள்ளுங்கள்.
ஒரு ஐகானைத் தேர்ந்தெடுப்பதற்கு முன் இந்த மூன்று சோதனைகளைப் பயன்படுத்தவும்:
- அளவு சோதனை (The Size Test): ஒரு நெருக்கமான அட்டவணையில் (dense table) 16px அளவில் இருக்கும்போது அந்த ஐகான் சரியாகத் தெரிகிறதா? பல ஐகான்கள் 32px அளவில் சிறப்பாகத் தெரியும், ஆனால் சிறியதாகும்போது சரியாகத் தெரியாது.
- சூழல் சோதனை (The Context Test): ஐகானை அதன் லேபிளுக்கும் அருகில் உள்ள மற்ற ஐகான்களுக்கும் பக்கத்தில் வைத்துப் பார்க்கவும். அது அருகில் உள்ள ஐகானுடன் குழப்பமடைய வாய்ப்புள்ளதா?
- பொருள் சோதனை (The Meaning Test): ஐகான் லேபிளுக்குத் துணையாக இருக்கிறதா, அல்லது லேபிளே ஐகானைப் பற்றி விளக்க வேண்டியிருக்கிறதா?
ஒரு அம்சத்திற்கு (feature) தனித்துவமான ஐகானைக் கண்டறிய முடியாவிட்டால், அந்த அம்சத்தின் பெயர் மிகவும் தெளிவற்றதாக இருக்கலாம். ஐகான்கள் பொருளை வலுப்படுத்துகின்றன. அவை தெளிவற்ற மொழியைச் சரிசெய்யாது.
"user icon" என்று தேடுவதற்குப் பதிலாக, "internal collaborator icon" அல்லது "customer account icon" என்று தேடுங்கள். உங்கள் தேடலில் இருக்கும் துல்லியம், உங்கள் UI-லும் துல்லியத்தைக் கொடுக்கும்.
ஆதாரம்: https://dev.to/svgicons/stop-picking-dashboard-icons-by-keyword-ij2