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

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

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

टेक्स्ट और इमेज

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

ऐड-ऑन का नाम

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

  • टाइटल केस का इस्तेमाल करें.
  • विराम चिह्न, खास तौर पर ब्रैकेट से बचें, जब तक कि यह आपके ब्रैंड का हिस्सा न हो.
  • इसे छोटा रखें—15 या उससे कम वर्ण का इस्तेमाल करना सबसे अच्छा होता है. हो सकता है कि Google Workspace Marketplace की लिस्टिंग और दूसरी जगहों पर, लंबे नाम अपने-आप कट जाएं.
  • अपने ऐड-ऑन के नाम में "Google", "Gmail" या दूसरे Google प्रॉडक्ट के नाम शामिल न करें.
  • अपने ऐड-ऑन के नाम में "ऐड-ऑन" शब्द शामिल न करें.
  • वर्शन जानकारी न दें.

लिखने की शैली

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

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

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

यूनिवर्सल और कार्ड से जुड़ी कार्रवाइयां

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

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

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

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

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

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

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

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

इमेज

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

कंट्रोल

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

बटन

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

  • टेक्स्ट के ज़्यादातर बटन के लेबल, क्रिया से शुरू होने चाहिए.
  • ज़्यादातर मामलों में, बटन की लाइनों में तीन या उससे कम बटन होने चाहिए.

सजाए गए टेक्स्ट

DecdText विजेट की मदद से आप आइकॉन, बटन या स्विच के ज़रिए टेक्स्ट कॉन्टेंट प्रज़ेंट कर सकते हैं.

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

चुनने के लिए इनपुट

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

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

टेक्स्ट इनपुट

टेक्स्ट इनपुट की मदद से, उपयोगकर्ता स्ट्रिंग का डेटा डाल सकते हैं.

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

ब्रैंडिंग

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

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

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

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

Google Workspace Marketplace में

ऐड-ऑन को पब्लिकेशन के लिए कॉन्फ़िगर करते समय, आपको Google Workspace Marketplace की लिस्टिंग बनाने के लिए, कई ग्राफ़िक और टेक्स्ट एसेट उपलब्ध कराने की ज़रूरत होती है.

आपके स्टोर पेज और इन ऐसेट के सभी पहलुओं को, ब्रैंडिंग से जुड़े दिशा-निर्देशों के मुताबिक होना चाहिए.