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

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

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

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

टेक्स्ट

ऐड-ऑन का नाम

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

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

लिखने की स्टाइल

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

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

  • वाक्य केस का इस्तेमाल करें (खास तौर पर बटन, लेबल, और मेन्यू आइटम के लिए).
  • कठिन और आसान टेक्स्ट वाले फ़ॉर्मैट को पसंद करें, जिसमें कठिन शब्दावली नहीं है.
यह न करें ऐसा करें

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

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

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

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

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

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

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

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

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

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

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

पसंद के मुताबिक यूज़र इंटरफ़ेस

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

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

यूज़र इंटरफ़ेस (यूआई) पर दिखने वाला टेक्स्ट

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

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

डायलॉग

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

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

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

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

कंट्रोल

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

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

बटन

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

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

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

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

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

मेन्यू चुनें

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

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

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

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

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

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

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

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

ब्रैंडिंग

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

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

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

स्टोर में उपलब्ध है

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

सुलभता

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

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

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