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