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