परिपूर्ण फॉर्म डिझाइन करण्यासाठी 10 टिपा

हा लेख मूळतः onepixelout.com वर प्रकाशित झाला होता

फॉर्म हे वापरकर्ता आणि सिस्टममधील पोर्टल आहेत आणि बर्‍याचदा वेबपृष्ठाचे लक्ष केंद्रित करतात. लॉगिन, नोंदणी, आपली स्थिती अद्यतनित करणे, भरणा माहिती आणि डिलिव्हरी पत्ता प्रविष्ट करणे - हे सर्व फॉर्म वापरुन हाताळले जातात. ईकॉमर्स साइटसाठी, चांगले रचले गेलेले फॉर्म सर्व फरक करू शकतात.

माझ्या अनुभवात, एकाच फॉर्मची रचना सुधारणे ऑनलाइन स्टोअरच्या विक्रीपेक्षा दुप्पट देखील होऊ शकते.

… आणि मला फॉर्म डिझाइन करायला आवडते.

फॉर्म हे यूजर इंटरफेसचे कार्यशील घटक आहेत, त्या कशा बनवतील याबद्दल काही नियम असतात. लेगवर्क करण्याच्या सर्व गोष्टी करण्यासाठी फॉर्म मिळवताना आपण आज टिपा आणि सर्वोत्तम सराव पाहणार आहोत, जेणेकरून वापरकर्त्यास तसे करण्याची गरज नाही.

1. इनपुटसह प्रारंभ करा

सर्वात सामान्य फॉर्म घटकासह प्रारंभ करा: मजकूर इनपुट फील्ड. हा बहुतेक फॉर्मचा सर्वात सामान्य घटक आहे, म्हणूनच तो बरोबर मिळवा आणि आपण तेथे आधीपासून आहात.

प्रत्येक फॉर्म इनपुटचे 3 मूलभूत घटक आहेत: मजकूर फील्ड, आणि लेबल आणि त्रुटी संदेश. आपण हा सर्वात मूलभूत बिल्डिंग ब्लॉक डिझाइन करण्यासाठी कोणता मार्ग निवडला आहे, वापरकर्त्यास कोणत्या माहितीचा तुकडा आवश्यक आहे हे जाणून घेण्याचा नेहमीच एक मार्ग आहे आणि एखादी त्रुटी असल्यास - ते त्या त्रुटीपासून कसे पुनर्प्राप्त होऊ शकतात हे सुनिश्चित करा. लेबल कुठे ठेवायची हे आपल्या सुबकतेने आणते.

लेबल वर जा

ट्रेंड येतात आणि जातात. एक ट्रेंड आहे जो प्लेसहोल्डरला लेबल म्हणून वापरण्याच्या दिशेने झुकला आहे. लेबलसाठी प्लेसहोल्डर वापरणे चुकीचे नसले तरी ते काही यूएक्स समस्या सादर करतात. वापरकर्त्याने ते टॅप केले तर त्यासह समस्या आहे, लेबल गेलेले आहे. वापरकर्त्याने या फॉर्मकडे परत येत असल्यास आणि एखाद्या त्रुटीमुळे इनपुटकडे लक्ष दिले असल्यास, लेबल देखील गेले आहे.

लेबले नेहमीच दृश्यमान असणे आवश्यक आहे. या कारणास्तव, लेबल शीर्षस्थानी जातात.

इनपुट फील्डच्या डावीकडे आणि वर का नाही?

जेव्हा फील्डच्या डावीकडे लेबल असेल तेव्हा यासाठी मोबाइलवर दुसर्‍याच्या वर एक स्टॅक ठेवणे आवश्यक असेल. प्रथम मोबाइलचा विचार करा.

गिफी मधील प्रतिमा

प्लेसहोल्डरसह योग्य माहिती प्रविष्ट करण्यासाठी वापरकर्त्यास मार्गदर्शन करा आणि त्यांच्या इच्छित वापरासाठी लेबले वापरा.

लेबल त्यांच्या इनपुट फील्डच्या वर ठेवण्याचा दुसरा युक्तिवाद असा आहे की वाचकांकडे माहिती वाचण्यासाठी एक रेषात्मक अनुलंब रेखा असते, जे संशोधनाने दर्शविले आहे की डावीकडील उजवीकडील स्तंभात उडी मारण्यापेक्षा वेगवान आहे. तर आपल्या वापरकर्त्यासाठी गोष्टी सुलभ करा - आपल्या वेबसाइटसह पुढे जाण्यासाठी त्यांना आवश्यक असलेल्या गोष्टी वाचण्यासाठी त्यांच्यासाठी एक स्वच्छ रेखा.

