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

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

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

टेक्स्ट

ऐड-ऑन का नाम

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

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

लिखने का तरीका

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ऐसे टाइटल और बटन लेबल का इस्तेमाल करें जो अपने-आप काम करते हों.
  • ब्यौरे वाले लंबे ब्लॉक इस्तेमाल करने से बचें.

डायलॉग

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

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

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

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

कंट्रोल

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

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

बटन

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

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

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

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

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

मेन्यू चुनना

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

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

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

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

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

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

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

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

ब्रैंडिंग

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

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

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

स्टोर में

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

सुलभता

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

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

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