ক্যারোসেলের জন্য সেরা অনুশীলন

কর্মক্ষমতা এবং ব্যবহারযোগ্যতার জন্য ক্যারোসেল অপ্টিমাইজ করুন।

Katie Hempenius

একটি ক্যারোজেল হল একটি UX উপাদান যা স্লাইডশোর মতো পদ্ধতিতে সামগ্রী প্রদর্শন করে। ক্যারোসেল "অটোপ্লে" বা ব্যবহারকারীদের দ্বারা ম্যানুয়ালি নেভিগেট করতে পারে। যদিও ক্যারোসেলগুলি অন্য কোথাও ব্যবহার করা যেতে পারে, তবে এগুলি প্রায়শই হোমপেজে ছবি, পণ্য এবং প্রচার প্রদর্শন করতে ব্যবহৃত হয়।

এই নিবন্ধটি ক্যারোসেলগুলির জন্য পারফরম্যান্স এবং UX সেরা অনুশীলনগুলি নিয়ে আলোচনা করে৷

কর্মক্ষমতা

একটি ভালভাবে বাস্তবায়িত ক্যারোজেল, নিজের মধ্যে এবং তার কার্যক্ষমতার উপর খুব কম বা কোন প্রভাব থাকা উচিত নয়। যাইহোক, ক্যারোসেলগুলিতে প্রায়শই বড় মিডিয়া সম্পদ থাকে। বড় সম্পদগুলি ক্যারাউজেলে বা অন্য কোথাও প্রদর্শিত হোক না কেন কর্মক্ষমতাকে প্রভাবিত করতে পারে।

• LCP (সবচেয়ে বড় বিষয়বস্তুর পেইন্ট)

  বড়, ভাঁজের ওপরের ক্যারোসেলগুলিতে প্রায়শই পৃষ্ঠার LCP উপাদান থাকে এবং তাই LCP-তে উল্লেখযোগ্য প্রভাব ফেলতে পারে। এই পরিস্থিতিতে, ক্যারোজেল অপ্টিমাইজ করা উল্লেখযোগ্যভাবে LCP উন্নত করতে পারে। ক্যারোসেলযুক্ত পৃষ্ঠাগুলিতে কীভাবে LCP পরিমাপ কাজ করে তার একটি গভীর ব্যাখ্যার জন্য, ক্যারোসেলের জন্য LCP পরিমাপ পড়ুন।

• INP (পরবর্তী পেইন্টের সাথে মিথস্ক্রিয়া)

  ক্যারোসেলের ন্যূনতম জাভাস্ক্রিপ্ট প্রয়োজনীয়তা রয়েছে এবং তাই পৃষ্ঠার প্রতিক্রিয়াশীলতাকে প্রভাবিত করা উচিত নয়। আপনি যদি আবিষ্কার করেন যে আপনার সাইটের ক্যারোজেলে দীর্ঘদিন ধরে চলমান স্ক্রিপ্ট রয়েছে, তাহলে আপনার ক্যারোজেল টুলিং প্রতিস্থাপন করার কথা বিবেচনা করা উচিত।

• CLS (ক্রমবর্ধমান লেআউট শিফট)

  আশ্চর্যজনক সংখ্যক ক্যারোসেল জ্যাঙ্কি, নন-কম্পোজিটেড অ্যানিমেশন ব্যবহার করে যা CLS-এ অবদান রাখতে পারে। অটোপ্লেয়িং ক্যারোসেল সহ পৃষ্ঠাগুলিতে, এটি অসীম CLS সৃষ্টি করার সম্ভাবনা রয়েছে। এই ধরনের CLS সাধারণত মানুষের চোখে স্পষ্ট নয়, যা সমস্যাটিকে উপেক্ষা করা সহজ করে তোলে। এই সমস্যাটি এড়াতে, আপনার ক্যারোজেলে অ-সংযুক্ত অ্যানিমেশন ব্যবহার করা এড়িয়ে চলুন (উদাহরণস্বরূপ, স্লাইড ট্রানজিশনের সময়)।

কর্মক্ষমতা সেরা অনুশীলন

HTML ব্যবহার করে ক্যারোজেল সামগ্রী লোড করুন