2. त्रुटी राज्ये आणि चेतावणी

प्रत्येक मानक मजकूर इनपुट फील्डसाठी आपल्याला संबंधित त्रुटी संदेश आवश्यक असेल. त्रुटी प्रकरणात डिझाइन करण्याच्या काही टीपा येथे आहेत:

त्रुटी संदेश क्लायंट किंवा सर्व्हरपैकी एकांकडून येऊ शकतो. क्लायंट साइड अनिवार्य फील्ड कधी प्रसिध्द होत नाही किंवा एखादा ईमेल पत्ता चुकीच्या स्वरूपात असेल अशा गोष्टी शोधू शकतो. एखादा ईमेल पत्ता सध्या अस्तित्त्वात आहे की नाही ते शोधण्यात सर्व्हर साइड सक्षम होईल. कोणते क्लायंट आहेत आणि कोणते सर्व्हर आहेत ते जाणून घ्या. फॉर्म इशारे म्हणून सबमिट करण्यापूर्वी क्लायंट साइड त्रुट्या वापरकर्त्यास द्याव्यात. क्लायंट साइड त्रुट्यांमुळे वापरकर्त्यास चुकीची माहिती सबमिट करण्यापासून प्रतिबंधित केले पाहिजे.

त्रुटी संदेशांसह स्मार्ट व्हा.

जेव्हा एखादी वापरकर्ता चूक करीत असेल तर कोणत्या फील्डमुळे त्रुटी आली त्याबद्दल त्यांना माहिती द्या. सुरक्षिततेसाठी काही विकासक ईमेल किंवा संकेतशब्द चुकीचा आहे की नाही हे लॉगिनवर निर्दिष्ट करू इच्छित नाही आणि ते पूर्णपणे ठीक आहे. परंतु जेव्हा वापरकर्ता ईमेलसाठी साइन अप करीत आहे किंवा चेकआउटमध्ये त्यांचा पत्ता प्रविष्ट करीत आहे, तेव्हा कोणते फील्ड चुकीचे आहे आणि ते का ते त्यांना सांगा.

प्रत्येक वेळी आपण मजकूर इनपुट डिझाइन करता तेव्हा वापरकर्ता "पाठवा" च्या आधी आणि नंतर त्रुटी संदेश कसा दिसेल हे देखील विचारात घ्या.

चेतावणी समाविष्ट करा

एखाद्या विशिष्ट फील्डला विशिष्ट निकषांची आवश्यकता असल्यास - उदाहरणार्थ, संकेतशब्दाला विशिष्ट संख्येची अक्षरे असणे आवश्यक आहे आणि दोन्ही संख्या आणि अक्षरे एकत्र केली असल्यास वापरकर्त्यास कळवा. संकेतशब्द प्रविष्ट केल्यावर ते किती मजबूत आहे हे दर्शविण्याचे मार्ग आपण समाविष्ट करू शकता. एखादे ईमेल आधीच नोंदवले गेले आहे किंवा वापरकर्तानाव आधीच घेण्यात आले आहे की नाही हे दर्शविणे देखील कदाचित उपयुक्त ठरेल.

Group. लाइकसह ग्रुप करा

जेव्हा आपण यासारखेच गट करता तेव्हा दृश्यास्पद फॉर्म अधिकच चांगले दिसेल परंतु वापरकर्त्याच्या अनुभवाच्या दृष्टिकोनातून ते अधिक चांगले आहे. मोबाईल वापरकर्ता या फॉर्मसह कसा संवाद साधेल याचा विचार करा. मजकूर इनपुट फील्ड एकत्र असल्यास वापरकर्त्यास फील्ड पूर्ण करण्यासाठी कीबोर्डवर रहावे लागेल.

जर आपण वापरकर्त्याला मजकूर इनपुट फील्डमधून ड्रॉपडाऊन, रेडिओ आणि मजकूर इनपुट फील्डकडे परत जाण्यास सांगत असाल तर हे वापरकर्त्याच्या बाजूने सरकते. वापरकर्त्याने त्यांचे मोबाइल डिव्हाइस कसे धरून ठेवले आहे आणि समान इनपुट फील्ड्स एकत्रितपणे एकत्रित करून घर्षण कसे कमी करू शकते याबद्दल विचार करा.

