दिखने की सुविधा को ब्लॉक करना

ब्लॉक के दिखने से यह पता चलता है कि उनका इस्तेमाल कैसे किया जा सकता है. अपने ब्लॉक को स्टाइल करते समय, इन बातों का ध्यान रखें.

बॉर्डर का इस्तेमाल करना

साल 2000 में 'एक्वा' लुक काफ़ी लोकप्रिय था. इस दौरान, स्क्रीन पर मौजूद हर ऑब्जेक्ट को हाइलाइट और शेडो के साथ सजाया जाता था. साल 2010 में, 'मटीरियल डिज़ाइन' स्टाइल काफ़ी लोकप्रिय हुआ. इस स्टाइल में, स्क्रीन पर मौजूद हर ऑब्जेक्ट को साफ़, फ़्लैट, और बिना बॉर्डर वाले आकार में दिखाया गया. ज़्यादातर ब्लॉक प्रोग्रामिंग एनवायरमेंट में, हर ब्लॉक के चारों ओर हाइलाइट और शेडो होते हैं. इसलिए, जब आज के ग्राफ़िक डिज़ाइनर इसे देखते हैं, तो वे इन पुराने डिज़ाइन को हटा देते हैं.

scriptr.io से लिए गए पांच ब्लॉक के ऊपर दिए गए उदाहरण में देखा जा सकता है कि एक जैसे रंग के कनेक्ट किए गए ब्लॉक को अलग-अलग दिखाने के लिए, ये 'आउटडेटेड डेकोरेशन' ज़रूरी हैं.

सुझाव: Blockly को फिर से डिज़ाइन करते समय, आज के फ़ैशन के हिसाब से बदलाव न करें. इससे आपके ऐप्लिकेशन में गड़बड़ियां हो सकती हैं.

दिशा के ऐरो जोड़ना

अमेरिका के बच्चों के सुझावों से पता चला है कि उन्हें बाईं और दाईं ओर के बटन के बीच का अंतर समझने में काफ़ी परेशानी हो रही है. हालांकि, अन्य देशों के बच्चों को ऐसा नहीं लगा. ऐरो जोड़ने के बाद, यह समस्या हल हो गई. अगर दिशा किसी अवतार के हिसाब से है, तो ऐरो का स्टाइल ज़रूरी है. जब अवतार दूसरी दिशा में होता है, तो → सीधा ऐरो या ↱ मुड़ने वाला ऐरो भ्रमित करता है. ⟳ सर्कुलर ऐरो सबसे ज़्यादा मददगार होता है. भले ही, ऐरो के दिखाए गए ऐंगल से, घुमाया गया ऐंगल कम हो.

सुझाव: जहां भी हो सके, टेक्स्ट के साथ यूनिकोड आइकॉन का इस्तेमाल करें.

अलग-अलग हॉरिज़ॉन्टल और वर्टिकल कनेक्टर का इस्तेमाल करना

Blockly में दो तरह के कनेक्शन होते हैं: हॉरिज़ॉन्टल पहेली के आकार और वर्टिकल स्टैकिंग नॉच. किसी अच्छे यूज़र इंटरफ़ेस में डिज़ाइन एलिमेंट की संख्या कम होनी चाहिए. इसलिए, कई डिज़ाइनर दोनों तरह के कनेक्शन को एक जैसा दिखाने की कोशिश करते हैं (जैसा कि नीचे दिखाया गया है).

इस वजह से, नए उपयोगकर्ताओं को ब्लॉक को घुमाने के तरीके खोजने में परेशानी होती है, ताकि वे उन्हें ऐसे कनेक्शन में फ़िट कर सकें जो काम नहीं करते. Blockly, प्रोग्रामिंग एलिमेंट को विज़ुअल और आसान बनाता है. इसलिए, आपको इस बात का ध्यान रखना होगा कि आपने यूज़र इंटरैक्शन के लिए ऐसे विकल्प न सुझाए जो काम न करते हों.