ক্যারোজেল বিষয়বস্তু পৃষ্ঠার HTML মার্কআপের মাধ্যমে লোড করা উচিত যাতে এটি পৃষ্ঠা লোড প্রক্রিয়ার প্রথম দিকে ব্রাউজার দ্বারা আবিষ্কার করা যায়৷ ক্যারোজেল কন্টেন্ট লোড করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভবত ক্যারোসেল ব্যবহার করার সময় এড়াতে সবচেয়ে বড় পারফরম্যান্স ভুল। এটি ইমেজ লোড হতে দেরি করে এবং LCP-কে নেতিবাচকভাবে প্রভাবিত করতে পারে।

করবেন

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

করবেন না

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

উন্নত ক্যারোজেল অপ্টিমাইজেশানের জন্য, প্রথম স্লাইডটিকে স্থিরভাবে লোড করার কথা বিবেচনা করুন, তারপরে নেভিগেশন নিয়ন্ত্রণ এবং অতিরিক্ত সামগ্রী অন্তর্ভুক্ত করার জন্য এটিকে ধীরে ধীরে উন্নত করুন৷ এই কৌশলটি এমন পরিবেশে সবচেয়ে বেশি প্রযোজ্য যেখানে আপনার ব্যবহারকারীর দীর্ঘক্ষণ মনোযোগ থাকে—এটি অতিরিক্ত সামগ্রী লোড করার সময় দেয়। হোম পৃষ্ঠাগুলির মতো পরিবেশে, যেখানে ব্যবহারকারীরা শুধুমাত্র এক বা দুই সেকেন্ডের জন্য চারপাশে লেগে থাকতে পারে, শুধুমাত্র একটি একক ছবি লোড করা একইভাবে কার্যকর হতে পারে।

লেআউট শিফট এড়িয়ে চলুন

দ্রষ্টব্য: ক্রোম 88-90 লেআউট শিফটগুলি কীভাবে গণনা করা হয় তার সাথে সম্পর্কিত বিভিন্ন বাগ সংশোধন করেছে৷ এই বাগ ফিক্সগুলির অনেকগুলিই ক্যারোসেলের সাথে প্রাসঙ্গিক৷ এই সংশোধনগুলির ফলস্বরূপ, সাইটগুলিকে Chrome-এর পরবর্তী সংস্করণগুলিতে কম ক্যারোজেল-সম্পর্কিত লেআউট শিফট স্কোর দেখতে আশা করা উচিত৷

স্লাইড ট্রানজিশন এবং নেভিগেশন কন্ট্রোল হল ক্যারোসেলে লেআউট পরিবর্তনের দুটি সবচেয়ে সাধারণ উৎস:

• স্লাইড ট্রানজিশন: স্লাইড ট্রানজিশনের সময় যে লেআউট পরিবর্তনগুলি ঘটে তা সাধারণত DOM উপাদানগুলির লেআউট-ইনডুসিং বৈশিষ্ট্য আপডেট করার কারণে ঘটে। এই বৈশিষ্ট্যগুলির কিছু উদাহরণের মধ্যে রয়েছে: left , top , width , এবং marginTop . লেআউট পরিবর্তন এড়াতে, পরিবর্তে এই উপাদানগুলি স্থানান্তর করতে CSS transform বৈশিষ্ট্য ব্যবহার করুন। এই ডেমো দেখায় কিভাবে একটি মৌলিক ক্যারোজেল তৈরি করতে transform ব্যবহার করতে হয়।

• নেভিগেশন নিয়ন্ত্রণ: DOM থেকে ক্যারোজেল নেভিগেশন নিয়ন্ত্রণগুলি সরানো বা যোগ করা/সরানোর ফলে এই পরিবর্তনগুলি কীভাবে বাস্তবায়িত হয় তার উপর নির্ভর করে লেআউট পরিবর্তন হতে পারে। এই আচরণ প্রদর্শন করে এমন ক্যারোসেলগুলি সাধারণত ব্যবহারকারী হোভারের প্রতিক্রিয়া হিসাবে এটি করে।

ক্যারোসেলের জন্য CLS পরিমাপ সংক্রান্ত বিভ্রান্তির কিছু সাধারণ বিষয় হল:

• অটোপ্লে ক্যারোসেল: স্লাইড ট্রানজিশন হল ক্যারোজেল-সম্পর্কিত লেআউট শিফটের সবচেয়ে সাধারণ উৎস। একটি নন-অটোপ্লে ক্যারাউজেলে এই লেআউট শিফটগুলি সাধারণত ব্যবহারকারীর ইন্টারঅ্যাকশনের 500ms এর মধ্যে ঘটে এবং তাই ক্রমবর্ধমান লেআউট শিফট (CLS) এ গণনা করা হয় না । যাইহোক, অটোপ্লে ক্যারোসেলের জন্য, শুধুমাত্র এই লেআউটগুলিকে সম্ভাব্যভাবে CLS-এর দিকে গণনা করা যায় না - কিন্তু তারা অনির্দিষ্টকালের জন্য পুনরাবৃত্তি করতে পারে। এইভাবে, এটি যাচাই করা বিশেষভাবে গুরুত্বপূর্ণ যে একটি অটোপ্লে ক্যারোজেল লেআউট পরিবর্তনের উৎস নয়।

• স্ক্রোলিং: কিছু ক্যারোসেল ব্যবহারকারীদের ক্যারোজেল স্লাইডের মাধ্যমে নেভিগেট করতে স্ক্রলিং ব্যবহার করার অনুমতি দেয়। যদি একটি উপাদানের শুরুর অবস্থান পরিবর্তিত হয় কিন্তু এর স্ক্রোল অফসেট (অর্থাৎ, scrollLeft বা scrollTop ) একই পরিমাণে পরিবর্তিত হয় (কিন্তু বিপরীত দিকে) তবে এটি একটি বিন্যাস স্থানান্তর হিসাবে বিবেচিত হবে না যদি তারা একই ফ্রেমে ঘটে।

লেআউট শিফট সম্পর্কে আরও তথ্যের জন্য, ডিবাগ লেআউট শিফট দেখুন।

আধুনিক প্রযুক্তি ব্যবহার করুন

অনেক সাইট ক্যারোসেল বাস্তবায়নের জন্য তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে। আপনি যদি বর্তমানে পুরানো ক্যারোজেল টুলিং ব্যবহার করেন, তাহলে আপনি নতুন টুলিং-এ স্যুইচ করে কর্মক্ষমতা উন্নত করতে সক্ষম হতে পারেন। নতুন টুলগুলি আরও দক্ষ API ব্যবহার করে এবং jQuery এর মতো অতিরিক্ত নির্ভরতা প্রয়োজন হওয়ার সম্ভাবনা কম।

যাইহোক, আপনি যে ধরনের ক্যারোজেল তৈরি করছেন তার উপর নির্ভর করে, আপনার জাভাস্ক্রিপ্টের আদৌ প্রয়োজন নাও হতে পারে। নতুন স্ক্রোল স্ন্যাপ API শুধুমাত্র HTML এবং CSS ব্যবহার করে ক্যারোজেল-এর মতো রূপান্তরগুলি বাস্তবায়ন করা সম্ভব করে তোলে।

এখানে scroll-snap ব্যবহার করার কিছু সংস্থান রয়েছে যা আপনি সহায়ক বলে মনে করতে পারেন:

• গল্পের উপাদান তৈরি করা (web.dev)
• পরবর্তী প্রজন্মের ওয়েব স্টাইলিং: স্ক্রোল স্ন্যাপ (web.dev)
• সিএসএস-অনলি ক্যারাউজেল (সিএসএস ট্রিকস)
• কীভাবে একটি সিএসএস-অনলি ক্যারাউজেল তৈরি করবেন (সিএসএস ট্রিকস)

ক্যারোজেল সামগ্রী অপ্টিমাইজ করুন

Carousels প্রায়ই একটি সাইটের সবচেয়ে বড় কিছু ছবি ধারণ করে, তাই এই ছবিগুলি সম্পূর্ণরূপে অপ্টিমাইজ করা হয়েছে তা নিশ্চিত করতে আপনার সময় ব্যয় হতে পারে। সঠিক ইমেজ ফরম্যাট এবং কম্প্রেশন লেভেল নির্বাচন করা, একটি ইমেজ CDN ব্যবহার করা , এবং একাধিক ইমেজ ভার্সন পরিবেশন করার জন্য srcset ব্যবহার করা হল সমস্ত কৌশল যা ইমেজের ট্রান্সফার সাইজ কমাতে পারে।

