এই দস্তাবেজটি আপনাকে আপনার এরিয়াল ভিউ যাত্রা শুরু করতে বিভিন্ন নকশার ধরণ এবং ধারণাগুলি বর্ণনা করে৷ আপনি কীভাবে আপনার গ্রাহকদের কাছে এরিয়াল ভিউ উপস্থাপন করবেন তা অবশ্যই সাবধানতার সাথে বিবেচনা করা উচিত যাতে আপনি পণ্যের সাথে একটি ভাল স্তরের ব্যস্ততা দেখতে পান এবং আপনার গ্রাহকরা এর মূল্য দেখতে পান।
এরিয়াল ভিউ আপনার ওয়েবসাইটে একটি দৃশ্যমান আকর্ষণীয় উপাদান যোগ করে, যা একটি সম্পত্তি এবং আশেপাশের পাখির চোখের দৃশ্য দেখায়।
যখন ব্যবহারকারীরা 3D তে একটি সম্পত্তি দেখেন, তখন তারা এর অবস্থান এবং আকার সম্পর্কে আরও ভাল ধারণা পেতে পারেন। এটি রাস্তা, জলাশয়, পাহাড় বা পার্কের মতো কাছাকাছি বৈশিষ্ট্যগুলি ছাড়াও সম্পত্তির বৈশিষ্ট্যগুলি যেমন একটি পুল, আউটবিল্ডিং বা একটি বড় উঠানের মতো হাইলাইট করতে সহায়তা করে৷
ব্যস্ততা বৃদ্ধি
এরিয়াল ভিউ আপনার গ্রাহকদের জন্য একটি বাহ ফ্যাক্টর হবে, এবং সম্পূর্ণ সুবিধা দেখতে, বিষয়বস্তু আবিষ্কার করা যতটা সম্ভব সহজ হতে হবে। এই বিভাগে, আমরা এটি অর্জনের জন্য এরিয়াল ভিউ-এর জন্য কিছু বাস্তবায়ন নকশা প্যাটার্ন সম্পর্কে কথা বলব।
ভিডিও অভিযোজন
এরিয়াল ভিউ ভিডিওটি যে ডিভাইসে লোড হচ্ছে তার স্ক্রিন অভিযোজন বিবেচনা করা গুরুত্বপূর্ণ৷ একটি মোবাইল ডিভাইসে বিশেষ করে পূর্ণ স্ক্রিনে একটি ল্যান্ডস্কেপ ওরিয়েন্টেড ভিডিও দেখানো একটি খারাপ ব্যবহারকারীর অভিজ্ঞতা হতে পারে। ডিভাইসের জন্য ভুল অনুপাত ব্যবহার করে একটি ভিডিও প্রদর্শন করে, আপনি স্ক্রীন রিয়েল এস্টেটের একটি উল্লেখযোগ্য পরিমাণ নষ্ট করবেন।
এরিয়াল ভিউ ভিডিও ল্যান্ডস্কেপ এবং পোর্ট্রেট ওরিয়েন্টেশনে দেওয়া হয়।
নীচে, পার্থক্যের একটি উদাহরণ একটি মোবাইল ডিভাইসে, প্রস্তাবিত অভিযোজনে এবং অ-প্রস্তাবিত অভিযোজনে এরিয়াল ভিউ চালানোর ক্ষেত্রে দেখা যেতে পারে:
এমবেডেড হোভারকার্ড
প্রপার্টি সার্চ ভিউতে একাধিক প্রপার্টি প্রদর্শন করার সময়, এরিয়াল ভিউ ভিডিও দেখানোর জন্য এম্বেড করা হোভারকার্ড যোগ করা সহায়ক, যেখানে সম্পত্তি সম্পর্কে অতিরিক্ত তথ্য, যেমন ঠিকানা এবং দাম উপরে দেওয়া আছে। এটি ব্যবহারকারীদের সম্পত্তির বিবরণ পৃষ্ঠায় ক্লিক না করেই দ্রুত এবং সহজে সম্পত্তি সম্পর্কে ধারণা পেতে দেয়।
নীচের উদাহরণটি মাউন্টেন ভিউতে Googleplex কমপ্লেক্সের প্রতিনিধিত্বকারী একটি মার্কার দেখায়। আপনি যখন এই মার্কারের উপর হোভার করেন, তখন হোভারকার্ডটি প্রদর্শিত হয়, যা সম্পত্তির এরিয়াল ভিউ ভিডিও দেখায়।
ব্যবহারকারীকে সম্পত্তির বিশদ পৃষ্ঠায় নিয়ে যেতে মার্কার এবং এমবেড করা হোভারকার্ড উভয়েই একটি onClick ইভেন্ট যোগ করা যেতে পারে। এটি ব্যবহারকারীদের সম্পত্তি সম্পর্কে আরও জানতে এবং এটি তাদের জন্য সঠিক কিনা তা সিদ্ধান্ত নেওয়া সহজ করে তোলে।
আপনার সম্পত্তির জন্য গল্পের মতো অভিজ্ঞতা তৈরি করুন
আপনি যদি সম্ভাব্য ক্রেতাদের জন্য সত্যিই একটি নিমগ্ন অভিজ্ঞতা তৈরি করতে চান, তাহলে আপনি আপনার সম্পত্তিকে একটি গল্পের মতো অভিজ্ঞতার সাথে প্রদর্শন করতে পারেন যা ফটো এবং একটি এরিয়াল ভিউ ভিডিওকে একত্রিত করে৷ এটি একটি ইমেজ ক্যারোজেলের মতো একইভাবে তৈরি করা যেতে পারে, একটি মিশ্রণ ব্যবহার করে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট।
উপরের উদাহরণে, সম্পত্তি সম্পর্কে আরও বিশদ দেখতে নীচের অংশে একটি লিঙ্ক সহ আমরা একটি স্লাইডে এরিয়াল ভিউ ভিডিও অন্তর্ভুক্ত করেছি। এই বোতামটি ব্যবহারকারীকে সম্পত্তির বিবরণ পৃষ্ঠায় নিয়ে যাবে।
এটি কিভাবে কাজ করে তা এখানে:
- আপনার ফটো চয়ন করুন. আপনার সম্পত্তির সেরা বৈশিষ্ট্যগুলি হাইলাইট করে এমন বিভিন্ন ফটো নির্বাচন করুন৷
- আপনার এরিয়াল ভিউ ভিডিও তৈরি করুন।
- একটি গল্পে আপনার ফটো এবং ভিডিও একত্রিত করুন।
- আপনার গল্প শেয়ার করুন. আপনার ওয়েবসাইট, বা ইমেল বিপণন প্রচারাভিযান সম্ভাব্য ক্রেতাদের সাথে আপনার গল্প শেয়ার করুন.
আপনার শোকেস সম্পত্তির জন্য গল্পের মতো অভিজ্ঞতা তৈরি করে, আপনি সম্ভাব্য ক্রেতাদের দৃষ্টি আকর্ষণ করতে সক্ষম হবেন।
পৃষ্ঠা লোডে এরিয়াল ভিউ শুরু হচ্ছে
Google-এর UX গবেষণায় আমরা দেখতে পাই যে ডিফল্টরূপে 3D ভিউ লোড হলেই সর্বোচ্চ ব্যবহারকারীর ব্যস্ততা ঘটে। যেহেতু এটি একটি নতুন এবং উত্তেজনাপূর্ণ ফর্ম ফ্যাক্টর আমরা এটি লোড করতে চাই যত তাড়াতাড়ি একজন গ্রাহক সম্পত্তির বিবরণ দেখতে চান। খরচ সম্পর্কে চিন্তা করার সময়, আপনি যদি API থেকে একটি এরিয়াল ভিউ ভিডিও আনছেন, তাহলে আপনাকে চার্জ করা হবে। একবার ভিডিওটির অনুরোধ করা হলে, আপনার ব্যবহারকারীরা সুবিধা দেখতে পান তা নিশ্চিত করতে অটোপ্লে করার কথা বিবেচনা করুন।
অ্যান্টি প্যাটার্ন: একটি বোতামের পিছনে এরিয়াল ভিউ লুকানো একটি অ্যান্টি-প্যাটার্ন হিসাবে বিবেচিত হয় কারণ এটি ব্যবহারকারীদের 3D ভিউ দেখার জন্য অতিরিক্ত পদক্ষেপ নিতে বাধ্য করে। এটি হতাশাজনক হতে পারে, এবং এটি তাদের 3D দৃশ্যের সুবিধাগুলি থেকে বঞ্চিত হতে পারে বা স্থির বিষয়বস্তু হিসাবে এরিয়াল ভিউকে ভুল করতে পারে।
একজন গ্রাহক যখন সম্পত্তির বিশদ বিবরণ দেখতে চান তখন আপনি ডিফল্টরূপে এরিয়াল ভিউ লোড করার পরামর্শ দেওয়া হয়। এটি একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা দেবে এবং তাদের সম্পত্তি সম্পর্কে একটি জ্ঞাত সিদ্ধান্ত নিতে সহায়তা করবে। অটোপ্লে অভিজ্ঞতা ডিজাইন করার সময়, মনে রাখবেন যে এরিয়াল ভিউ ভিডিওটি 30 MB+, এবং কিছু ব্যবহারকারীর জন্য লোড হতে ধীর হতে পারে৷
আপনার পৃষ্ঠার অংশ হিসাবে আপনার যদি একটি চিত্র ক্যারোজেল থাকে, তাহলে এরিয়াল ভিউ ভিডিওটি প্রধান আইটেম হিসাবে অন্তর্ভুক্ত করা যেতে পারে, যা আপনাকে আপনার বিদ্যমান ওয়েবসাইট ডিজাইনে 3D অভিজ্ঞতাকে সহজেই সংহত করতে দেয়৷
3D ভিউ লোড করার জন্য বোতাম স্থাপন করা সহজ, কিন্তু এটি ব্যস্ততা কমাতে পারে। Google মানচিত্র ডিফল্টরূপে 3D ভিউ লোড করে। উদাহরণস্বরূপ, আপনি যখন এম্পায়ার স্টেট বিল্ডিং অনুসন্ধান করেন, তখন 3D ভিউ স্বয়ংক্রিয়ভাবে লোড হয় এবং আপনি 3D ভিউতে থাকাকালীন ছবিগুলির একটি আংশিক দৃশ্য দেখতে পারেন৷ এটি ব্যবহারকারীদের আরও নিমগ্ন এবং আকর্ষক অভিজ্ঞতা দেওয়ার একটি দুর্দান্ত উপায়৷
বোতাম ডিজাইন
আপনি যদি এরিয়াল ভিউ অ্যাক্সেস করার জন্য একটি বোতাম ব্যবহার করতে চান তবে নিম্নলিখিতগুলি বিবেচনা করা গুরুত্বপূর্ণ:
- অবস্থান : বোতামটিকে অন্যান্য ম্যাপিং-সম্পর্কিত বোতামগুলির সাথে গোষ্ঠীবদ্ধ করা উচিত যাতে ব্যবহারকারীরা জানেন যে এটি সম্পত্তির অবস্থানের সাথে সম্পর্কিত।
- রূপান্তর : ভিডিওতে রূপান্তরটি মসৃণ এবং বিরামবিহীন হওয়া উচিত। যদি পৃষ্ঠায় ইতিমধ্যেই এমন একটি বিভাগ থাকে যা চিত্র, মানচিত্র এবং রাস্তার দৃশ্য প্রদর্শন করে, তাহলে এরিয়াল ভিউ ভিডিওটি একই বিভাগে প্রদর্শিত হবে।
- হাইলাইটিং : যেহেতু এটি পৃষ্ঠায় একটি নতুন সংযোজন হবে, এটি একটি "নতুন বৈশিষ্ট্য" ট্যাগ বা ভিডিওর একটি স্থির চিত্র থাম্বনেইল সহ বোতামটি হাইলাইট করা সহায়ক৷
- জোর : বোতামটি একটি মাঝারি বা উচ্চ জোর দিয়ে ডিজাইন করা উচিত, কারণ এটি টিপে একটি বিশিষ্ট ক্রিয়া সম্পাদন করবে। গুগল ম্যাটেরিয়াল ডিজাইনের বিভিন্ন স্তরের জোর দিয়ে কীভাবে বোতাম ডিজাইন করা যায় সে সম্পর্কে কিছু নির্দেশিকা রয়েছে।
একটি কার্যকর এরিয়াল ভিউ বোতাম ডিজাইন করার জন্য এখানে কিছু অতিরিক্ত টিপস রয়েছে:
- পরিষ্কার এবং সংক্ষিপ্ত ভাষা ব্যবহার করুন। বোতামটি স্পষ্টভাবে লেবেল করা উচিত যাতে ব্যবহারকারীরা জানেন যে এটি কী করে।
- একটি বড় এবং সুস্পষ্ট ফন্ট ব্যবহার করুন. বোতামটি যথেষ্ট বড় হওয়া উচিত যাতে ব্যবহারকারীরা সহজেই দেখতে এবং ক্লিক করতে পারেন।
- একটি বিপরীত রঙ ব্যবহার করুন। বোতামটি আশেপাশের টেক্সট এবং ব্যাকগ্রাউন্ডের চেয়ে আলাদা রঙের হওয়া উচিত যাতে এটি আলাদা হয়।
- কর্মের জন্য একটি কল ব্যবহার করুন. বোতামটিতে একটি স্পষ্ট কল টু অ্যাকশন অন্তর্ভুক্ত করা উচিত, যেমন "এরিয়াল ভিউ দেখুন" বা "ভিডিও দেখুন"।
প্রদর্শন বিবেচনা
ভিডিও লোড হচ্ছে
ভিডিওটির একটি স্থির চিত্র পূর্বরূপ প্রদর্শন করে এবং অনক্লিকের মতো ব্যবহারকারীর মিথস্ক্রিয়ায় সম্পূর্ণ অভিজ্ঞতা লোড করার মাধ্যমে আপনি ধীর সংযোগগুলি বিবেচনায় নিতে চাইতে পারেন। এরিয়াল ভিউ ভিডিওর পাশাপাশি, আপনি একটি থাম্বনেইলে অ্যাক্সেসও পাবেন যা এটি সম্পন্ন করতে ব্যবহার করা যেতে পারে।
আপনার কাছে বিভিন্ন রেজোলিউশনে ভিডিওতে অ্যাক্সেসও থাকবে, তাই বিভিন্ন সংযোগ গতিতে অভিজ্ঞতা লোড হওয়ার জন্য ব্যবহারকারীকে যে সময় ব্যয় করতে হবে তা কমাতে এগুলি কৌশলগতভাবে ব্যবহার করা যেতে পারে।
লোগো অ্যাট্রিবিউশন
আপনি যখন এরিয়াল ভিউ প্রয়োগ করছেন, তখন আপনাকে অবশ্যই লোগো অ্যাট্রিবিউশন সহ সমস্ত শর্তাবলী অনুসরণ করতে হবে। বিস্তারিত জানার জন্য এই পৃষ্ঠা দেখুন .
উপসংহার
আমরা আশা করি এই নিবন্ধটি আপনাকে উচ্চ ব্যবহারকারীর ব্যস্ততার সাথে আপনার ওয়েবসাইটে এরিয়াল ভিউ কীভাবে প্রয়োগ করতে চান সে সম্পর্কে চিন্তা করার জন্য আপনাকে অনুপ্রেরণা দিয়েছে।
আপনার ব্যবহারকারী কীভাবে বিষয়বস্তুটি আবিষ্কার করবে এবং কোন বিন্যাসে এটি প্রদর্শন করা সবচেয়ে উপযুক্ত তা নিয়ে চিন্তা করা গুরুত্বপূর্ণ। ভিডিওটি যে ডিভাইসে চালানো হবে তা বিবেচনা করাও ভাল, বিশেষ করে স্ক্রিন ওরিয়েন্টেশন এবং ব্যবহারকারীর সংযোগের গতি। .
পরবর্তী পদক্ষেপ
আরও পড়ার পরামর্শ দেওয়া হয়েছে:
অবদানকারী
Google এই নিবন্ধটি বজায় রাখে। নিম্নলিখিত অবদানকারীরা মূলত এটি লিখেছেন।
প্রধান লেখক:
হেনরিক ভালভ | গুগল ম্যাপ প্ল্যাটফর্ম সলিউশন ইঞ্জিনিয়ার