एडिटर ऐड-ऑन के लिए यूज़र इंटरफ़ेस (यूआई) स्टाइल गाइड

एडिटर ऐड-ऑन Apps Script की एचटीएमएल सेवा का इस्तेमाल करके, यूज़र इंटरफ़ेस (मेन्यू, साइडबार, और डायलॉग) बनाएं. इंटरफ़ेस को एचटीएमएल और सीएसएस में डेवलप किया गया है, इसलिए इनमें अपनी ज़रूरत के हिसाब से बदलाव किए जा सकते हैं. हालांकि, अपना ऐड-ऑन इंटरफ़ेस बनाते समय, आपको इसे इस तरह डिज़ाइन करना चाहिए कि उपयोगकर्ताओं को बेहतरीन अनुभव मिले.

सबसे अच्छे ऐड-ऑन, जाने-पहचाने कंट्रोल और व्यवहार का इस्तेमाल करके, हर एडिटर का आसानी से विस्तार करते हैं. नया ऐड-ऑन बनाते समय:

टेक्स्ट

ऐड-ऑन का नाम

ऐड-ऑन को पब्लिश करते समय, आपको उसका नाम सेट करना होगा. यह नाम कई जगहों पर दिखता है, जैसे कि ऐड-ऑन स्टोर और मेन्यू में.

  • टाइटल केस का इस्तेमाल करें.
  • विराम चिह्न, खास तौर पर ब्रैकेट से बचें, जब तक कि यह आपके ब्रैंड का हिस्सा न हो.
  • इसे छोटा रखें—30 या इससे कम वर्ण का इस्तेमाल करना सबसे अच्छा होता है. लंबे नाम अपने-आप कांट-छांट किए जा सकते हैं.
  • उस Google प्रॉडक्ट का नाम शामिल न करें जिसके लिए ऐड-ऑन है (या Google शब्द का इस्तेमाल करें).
  • वर्शन जानकारी न दें.
  • पक्का करें कि ऐड-ऑन का पब्लिश किया गया नाम और स्क्रिप्ट प्रोजेक्ट का फ़ाइल नाम एक ही हो. प्रोजेक्ट का नाम, अनुमति देने वाले डायलॉग बॉक्स में दिखेगा.
क्या न करें क्या करें
ऐड-ऑन के गलत नाम ऐड-ऑन के सही नाम

लिखने की शैली

आपको ज़्यादा कुछ लिखने की ज़रूरत नहीं है. ज़्यादातर कार्रवाइयों को आइकॉनोग्राफ़ी, लेआउट, और छोटे लेबल से साफ़ तौर पर समझाया जाना चाहिए. अगर आपको लगता है कि ऐड-ऑन के किसी हिस्से के लिए छोटे लेबल की तुलना में ज़्यादा जानकारी की ज़रूरत है, तो सबसे सही तरीका है कि ऐड-ऑन की जानकारी देने वाला एक अलग वेब पेज बनाकर उसे उससे लिंक करें.

यूज़र इंटरफ़ेस (यूआई) टेक्स्ट लिखते समय:

  • अंग्रेज़ी के वाक्यों में खास तौर पर, बटन, लेबल, और मेन्यू आइटम के लिए, अंग्रेज़ी के बड़े अक्षरों का इस्तेमाल करें.
  • कठिन शब्दावली या संक्षिप्त रूपों के बिना छोटे, आसान टेक्स्ट को प्राथमिकता दें.
क्या न करें क्या करें

इंस्टॉल करने के बाद की सलाह

जब कोई व्यक्ति आपका ऐड-ऑन इंस्टॉल करता है, उसके तुरंत बाद आपकी पोस्ट-इंस्टॉल टिप पॉप-अप होती है और सहायता में भी दिखाई देती है. आपके पास कुछ वाक्य हैं. इससे लोगों को इसे जल्दी शुरू करने में मदद मिलेगी.

  • कार्रवाई शब्द से शुरू करें.
  • ऐड-ऑन का इस्तेमाल करने के पहले चरण के बारे में बताएं.
  • अगर आपके पास साइडबार जैसा मुख्य यूज़र इंटरफ़ेस (यूआई) है, तो उसे खोलने का तरीका बताएं.
  • अपने ऐड-ऑन का प्रमोशन यहां न करें—यह पहले से इंस्टॉल है.
क्या न करें क्या करें
इंस्टॉल करने के बाद की खराब सलाह इंस्टॉल करने के बाद अच्छी सलाह

सामान्य Apps Script प्रोजेक्ट के उलट, स्क्रिप्ट एडिटर या स्क्रिप्ट मैनेजर में ऐड-ऑन नहीं दिखते. उपयोगकर्ता सीधे तौर पर ऐड-ऑन स्क्रिप्ट नहीं चला सकते. इसके बजाय, हर ऐड-ऑन को ऐड-ऑन मेन्यू में जगह मिलती है. मेन्यू (और शायद एक डायलॉग या साइडबार) उपयोगकर्ताओं को ऐड-ऑन के साथ इंटरैक्ट करने देता है.

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