কর্মক্ষমতা পরিমাপ

এই বিভাগটি এলসিপি পরিমাপ নিয়ে আলোচনা করে কারণ এটি ক্যারোসেলের সাথে সম্পর্কিত। যদিও ক্যারোসেলগুলিকে LCP গণনার সময় অন্য কোনো UX উপাদানের চেয়ে আলাদাভাবে বিবেচনা করা হয় না, ক্যারোসেলগুলি স্বয়ংক্রিয়ভাবে চালানোর জন্য LCP গণনা করার মেকানিক্স হল বিভ্রান্তির একটি সাধারণ বিষয়।

ক্যারোসেলের জন্য LCP পরিমাপ

ক্যারোসেলের জন্য LCP গণনা কীভাবে কাজ করে তা বোঝার জন্য এইগুলি হল মূল বিষয়গুলি:

• LCP পৃষ্ঠা উপাদানগুলিকে বিবেচনা করে কারণ সেগুলি ফ্রেমে আঁকা হয়৷ ব্যবহারকারী যখন পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে (ট্যাপ, স্ক্রোল বা কী চেপে) তখন LCP উপাদানের জন্য নতুন প্রার্থীদের আর বিবেচনা করা হয় না। এইভাবে, একটি অটোপ্লেয়িং ক্যারোজেলের যেকোনো স্লাইডের চূড়ান্ত LCP উপাদান হওয়ার সম্ভাবনা রয়েছে—যেখানে একটি স্ট্যাটিক ক্যারোজেলে শুধুমাত্র প্রথম স্লাইডটি একজন সম্ভাব্য LCP প্রার্থী হবে।
• যদি দুটি সমান আকারের ছবি রেন্ডার করা হয়, তাহলে প্রথম ছবিটি LCP উপাদান হিসেবে বিবেচিত হবে। LCP এলিমেন্ট শুধুমাত্র তখনই আপডেট করা হয় যখন LCP প্রার্থী বর্তমান LCP এলিমেন্টের থেকে বড় হয়। এইভাবে, সমস্ত ক্যারোজেল উপাদান সমান আকারের হলে, LCP উপাদানটি প্রদর্শিত হওয়া প্রথম চিত্র হওয়া উচিত।
• LCP প্রার্থীদের মূল্যায়ন করার সময়, LCP বিবেচনা করে " দৃশ্যমান আকার বা অন্তর্নিহিত আকার, যেটি ছোট হয় ।" এইভাবে, যদি একটি অটোপ্লেয়িং ক্যারাউজেল একটি সামঞ্জস্যপূর্ণ আকারে চিত্রগুলি প্রদর্শন করে, কিন্তু বিভিন্ন অন্তর্নিহিত আকারের চিত্রগুলি ধারণ করে যা প্রদর্শনের আকারের চেয়ে ছোট, তবে নতুন স্লাইডগুলি প্রদর্শিত হওয়ার সাথে সাথে LCP উপাদানটি পরিবর্তিত হতে পারে। এই ক্ষেত্রে, সমস্ত ছবি একই আকারে প্রদর্শিত হলে, সবচেয়ে বড় অভ্যন্তরীণ আকারের চিত্রটিকে LCP উপাদান হিসাবে বিবেচনা করা হবে। LCP কম রাখতে, আপনাকে নিশ্চিত করতে হবে যে একটি অটোপ্লেয়িং ক্যারোজেলের সমস্ত আইটেম একই অন্তর্নিহিত আকারের।

Chrome 88-এ ক্যারোসেলের জন্য LCP গণনার পরিবর্তন

