⛴️ ✊🏻 🗜️ फॉर्म डिजाइन पैटर्न। पुस्तक समीक्षा 💫 👸🏻 ☮️

समीक्षा लेखक द्वारा परिचय

पुस्तक से पता चलता है, कभी-कभी डिजाइनरों और फ्रंट-एंड डेवलपर्स के लिए स्पष्ट नहीं है, क्षेत्र डिजाइन के विषय, डेटा प्रकार और प्रयोज्य के साथ काम करने की अवधारणा। पुस्तक शुरुआती और इंटरफ़ेस-प्रेमी दोनों डिजाइनरों के लिए उपयोगी होगी, क्योंकि पहला मूल बातें की समझ देगा, और दूसरा विचार के लिए भोजन देगा, कभी-कभी विवादास्पद, डिजाइन पैटर्न। समीक्षक द्वारा पुस्तक और संक्षिप्त टिप्पणियों से संक्षिप्त सार के रूप में समीक्षा प्रस्तुत की जाएगी।

भाग एक। खेतों के बारे में

1. बाईं ओर एक लेबल की तुलना में शीर्ष पर एक लेबल बेहतर है।

क्यों: थीसिस शैली का एक क्लासिक बन गया है। इस विषय पर बहुत सारे लेख लिखे गए हैं, उदाहरण के लिए यह एक और सैकड़ों समान हैं। इसके अलावा, लेबल को शीर्ष पर रखने से हमें अधिक स्थान मिलता है यदि लेबल लंबा है। यह स्पष्ट प्रतीत होता है, लेकिन कई डिजाइनर हठपूर्वक लेबल बाईं ओर लगाते हैं।

2. प्लेसहोल्डर भरने के नियमों का वर्णन करने के लिए नहीं

क्यों: प्लेसहोल्डर गायब हो जाते हैं जब खेत में + फसल पर क्लिक किया जाता है।

3. दोबारा पासवर्ड न मांगें

क्यों: दो बार प्रवेश करने से रोकता है।

4. त्रुटि पाठ लेबल और फ़ील्ड के बीच लिखने के लिए

क्यों: यह एक मोबाइल फोन पर स्वत: पूर्ण या कीबोर्ड द्वारा बंद नहीं किया जाएगा।

राय: ऐसा लगता है कि थीसिस समझ में आता है, लेकिन यह वास्तव में सुपर असामान्य लगता है। इंटरफेस (9+ वर्ष) के सभी समय के लिए, मुझे यह केवल एक बार और केवल एक डिजाइनर के लेआउट में मिला। लेकिन शायद यह इस पैटर्न को सेवा में लेने के लायक है।

5. चयन बेहतर उपयोग करने के लिए नहीं हैं

क्यों: विकल्प छिपाएं, कुछ उपकरणों पर ज़ूम न करें, एक अतिरिक्त क्लिक करें, कोई उन्हें लिखने की कोशिश कर रहा है।

राय: मेरा प्रयास है कि यदि अंक 3 से कम या बराबर हैं तो चयन का उपयोग न करें। यदि ऐसा है, तो टैग या रेडियो समूह बनाना आसान है। शायद यह तथ्य है कि कुछ लोगों का मानना है कि यह एक इनपुट फ़ील्ड है, न कि चयन और वहां लिखने की कोशिश, इनपुट के एक हाइब्रिड को जन्म दिया और ड्रॉप-डाउन मेनू के रूप में चयन करें, लेकिन पहला आइटम एक इनपुट फ़ील्ड है (सबसे अधिक बार एक खोज)। यह एक ही समय में एक समाधान और बैसाखी दोनों है।

6. जब आपको तिथियों को इंगित करने के लिए कैलेंडर की आवश्यकता नहीं है

एक कैलेंडर के लिए आवश्यक नहीं है:

जन्म की तारीखें, क्योंकि हर कोई इस तारीख को दिल से याद करता है और हाथ से प्रवेश करना आसान होता है;
कार्ड की समाप्ति तिथि;
दस्तावेज़ों में लिखी गई तारीखें और आपको बिना किसी हिचकिचाहट के उन्हें फिर से लिखना होगा।

7. एक "पासफ़्रेज़" बनाएँ