गड़बड़ी के मैसेज

जब कुछ गलत हो जाता है, तो आसान भाषा का इस्तेमाल करना ज़रूरी है. उपयोगकर्ता के हिसाब से, समस्या के बारे में बताएं और उसे ठीक करने का तरीका बताएं.

  • उपयोगकर्ता को आपका कोड इस्तेमाल करने वाला कोई अपवाद न देखने दें. इसके बजाय, try...catch अपवादों को रोकने के लिए स्टेटमेंट का इस्तेमाल करें. इसके बाद, ऐड-ऑन सीएसएस पैकेज या चेतावनी डायलॉग से, error क्लास के स्टाइल वाले इनलाइन टेक्स्ट के साथ यूज़र-फ़्राइडली गड़बड़ी का मैसेज दिखाएं.
  • पब्लिश करने से पहले, यह देख लें कि आपका ऐड-ऑन, JavaScript कंसोल में डीबग करने की जानकारी को लॉग नहीं करता. इसके बजाय, स्टैकड्राइवर लॉगिंग का इस्तेमाल करें.
क्या न करें क्या करें
गड़बड़ी का ख़राब मैसेज गड़बड़ी का अच्छा मैसेज

सहायता कॉन्टेंट

हर ऐड-ऑन के मेन्यू में एक ऑटोमैटिक सहायता डायलॉग शामिल होता है. अगर कॉन्टेंट पब्लिश करते समय कोई सहायता यूआरएल दिया जाता है, तो "ज़्यादा जानें" बटन को उस पेज से लिंक किया जाता है. अगर आपका ऐड-ऑन खुद आपके बारे में बताने वाला न हो, तो कृपया ऐसा पेज दें जिसमें इसके इस्तेमाल का तरीका बताया गया हो.

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

कस्टम यूज़र इंटरफ़ेस

कुछ आसान एडिटर ऐड-ऑन को उनके मेन्यू से पूरी तरह से कंट्रोल किया जा सकता है. हालांकि, ज़्यादातर ऐड-ऑन कस्टम कॉन्टेंट वाला साइडबार या डायलॉग दिखाते हैं.

  • साइडबार, उन स्थायी टूल के लिए सबसे अच्छे होते हैं जिनका इस्तेमाल लोग अपने दस्तावेज़ या स्प्रेडशीट के कॉन्टेंट के बारे में बताते समय बार-बार कर सकते हैं.
  • सिर्फ़ एक बार इस्तेमाल होने वाले टूल, सेटिंग पेज, और ज़रूरी मैसेज के लिए, डायलॉग बॉक्स सबसे अच्छे होते हैं.

यूज़र इंटरफ़ेस (यूआई) टेक्स्ट

किसी भी डायलॉग या साइडबार में, मान लें कि लोग सिर्फ़ टाइटल और बटन लेबल पढ़ते हैं. क्या वे अब भी पता लगा सकते हैं कि आपका इंटरफ़ेस क्या करता है और एक अच्छा विकल्प चुन सकता है?

  • ऐसे शीर्षक और बटन लेबल का इस्तेमाल करें जो अपने-आप खड़े हों.
  • जानकारी देने वाले टेक्स्ट के लंबे ब्लॉक इस्तेमाल न करें.

डायलॉग

डायलॉग उन टूल के लिए बेहतरीन हैं जिनका इस्तेमाल लोग एक बार करते हैं और फिर आगे बढ़ जाते हैं. उदाहरण के लिए, अगर आपके ऐड-ऑन में लोग ग्राफ़िक डालते हैं, तो हो सकता है कि आपको एक डायलॉग दिखाया जाए. इसमें यह चुनने का विकल्प होता है कि TYPE में क्या शामिल करना है. इसके बाद, ग्राफ़िक डाले जाने पर डायलॉग को बंद कर दें. डायलॉग से ऐड-ऑन की सेटिंग दिखाने या ज़रूरी मैसेज भेजने में भी मदद मिलती है.

  • किसी दूसरे डायलॉग से चेतावनी या प्रॉम्प्ट के साथ) न खोलें—एक-एक करके सिर्फ़ एक डायलॉग दिखाएं.
  • डायलॉग के शीर्षक में किसी शब्द या छोटे वाक्यांश का इस्तेमाल करें, जिसके आखिर में सबसे अहम शब्द हो.
  • बटन के लेबल, डायलॉग के टाइटल के हिसाब से होने चाहिए.
  • दो बटन दिखाए जाते हैं. आम तौर पर, मुख्य कार्रवाई और "रद्द करें" बटन होते हैं. ऐसे खास मामलों में, जहां तीसरे बटन की ज़रूरत होती है, सबसे नीचे दाएं कोने पर गौर करें.
  • संवाद के निचले-बाएं कोने में बटन लगाएँ. नीला मुख्य बटन बाईं ओर होना चाहिए. साथ ही, वह दाईं ओर मौजूद स्लेटी रंग के दूसरे बटन के साथ होना चाहिए.