4. रेडिओ बटणे, ड्रॉपडाऊन आणि चेकबॉक्सेस

कधीकधी रेडिओ बटणे, ड्रॉपडाऊन आणि चेकबॉक्स वापरण्याची वेळ येते तेव्हा गोंधळ होऊ शकतो.

वापरकर्त्याला कमी संख्येच्या उत्तरे दर्शविण्याचा एक चांगला मार्ग म्हणजे रेडिओ बटणे. डिझाइनर म्हणून, आपण उत्तर पूर्व-निवडण्यात सक्षम आहात किंवा हे रिक्त ठेवू शकता. जेव्हा एकच पर्याय निवडता येतो तेव्हा रेडिओ बटणे ही सर्वोत्तम निवड असते.

जेव्हा बरीच उत्तरे दिली जातात, तेव्हा ड्रॉपडाउन अधिक योग्य असतो (5 किंवा 6 पेक्षा जास्त असल्यास थ्रॉम चा माझा नियम आहे). आपण एखादे उत्तर पूर्व-निवडू शकता किंवा वापरकर्त्यास निवड करण्याच्या सूचना देण्यासाठी "कृपया निवडा" म्हणून शीर्षस्थानी सोडून द्या.

जेव्हा आपल्याकडे टिकण्यासाठी एक बॉक्स असेल (जसे की अटी व शर्ती) किंवा आपल्याकडे एकापेक्षा अधिक शक्यता असू शकतात तेव्हा चेकबॉक्सेस हा सर्वोत्तम पर्याय आहे. वापरकर्त्यास कोणत्या विपणन ईमेल पाठवायचे हे आपण शोधू इच्छित असल्यास, चेकबॉक्सेसचा एक गट आपल्याला एकापेक्षा अधिक निवड करण्याची परवानगी देईल.

रेडिओ बटणाऐवजी चेकबॉक्सेस वापरण्याने आपल्या वापरकर्त्याच्या इंटरफेस डिझाइनच्या निर्णयामध्ये आपल्याला मर्यादा येऊ नये. डिझाइनर म्हणून हे यूआय घटक आपल्या स्क्रीनवर कसे दिसू शकतात यावर आपल्याकडे खूप लवचिकता आहे. आपण अद्याप चेकबॉक्सेस अधिक मनोरंजक बनविण्यासाठी स्टाईल करू इच्छित असल्यास, त्याचा वापरकर्त्याच्या अनुभवावर परिणाम होऊ नये. एका छोट्या मंडळाशेजारी मजकूराची यादी असण्याऐवजी आपण निवडण्यायोग्य प्रतिमा किंवा चिन्हे डिझाइन करून अधिक आकर्षक बनवू शकता.

5. जेथे शक्य असेल तेथे पर्यायी फील्ड्स दूर करा

व्यवसायाचे लक्ष्य वापरकर्त्यास आपल्या वेबसाइटवरुन काहीतरी खरेदी करणे हे असल्यास, एक डिझाइनर म्हणून आपले लक्ष्य ग्राहक आणि सिस्टममधील शक्य तितके घर्षण दूर करणे आहे. अनावश्यक फील्ड काढून टाकल्यास फॉर्म वापरकर्त्याच्या बाजूने कमी काम केल्यासारखे दिसेल.

कोणत्याही प्रकारचे चेकआउट किंवा वितरण पत्ता फॉर्म डिझाइन करताना हे जाणून घेणे आवश्यक आहे. जर विपणन विभागाला ग्राहकांचे हित जाणून घ्यायचे असेल जेणेकरुन त्यांना कोणते विपणन ईमेल पाठवायचे हे माहित असेल तर ग्राहकाने त्यांचे आयटम खरेदी केल्यानंतर ही माहिती शोधण्याचे अन्य मार्ग असू शकतात (उदाहरणार्थ, जेव्हा ते भेट देतात त्या पृष्ठावर “त्यांची पुष्टी करतात” ईमेल ”).

केवळ कमीतकमी फील्ड दिसण्यासाठी सर्जनशील मार्ग नेहमी शोधा. जर आपले ध्येय ईकॉमर्स साइटवर रूपांतरणासाठी अनुकूलित करणे असेल तर, वितरण पत्त्यासाठी आणि चेकआउटसाठी फॉर्ममधील फील्ड्स कमी करण्यावर लक्ष केंद्रित करा. आपण फ्लाइट बुकिंगसाठी इंटरफेस डिझाइन करत असल्यास, उपलब्ध उड्डाणे पहाण्यासाठी वापरकर्त्यास आवश्यक फील्ड किमान प्रमाणात दर्शवा. एकदा आपण आपल्या वापरकर्त्याने गुंतवणूक केल्यानंतर आपण त्यांना आवश्यक असलेल्या परिघीय माहिती - जसे की बॅगची संख्या इ. शोधणे सुरू करू शकता.

