1. பட்டன் உருவாக்க பொன்விதிகள்

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

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

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

முதல் விஷயம், பட்டன்கள் இல்லாமல் இணையம் இல்லை: அதாவது இணைய பயன்பாடு இல்லை. இணைய பயன்பாட்டை சாத்தியமாக்கும் பல விஷயங்களில் பட்டன்கள் முக்கியமானவை. இணையத்தில் உலாவும் போது, நாம் பார்த்துக்கொண்டிருக்கும் இணையதளத்தில் ஏதேனும் ஒரு அம்சம் அல்லது வசதியை அணுக வேண்டும் என்றால் பட்டன்கள் வழியே தான் போயாக வேண்டும்.

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

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

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

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

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

முதலில், நிக் பாபிச் (Nick Babich) என்பவர் எழுதியுள்ள கட்டுரையை பார்க்கலாம். ’பட்டன் வடிவமைப்பிற்கான ஏழு விதிகள்’ எனும் கட்டுரை தலைப்பே ஈர்ப்புடையதாக இருக்கிறது.

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

முதல் விதி, பட்டன்கள், பட்டன்கள் போலவே இருக்க வேண்டும் என்பதாகும்.

மேலோட்டமாக பார்த்தால் இந்த விதி விளையாட்டாக தோன்றலாம். ஆனால், இதில் ஆழமான விஷயம் இருப்பது புரியும்.

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

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

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

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

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

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

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

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

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

இதை எல்லாம் தான், பட்டன், பட்டனாக இருக்க வேண்டும் என புரிந்து கொள்ள வேண்டும்.

இரண்டாவது விதி, பட்டன்கள் எங்கே இருக்க வேண்டும் என எதிர்பார்க்கப்படுகின்றனவோ அங்கே அவை இருக்க வேண்டும்.

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

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

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

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

பட்டனுக்கு பெயரிட ஒரு சொல் தான் தேவை. ஆனால் அந்த சொல் சரியாக இருக்க வேண்டும்.

நான்காவது விதி பட்டன்கள் சரியான அளவில் இருக்க வேண்டும் என்பது.

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

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

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

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

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

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

–

இணைப்பு: https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4