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