6. दीर्घ फील्डसाठी स्वयं-पूर्ण वापरा

रस्त्याचे नाव फील्ड, रस्त्याच्या नावावर अवलंबून टाइप करण्यासाठी खूप वेळ घेऊ शकेल - विशेषत: मोबाइल डिव्हाइसवर. त्यास योग्यप्रकारे टाइप करणे अधिक कठीण जाऊ शकते.

आपण रस्त्याचे नाव स्वयं-पूर्ण करण्यासाठी Google नकाशे एपीआय समाविष्ट करण्याचा विचार करू शकता. याचा अर्थ असा आहे की वापरकर्त्यास फक्त प्रथम काही वर्ण टाइप करावे लागतील आणि शक्य रस्त्यांच्या नावांच्या ड्रॉप-डाऊन सूचीतून योग्य रस्ता निवडावा. फक्त रस्त्याचे नाव ठेवून, पिन कोड देखील स्वयं-विकसित करणे शक्य आहे, परंतु आम्ही पुढच्या टप्प्यावर याबद्दल चर्चा करू.

7. सशर्त तर्कशास्त्र वापरा

वापरकर्त्याच्या वतीने काही माहिती प्रविष्ट करण्यासाठी तर्कशास्त्र वापरण्याचे मार्ग आहेत ज्यामुळे त्यांचे आयुष्य थोडेसे सोपे झाले आहे.

  • जर आपल्याला वापरकर्त्यांचा देश माहित असेल तर डिझाइनमध्ये त्यांना आवश्यक असलेल्या अतिरिक्त फील्डचे पूर्वनिर्धारण करता येते (ते यूएसएमध्ये असल्यास 'राज्य', आयर्लंडमध्ये असल्यास 'काउंटी' इ.)
  • आपण शहर, राज्य किंवा प्रांताचे नाव प्रस्थापित करण्यासाठी पोस्टकोड वापरू शकता.
  • जर आपल्याकडे त्यांचा देश आयपी पत्त्यावर आधारित असेल तर आपण फोन नंबर क्षेत्रात देश कोड लोकप्रिय करू शकता?

जर आपण वापरकर्त्याच्या वतीने शेतात वस्ती करत असाल तर त्यांना नेहमीच ही माहिती संपादित करण्याचा मार्ग द्या. आपण योग्य नाही हे शक्य आहे.

उदाहरणार्थ - आपण एखाद्या जर्मन रस्त्याचे नाव मिळवण्यासाठी Google नकाशे एपीआय वापरू शकता. रस्त्याचे नाव जाणून घेतल्यामुळे आपण क्षेत्र कोड देखील मिळवू शकता. तथापि, जर्मनीमधील काही रस्ते वेगवेगळे क्षेत्र कोड विस्तृत करण्यासाठी इतके मोठे आहेत, म्हणून थोड्याशा किनार्यांविषयी माहिती चुकीची ठरेल. आवश्यक असल्यास वापरकर्त्यास डेटा संपादित करण्याचा पर्याय नेहमीच द्या.

जगातील प्रत्येक देशासाठी सशर्त तर्कशास्त्र एक्सप्लोर करणे हे एक प्रचंड प्रमाणात काम असेल - म्हणून आपल्या प्रयत्नांसह हुशार व्हा. ज्या देशांमध्ये आपल्याला सर्वाधिक ऑर्डर किंवा रहदारी मिळते त्या देशांकडे पहा आणि प्रथम त्यास अनुकूल बनवा. जर आपणास बळकट परतावा दिसला तर आपण अधिक देशांसाठी समान सशर्त तर्कशास्त्र अंमलात आणू शकता.

8. प्लेसहोल्डर्ससह स्मार्ट मिळवा

यापूर्वी आम्ही प्लेसहोल्डरला मजकूर फील्ड लेबल म्हणून कसे वापरू नये याबद्दल बोललो कारण जेव्हा वापरकर्ता त्यावर टॅप करेल तेव्हा ते अदृश्य होईल. प्लेसहोल्डर वापरकर्त्याचा अनुभव अधिक चांगल्या प्रकारे बनवू शकतो अशा इतर मार्गांचा आम्ही शोध लावला नाही.