ক্রোম 88- এর হিসাবে, যে ছবিগুলি পরে DOM থেকে সরানো হয় সেগুলিকে সম্ভাব্য বৃহত্তম সামগ্রীপূর্ণ পেইন্ট হিসাবে বিবেচনা করা হয়। Chrome 88-এর আগে, এই ছবিগুলি বিবেচনার বাইরে ছিল। যে সাইটগুলি অটোপ্লেয়িং ক্যারোসেল ব্যবহার করে, তাদের জন্য এই সংজ্ঞা পরিবর্তন LCP স্কোরের উপর নিরপেক্ষ বা ইতিবাচক প্রভাব ফেলবে।

এই পরিবর্তনটি পর্যবেক্ষণের প্রতিক্রিয়া হিসাবে করা হয়েছিল যে অনেক সাইট DOM গাছ থেকে পূর্বে প্রদর্শিত চিত্রটি সরিয়ে ক্যারোজেল রূপান্তরগুলি প্রয়োগ করে৷ Chrome 88 এর আগে, প্রতিবার যখন একটি নতুন স্লাইড উপস্থাপন করা হয়েছিল, পূর্ববর্তী উপাদানটি অপসারণ একটি LCP আপডেট ট্রিগার করবে। এই পরিবর্তনটি শুধুমাত্র অটোপ্লেয়িং ক্যারোসেলকে প্রভাবিত করে- সংজ্ঞা অনুসারে, সম্ভাব্য সবচেয়ে বড় কন্টেন্টফুল পেইন্টগুলি শুধুমাত্র একজন ব্যবহারকারী প্রথম পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার আগে ঘটতে পারে।

Chrome 121-এ থ্রেশহোল্ডে পরিবর্তন

ক্রোম 121 ক্যারোসেলের মতো অনুভূমিক-স্ক্রলিং চিত্রগুলির আচরণ পরিবর্তন করেছে। এগুলি এখন উল্লম্ব স্ক্রোলিং হিসাবে একই থ্রেশহোল্ড ব্যবহার করে। এর অর্থ হল ক্যারোজেল ব্যবহারের ক্ষেত্রে, ছবিগুলি ভিউপোর্টে দৃশ্যমান হওয়ার আগে লোড করা হবে৷ এর মানে হল ইমেজ লোডিং ব্যবহারকারীর কাছে লক্ষণীয় হওয়ার সম্ভাবনা কম, কিন্তু বেশি ডাউনলোডের খরচে। Chrome বনাম Safari এবং Firefox-এ আচরণের তুলনা করতে অনুভূমিক অলস লোডিং ডেমো ব্যবহার করুন।

অন্যান্য বিবেচ্য বিষয়

এই বিভাগে UX এবং পণ্যের সর্বোত্তম অনুশীলন সম্পর্কে আলোচনা করা হয়েছে যা ক্যারোসেল প্রয়োগ করার সময় আপনার মনে রাখা উচিত। ক্যারোসেল আপনার ব্যবসায়িক লক্ষ্যগুলিকে এগিয়ে নিয়ে যাওয়া উচিত এবং এমনভাবে সামগ্রী উপস্থাপন করা উচিত যাতে নেভিগেট করা এবং পড়তে সহজ হয়।

নেভিগেশন সেরা অনুশীলন

বিশিষ্ট নেভিগেশন নিয়ন্ত্রণ প্রদান

ক্যারোজেল নেভিগেশন নিয়ন্ত্রণগুলি ক্লিক করা সহজ এবং অত্যন্ত দৃশ্যমান হওয়া উচিত। এটি এমন কিছু যা খুব কমই ভালভাবে করা হয়-বেশিরভাগ ক্যারোসেলের নেভিগেশন নিয়ন্ত্রণ রয়েছে যা ছোট এবং সূক্ষ্ম উভয়ই। মনে রাখবেন যে নেভিগেশন নিয়ন্ত্রণের একটি একক রঙ বা শৈলী খুব কমই সব পরিস্থিতিতে কাজ করবে। উদাহরণস্বরূপ, একটি তীর যা একটি অন্ধকার পটভূমিতে স্পষ্টভাবে দৃশ্যমান একটি হালকা পটভূমিতে দেখা কঠিন হতে পারে।

নেভিগেশন অগ্রগতি নির্দেশ করুন

