इस दस्तावेज़ में, एरियल व्यू का इस्तेमाल शुरू करने के लिए, अलग-अलग डिज़ाइन पैटर्न और आइडिया के बारे में बताया गया है. आपको अपने ग्राहकों को Aerial View दिखाने का तरीका सोच-समझकर तय करना चाहिए. इससे यह पक्का किया जा सकेगा कि प्रॉडक्ट के साथ ग्राहकों का जुड़ाव अच्छा हो और उन्हें इसकी अहमियत समझ आए.
एरियल व्यू की मदद से, अपनी वेबसाइट पर विज़ुअल के तौर पर आकर्षक कॉम्पोनेंट जोड़ा जा सकता है. इससे किसी प्रॉपर्टी और उसके आस-पास के इलाके को बर्ड आई व्यू में दिखाया जा सकता है.
जब उपयोगकर्ता किसी प्रॉपर्टी को 3D में देखते हैं, तो उन्हें उसकी जगह और साइज़ के बारे में बेहतर जानकारी मिलती है. इससे प्रॉपर्टी की सुविधाओं को हाइलाइट करने में भी मदद मिलती है. जैसे, पूल, आउटबिल्डिंग या बड़ा यार्ड. साथ ही, आस-पास की सुविधाओं को भी हाइलाइट किया जा सकता है. जैसे, सड़कें, पानी के स्रोत, पहाड़ या पार्क.
दर्शकों की दिलचस्पी बढ़ाना
एरियल व्यू आपके ग्राहकों को बहुत पसंद आएगा. इसका पूरा फ़ायदा पाने के लिए, कॉन्टेंट को आसानी से खोजा जा सकने वाला होना चाहिए. इस सेक्शन में, हम Aerial View के लिए कुछ डिज़ाइन पैटर्न के बारे में बात करेंगे, ताकि इस सुविधा को लागू किया जा सके.
वीडियो ओरिएंटेशन
यह ध्यान रखना ज़रूरी है कि जिस डिवाइस पर एरियल व्यू वाला वीडियो लोड हो रहा है उसकी स्क्रीन का ओरिएंटेशन क्या है. मोबाइल डिवाइस पर लैंडस्केप ओरिएंटेशन वाले वीडियो को दिखाना, उपयोगकर्ता के लिए खराब अनुभव हो सकता है. खास तौर पर, फ़ुल स्क्रीन मोड में. डिवाइस के लिए गलत आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का इस्तेमाल करके वीडियो दिखाने से, स्क्रीन का काफ़ी हिस्सा बर्बाद हो जाएगा.
एरियल व्यू वाले वीडियो, लैंडस्केप और पोर्ट्रेट ओरिएंटेशन में उपलब्ध होते हैं.
यहां मोबाइल डिवाइस पर, सुझाए गए ओरिएंटेशन और बिना सुझाव वाले ओरिएंटेशन में, Aerial View को चलाने के बीच के अंतर का उदाहरण देखा जा सकता है:
एम्बेड किया गया होवरकार्ड
प्रॉपर्टी सर्च व्यू में कई प्रॉपर्टी दिखाते समय, एरियल व्यू वाला वीडियो दिखाने के लिए, एम्बेड किए गए होवरकार्ड जोड़ना मददगार होता है. इनमें प्रॉपर्टी के बारे में ज़्यादा जानकारी भी दी जा सकती है. जैसे, सबसे ऊपर पता और कीमत की जानकारी. इससे उपयोगकर्ताओं को प्रॉपर्टी के बारे में तुरंत और आसानी से जानकारी मिल जाती है. इसके लिए, उन्हें प्रॉपर्टी की ज़्यादा जानकारी वाले पेज पर क्लिक करने की ज़रूरत नहीं पड़ती.
नीचे दिए गए उदाहरण में, माउंटेन व्यू में मौजूद Googleplex कॉम्प्लेक्स को दिखाने वाला मार्कर दिखाया गया है. इस मार्कर पर कर्सर घुमाने पर, होवरकार्ड दिखता है. इसमें प्रॉपर्टी का एरियल व्यू वाला वीडियो दिखता है.
मार्कर और एम्बेड किए गए होवरकार्ड, दोनों में onClick इवेंट जोड़ा जा सकता है. इससे उपयोगकर्ता को प्रॉपर्टी की ज़्यादा जानकारी वाले पेज पर ले जाया जा सकता है. इससे उपयोगकर्ताओं के लिए, प्रॉपर्टी के बारे में ज़्यादा जानकारी पाना और यह तय करना आसान हो जाता है कि वह उनके लिए सही है या नहीं.
अपनी प्रॉपर्टी के लिए स्टोरी जैसा अनुभव बनाएं
अगर आपको संभावित खरीदारों को बेहतरीन अनुभव देना है, तो अपनी प्रॉपर्टी को कहानी के तौर पर दिखाएं. इसमें फ़ोटो और एरियल व्यू वाले वीडियो को शामिल करें. इसे इमेज कैरसेल की तरह ही बनाया जा सकता है. इसके लिए, एचटीएमएल, सीएसएस, और JavaScript का इस्तेमाल करें.
ऊपर दिए गए उदाहरण में, हमने एक स्लाइड पर एरियल व्यू वाला वीडियो शामिल किया है. साथ ही, प्रॉपर्टी के बारे में ज़्यादा जानकारी देखने के लिए, सबसे नीचे एक लिंक दिया है. इस बटन पर क्लिक करने से, उपयोगकर्ता को प्रॉपर्टी की ज़्यादा जानकारी वाले पेज पर रीडायरेक्ट किया जाना चाहिए.
यह इस तरह से काम करता है:
- फ़ोटो चुनें. ऐसी कई फ़ोटो चुनें जो आपकी प्रॉपर्टी की सबसे अच्छी सुविधाओं को हाइलाइट करती हों.
- एरियल व्यू वाला वीडियो बनाएं.
- अपनी फ़ोटो और वीडियो को एक स्टोरी में जोड़ें.
- अपने प्रॉडक्ट के बारे में जानकारी देना. अपनी वेबसाइट या ईमेल मार्केटिंग कैंपेन पर, संभावित खरीदारों के साथ अपनी कहानी शेयर करें.
प्रॉपर्टी को कहानी के तौर पर दिखाने से, संभावित खरीदारों का ध्यान खींचा जा सकता है.
पेज लोड होने पर एरियल व्यू की सुविधा चालू करना
Google की यूएक्स स्टडी से पता चलता है कि जब 3D व्यू डिफ़ॉल्ट रूप से लोड होता है, तब उपयोगकर्ता का जुड़ाव सबसे ज़्यादा होता है. यह एक नया और शानदार फ़ॉर्म फ़ैक्टर है. इसलिए, हम चाहते हैं कि जब भी कोई ग्राहक प्रॉपर्टी की जानकारी देखना चाहे, तो यह तुरंत लोड हो जाए. अगर एपीआई से एरियल व्यू वाला वीडियो फ़ेच किया जाता है, तो आपसे शुल्क लिया जाएगा. वीडियो का अनुरोध किए जाने के बाद, उसे अपने-आप चलने के लिए सेट करें. इससे यह पक्का किया जा सकेगा कि आपके उपयोगकर्ताओं को फ़ायदा मिले.
एंटी पैटर्न: एरियल व्यू को किसी बटन के पीछे छिपाना, एंटी-पैटर्न माना जाता है. ऐसा इसलिए, क्योंकि इससे उपयोगकर्ताओं को 3D व्यू देखने के लिए एक और चरण पूरा करना पड़ता है. इससे उन्हें परेशानी हो सकती है. साथ ही, वे 3D व्यू के फ़ायदों से चूक सकते हैं या एरियल व्यू को स्टैटिक कॉन्टेंट समझ सकते हैं.
हमारा सुझाव है कि जब कोई ग्राहक किसी प्रॉपर्टी की जानकारी देखना चाहे, तो डिफ़ॉल्ट रूप से एरियल व्यू लोड करें. इससे उपयोगकर्ताओं को बेहतर अनुभव मिलेगा. साथ ही, उन्हें प्रॉपर्टी के बारे में सोच-समझकर फ़ैसला लेने में मदद मिलेगी. अपने-आप चलने वाले वीडियो की सुविधा को डिज़ाइन करते समय, ध्यान रखें कि एरियल व्यू वाले वीडियो का साइज़ 30 एमबी से ज़्यादा होता है. इसलिए, कुछ उपयोगकर्ताओं के लिए इसे लोड होने में समय लग सकता है.
अगर आपके पेज पर इमेज कैरसेल है, तो एरियल व्यू वाले वीडियो को मुख्य आइटम के तौर पर शामिल किया जा सकता है. इससे, आपको अपनी वेबसाइट के मौजूदा डिज़ाइन में 3D अनुभव को आसानी से इंटिग्रेट करने में मदद मिलेगी.
3D व्यू लोड करने के लिए बटन लगाना आसान है, लेकिन इससे यूज़र ऐक्टिविटी कम हो सकती है. Google Maps, डिफ़ॉल्ट रूप से 3D व्यू लोड करता है. उदाहरण के लिए, एम्पायर स्टेट बिल्डिंग को खोजने पर, 3D व्यू अपने-आप लोड हो जाता है. साथ ही, 3D व्यू में रहते हुए भी इमेज का कुछ हिस्सा देखा जा सकता है. यह उपयोगकर्ताओं को ज़्यादा दिलचस्प और बेहतर अनुभव देने का एक शानदार तरीका है.
बटन का डिज़ाइन
अगर आपको एरियल व्यू को ऐक्सेस करने के लिए बटन का इस्तेमाल करना है, तो इन बातों का ध्यान रखना ज़रूरी है:
- जगह की जानकारी: इस बटन को मैप से जुड़े अन्य बटन के साथ ग्रुप किया जाना चाहिए, ताकि उपयोगकर्ताओं को पता चल सके कि यह प्रॉपर्टी की जगह की जानकारी से जुड़ा है.
- ट्रांज़िशन: वीडियो का ट्रांज़िशन आसान और बिना किसी रुकावट के होना चाहिए. अगर पेज पर पहले से ही कोई ऐसा सेक्शन है जिसमें इमेज, मैप, और Street View दिखता है, तो एरियल व्यू वाला वीडियो भी उसी सेक्शन में दिखना चाहिए.
- हाइलाइट करना: यह पेज पर एक नया बटन होगा. इसलिए, इसे "नई सुविधा" टैग या वीडियो के थंबनेल की स्टिल इमेज के साथ हाइलाइट करना मददगार होगा.
- ज़ोर देना: बटन को मीडियम या हाई एंफ़सिस के साथ डिज़ाइन किया जाना चाहिए, क्योंकि इसे दबाने से कोई अहम कार्रवाई होगी. Google Material Design में, अलग-अलग लेवल के बटन डिज़ाइन करने के बारे में कुछ दिशा-निर्देश दिए गए हैं.
असरदार एरियल व्यू बटन डिज़ाइन करने के लिए, यहां कुछ और सुझाव दिए गए हैं:
- साफ़ तौर पर समझ में आने वाली और कम शब्दों में जानकारी देने वाली भाषा का इस्तेमाल करें. बटन पर साफ़ तौर पर लेबल होना चाहिए, ताकि उपयोगकर्ताओं को पता चल सके कि वह क्या करता है.
- बड़े और आसानी से पढ़े जा सकने वाले फ़ॉन्ट का इस्तेमाल करें. बटन इतना बड़ा होना चाहिए कि उपयोगकर्ता उसे आसानी से देख सकें और उस पर क्लिक कर सकें.
- कंट्रास्ट वाले रंग का इस्तेमाल करें. बटन का रंग, आस-पास के टेक्स्ट और बैकग्राउंड से अलग होना चाहिए, ताकि वह अलग से दिखे.
- कॉल-टू-ऐक्शन का इस्तेमाल करें. बटन में साफ़ तौर पर कॉल-टू-ऐक्शन शामिल होना चाहिए. जैसे, "एरियल व्यू देखें" या "वीडियो देखें".
डिसप्ले कैंपेन के लिए ध्यान देने वाली बातें
वीडियो लोड हो रहा है
धीमे कनेक्शन को ध्यान में रखते हुए, वीडियो की स्टिल इमेज की झलक दिखाई जा सकती है. साथ ही, उपयोगकर्ता के इंटरैक्शन, जैसे कि onClick पर पूरा अनुभव लोड किया जा सकता है. एरियल व्यू वाले वीडियो के साथ-साथ, आपको एक थंबनेल का ऐक्सेस भी मिलेगा. इसका इस्तेमाल करके, वीडियो को अपनी वेबसाइट पर एम्बेड किया जा सकता है.
आपके पास अलग-अलग रिज़ॉल्यूशन में वीडियो को ऐक्सेस करने का विकल्प भी होगा. इससे, वीडियो को अलग-अलग कनेक्शन स्पीड पर लोड होने में लगने वाले समय को कम किया जा सकता है.
लोगो एट्रिब्यूशन
एरियल व्यू की सुविधा लागू करते समय, आपको सभी शर्तों का पालन करना होगा. इनमें लोगो एट्रिब्यूशन भी शामिल है. ज़्यादा जानकारी के लिए, यह पेज देखें.
नतीजा
हमें उम्मीद है कि इस लेख से आपको अपनी वेबसाइट पर एरियल व्यू को लागू करने के बारे में सोचने की प्रेरणा मिली होगी. इससे आपको उपयोगकर्ताओं का जुड़ाव बढ़ाने में मदद मिलेगी.
यह सोचना ज़रूरी है कि उपयोगकर्ता को कॉन्टेंट कैसे मिलेगा और उसे किस फ़ॉर्मैट में दिखाना सबसे सही रहेगा. यह भी ध्यान रखना ज़रूरी है कि वीडियो किस तरह के डिवाइस पर चलाया जाएगा. खास तौर पर, स्क्रीन ओरिएंटेशन और उपयोगकर्ता के कनेक्शन स्पीड का ध्यान रखना ज़रूरी है.
अगले चरण
इस बारे में और पढ़ें:
योगदानकर्ता
Google इस लेख को मैनेज करता है. इसे मूल रूप से इन योगदान देने वालों ने लिखा है.
मुख्य लेखक:
हेनरिक वॉल्व | Google Maps Platform सॉल्यूशन इंजीनियर