प्लेसहोल्डर वापरकर्त्यास त्यांची माहिती कशी स्वरूपित करावी हे दर्शविण्याची सुबक संधी देतात. फोन नंबर एक उत्तम उदाहरण आहे. वापरकर्त्याने त्यांचा देशाचा कोड समाविष्ट करावा? किंवा क्षेत्र कोड?

जेव्हा आपल्याला विशिष्ट स्वरूपात टेलिफोन नंबर किंवा डॅश समाविष्ट करण्यासाठी क्रेडिट कार्ड नंबर आवश्यक असेल, तेव्हा आपण प्लेसहोल्डरमध्ये उदाहरण देऊन वापरकर्त्यास या माहितीची माहिती देऊ शकता. आपल्या देशाच्या कोड इ. आवश्यक आहेत असे स्पष्टपणे सांगून चुका कमी करण्याचा हा एक सोपा मार्ग आहे.

9. पुढील चरण स्पष्टपणे सांगा

पुढे काय होईल याची संप्रेषण करुन आपल्या बटणास ओव्हरटाइम कार्य करा. पूर्ण करण्यासाठी अतिरिक्त चरण असल्यास, वापरकर्त्यास देखील हे ज्ञात करा.

“नेक्स्ट” किंवा “चेकआउट” वापरण्याऐवजी आपण “रिव्ह्यू ऑर्डर” किंवा “पेपल बरोबर नाणे द्या” असे म्हणू शकता. वापरकर्त्याला खास टॅप करुन काय होईल ते सांगून संप्रेषणाचे आणखी एक स्तर जोडा. हे बटण त्यांची ऑर्डर पूर्ण करेल की त्यांचे पुनरावलोकन करण्यासाठी त्यांना वेळ मिळेल? त्यांना पेपल लॉगिनमध्ये आणले जाईल?

अनुभवाच्या वेळी वापरकर्त्याला सहजतेने वाटावे यासाठी नेहमीच मार्ग शोधा, विशेषत: जर त्याचा त्यांच्या बॅलन्सवर परिणाम होईल.

मी Amazonमेझॉन चेकआउट वापरताना प्रत्येक वेळी मला चिंता वाटते कारण ते शेवटच्या टप्प्यापर्यंत मला शिपिंग फीसह संपूर्ण रक्कम सांगत नाहीत. आपल्या वापरकर्त्यासह पारदर्शक व्हा. प्रत्येक टप्प्यावर त्यांना आवश्यक असलेली माहिती देऊन विश्वास ठेवा आणि जेव्हा ते कॉलवर कृती करतात तेव्हा काय अपेक्षा करावी हे स्पष्टपणे सांगा.

10. ऑप्टिमाइझ करण्याचे मार्ग शोधत रहा

एकदा आपण आपला उज्ज्वल, चमकदार नवीन फॉर्म लॉन्च केला - विश्लेषक पहात रहा. जर आपल्याला मोठ्या संख्येने लोक ते पाहून उछललेले आढळले तर ते का ते शोधा. आपल्या वापरकर्त्यांना कोठे अस्वस्थता आहे हे पाहण्यासाठी वापरकर्ता चाचणी करा आणि ते घर्षण दूर करण्यासाठी कार्य करा. एक डिझाइनर म्हणून, बर्‍याचदा आपले काम खरोखर 'पूर्ण' होत नाही.

अनुमान मध्ये

फॉर्म कधीकधी डिझाइन करणं ही खूप मजेशीर गोष्ट नसतात, परंतु ती चांगली केल्यावर वेबसाइट किंवा अ‍ॅपच्या वापरकर्त्याच्या अनुभवात मोठा फरक पडू शकतो. अधिक कठोर परिश्रम करण्यासाठी आपले फॉर्म डिझाइन करा जेणेकरून वापरकर्त्यास आवश्यक नसते.

कृतीवरील कॉलवर स्पष्टपणे संवाद साधा, चेतावणी आणि प्लेसहोल्डर्सद्वारे वापरकर्त्यास सूचना द्या आणि स्वयं पूर्ण ऑफर द्या. जास्त वजन उचलण्यासाठी नेहमीच नवीन मार्ग शोधा, म्हणून वापरकर्त्याकडे घर्षण-कमी अनुभव आहे.