क्या न करें क्या करें
खराब डायलॉग शीर्षक अच्छा डायलॉग टाइटल

साइडबार की सहायता से लोग विकल्प चुनते समय अपने दस्तावेज़, स्प्रैडशीट, प्रज़ेंटेशन या फ़ॉर्म को फिर से देख सकते हैं. इनकी मदद से, लोग बार-बार आपके ऐड-ऑन का इस्तेमाल भी कर सकते हैं. जब भी एक नया साइडबार खोला जाता है, तो कोई भी पिछला साइडबार अपने-आप बंद हो जाता है. ये कुछ समय तक रहने वाले मोड के लिए सबसे अच्छे होते हैं, जिन्हें पूरा करने के बाद उपयोगकर्ता कुछ समय के लिए साइट से बाहर निकल जाता है.

  • उपयोगकर्ताओं के पास खुद के साइडबार वाले अन्य ऐड-ऑन हो सकते हैं. अगर दो ऐड-ऑन एक साथ साइडबार खोलने की कोशिश करते हैं, तो सिर्फ़ एक दिखता है.
  • जब दस्तावेज़ पहली बार खुलता है, तो साइडबार या डायलॉग न दिखाएं.
  • सिर्फ़ AuthMode.FULL में काम करने वाले ऐड-ऑन, साइडबार या डायलॉग खोल सकते हैं. साइडबार खोलने के लिए, मेन्यू आइटम का इस्तेमाल किया जा सकता है, क्योंकि इससे उपयोगकर्ता को पूरा अनुमति देने का प्रॉम्प्ट मिलता है.

कंट्रोल

शानदार ऐड-ऑन यूज़र इंटरफ़ेस (यूआई) अपने कंट्रोल में कुछ नया कर सकते हैं. सही मार्जिन और पैडिंग (जगह) से लंबे समय तक बेहतर नतीजे देखने को मिलते हैं, जबकि घने कंट्रोल मुश्किल लग सकते हैं. जब आपको शक हो, तो एडिटर से ही लेआउट लें. उदाहरण के लिए, Google Docs में मौजूद डायलॉग बॉक्स देखें. जैसे, फ़ाइल > पेज सेटअप डायलॉग बॉक्स.

ऐड-ऑन सीएसएस पैकेज के दस्तावेज़ में, नीचे दिए गए हर तरह के कंट्रोल के लिए सैंपल मार्कअप दिया गया है.

बटन

सादे लिंक या दूसरी चीज़ों के बजाय, अपने यूज़र इंटरफ़ेस की मुख्य कार्रवाइयों को कंट्रोल करने के लिए, बटनों का इस्तेमाल करें.

  • एक बार में एक से ज़्यादा नीले, लाल या हरे बटन दिखाने से बचें. धूसर बटन बार-बार दिख सकते हैं.
  • ज़्यादातर बटन लेबल, वाक्य के तौर पर होने चाहिए. साथ ही, इनकी शुरुआत क्रिया से शुरू होनी चाहिए. लाल बटन में, आम तौर पर ऐक्शन बनाने के लिए कैपिटल लेटर का इस्तेमाल होना चाहिए.
क्या न करें क्या करें

चेकबॉक्स और रेडियो बटन

जब लोग एक से ज़्यादा विकल्प चुन सकते हैं या कोई भी विकल्प नहीं चुन सकते हैं, तब चेकबॉक्स का इस्तेमाल करें. जब एक विकल्प चुना जाना ज़रूरी हो, तो रेडियो बटन (या कोई मेन्यू चुनें) का इस्तेमाल करें.

  • रेडियो बटन की नकल करने के लिए चेकबॉक्स के व्यवहार में बदलाव न करें.
  • जांच पूरी हो जाने के बाद, तुरंत कोई कार्रवाई न करें. लोग गलतियां करते हैं. तब तक इंतज़ार करें, जब तक उपयोगकर्ता अपनी पसंद की पुष्टि करने के लिए बटन पर क्लिक नहीं करते.

मेन्यू चुनें

विकल्पों की छोटी सूची उपलब्ध कराने के लिए, सेलेक्ट करना एक शानदार तरीका है.

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

टेक्स्ट क्षेत्र

