इंटरैक्टिव कैनवस को डिज़ाइन करने के दो मुख्य पहलू हैं:
- बातचीत डिज़ाइन करना
- यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करना
आपके उपयोगकर्ता Google Assistant से बात करके या यूज़र इंटरफ़ेस (यूआई) को छूकर, इंटरैक्टिव कैनवस का इस्तेमाल करने वाली आपकी सेट की गई कार्रवाई से इंटरैक्ट कर सकते हैं. आपको यह पक्का करना चाहिए कि आपकी बातचीत और यूज़र इंटरफ़ेस (यूआई) एक-दूसरे के साथ बेहतर हो. साथ ही, आपकी सेट की गई कार्रवाई से उपयोगकर्ताओं के लिए इसे आसान और मज़ेदार बनाना चाहिए. नीचे दिए गए सेक्शन में बताया गया है कि बेहतरीन उपयोगकर्ता अनुभव के लिए बातचीत और यूज़र इंटरफ़ेस (यूआई) दोनों को कैसे डिज़ाइन किया जाए.
क्या इंटरैक्टिव कैनवस मेरी कार्रवाई के लिए सही है?
डिज़ाइन करना शुरू करने से पहले, इस बारे में सोचें कि आपकी सेट की गई कार्रवाई, इंटरैक्टिव कैनवस के साथ काम करेगी या नहीं. अगर आपकी सेट की गई कार्रवाई नीचे दी गई शर्तों को पूरा करती है, तो आपको इंटरैक्टिव कैनवस का इस्तेमाल करना चाहिए:
- आपकी सेट की गई कार्रवाई को विज़ुअल तौर पर बेहतर अनुभव देने वाली फ़ुल-स्क्रीन का फ़ायदा मिलता है. इंटरैक्टिव कैनवस, फ़ुल-स्क्रीन पर अनुभव के लिए सबसे बेहतर है. बेहतर विज़ुअल, जैसे कि आवाज़ से चलने वाले इमर्सिव गेम का फ़ायदा मिलता है.
- आपकी सेट की गई कार्रवाई में बातचीत की प्रोसेस को आसान बनाया गया है. आपकी सेट की गई कार्रवाई का अहम पाथ सिर्फ़ बोलकर इस्तेमाल किया जा सकता है. ऐसी कार्रवाई जिसके लिए जगह के हिसाब से सटीक जानकारी की ज़रूरत होती है, जैसे कि ड्रॉइंग ऐप्लिकेशन. इस वजह से, बातचीत का आसान फ़्लो डिज़ाइन करना मुश्किल हो सकता है.
- मौजूदा कॉम्पोनेंट और उन्हें पसंद के मुताबिक बनाना काफ़ी नहीं है. उदाहरण के लिए, आप Assistant के मौजूदा विज़ुअल कॉम्पोनेंट और पसंद के मुताबिक बनाने से बेहतर काम करना चाहते हैं. इंटरैक्टिव कैनवस में आपके खास विज़ुअल ब्रैंड एट्रिब्यूट, डाइनैमिक एलिमेंट, और ऐनिमेशन दिखाए जा सकते हैं. इसके अलावा, जब उपयोगकर्ता बातचीत के ज़रिए आगे बढ़ता है, तो इंटरैक्टिव कैनवस का इस्तेमाल एक विज़ुअल इंटरफ़ेस में अपडेट देने के लिए किया जा सकता है.
ज़रूरी शर्तें
हालांकि, इंटरैक्टिव कैनवस में वेब डेवलपमेंट के लिए जाना-पहचाना प्लैटफ़ॉर्म इस्तेमाल किया जाता है, लेकिन ऐक्शन को तैयार करने से पहले, कुछ बातों का ध्यान रखना ज़रूरी है.
हेडर या टोस्ट मैसेज
डिफ़ॉल्ट रूप से, हर इंटरैक्टिव कैनवस वेब ऐप्लिकेशन में स्क्रीन के सबसे ऊपर एक हेडर होता है. इस हेडर में आपके ब्रैंड का नाम होता है. हेडर के लिए रिज़र्व की गई जगह में मोबाइल के लिए ऊंचाई 56 डीपी, होम हब के लिए 96 डीपी और स्मार्ट डिसप्ले के लिए 120 डीपी है. हेडर की इस शर्त को पूरा करना न भूलें:
- पक्का करें कि हेडर के पीछे कोई भी ज़रूरी जानकारी या इंटरैक्टिव एलिमेंट न दिखे.
getHeaderHeightPx()तरीका हेडर की ऊंचाई तय करता है.
वैकल्पिक तौर पर, हेडर को लोड होने वाली स्क्रीन पर दिखने वाले टोस्ट मैसेज से बदला जा सकता है. इसमें कार्रवाई का डिसप्ले नेम, डेवलपर का नाम, और कार्रवाई से बाहर निकलने के निर्देश शामिल होते हैं. हेडर को टोस्ट मैसेज से बदलने और अपने उपयोगकर्ता के लिए फ़ुल-स्क्रीन मोड चालू करने के लिए, फ़ुल-स्क्रीन मोड चालू करें देखें.
कंस्ट्रेंट
अपनी कार्रवाई को इंटरैक्टिव कैनवस की मदद से डिज़ाइन करने से पहले, इन बातों का ध्यान रखें:
- डेटा का कोई लोकल स्टोरेज नहीं. हम कार्रवाई को कुकी सेव करने और Web Storage API को ऐक्सेस करने से रोकते हैं. इन पाबंदियों को देखते हुए, हमारा सुझाव है कि आपकी सेट की गई कार्रवाई, वेबहुक की स्थिति को मैनेज करती हो. साथ ही, उपयोगकर्ता का डेटा सेव करने के लिए, उपयोगकर्ता के स्टोरेज का इस्तेमाल करती हो.
- कोई पॉप-अप या मोडल नहीं. हम कार्रवाई को कोई भी पॉप-अप विंडो या मोडल दिखाने से रोकते हैं. हम आपको ऐसे दूसरे स्टैंडर्ड नेविगेशनल यूज़र इंटरफ़ेस (यूआई) एलिमेंट का इस्तेमाल करने की सलाह नहीं देते हैं जो आम तौर पर वेब ऐप्लिकेशन में दिखते हैं, जैसे कि कीबोर्ड और पेज नंबर.
अपनी बातचीत डिज़ाइन करें
आपको सबसे पहले अपनी सेट की गई कार्रवाई से जुड़ी बातचीत को डिज़ाइन करना होगा. कैनवस पर इंटरैक्टिव अनुभव अब भी वॉइस-फ़ॉरवर्ड का इस्तेमाल किया जा सकता है. इसलिए, यह ज़रूरी है कि आपकी बातचीत, कार्रवाई के ज़रिए लोगों को बेहतर तरीके से गाइड करे. आप एक ऐसी कार्रवाई के बारे में सोच सकते हैं जो मददगार विज़ुअल के साथ बातचीत के तौर पर इंटरैक्टिव कैनवस का इस्तेमाल करती है. बातचीत को डिज़ाइन करने के बारे में ज़्यादा जानकारी के लिए, Google के बातचीत डिज़ाइन करने से जुड़े दिशा-निर्देश देखें.
दिशा-निर्देश
बेहतरीन उपयोगकर्ता अनुभव पाने के लिए, आपको ये काम करने चाहिए:
बातचीत डिज़ाइन करने की प्रोसेस और सबसे सही तरीकों को अपनाएं. Google बातचीत डिज़ाइन करने के दिशा-निर्देश में हमारे सबसे सही तरीकों के बारे में बताया गया है. इसका मतलब है कि अन्य चीज़ों के अलावा, आपको:
- पक्का करें कि आपकी सेट की गई कार्रवाई का अनुभव बातचीत के लिए अच्छा काम करता हो
- ब्रैंड पर्सोना बनाना
- बातचीत में होने वाली गड़बड़ियों को ठीक करना
- स्क्रीन पर कैसा दिखेगा, यह तय करने से पहले सिर्फ़ वॉइस सर्च की सुविधा आज़माएं
छूकर और आवाज़ का इस्तेमाल करके, पहले जैसी सुविधाएं देने की कोशिश करें. अगर हो सके, तो स्क्रीन को छूकर वे सभी काम करें जो आप बोलकर भी कर सकते हैं.
पक्का करें कि आपकी सेट की गई कार्रवाई का अहम पाथ बोलकर इस्तेमाल किया जा सके. आपके उपयोगकर्ता सिर्फ़ आवाज़ का इस्तेमाल करके आपकी सेट की गई कार्रवाई के मुख्य पाथ से जा सकते हों.
पक्का करें कि उपयोगकर्ता आपकी सेट की गई कार्रवाई को बिना ऑडियो के इस्तेमाल कर सकता हो. मोबाइल डिवाइस पर, हो सकता है कि उपयोगकर्ता ने ऑडियो चालू न किया हो. इस वजह से, लोगों की मदद करने के लिए, अपनी सेट की गई कार्रवाई में ट्रांसक्रिप्ट जोड़ें.
कॉग्निटिव लोड को ध्यान में रखें. लोगों की समस्याओं को कम करने के लिए, आवाज़ से जुड़ी बहुत ज़्यादा लंबी कार्रवाइयों से बचें.
अपना यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करें
अपनी बातचीत डिज़ाइन करने के बाद, उसे पूरा करने के लिए यूज़र इंटरफ़ेस (यूआई) को डिज़ाइन किया जा सकता है. डिज़ाइन करते समय, इस बात पर ध्यान दें कि डायलॉग का सही तरीके से इस्तेमाल करने से लोगों को विज़ुअल इंटरफ़ेस कैसा दिखेगा. स्मार्ट डिसप्ले के लिए डिज़ाइन करते समय, स्मार्ट डिसप्ले के लिए डिज़ाइन करें सेक्शन में दी गई खास बातों को देखें.
दिशा-निर्देश
बेहतरीन उपयोगकर्ता अनुभव पाने के लिए, आपको ये काम करने चाहिए:
- रिस्पॉन्सिव डिज़ाइन बनाएं. पक्का करें कि आपके डिज़ाइन, लैंडस्केप या पोर्ट्रेट मोड में भी काम करें. साथ ही, उन्हें छोटे फ़ोन से बड़ी स्क्रीन पर भी लगाएं. उपयोगकर्ता हर तरह के प्लैटफ़ॉर्म के लिए, यूज़र इंटरफ़ेस (यूआई) को आसानी से पढ़ सकें.
- कॉग्निटिव लोड को ध्यान में रखें. उपयोगकर्ताओं को परेशान होने से बचाने के लिए, स्क्रीन पर दिख रही जानकारी और कॉन्टेंट को व्यवस्थित, साफ़, और कम शब्दों में लिखें.
- स्क्रीन पर आवाज़ के आउटपुट की सुविधा इस्तेमाल करें. ऑडियो को बेहतर तरीके से समझाने के लिए, विज़ुअल का इस्तेमाल करें, न कि सिर्फ़ वही बात, जो ज़ोर से पढ़कर सुनाई जा रही है. जब स्क्रीन उपलब्ध होती है, तो हम बोलकर निर्देश देने की सुविधा के बजाय, अपनी आवाज़ को ज़्यादा सटीक बना सकते हैं.
- किसी भी अहम जानकारी या कॉम्पोनेंट को स्क्रीन के निचले हिस्से में रखने से बचें. मोबाइल पर उपयोगकर्ता की ट्रांसक्रिप्ट, माइक प्लेट के ऊपर दिखती है और कुछ लाइनों में दिख सकती है. हालांकि, यह ट्रांसक्रिप्ट कुछ समय के लिए ही होती है, लेकिन ज़रूरी कॉन्टेंट को स्क्रीन के नीचे लिखने से बचें. सुझाव वाले चिप से मिलते-जुलते बटन, स्क्रीन पर सबसे नीचे दिखते हैं, क्योंकि उपयोगकर्ता का इनपुट, सुझाव वाले चिप इस्तेमाल करने का एक विकल्प है.
- बातचीत में गड़बड़ियों को विज़ुअल तरीके से मैनेज करें. गड़बड़ियां तब हो सकती हैं जब उपयोगकर्ता जवाब न दे, अगर आप उन्हें समझ नहीं पा रहे हैं या उनकी बात पूरी नहीं कर रहे हैं. पता लगाएं कि ये गड़बड़ी के संकेत आपके यूज़र इंटरफ़ेस पर कहां जाते हैं. यह वह जगह हो सकती है जहां आपने डिस्प्ले प्रॉम्प्ट (जैसे कि टाइटल में) डाले हैं या फिर यह कुछ अलग हो सकता है (जैसे कि कॉन्टेंट का एक खास सेक्शन, जो ज़रूरत के हिसाब से दिखता है). गड़बड़ियों को ठीक करने के बारे में और सलाह पाने के लिए, बातचीत को डिज़ाइन करने से जुड़े दिशा-निर्देशों में गड़बड़ियां देखें.
स्मार्ट डिसप्ले के लिए डिज़ाइन
हालांकि, ऊपर बताए गए दिशा-निर्देश अब भी लागू होते हैं, फिर भी स्मार्ट डिसप्ले डिज़ाइन करते समय आपको डिज़ाइन से जुड़ी दूसरी बातों का ध्यान रखना चाहिए. स्मार्ट डिसप्ले को टैबलेट की तरह डिज़ाइन करते समय इस्तेमाल करना बहुत अच्छा लगता है. हालांकि, स्मार्ट डिसप्ले डिवाइस की पूरी तरह से अलग और नई कैटगरी है, जिसकी दो वजहें हैं:
- स्मार्ट डिसप्ले पर आवाज़ की सुविधा होती है. साथ ही, Google Assistant एक ऑपरेटिंग सिस्टम है,
- स्मार्ट डिसप्ले स्टेशनरी होते हैं और मोबाइल डिवाइसों की तरह, घर में इस्तेमाल होने पर ये अक्सर किचन या बेडरूम में रखे जाते हैं
इन विशेषताओं की वजह से, उपयोगकर्ता कभी-कभी डिवाइस के आस-पास नहीं होते. वे सिर्फ़ अपनी आवाज़ का इस्तेमाल करके स्मार्ट डिसप्ले से इंटरैक्ट करते हैं. स्मार्ट डिसप्ले का इस्तेमाल करते समय उपयोगकर्ता एक साथ कई काम कर सकते हैं. स्मार्ट डिसप्ले के लिए डिज़ाइन करते समय, इनके इस्तेमाल का ध्यान रखना ज़रूरी है.
दिशा-निर्देश
स्मार्ट डिसप्ले पर लोगों को बेहतरीन अनुभव देने के लिए, आपको ये काम करने चाहिए:
- सबसे पहले आवाज़ को ध्यान में रखकर डिज़ाइन करें. अपने इंटरैक्टिव कैनवस को डिज़ाइन करना स्मार्ट डिसप्ले के लिए, ऐक्शन को वॉइस-फ़ॉरवर्ड के तौर पर डिज़ाइन करना और भी ज़रूरी है. मोबाइल डिवाइस के उलट, हो सकता है कि आपका उपयोगकर्ता कमरे में खड़ा हो और सिर्फ़ बोलकर ही अपने स्मार्ट डिसप्ले से बातचीत कर रहा हो. इस वजह से, आपकी कार्रवाई को आगे बढ़ाने के लिए, उपयोगकर्ता के डिवाइस को छू रहे उपयोगकर्ता पर निर्भर रहने की ज़रूरत नहीं है. आपको यह पक्का करना होगा कि उपयोगकर्ता, बोलकर आपकी कार्रवाई को आगे बढ़ा सकें.
- वीडियो देखने की एक खास दूरी को ध्यान में रखकर डिज़ाइन करें. स्मार्ट डिसप्ले पर कॉन्टेंट
इस तरह से डिज़ाइन करें, ताकि उसे दूर से देखा जा सके. कमरे के साइज़ के हिसाब से, स्मार्ट डिसप्ले पर वीडियो देखने की दूरी 3 से 10 फ़ीट तक होती है.
- मुख्य टेक्स्ट, जैसे कि टाइटल के लिए कम से कम 32 पॉइंट का फ़ॉन्ट साइज़ इस्तेमाल करें. दूसरे टेक्स्ट, जैसे कि ब्यौरे या टेक्स्ट के पैराग्राफ़ के लिए, कम से कम 24 पॉइंट इस्तेमाल करें.
- एक बार में एक ही टचपॉइंट पर फ़ोकस करें. सीखने-समझने से जुड़े वर्कलोड कम करने और कॉन्टेंट को दूर से पढ़ने लायक बनाने के लिए, एक बार में एक तरह की मुख्य जानकारी या टास्क दिखाएं. उदाहरण के लिए, जब लोग पूछते हैं कि "मेरा दिन कैसा है?", Google Assistant मौसम, कैलेंडर, यात्रा, और समाचार से जुड़े कॉन्टेंट के हिसाब से जवाब देती है. हर तरह का कॉन्टेंट, फ़ुल स्क्रीन में दिखता है. इसे एक साथ स्क्रीन पर दिखाए जाने के बजाय, क्रम से दिखाया जाता है.
संसाधन
इंटरैक्टिव कैनवस का इस्तेमाल करने वाली किसी कार्रवाई को डिज़ाइन करने के बारे में ज़्यादा जानकारी के लिए, ये संसाधन देखें:
- बातचीत डिज़ाइन करने के दिशा-निर्देश
- मल्टीमॉडल डिज़ाइन से जुड़े दिशा-निर्देश
- यूज़र इंटरफ़ेस (यूआई) को डिज़ाइन करने में मदद पाने के लिए, हमारा स्केच टेंप्लेट डाउनलोड करें.