ক্যারোজেল নেভিগেশন নিয়ন্ত্রণগুলি স্লাইডের মোট সংখ্যা এবং সেগুলির মাধ্যমে ব্যবহারকারীর অগ্রগতি সম্পর্কে প্রসঙ্গ সরবরাহ করা উচিত। এই তথ্যটি ব্যবহারকারীর জন্য একটি নির্দিষ্ট স্লাইডে নেভিগেট করা এবং কোন সামগ্রীটি ইতিমধ্যে দেখা হয়েছে তা বুঝতে সহজ করে তোলে৷ কিছু পরিস্থিতিতে আসন্ন বিষয়বস্তুর পূর্বরূপ প্রদান করা - তা পরবর্তী স্লাইডের একটি উদ্ধৃতি বা থাম্বনেইলের একটি তালিকা-ও সহায়ক হতে পারে এবং ব্যস্ততা বাড়াতে পারে৷

মোবাইল অঙ্গভঙ্গি সমর্থন

মোবাইলে, সোয়াইপ অঙ্গভঙ্গিগুলি প্রথাগত নেভিগেশন নিয়ন্ত্রণগুলি ছাড়াও সমর্থিত হওয়া উচিত (যেমন স্ক্রিন বোতামগুলি)৷

বিকল্প নেভিগেশন পাথ প্রদান

কারণ এটি অসম্ভাব্য যে বেশিরভাগ ব্যবহারকারী সমস্ত ক্যারোজেল সামগ্রীর সাথে জড়িত থাকবেন, ক্যারোজেল স্লাইডগুলি যে সামগ্রীতে লিঙ্ক করে তা অন্যান্য নেভিগেশন পথ থেকে অ্যাক্সেসযোগ্য হওয়া উচিত৷

পঠনযোগ্যতার সর্বোত্তম অনুশীলন

অটোপ্লে ব্যবহার করবেন না

অটোপ্লে ব্যবহার দুটি প্রায় বিরোধপূর্ণ সমস্যা তৈরি করে: অন-স্ক্রীন অ্যানিমেশনগুলি ব্যবহারকারীদের বিভ্রান্ত করে এবং আরও গুরুত্বপূর্ণ বিষয়বস্তু থেকে চোখ সরিয়ে দেয়; একই সাথে, যেহেতু ব্যবহারকারীরা প্রায়শই বিজ্ঞাপনের সাথে অ্যানিমেশন যুক্ত করে, তারা অটোপ্লে হওয়া ক্যারোসেলগুলিকে উপেক্ষা করবে৷

এইভাবে, এটি বিরল যে অটোপ্লে একটি ভাল পছন্দ। যদি বিষয়বস্তু গুরুত্বপূর্ণ হয়, অটোপ্লে ব্যবহার না করা তার এক্সপোজার সর্বাধিক করবে; যদি ক্যারোজেল বিষয়বস্তু গুরুত্বপূর্ণ না হয়, তাহলে অটোপ্লে ব্যবহার আরও গুরুত্বপূর্ণ বিষয়বস্তু থেকে বিরত থাকবে। উপরন্তু, অটোপ্লে করা ক্যারোসেল পড়া কঠিন হতে পারে (এবং বিরক্তিকরও)। লোকেরা বিভিন্ন গতিতে পড়ে, তাই এটি বিরল যে একটি ক্যারোজেল ধারাবাহিকভাবে বিভিন্ন ব্যবহারকারীদের জন্য "সঠিক" সময়ে পরিবর্তন করে।

আদর্শভাবে, স্লাইড নেভিগেশন নেভিগেশন নিয়ন্ত্রণের মাধ্যমে ব্যবহারকারী-নির্দেশিত হওয়া উচিত। আপনি যদি অটোপ্লে ব্যবহার করতে চান, তাহলে ব্যবহারকারী হোভারে অটোপ্লে অক্ষম করা উচিত। উপরন্তু, স্লাইড ট্রানজিশন রেট স্লাইড বিষয়বস্তুকে বিবেচনায় নিতে হবে - একটি স্লাইডে যত বেশি পাঠ্য থাকবে, তত বেশি সময় এটি স্ক্রিনে প্রদর্শিত হবে।

লেখা এবং ছবি আলাদা রাখুন