क्यों: एक राय है कि वाक्यांश को याद रखना आसान है।
राय: ¯ \ _ (ツ) _ / ¯

8. चयन के बजाय "- / +" का उपयोग करें

नियम: यदि संख्या बड़ी नहीं है, तो प्लस और माइनस का उपयोग करें। एक अच्छा उदाहरण प्रति उड़ान यात्रियों की संख्या का विकल्प है। पुस्तक कहती है कि इस विषय पर परीक्षण हुए और प्लस / माइनस ने खुद को बेहतर दिखाया।

9. क्षेत्र का आकार सामग्री के तहत होना चाहिए

क्यों: हाँ, क्योंकि यह तर्कसंगत है! और इससे कोई फर्क नहीं पड़ता कि इस तरह से खेत भी नहीं हैं। लेकिन आधे सेकंड में यह स्पष्ट हो जाता है कि किस प्रकार की सामग्री होनी चाहिए।

10. जहां गलती हो, वहीं बोलें

यह आमतौर पर ऐसा क्यों नहीं है: यह माना जाता है कि यह सुरक्षा नहीं है, आखिरकार, यह कहते हुए कि पासवर्ड सही नहीं है, हम संकेत देते हैं कि लॉगिन सही है। लेकिन वास्तव में, हैकर्स दुनिया में मौजूद सभी पासवर्डों की जांच नहीं करेंगे यदि उन्हें पता चलता है कि लॉगिन, जो अक्सर एक ईमेल पता है। मेल और खुली जानकारी उपयुक्त है।

भाग दो। बटन के बारे में

1. बाईं ओर बटन संरेखित करें

क्यों: देखो बाएं से दाएं जाता है। एक अपवाद एक मोडल विंडो हो सकती है जिसमें कोई इनपुट फ़ील्ड नहीं हैं। उदाहरण के लिए, दाईं ओर वाले मोडल्स में बटन के Google के सामग्री डिज़ाइन में।

2. बटन को अक्षम न करें

क्यों: टैब दबाकर उस पर जाना संभव नहीं होगा, यह कुछ स्क्रीन पाठकों द्वारा नहीं पढ़ा जाएगा और यह सुस्त होने के कारण खराब दिखाई देता है।

राय: हाल ही में, मैंने उपयोगकर्ताओं के लिए यह स्पष्ट करने के लिए एक बटन डिज़ाइन करना पसंद किया था कि वे फ़ॉर्म में कुछ भर रहे थे। और किसी तरह उसने यह भी संदेह नहीं किया कि यह स्पष्ट नहीं हो सकता है। उपयोगकर्ताओं पर परीक्षणों से पता चला कि उपयोगकर्ताओं को एक ग्रे रंग दिखाई देता है, लेकिन हर कोई यह नहीं समझता है कि इसका मतलब है कि कुछ गलत है। यह ऐसा है जैसे आपने पहली बार एक ट्रैफिक लाइट देखी और उसके रंगों को अलग करने में सक्षम थे, लेकिन बस यह नहीं पता था कि प्रत्येक रंग का क्या मतलब है। आपको कोई फर्क नहीं पड़ता कि अब क्या जल रहा है।

3. बटन पर एक क्रिया लिखें

क्यों: यह अधिक स्पष्ट है कि क्या होगा

4. बटन के सामने लिंक "मुझे पासवर्ड याद नहीं है" मत डालें

क्यों: जो लोग टैब के माध्यम से खेतों के माध्यम से जाते हैं, यह एक बटन के बजाय एक लिंक पर जाने और आदत से बाहर काम कर सकता है, वह एक अनावश्यक पासवर्ड रिकवरी स्क्रिप्ट चलाने के लिए, एंटर दबाएगा।

5. एक लंबे रूप के साथ, शीर्ष पर एक बटन लगाने में शर्म न करें

राय: किसी प्रकार की बकवास। नीचे से बटन को ठीक करना बेहतर है ताकि स्क्रॉल करते समय यह हमेशा दिखाई दे। लेकिन, उदाहरण के लिए, Yandex.Mail शीर्ष पर एक बटन डालता है।

भाग तीन। ब्राउज़र और स्वचालन