इसलिए, Blockly वैल्यू के कनेक्शन के लिए, ज़रूरत के हिसाब से फ़िट होने वाले पहेली के आकार का इस्तेमाल करता है. साथ ही, स्टेटमेंट को स्टैक करने के लिए, अलग-अलग तरह के अलाइनमेंट का इस्तेमाल करता है.

सुझाव: Blockly को फिर से डिज़ाइन करते समय, पक्का करें कि हॉरिज़ॉन्टल और वर्टिकल कनेक्शन अलग-अलग दिखें.

नेस्ट किए गए स्टेटमेंट को स्टैक किया जा सकता है

'C' आकार के ब्लॉक में, अंदर के ऊपरी हिस्से में हमेशा कनेक्टर होता है. हालांकि, कुछ प्लैटफ़ॉर्म (जैसे, Wonder Workshop) में अंदर के निचले हिस्से में भी कनेक्टर होता है, जबकि कुछ में नहीं होता (जैसे, Blockly और Scratch). ज़्यादातर स्टेटमेंट ब्लॉक में, ऊपर और नीचे, दोनों तरफ़ कनेक्टर होते हैं. इसलिए, कुछ उपयोगकर्ताओं को तुरंत नहीं पता चलता कि स्टेटमेंट, बिना नीचे वाले कनेक्टर वाले 'C' में फ़िट हो जाएंगे.

जब उपयोगकर्ता यह समझ लेते हैं कि एक स्टेटमेंट ब्लॉक, 'C' के अंदर फ़िट होता है, तो उन्हें यह समझना होगा कि एक से ज़्यादा स्टेटमेंट भी फ़िट होंगे. कुछ एनवायरमेंट में, पहले स्टेटमेंट के निचले कनेक्शन को 'C' के नीचे नेस्ट किया जाता है (जैसे, Wonder Workshop और Scratch), जबकि दूसरे में थोड़ा अंतर होता है (जैसे, Blockly). स्नग नेस्टिंग से यह पता नहीं चलता कि ज़्यादा ब्लॉक स्टैक किए जा सकते हैं.

ये दोनों समस्याएं एक-दूसरे के साथ खराब तरीके से इंटरैक्ट करती हैं. अगर अंदरूनी बॉटम कनेक्टर मौजूद है (Wonder Workshop), तो शुरुआती स्टेटमेंट का कनेक्शन ज़्यादा साफ़ तौर पर दिखता है. हालांकि, ऐसा करने पर स्टैकिंग की सुविधा का पता नहीं चलता. अगर कोई अंदरूनी सबसे नीचे वाला कनेक्टर मौजूद नहीं है (Blockly), तो शुरुआती स्टेटमेंट का कनेक्शन साफ़ तौर पर नहीं दिखता है. हालांकि, स्टैकिंग का पता लगाया जा सकता है. Blockly की मदद से जांच करने पर, सबसे खराब परफ़ॉर्मेंस वाले प्रोग्राम में, सबसे नीचे कोई कनेक्टर नहीं था और स्टेटमेंट के सबसे नीचे मौजूद कनेक्टर (Scratch) को नेस्ट किया गया था.

हमारे अनुभव के मुताबिक, उपयोगकर्ताओं के लिए स्टैकिंग की सुविधा को खोजने के मुकाबले, शुरुआती स्टेटमेंट के कनेक्शन को समझना आसान है. पहली बार किसी चीज़ को जानने के बाद, उसे कभी नहीं भूला जाता. वहीं, दूसरी चीज़ को याद रखने के लिए, बार-बार याद दिलाना पड़ता है. Blockly ने Wonder Workshop और Scratch, दोनों तरीकों को आज़माया. हालांकि, एक दिन रेंडरिंग में गड़बड़ी हुई, जिसकी वजह से छोटा गैप दिखने लगा. इस गड़बड़ी की वजह से, हमें Blockly के साथ उपयोगकर्ताओं के बारे में ज़्यादा जानकारी मिली. अब हम इस 'सुविधा' पर गर्व कर रहे हैं.

सुझाव: Blockly को फिर से डिज़ाइन करते समय, स्टैकिंग वाले मौजूदा यूज़र इंटरफ़ेस (यूआई) को न बदलें.