ক্যারোজেল টেক্সট বিষয়বস্তু প্রায়ই এইচটিএমএল মার্কআপ ব্যবহার করে আলাদাভাবে দেখানোর পরিবর্তে সংশ্লিষ্ট ইমেজ ফাইলে "বেক ইন" করা হয়। এই পদ্ধতিটি অ্যাক্সেসযোগ্যতা, স্থানীয়করণ এবং কম্প্রেশন হারের জন্য খারাপ। এটি সম্পদ তৈরির জন্য এক-আকার-ফিট-সমস্ত পদ্ধতির উত্সাহ দেয়। যাইহোক, একই চিত্র এবং পাঠ্য বিন্যাস খুব কমই ডেস্কটপ এবং মোবাইল বিন্যাস জুড়ে সমানভাবে পাঠযোগ্য।

সংক্ষিপ্ত হোন

ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য আপনার কাছে মাত্র এক সেকেন্ডের ভগ্নাংশ আছে। সংক্ষিপ্ত, টু-দ্য-পয়েন্ট অনুলিপি আপনার বার্তা জুড়ে যাওয়ার সম্ভাবনা বাড়িয়ে তুলবে।

পণ্য সেরা অনুশীলন

ক্যারোসেলগুলি এমন পরিস্থিতিতে ভাল কাজ করে যেখানে অতিরিক্ত সামগ্রী প্রদর্শনের জন্য অতিরিক্ত উল্লম্ব স্থান ব্যবহার করা একটি বিকল্প নয়। পণ্য পৃষ্ঠাগুলিতে ক্যারোসেল প্রায়শই এই ব্যবহারের ক্ষেত্রে একটি ভাল উদাহরণ।

যাইহোক, ক্যারোসেল সবসময় কার্যকরভাবে ব্যবহার করা হয় না।

• ক্যারোসেল, বিশেষ করে যদি সেগুলিতে স্বয়ংক্রিয়ভাবে প্রচার বা অগ্রগতি থাকে, ব্যবহারকারীরা সহজেই বিজ্ঞাপনের জন্য ভুল করে । ব্যবহারকারীরা বিজ্ঞাপনগুলিকে উপেক্ষা করার প্রবণতা রাখে—একটি ঘটনা যা ব্যানার অন্ধত্ব নামে পরিচিত।
• ক্যারোসেলগুলি প্রায়শই একাধিক বিভাগকে শান্ত করতে এবং ব্যবসার অগ্রাধিকার সম্পর্কে সিদ্ধান্ত নেওয়া এড়াতে ব্যবহৃত হয়। ফলস্বরূপ, ক্যারোসেলগুলি সহজেই অকার্যকর সামগ্রীর জন্য ডাম্পিং গ্রাউন্ডে পরিণত হতে পারে।

আপনার অনুমান পরীক্ষা করুন

ক্যারোসেলের ব্যবসায়িক প্রভাব, বিশেষ করে হোমপেজে থাকা, মূল্যায়ন ও পরীক্ষা করা উচিত। ক্যারোজেল ক্লিকথ্রু রেট আপনাকে ক্যারোজেল এবং এর বিষয়বস্তু কার্যকর কিনা তা নির্ধারণ করতে সাহায্য করতে পারে।

প্রাসঙ্গিক হতে

ক্যারোসেলগুলি সবচেয়ে ভাল কাজ করে যখন সেগুলিতে আকর্ষণীয় এবং প্রাসঙ্গিক সামগ্রী থাকে যা একটি স্পষ্ট প্রসঙ্গ সহ উপস্থাপন করা হয়। বিষয়বস্তু যদি ক্যারোজেলের বাইরে কোনো ব্যবহারকারীকে জড়িত না করে—এটিকে ক্যারোজেলে রাখলে এটি আর ভালো পারফর্ম করবে না। আপনি যদি একটি ক্যারোজেল ব্যবহার করতে চান, তাহলে বিষয়বস্তুকে অগ্রাধিকার দিন এবং নিশ্চিত করুন যে প্রতিটি স্লাইড পর্যাপ্তভাবে প্রাসঙ্গিক যাতে একজন ব্যবহারকারী পরবর্তী স্লাইডে ক্লিক করতে চান।