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