अगर लोगों को कुछ शब्दों से ज़्यादा टाइप करना है, तो टेक्स्ट एरिया का इस्तेमाल करें.

  • टेक्स्ट वाले हिस्सों को कम से कम दो लाइनों वाला बनाएं, ताकि उनका इस्तेमाल करना आसान हो और वे टेक्स्ट फ़ील्ड जैसे न दिखें.
  • लेबल को ऊपर रखें.

टेक्स्ट फ़ील्ड

अगर लोगों को सिर्फ़ एक या दो शब्द टाइप करने हों, तो टेक्स्ट फ़ील्ड का इस्तेमाल करें.

  • टेक्स्ट फ़ील्ड की चौड़ाई से पता चलना चाहिए कि लोग उसमें क्या टाइप कर सकते हैं.
  • प्लेसहोल्डर टेक्स्ट को लेबल के तौर पर इस्तेमाल न करें, क्योंकि वह फ़ोकस करने पर हट जाता है. प्लेसहोल्डर टेक्स्ट, उदाहरण या ज़्यादा जानकारी देने के लिए उपयोगी होता है.
  • लेबल को सबसे ऊपर रखें, लेकिन छोटे टेक्स्ट फ़ील्ड को अगल-बगल में बेझिझक रखें.

ब्रैंडिंग

आपके ऐड-ऑन में

अगर आपको ब्रैंडिंग भी शामिल करनी है, तो इसे कम शब्दों में और कम शब्दों में लिखें. इससे लोगों को आपके यूज़र इंटरफ़ेस (यूआई) पर फ़ोकस करने में मदद मिलती है और आपका ऐड-ऑन किसी एडिटर का हिस्सा लगता है.

  • यह ज़रूरी है कि आपके ऐड-ऑन के सभी पहलू, ब्रैंडिंग के दिशा-निर्देशों के मुताबिक हों.
  • "Google" शब्द शामिल न करें या Google के प्रॉडक्ट आइकॉन का इस्तेमाल न करें.
  • टेक्स्ट में ज़्यादा से ज़्यादा कुछ शब्द होने चाहिए. साथ ही, टेक्स्ट को ऐड-ऑन सीएसएस पैकेज की gray क्लास के हिसाब से बनाया जाना चाहिए.
  • ग्राफ़िक सफ़ेद बैकग्राउंड पर होने चाहिए. इनका साइज़ 200 पिक्सल × 60 पिक्सल से ज़्यादा नहीं होना चाहिए.
  • डायलॉग के लिए, ब्रैंडिंग सबसे नीचे दाएं कोने में होनी चाहिए.
  • साइडबार के लिए, ब्रैंडिंग सबसे ऊपर या नीचे हो सकती है.

स्टोर में

एडिटर ऐड-ऑन पब्लिश करने के लिए, कई इमेज एसेट की ज़रूरत होती है. इन ऐसेट का इस्तेमाल, ऐड-ऑन स्टोर पेज बनाने के लिए किया जाता है.

सुलभता

कोई भी व्यक्ति आपके ऐड-ऑन का आनंद ले सकता है. भले ही, उसे रंग अलग तरह से दिखें, स्क्रीन रीडर का इस्तेमाल करना हो या उसे कोई और ज़रूरत हो. सुलभता एक ऐसा विषय है जिसके बारे में इस स्टाइल गाइड में पूरी तरह से नहीं बताया गया है. Google Accessibility की साइट आपके लिए मददगार साबित हो सकती है. हालांकि, शुरुआत करने के लिए यहां कुछ सलाह दी गई है:

  • पक्का करें कि कीबोर्ड से सभी यूज़र इंटरफ़ेस (यूआई) कंट्रोल पर जाया जा सकता है. tabindex=0 को पसंद के मुताबिक कंट्रोल (जैसे कि <div> से बनाए गए कंट्रोल) में जोड़ें, ताकि लोग उन्हें टैब कर सकें. देखें कि क्या दूसरी कुंजियों का भी इस्तेमाल किया जा सकता है, जैसे कि सूची के लिए ऐरो.
  • कुछ लोग आपके ऐड-ऑन के साथ स्क्रीन रीडर का इस्तेमाल कर सकते हैं. इसलिए, इमेज में एक alt एट्रिब्यूट होना चाहिए. साथ ही, कस्टम कंट्रोल में ARIA एट्रिब्यूट होने चाहिए, ताकि उनके इस्तेमाल के बारे में बताया जा सके.
  • स्थिति बताने के लिए, सिर्फ़ रंग पर निर्भर न रहें. आइकॉन और टेक्स्ट का भी इस्तेमाल करें.

अगर स्टैंडर्ड वेब कंट्रोल का इस्तेमाल किया जाता है, जैसा कि इस गाइड में पहले बताया गया है, तो ऐड-ऑन को ऐक्सेस करना आसान हो जाता है.