এপ্রিলে, ক্রোম টিম ২০১৯ সালের এমডিএন ওয়েব ডিএনএ রিপোর্ট থেকে প্রাপ্ত শীর্ষস্থানীয় সমস্যাগুলোর উপর ভিত্তি করে একটি স্ক্রল এবং টাচ-অ্যাকশন সমীক্ষা প্রকাশ করেছে । ২০২১ সালের স্ক্রল সমীক্ষা প্রতিবেদনটি প্রস্তুত, এবং ক্রোম টিম এই সমীক্ষার ফলাফল থেকে প্রাপ্ত কিছু ভাবনা ও করণীয় বিষয় আপনাদের সাথে ভাগ করে নিতে চায়। আমরা আশা করি, এই ফলাফলগুলো ব্রাউজার নির্মাতা এবং মান নির্ধারণকারী সংস্থাগুলোকে ওয়েব স্ক্রলিং উন্নত করার উপায় বুঝতে সাহায্য করবে।
২০২১ সালের স্ক্রল সমীক্ষা প্রতিবেদনটি দেখুন।
উল্লেখযোগ্য ফলাফল
সমীক্ষাটিতে পরিচয় গোপন রেখে ৮৮০টি আবেদন সংগ্রহ করা হয়েছিল, যার মধ্যে ৩৬৬ জন প্রতিটি প্রশ্নের উত্তর দিয়েছিলেন।
যদিও overflow-x: scroll; মতো এক লাইনের CSS কোড দিয়েই স্ক্রলিং শুরু করা যায়, স্ক্রল এপিআই এবং অপশনগুলোর পরিধি বিশাল, যা জাভাস্ক্রিপ্ট থেকে শুরু করে সিএসএস পর্যন্ত বিস্তৃত। নিম্নলিখিত ফলাফলগুলো ওয়েব ডেভেলপারদের সম্মুখীন হওয়া সমস্যাগুলো তুলে ধরতে সাহায্য করে।
ওয়েব স্ক্রোলিং নিয়ে সামগ্রিক সন্তুষ্টি
প্রশ্ন ২৭
৪৫ %
সামগ্রিকভাবে কিছুটা বা অত্যন্ত অসন্তুষ্ট
ওয়েব স্ক্রোলিং সহ।
এই প্রশ্নটি জরিপের প্রায় শেষের দিকে, ২৬টি স্ক্রল ব্যবহারের ক্ষেত্র ও বৈশিষ্ট্য সম্পর্কিত প্রশ্নগুলোর পরে ইচ্ছাকৃতভাবে রাখা হয়েছিল। প্রাপ্ত প্রতিক্রিয়া থেকে এটা স্পষ্ট যে, ওয়েব কমিউনিটি স্ক্রল নিয়ে সমস্যায় ভুগছে। প্রায় অর্ধেক উত্তরদাতা সার্বিকভাবে অসন্তুষ্টি প্রকাশ করেছেন।
আমরা মনে করি, স্ক্রল নিয়ে কাজ করার বিষয়ে সামগ্রিক মনোভাব এতটা নিম্ন হওয়া উচিত নয়। এই মেট্রিকটি পরিবর্তন করা প্রয়োজন; এটি একটি স্পষ্ট ইঙ্গিত যে, এ বিষয়ে আরও কাজ করার আছে।
স্ক্রোল নিয়ে কাজ করতে অসুবিধা
প্রশ্ন ২
৪৩ %
রিপোর্ট করা হয়েছে যে এটি কিছুটা বা
অত্যন্ত কঠিন
স্ক্রোলিং নিয়ে কাজ করতে ।
আমাদের গবেষণা থেকে দেখা যায়, স্ক্রলের বহুবিধ ব্যবহারের ক্ষেত্র থেকেই এই অসুবিধাগুলো তৈরি হয়। যখন আমরা স্ক্রলিং নিয়ে কথা বলি, তখন এর মধ্যে অন্তর্ভুক্ত থাকতে পারে:
- স্ক্রোলযোগ্য এলাকার মধ্যে উপাদানগুলির অবস্থান নির্ধারণ
- অসীম স্ক্রোল
- স্ক্রোল লিঙ্ক অ্যানিমেশন
- ক্যারোসেল
- স্ক্রোলভিউ প্যাডিং
- চক্রাকার স্ক্রোল
- ভার্চুয়ালাইজড স্ক্রোল
ব্রাউজারের কিছু ফিচারের অভাব, জটিল জাভাস্ক্রিপ্ট এবং টাচ, কিবোর্ড ও গেমপ্যাডসহ বিভিন্ন ইনপুট মোড সমর্থন করার প্রয়োজনীয়তা এই সবকিছুকে আরও কঠিন করে তোলে।
স্পর্শ মিথস্ক্রিয়ার গুরুত্ব
প্রশ্ন ৩
৫১ %
স্পর্শ মিথস্ক্রিয়াগুলি রিপোর্ট করুন
খুব বা অত্যন্ত গুরুত্বপূর্ণ
তাদের কাজে।
ভিজিট পরিসংখ্যানে মোবাইল ওয়েব ব্যবহারকারীর সংখ্যা ক্রমাগত বাড়তে থাকায় , উত্তরদাতাদের অর্ধেকই যে ওয়েবে তাদের কাজের জন্য টাচকে অত্যন্ত গুরুত্বপূর্ণ বলে জানিয়েছেন, তাতে অবাক হওয়ার কিছু ছিল না। এটি ইঙ্গিত দেয় যে, ওয়েব যাতে উচ্চ-মানের টাচ ইন্টারঅ্যাকশন প্রদান করতে পারে, সেজন্য CSS স্ক্রল স্ন্যাপ এবং touch-action মতো ওয়েব ফিচারগুলোর প্রতি বাড়তি মনোযোগ দেওয়া প্রয়োজন।
ট্যাব কী বা গেমপ্যাড নেভিগেশনের অসুবিধা
প্রশ্ন ৫ক
৪৪ %
কিছুটা বা অত্যন্ত কঠিন প্রতিবেদন
গেমপ্যাড এবং ট্যাব নেভিগেশন করতে।
স্ক্রলিংয়ের মধ্যে কিবোর্ড অ্যারো, ট্যাব কী, স্পেসবার প্রেস এবং গেমপ্যাডের মতো নেভিগেশন পদ্ধতি অন্তর্ভুক্ত থাকে, এবং কাস্টম স্ক্রলের কাজ করার সময় এগুলো যোগ করা কঠিন হতে পারে। প্রায় অর্ধেক উত্তরদাতা জানিয়েছেন যে এই ইনপুটগুলো যোগ করা কিছুটা বা অত্যন্ত কঠিন।
touch-action শেখা
প্রশ্ন ৯
৫০ %
শেখার বিষয়ে প্রতিবেদন
`টাচ-অ্যাকশন: ম্যানিপুলেশন`
জরিপ থেকে।
সমীক্ষার কিছু প্রশ্নে নির্দিষ্ট এপিআই (API) ব্যবহার সম্পর্কে জিজ্ঞাসা করা হয়েছিল, যার সম্ভাব্য উত্তর ছিল হ্যাঁ, না, অথবা "আজ আমি শিখলাম"। একটি উল্লেখযোগ্য প্রতিক্রিয়া ছিল এই যে, অনেকেই সমীক্ষা থেকে touch-action সম্পর্কে শিখেছেন বলে জানিয়েছেন; কারণ স্ক্রলের সাথে ইন্টারঅ্যাক্ট করার জন্য কাস্টম টাচ জেসচার তৈরি করার ক্ষেত্রে এটি একটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য।
চক্রাকার স্ক্রোলিং
প্রশ্ন ২৭
৫৮ %
মাঝে মাঝে, প্রায়শই বা প্রতিটি প্রকল্পে রিপোর্ট করুন
চক্রাকার স্ক্রোলিং ব্যবহার করে।
৬০ সেকেন্ড পর এটি আবার ০ থেকে শুরু হয়।
ওয়েব প্ল্যাটফর্মের পক্ষ থেকে খুব কম বা কোনো সমর্থন না থাকা একটি স্ক্রলিং ফিচারের জন্য এই সংখ্যাগুলো বেশ বেশি। একারণে, ডুপ্লিকেশন বা প্রভাবটি জোর করে কার্যকর করার জন্য জাভাস্ক্রিপ্ট ইনজেক্ট করার ফলে ফিচারটিতে প্রায়শই প্রচুর পরিমাণে টেকনিক্যাল ডেট তৈরি হয়। প্রোডাক্ট ক্যারোসেলের জন্য এবং সেকেন্ড বা মিনিটে সময় নির্বাচন করার সময় চক্রাকার স্ক্রলিং দেখানোর জন্য এটি জনপ্রিয়।
স্ক্রোলযোগ্য এলাকাগুলো কি গুরুত্বপূর্ণ?
প্রশ্ন ২
৫৫ %
খুব অথবা
অত্যন্ত গুরুত্বপূর্ণ
১৬ %
রিপোর্ট মোটেও না
অথবা সামান্য গুরুত্বপূর্ণ
উত্তরদাতারা স্ক্রলযোগ্য এলাকার গুরুত্ব সম্পর্কে জোরালোভাবে মত দিয়েছেন, যা উচ্চ-মানের স্ক্রলিং প্রদানের জন্য প্রয়োজনীয় প্রচেষ্টার আরও একটি ইঙ্গিত দেয়।
ক্যারোসেল
প্রশ্ন ২০
৮৭ %
ক্যারোসেল ব্যবহার করা হয়েছে ।
২৪ %
তারা রিপোর্ট করে
পরিচালনা করা সহজ ।
প্রায় প্রত্যেক উত্তরদাতাই তাদের ওয়েব কাজে ক্যারোসেল ব্যবহার করেন, যদিও মাত্র ২৫% এটিকে পরিচালনা করা সহজ বলে মনে করেন। আমাদের গবেষণার সময় আগে থেকে তৈরি ক্যারোসেলগুলো জনপ্রিয় ছিল, কিন্তু এই পরিসংখ্যানটি আমাদের অবাক করেছে, কারণ এতে সমস্যার তেমন কোনো সমাধান হয়েছে বলে মনে হয় না।
অসীম স্ক্রোল
প্রশ্ন ২২
৬৫ %
মাঝে মাঝে এটি ব্যবহার করুন
প্রতিটি প্রকল্পে
৬০ %
কিছুটা বা
অত্যন্ত কঠিন ।
দুই-তৃতীয়াংশ উত্তরদাতা তাদের ওয়েব কাজে ইনফিনিট স্ক্রল ব্যবহার করেন এবং সমসংখ্যক উত্তরদাতা এটিকে কঠিন বলে জানিয়েছেন। এটি অধিক ব্যবহার এবং অধিক কঠিনতার আরেকটি উদাহরণ, যা আমাদের কাছে মনোযোগের প্রয়োজন এমন একটি ক্ষেত্র নির্দেশ করে।
যদিও দীর্ঘ স্ক্রলযোগ্য এলাকার রেন্ডার খরচ কমাতে content-visibility এবং contain-intrinsic-size একত্রিত করা যায়, এটি "লোড মোর" ইনফিনিট স্ক্রল ইউএক্স (UX) উন্নত করতে সাহায্য করছে বলে মনে হচ্ছে না।
স্ক্রোল-লিঙ্কযুক্ত বা স্ক্রোল-ট্রিগার করা অ্যানিমেশন
প্রশ্ন ২৪
৪৭ %
মাঝে মাঝে এটি ব্যবহার করুন
প্রতিটি প্রকল্পে
৫৬ %
কিছুটা রিপোর্ট করুন অথবা
অত্যন্ত কঠিন
প্রায় অর্ধেক উত্তরদাতা স্ক্রল-অর্কেস্ট্রেটেড অ্যানিমেশন ব্যবহার করেন এবং অর্ধেক উত্তরদাতার কাছে এটি কঠিন মনে হয়, যা আবারও এর উচ্চ ব্যবহারকে অসুবিধার সাথে যুক্ত করে।
অন্তর্নির্মিত স্ক্রোলিংয়ের সাথে প্রতিযোগিতা করুন
প্রশ্ন ২৬
৩২ %
সর্বদা অথবা
বেশিরভাগ সময়
৫০ %
কখনো কখনো
ফোন এবং ট্যাবলেট অ্যাপ্লিকেশনের অন্তর্নির্মিত স্ক্রল ও টাচ ইন্টারঅ্যাকশনকে প্রায়শই এমন একটি সুস্পষ্ট ক্ষেত্র হিসেবে তুলে ধরা হয়, যেখানে ওয়েব প্রযুক্তি এগিয়ে আসতে পারে। এর বৈশিষ্ট্যগুলোর মধ্যে রয়েছে স্ক্রল-সংযুক্ত অ্যানিমেশন, প্রোগ্রাম্যাটিক ইন্টারফেস, ভয়েস ইন্টিগ্রেশন, স্ক্রল হিন্টস এবং পুল-টু-রিফ্রেশ এপিআই।
উত্তরদাতাদের মাত্র অর্ধেক মনে করেন যে, অন্তর্নির্মিত স্ক্রলিংয়ের অভিজ্ঞতার সাথে তুলনা করা কেবল মাঝে মাঝেই সম্ভব।
ওয়েবে স্ক্রোল ইন্টারঅ্যাকশন তৈরিতে সামগ্রিক সন্তুষ্টি
প্রশ্ন ২৭
জরিপের মূল বিষয়বস্তু
জরিপের ফলাফলকে চারটি বিভাগে বিভক্ত করা হয়েছে: সামঞ্জস্যতা , শিক্ষা , এপিআই এবং বৈশিষ্ট্য ।
সামঞ্জস্যতা
ক্রোম টিম স্ক্রল কম্প্যাটিবিলিটিসহ ওয়েব কম্প্যাটিবিলিটি সংক্রান্ত সমস্যার সংখ্যা কমানোর লক্ষ্য ঘোষণা করেছে।
প্রথম তিনটি সামঞ্জস্যতার সমস্যা যেগুলোর উপর মনোযোগ দিতে হবে: ১. হরাইজন্টাল স্ক্রলিং সামঞ্জস্যতা। ২. বিভিন্ন ব্রাউজারে overscroll-behavior । ৩. -webkit-scrollbar থেকে প্রিফিক্সগুলো অপসারণ করা এবং স্ট্যান্ডার্ড অনুসরণ করা।
শিক্ষা
সমীক্ষার ফলাফলে দেখা গেছে যে touch-action এবং লজিক্যাল প্রোপার্টি সম্পর্কে আরও শিক্ষার প্রয়োজন রয়েছে। ব্রাউজার আন্তর্জাতিক লেআউটের অগ্রভাগে রয়েছে, এবং এটা স্পষ্ট যে এর ব্যবহার কম হচ্ছে অথবা এটিকে ভুলভাবে বোঝা হচ্ছে।
যেসব ক্ষেত্রে মনোযোগ দিতে হবে: ১. touch-action ২. লজিক্যাল প্রোপার্টিজ
এপিআই
স্ক্রল স্ন্যাপিংয়ের ব্যবহার বাড়ছে, এবং ডেভেলপাররা জানিয়েছেন যে তাঁরা জনপ্রিয় লাইব্রেরি ও প্লাগইনগুলোর সাথে এই ফিচারগুলো আন্তঃকার্যকরীভাবে ব্যবহার করতে চান। CSS এবং প্লাগইন লাইব্রেরির মধ্যে এই ব্যবধান কমালে তা স্ক্রল স্ন্যাপ ডেভেলপার ও ব্যবহারকারীর অভিজ্ঞতা উভয়ের সন্তুষ্টি বাড়াতে সাহায্য করবে।
আমরা scroll-snap এর উপর এপিআই (API) এর কাজে মনোযোগ দেবো: ১. বিভিন্ন ব্রাউজারে এপিআই এর সহজলভ্যতা এবং সামঞ্জস্যতা। ২. scroll-start মতো নতুন সিএসএস (CSS) এপিআই নিয়ে কাজ শুরু করা। ৩. snapChanged() এর মতো নতুন জেএস (JS) ইভেন্ট নিয়ে কাজ শুরু করা।
বৈশিষ্ট্য
সমীক্ষার ফলাফলে দেখা গেছে যে, ব্যবহারকারীরা ওয়েবে কিছু নির্দিষ্ট ধরণের স্ক্রল-সম্পর্কিত কম্পোনেন্ট নিয়ে সমস্যায় পড়েন, কারণ প্ল্যাটফর্মটি প্লাগইন বা অতিরিক্ত প্রচেষ্টা ছাড়া সেগুলো তৈরি করার জন্য প্রয়োজনীয় মৌলিক উপাদানগুলো সরবরাহ করে না। এটি এমন একটি ক্ষেত্র যা আমরা আরও গভীরভাবে খতিয়ে দেখতে চাই।
ডেভেলপাররা যে ফিচারগুলো তৈরি করতে হিমশিম খান, সেগুলো হলো: ১. ক্যারোসেল ২. ভার্চুয়াল স্ক্রল ৩. ইনফিনিট স্ক্রল