वर्णों की आवश्यक संख्या दर्ज करते समय एक फ़ील्ड से दूसरे में स्वचालित संक्रमण न करें। यह उपयोगकर्ताओं को भ्रमित कर सकता है
एचटीएमएल 5-सक्षम ब्राउज़रों में अंतर्निहित रूप सत्यापनकर्ता हैं और प्रत्येक ब्राउज़र का अपना तर्क है। यह डिफ़ॉल्ट सत्यापन को अक्षम करने के लिए समझ में आता है
ऑटो अक्षर सुधार को अक्षम करना और पहले अक्षर को ऑटो-बढ़ाना आवश्यक है। अन्यथा, यह उपयोगकर्ताओं को लगता है कि यह एक गलती थी और डेटा स्वीकार नहीं किया जाएगा
आंकड़ों के अनुसार, क्रोम में ऑटो-समापन का उपयोग महीने में 9 बिलियन बार किया जाता है। यह, औसतन, उपयोगकर्ता को 12 सेकंड बचाता है, जो प्रति माह 1,250,000 दिन देता है। मजेदार तथ्य
"फ़िल्टर" बटन पर क्लिक किए बिना फ़िल्टर न करें। एक बटन की आवश्यकता है, उदाहरण के लिए, यदि केवल रेडियो और चेकबॉक्स नहीं हैं, लेकिन इनपुट फ़ील्ड (लागत, कुछ अंतराल, आदि) भी हैं। लेकिन वे स्वयं परीक्षणों के बारे में लिखना जारी रखते हैं, जहां उपयोगकर्ताओं का मानना था कि फ़िल्टर यह महसूस किए बिना काम नहीं करता है कि आपको "फ़िल्टर" बटन पर क्लिक करने की आवश्यकता है। ¯ \ _ (ツ) _ / ¯

भाग चार। सब कुछ के बारे में

कुछ बिंदु पर, पुस्तक रूपों से लेकर आइकन और अन्य चीजों की उपयोगिता का वर्णन करती है जो विषय के लिए प्रासंगिक नहीं हैं। वे पुस्तक में लिखते हैं कि यहां आइकन के बारे में ग्रंथों को देखना अजीब है, लेकिन आइकन भी इंटरफ़ेस का हिस्सा हैं, जैसे कि फॉर्म, और इसलिए इसका वर्णन किया जा सकता है। लेकिन फिर भी मुझे बहुत कम उपयोगी जानकारी के बीच काफी दिलचस्प चीजें मिलीं। उनके बारे में नीचे।

1. अलग-अलग पेज पर लॉगिन और पासवर्ड फील्ड को फैलाना कोई शर्म की बात नहीं है

GOV.UK वेबसाइट पर, प्राधिकरण के रूप में, उन्होंने एक पृष्ठ पर एक लॉगिन बनाया, और दूसरे पर पासवर्ड (अब ऐसा नहीं है) और उपयोगकर्ताओं को कुछ भी अजीब नहीं लगा।

राय: अब मैं तेजी से इस दृष्टिकोण को नोटिस करता हूं। Google से लेकर विभिन्न सेवाएँ जैसे Abstract।

2. चरण दिखाना वैकल्पिक है

चरणों के साथ प्रगति सलाखों को दिखाने का कोई मतलब नहीं है। वे बहुत जगह लेते हैं। ब्रिटिश सरकार ने बार को हटा दिया और रूपांतरण नहीं बदला है।

3. 7 elements 2 तत्वों को याद रखने वाला विषय अब प्रासंगिक नहीं है

क्यों: क्योंकि साइटों पर किसी को कुछ भी याद नहीं है। यदि आप कुछ भूल जाते हैं तो आप बस स्क्रॉल कर सकते हैं।

4. एक विशेष क्षेत्र में स्वीकार किए गए क्रम में पते फ़ील्ड डालें

यह पुस्तक से नहीं है, बल्कि मेरे निबंध से है। अंतर्राष्ट्रीय डाक एसोसिएशन है नियम लिखा। उदाहरण के लिए, रूस ने निम्नलिखित प्रक्रिया अपनाई है:

इवानोव इवान
सेंट। लेसन्या, घर 5, उपयुक्त। ग्यारह
मास्को
रूस
पोस्टकोड

फॉर्म डिजाइन पैटर्न। पुस्तक समीक्षा