এই ডকুমেন্টটিতে আপনার এরিয়াল ভিউ যাত্রা শুরু করার জন্য বিভিন্ন ডিজাইন প্যাটার্ন এবং ধারণা বর্ণনা করা হয়েছে। আপনি আপনার গ্রাহকদের কাছে এরিয়াল ভিউ কীভাবে উপস্থাপন করবেন, তা সতর্কতার সাথে বিবেচনা করতে হবে, যাতে আপনি পণ্যটির সাথে একটি ভালো সম্পৃক্ততা দেখতে পান এবং আপনার গ্রাহকরা এর গুরুত্ব উপলব্ধি করতে পারে।
এরিয়াল ভিউ আপনার ওয়েবসাইটে একটি দৃষ্টিনন্দন উপাদান যোগ করে, যা কোনো সম্পত্তি এবং তার চারপাশের আকাশ থেকে দেখা দৃশ্য প্রদর্শন করে।
ব্যবহারকারীরা যখন কোনো সম্পত্তিকে ত্রিমাত্রিকভাবে দেখেন, তখন তারা এর অবস্থান এবং আকার সম্পর্কে আরও ভালোভাবে ধারণা পেতে পারেন। এটি রাস্তা, জলাশয়, পাহাড় বা পার্কের মতো কাছাকাছি বৈশিষ্ট্যগুলোর পাশাপাশি পুল, বাইরের ছোট ভবন বা বড় উঠানের মতো সম্পত্তির বিশেষ দিকগুলো তুলে ধরতেও সাহায্য করে।
সম্পৃক্ততা বৃদ্ধি
এরিয়াল ভিউ আপনার গ্রাহকদের জন্য একটি দারুণ আকর্ষণ হবে, এবং এর সম্পূর্ণ সুবিধা পেতে হলে, বিষয়বস্তু খুঁজে পাওয়া যতটা সম্ভব সহজ হতে হবে। এই অংশে, আমরা এটি অর্জনের জন্য এরিয়াল ভিউ-এর কিছু বাস্তবায়ন ডিজাইন প্যাটার্ন নিয়ে আলোচনা করব।
ভিডিও ওরিয়েন্টেশন
এরিয়াল ভিউ ভিডিওটি যে ডিভাইসে লোড হচ্ছে, তার স্ক্রিন ওরিয়েন্টেশন বিবেচনা করা গুরুত্বপূর্ণ। মোবাইল ডিভাইসে, বিশেষ করে ফুল স্ক্রিনে, ল্যান্ডস্কেপ ওরিয়েন্টেড ভিডিও দেখানো ব্যবহারকারীর জন্য একটি খারাপ অভিজ্ঞতা হতে পারে। ডিভাইসের জন্য ভুল অ্যাস্পেক্ট রেশিও ব্যবহার করে ভিডিও প্রদর্শন করলে, স্ক্রিনের একটি উল্লেখযোগ্য অংশ নষ্ট হবে।
আকাশ থেকে তোলা ভিডিওগুলো ল্যান্ডস্কেপ এবং পোর্ট্রেট ওরিয়েন্টেশনে প্রদান করা হয়।
নিচে, একটি মোবাইল ডিভাইসে প্রস্তাবিত এবং অপ্রস্তাবিত ওরিয়েন্টেশনে এরিয়াল ভিউ চালানোর পার্থক্যের একটি উদাহরণ দেখা যেতে পারে:
এমবেডেড হোভারকার্ড
প্রপার্টি সার্চ ভিউতে একাধিক প্রপার্টি প্রদর্শন করার সময়, এরিয়াল ভিউ ভিডিও দেখানোর জন্য এমবেডেড হোভারকার্ড যোগ করা সহায়ক হয়, যেখানে প্রপার্টিটির ঠিকানা এবং দামের মতো অতিরিক্ত তথ্য উপরে ওভারলে করা থাকে। এর ফলে ব্যবহারকারীরা প্রপার্টির বিস্তারিত পেজে ক্লিক না করেই দ্রুত এবং সহজে প্রপার্টিটি সম্পর্কে একটি ধারণা পেতে পারেন।
নিচের উদাহরণটিতে মাউন্টেন ভিউ-এর গুগলপ্লেক্স কমপ্লেক্সের একটি মার্কার দেখানো হয়েছে। যখন আপনি এই মার্কারটির উপর মাউস নিয়ে যাবেন, তখন হোভারকার্ডটি প্রদর্শিত হবে, যা ওই প্রপার্টির আকাশ থেকে তোলা ভিডিওটি দেখাবে।
ব্যবহারকারীকে প্রপার্টির বিস্তারিত পেজে নিয়ে যাওয়ার জন্য মার্কার এবং এমবেডেড হোভারকার্ড উভয়ের সাথেই একটি onClick ইভেন্ট যোগ করা যেতে পারে। এর ফলে ব্যবহারকারীরা সহজেই প্রপার্টিটি সম্পর্কে আরও জানতে পারেন এবং এটি তাদের জন্য উপযুক্ত কিনা, সে বিষয়ে সিদ্ধান্ত নিতে পারেন।
আপনার সম্পত্তির জন্য একটি গল্প-সদৃশ অভিজ্ঞতা তৈরি করুন
আপনি যদি সম্ভাব্য ক্রেতাদের জন্য একটি সত্যিকারের আকর্ষণীয় অভিজ্ঞতা তৈরি করতে চান, তাহলে ছবি এবং আকাশ থেকে তোলা ভিডিওর সমন্বয়ে একটি গল্পের মতো করে আপনার সম্পত্তিটি প্রদর্শন করতে পারেন। এটি HTML, CSS, এবং JavaScript-এর মিশ্রণ ব্যবহার করে একটি ইমেজ ক্যারোসেলের মতোই তৈরি করা যেতে পারে।
উপরের উদাহরণে, আমরা একটি স্লাইডে আকাশ থেকে তোলা ভিডিওটি যুক্ত করেছি এবং সম্পত্তিটি সম্পর্কে আরও বিস্তারিত তথ্য দেখার জন্য নিচে একটি লিঙ্ক দিয়েছি। এই বাটনটি ব্যবহারকারীকে সম্পত্তির বিস্তারিত তথ্যের পাতায় নিয়ে যাবে।
এটি যেভাবে কাজ করে:
- আপনার ছবিগুলো বাছাই করুন। এমন বিভিন্ন ধরনের ছবি নির্বাচন করুন যা আপনার সম্পত্তির সেরা বৈশিষ্ট্যগুলোকে তুলে ধরে।
- আপনার আকাশ থেকে তোলা ভিডিও তৈরি করুন।
- আপনার ছবি ও ভিডিও একত্রিত করে একটি গল্প তৈরি করুন।
- আপনার গল্পটি বলুন। আপনার ওয়েবসাইটে অথবা ইমেল মার্কেটিং ক্যাম্পেইনের মাধ্যমে সম্ভাব্য ক্রেতাদের কাছে আপনার গল্পটি তুলে ধরুন।
আপনার প্রদর্শনীমূলক সম্পত্তিটির জন্য একটি গল্পের মতো অভিজ্ঞতা তৈরি করার মাধ্যমে, আপনি সম্ভাব্য ক্রেতাদের মনোযোগ আকর্ষণ করতে সক্ষম হবেন।
পৃষ্ঠা লোড হওয়ার সাথে সাথে আকাশ থেকে দৃশ্য শুরু হচ্ছে
গুগলের ইউএক্স (UX) সমীক্ষায় দেখা যায় যে, যখন ৩ডি ভিউ ডিফল্টভাবে লোড হয়, তখন ব্যবহারকারীর সম্পৃক্ততা সর্বোচ্চ থাকে। যেহেতু এটি একটি নতুন এবং আকর্ষণীয় ফর্ম ফ্যাক্টর, তাই আমরা চাই গ্রাহক যখনই কোনো সম্পত্তির বিবরণ দেখতে চাইবেন, তখনই যেন এটি লোড হয়ে যায়। খরচের কথা ভাবলে, আপনি যদি এপিআই (API) থেকে কোনো এরিয়াল ভিউ ভিডিও সংগ্রহ করেন, তবে আপনাকে চার্জ করা হবে। ভিডিওটির জন্য অনুরোধ করা হয়ে গেলে, এটি অটো-প্লে করার কথা বিবেচনা করুন, যাতে আপনার ব্যবহারকারীরা এর সুবিধাটি দেখতে পান।
অ্যান্টি-প্যাটার্ন: একটি বাটনের আড়ালে এরিয়াল ভিউ লুকিয়ে রাখাকে একটি অ্যান্টি-প্যাটার্ন হিসেবে গণ্য করা হয়, কারণ এটি ব্যবহারকারীদের ৩ডি ভিউ দেখার জন্য একটি অতিরিক্ত ধাপ অনুসরণ করতে বাধ্য করে। এটি বিরক্তিকর হতে পারে এবং এর ফলে তারা ৩ডি ভিউয়ের সুবিধাগুলো থেকে বঞ্চিত হতে পারেন অথবা এরিয়াল ভিউকে স্থির বিষয়বস্তু বলে ভুল করতে পারেন।
যখন কোনো গ্রাহক সম্পত্তির বিবরণ দেখতে চান, তখন ডিফল্টরূপে এরিয়াল ভিউ লোড করার পরামর্শ দেওয়া হচ্ছে। এটি একটি চমৎকার ব্যবহারকারী অভিজ্ঞতা দেবে এবং সম্পত্তিটি সম্পর্কে তাদের একটি সুচিন্তিত সিদ্ধান্ত নিতে সাহায্য করবে। অটোপ্লে অভিজ্ঞতা ডিজাইন করার সময় মনে রাখবেন যে, এরিয়াল ভিউ ভিডিওটির সাইজ ৩০ এমবি-র বেশি এবং কিছু ব্যবহারকারীর জন্য এটি লোড হতে ধীর হতে পারে।
আপনার পেজের অংশ হিসেবে যদি একটি ইমেজ ক্যারোসেল থাকে, তাহলে এরিয়াল ভিউ ভিডিওটিকে প্রধান আইটেম হিসেবে অন্তর্ভুক্ত করা যেতে পারে, যা আপনাকে আপনার বিদ্যমান ওয়েবসাইট ডিজাইনের সাথে সহজেই থ্রিডি অভিজ্ঞতাটি একীভূত করার সুযোগ দেবে।
থ্রিডি ভিউ লোড করার জন্য বাটন যুক্ত করা সহজ, কিন্তু এটি ব্যবহারকারীর সম্পৃক্ততা কমিয়ে দিতে পারে। গুগল ম্যাপস ডিফল্টভাবেই থ্রিডি ভিউ লোড করে। উদাহরণস্বরূপ, যখন আপনি এম্পায়ার স্টেট বিল্ডিং লিখে সার্চ করেন, তখন থ্রিডি ভিউটি স্বয়ংক্রিয়ভাবে লোড হয়ে যায় এবং থ্রিডি ভিউয়ের মধ্যেই আপনি ছবিটির একটি আংশিক দৃশ্য দেখতে পান। ব্যবহারকারীদের আরও বেশি নিমগ্ন ও আকর্ষণীয় অভিজ্ঞতা দেওয়ার জন্য এটি একটি চমৎকার উপায়।
বোতাম ডিজাইন
এরিয়াল ভিউ অ্যাক্সেস করার জন্য যদি আপনি বাটন ব্যবহার করার সিদ্ধান্ত নেন, তবে নিম্নলিখিত বিষয়গুলো বিবেচনা করা গুরুত্বপূর্ণ:
- অবস্থান : বাটনটিকে অন্যান্য ম্যাপিং-সম্পর্কিত বাটনের সাথে গ্রুপ করা উচিত, যাতে ব্যবহারকারীরা বুঝতে পারে যে এটি সম্পত্তির অবস্থানের সাথে সম্পর্কিত।
- রূপান্তর : ভিডিওতে রূপান্তরটি মসৃণ এবং নির্বিঘ্ন হওয়া উচিত। যদি পৃষ্ঠায় আগে থেকেই ছবি, মানচিত্র এবং স্ট্রিট ভিউ প্রদর্শনের জন্য কোনো বিভাগ থাকে, তাহলে এরিয়াল ভিউ ভিডিওটিও সেই একই বিভাগে দেখানো উচিত।
- বিশেষ আকর্ষণ : যেহেতু এটি পেজে একটি নতুন সংযোজন হবে, তাই বাটনটিকে একটি 'নতুন ফিচার' ট্যাগ অথবা ভিডিওটির একটি স্থির চিত্র থাম্বনেইল দিয়ে হাইলাইট করা সহায়ক হবে।
- গুরুত্ব : বাটনটি মাঝারি বা উচ্চ গুরুত্ব দিয়ে ডিজাইন করা উচিত, কারণ এটি চাপলে একটি গুরুত্বপূর্ণ কাজ সম্পন্ন হবে। বিভিন্ন মাত্রার গুরুত্ব সহ বাটন কীভাবে ডিজাইন করতে হয়, সে বিষয়ে গুগল ম্যাটেরিয়াল ডিজাইনে কিছু নির্দেশনা রয়েছে।
একটি কার্যকরী এরিয়াল ভিউ বাটন ডিজাইন করার জন্য এখানে আরও কিছু পরামর্শ দেওয়া হলো:
- স্পষ্ট ও সংক্ষিপ্ত ভাষা ব্যবহার করুন। বাটনটিতে সুস্পষ্ট লেবেল থাকা উচিত, যাতে ব্যবহারকারীরা বুঝতে পারে এটি কী কাজ করে।
- বড় এবং স্পষ্টাক্ষরের ফন্ট ব্যবহার করুন। বাটনটি যথেষ্ট বড় হওয়া উচিত যাতে ব্যবহারকারীরা সহজেই তা দেখতে ও ক্লিক করতে পারে।
- একটি বৈসাদৃশ্যপূর্ণ রঙ ব্যবহার করুন। বাটনটির রঙ তার চারপাশের লেখা ও পটভূমি থেকে আলাদা হওয়া উচিত, যাতে এটি সহজেই চোখে পড়ে।
- একটি কল টু অ্যাকশন ব্যবহার করুন। বাটনটিতে একটি সুস্পষ্ট কল টু অ্যাকশন থাকা উচিত, যেমন "আকাশ থেকে তোলা দৃশ্য দেখুন" বা "ভিডিও দেখুন"।
প্রদর্শন বিবেচনা
ভিডিও লোড হচ্ছে
ধীরগতির সংযোগের কথা বিবেচনা করে, আপনি ভিডিওটির একটি স্থির চিত্র প্রিভিউ প্রদর্শন করতে পারেন এবং ব্যবহারকারীর কোনো ইন্টারঅ্যাকশনের (যেমন onClick) মাধ্যমে সম্পূর্ণ অভিজ্ঞতাটি লোড করতে পারেন। এরিয়াল ভিউ ভিডিওটির পাশাপাশি, আপনি একটি থাম্বনেইলও পাবেন যা এই কাজটি করার জন্য ব্যবহার করা যেতে পারে।
আপনি বিভিন্ন রেজোলিউশনেও ভিডিওটি দেখার সুযোগ পাবেন, ফলে বিভিন্ন সংযোগ গতিতে অভিজ্ঞতাটি লোড হওয়ার জন্য ব্যবহারকারীর অপেক্ষার সময় কমানোর উদ্দেশ্যে এগুলো কৌশলগতভাবে ব্যবহার করা যেতে পারে।
লোগো অ্যাট্রিবিউশন
এরিয়াল ভিউ প্রয়োগ করার সময়, আপনাকে অবশ্যই লোগো অ্যাট্রিবিউশন সহ সমস্ত শর্তাবলী অনুসরণ করতে হবে। বিস্তারিত জানতে এই পৃষ্ঠাটি দেখুন ।
উপসংহার
আমরা আশা করি, এই নিবন্ধটি আপনাকে আপনার ওয়েবসাইটে উচ্চ ব্যবহারকারী সম্পৃক্ততা সহ এরিয়াল ভিউ কীভাবে প্রয়োগ করবেন, সে সম্পর্কে ভাবতে অনুপ্রেরণা দিয়েছে।
আপনার ব্যবহারকারী কীভাবে কন্টেন্টটি খুঁজে পাবে এবং কোন ফরম্যাটে এটি প্রদর্শন করা সবচেয়ে উপযুক্ত হবে, তা নিয়ে ভাবা জরুরি। ভিডিওটি কোন ধরনের ডিভাইসে চালানো হবে, বিশেষ করে স্ক্রিন ওরিয়েন্টেশন এবং ব্যবহারকারীর সংযোগের গতি বিবেচনা করাও ভালো।
পরবর্তী পদক্ষেপ
আরও পড়ার জন্য পরামর্শ:
অবদানকারীরা
গুগল এই নিবন্ধটি রক্ষণাবেক্ষণ করে। নিম্নলিখিত অবদানকারীরা মূলত এটি লিখেছেন।
প্রধান লেখক:
হেনরিক ভালভ | গুগল ম্যাপস প্ল্যাটফর্ম সলিউশনস ইঞ্জিনিয়ার