आवृत्ती ३.०: पेज बिल्डरने कसे काम केले पाहिजे याचा पुनर्विचार

लेखक:

मध्ये

,

version-3-0-rethinking-how-a-page-builder-should-workआम्ही पेज बिल्डर सँडविच (Page Builder Sandwich) लोकांसाठी उपलब्ध करून दिल्यानंतर आता १० महिने झाले आहेत. आमच्याकडे आता जवळपास ६,००० सक्रिय इन्स्टॉल्स आहेत आणि ही आमच्यासाठी खूप मोठी उपलब्धी आहे. यामुळे आम्हाला चांगला आणि वाईट, दोन्ही प्रकारचा भरपूर फीडबॅकही मिळाला आहे. तथापि, एकंदर मत असे आहे की इतर उपलब्ध पेज बिल्डर्सच्या तुलनेत लेआउट्स तयार करणे आणि मजकूर बनवणे किती सोपे आहे हे लोकांना आवडत आहे.

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

कालबाह्य झालेला इंटरफेस

PBS च्या आधीच्या व्हर्जन्समध्ये, सर्वकाही बटनांच्या स्वरूपात असावे असे आम्हाला वाटत होते. का? कारण बटणे वापरण्यास सोपी असतात. तुम्ही फक्त… त्यांच्यावर क्लिक करता. इन्स्पेक्टरच्या जुन्या व्हर्जन्समध्ये (वरील प्रतिमेवरील साइडबार), बटणावर क्लिक केल्याने व्हॅल्यू वाढायची, तर shift+क्लिक केल्याने ती कमी व्हायची. हे ऐकायला पुरेसे सोपे वाटते. परंतु कॅरोझल्स, टॅब्स, नकाशे आणि इतर नवीन घटक आणि वैशिष्ट्यांच्या समावेशामुळे, ती सर्व बटणे वेगवेगळ्या डिझाइनच्या विविध आयकॉनचा गोंधळ बनली, आणि एका उत्तम इंटरफेसपेक्षा प्राचीन चित्रांसारखी (hieroglyphics) दिसू लागली. अनुभवी वापरकर्त्यांसाठी ही समस्या नव्हती, परंतु तुम्ही PBS साठी नवीन असल्यास हे पाहणे खूप भीतीदायक वाटते.

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

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

आमचा इंटरफेस आता प्रभावी (किंवा आमच्या गरजांसाठी योग्य) राहिला नाही असा निर्णय घेण्यास भाग पाडणारी आणखी काही कारणे आहेत, परंतु वरील मुद्दे सर्वात महत्त्वाचे आहेत. तथापि एक गोष्ट नेहमीच निश्चित होती: आम्हाला माहित होते की इंटरफेस अपडेट करावाच लागेल.

पेज बिल्डरने आदर्शपणे कसे कार्य केले पाहिजे ते परिभाषित करणे

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

महत्त्वाची संकल्पना #१: मजकूर संपादित करण्यासाठी थेट त्यातच टाइप करणे

पेज बिल्डर इन्स्टॉल करण्याचे मुख्य कारणांपैकी एक म्हणजे वर्डप्रेसच्या बॅकएंड टेक्स्ट एडिटरच्या मर्यादांमधून बाहेर पडणे. बॅकएंड एडिटर चांगला नाही असे नाही, परंतु वेबपेजेस तयार करताना, तुमचे वेबपेज तुमच्या साइटवरील अभ्यागतांना कसे दिसेल हे ते लगेच दाखवत नाही, किंवा एका स्तंभाच्या लेआउटबाहेर मजकूर मांडण्याची परवानगीही देत नाही. तिथे तुम्ही फक्त तुमचा मजकूर आणि काही प्रतिमा पाहू शकता, परंतु अधिक सविस्तर गोष्टी (उदा. संपर्क फॉर्म) दिसत नाहीत. तुम्ही शॉर्टकोड्स जोडू शकता, होय, परंतु ते त्यांच्या अंतिम स्वरूपात (rendered form) दिसत नाहीत*.

* यावर उपाय म्हणून इतरांनी तयार केलेले Shortcake UI सारखे प्लगइन्स उपलब्ध आहेत, परंतु तो वेगळा विषय आहे.

तिथेच फ्रंटएंड पेज बिल्डर्सची भूमिका सुरू होते. ते संपादनाचा अनुभव बॅकएंडमधून बाहेर काढून फ्रंटएंडवर आणतात, जिथे तुमच्या अभ्यागतांना प्रत्यक्षात जशी दिसेल तशीच तुम्ही तुमची साइट संपादित करता. पिपिन यांच्या शब्दांत सांगायचे तर: व्हॉट यू सी इज व्हॉट यू गेट (WYSIWYG).

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

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

महत्त्वाची संकल्पना #२: जलद बदलांसाठी माउसचा वापर करणे

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

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

PBS व्हर्जन ३ मध्ये, तुम्ही तुमच्या माउसचा वापर करून अनेक गोष्टी ॲडजस्ट करू शकाल. तुम्ही स्वतंत्र घटकांमधील मार्जिन्स/अंतर, तुमच्या कॉलम्समधील पॅडिंग्ज, तसेच प्रतिमा, आयकॉन आणि नकाशे यांचे आकार ॲडजस्ट करू शकता. आम्ही संख्यात्मक मूल्ये बदलण्याची परवानगी देणारी बटणे बदलून त्यांच्या जागी स्लाइडर्स आणले आहेत.

महत्त्वाची संकल्पना #३: मजकूर स्टाइल करणे सोपे असले पाहिजे

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

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

यावर तोडगा काढण्यासाठी, आम्ही सर्वाधिक वापरल्या जाणाऱ्या वर्ड प्रोसेसर्सची पाहणी केली. आमच्या लक्षात आले की मजकूर फॉरमॅट करण्यासाठी त्यांच्याकडे स्क्रीनच्या वरच्या बाजूला भरपूर बटणांची एक ओळ असते, आणि आम्ही व्हर्जन ३ साठी तोच लेआउट स्वीकारला. आता आमच्याकडे स्क्रीनच्या वरच्या भागात नेहमी उपस्थित राहणारी सर्व टेक्स्ट स्टाइलिंग बटणांची एक ओळ आहे. यामुळे स्टाइलिंग खरोखर वेगवान होते आणि टेक्स्ट एडिटिंगमधील तुमचा सहज स्वभाव बनते.

महत्त्वाची संकल्पना #४: प्रगत स्टाइलिंग पर्याय लवचिक पण समजायला सोपे असावेत

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

महत्त्वाची संकल्पना #५: शॉर्टकोड सपोर्ट

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

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

निष्कर्ष

आम्ही वरील सर्व आवश्यक वैशिष्ट्ये घेतली आहेत आणि ती पेज बिल्डर सँडविच व्हर्जन ३ मध्ये समाविष्ट केली आहेत. वर्डप्रेससाठी आम्ही आतापर्यंत तयार केलेला हा सर्वोत्तम पेज बिल्डर आहे. हा वापरण्यासाठी अधिक अंतर्ज्ञानी आणि अधिक नैसर्गिक आहे, अधिक वेगवान कार्य करतो, वापरण्यास सोपा आहे आणि पूर्वीपेक्षा अधिक अनुकूल आहे.

पेज बिल्डरच्या एखाद्या आवश्यक फीचरबद्दल तुमचे काही विचार असल्यास, खाली कमेंट करून आम्हाला नक्की कळवा.