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