2021 স্ক্রোল সার্ভে রিপোর্ট

২০২১ সালের স্ক্রোল সার্ভে রিপোর্ট এবং Chrome টিমের কাছ থেকে শব্দগুলি পান যে এটি Chromium এবং ওয়েবের অগ্রাধিকার এবং পরিকল্পনাগুলিকে কীভাবে প্রভাবিত করে।

Adam Argyle

Sam Dutton

এপ্রিল মাসে, Chrome টিম 2019 MDN ওয়েব DNA রিপোর্ট থেকে প্রকাশিত শীর্ষ সমস্যাগুলির উপর ভিত্তি করে একটি স্ক্রোল এবং টাচ-অ্যাকশন জরিপ প্রকাশ করে । 2021 স্ক্রোল জরিপ রিপোর্ট প্রস্তুত, এবং Chrome টিম জরিপের ফলাফল থেকে সংগৃহীত কিছু চিন্তাভাবনা এবং পদক্ষেপগুলি ভাগ করে নিতে চায়। আমরা আশা করি এই ফলাফলগুলি ব্রাউজার বিক্রেতাদের এবং স্ট্যান্ডার্ড গ্রুপগুলিকে ওয়েব স্ক্রলিং কীভাবে উন্নত করা যায় তা বুঝতে সাহায্য করবে।

২০২১ সালের স্ক্রোল সার্ভে রিপোর্ট দেখুন।

উল্লেখযোগ্য ফলাফল

জরিপটি বেনামে ৮৮০টি জমা সংগ্রহ করেছে, যার মধ্যে ৩৬৬টি প্রতিটি প্রশ্নের উত্তর দিয়েছে।

স্ক্রলিং শুরু করার জন্য সিএসএসের একটি লাইন ব্যবহার করা প্রয়োজন, যেমন overflow-x: scroll; স্ক্রোল এপিআই এবং বিকল্পগুলির পৃষ্ঠের ক্ষেত্রফল বড়, যা জাভাস্ক্রিপ্ট থেকে সিএসএস পর্যন্ত বিস্তৃত। নিম্নলিখিত ফলাফলগুলি ওয়েব ডেভেলপারদের সম্মুখীন হওয়া সমস্যাগুলি তুলে ধরতে সাহায্য করে।

ওয়েব স্ক্রলিং নিয়ে সামগ্রিক সন্তুষ্টি

প্রশ্ন ২৭

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

আমরা বিশ্বাস করি স্ক্রোল নিয়ে কাজ করার ব্যাপারে সামগ্রিক মনোভাব এতটা কম হওয়া উচিত নয়। এই মানদণ্ডটি পরিবর্তন করা দরকার; এটি একটি স্পষ্ট ইঙ্গিত যে এখনও কাজ বাকি আছে।

স্ক্রোল নিয়ে কাজ করতে অসুবিধা

প্রশ্ন ২

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

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

স্পর্শ মিথস্ক্রিয়ার গুরুত্ব

প্রশ্ন ৩

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

ট্যাব কী বা গেমপ্যাড নেভিগেশনের অসুবিধা

প্রশ্ন ৫ক

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

touch-action শেখা

প্রশ্ন ৯

জরিপের কিছু প্রশ্নে নির্দিষ্ট API ব্যবহার সম্পর্কে জিজ্ঞাসা করা হয়েছিল, যার উত্তর হ্যাঁ, না, অথবা "আজ আমি শিখেছি" হতে পারে। একটি উল্লেখযোগ্য প্রতিক্রিয়া ছিল জরিপ থেকে touch-action সম্পর্কে শেখার রিপোর্ট করা লোকের সংখ্যা, কারণ এটি কাস্টম স্পর্শ অঙ্গভঙ্গি তৈরির সময় একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা স্ক্রোলের মধ্যে ইন্টারঅ্যাক্ট করতে হবে।

চক্রাকার স্ক্রলিং

প্রশ্ন ২৭

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

স্ক্রোলযোগ্য এলাকাগুলি কি গুরুত্বপূর্ণ

প্রশ্ন ২

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

ক্যারোসেল

প্রশ্ন ২০

প্রায় প্রতিটি উত্তরদাতাই তাদের ওয়েব কাজে ক্যারোসেল সরবরাহ করেন, যেখানে মাত্র ২৫% উত্তরদাতা মনে করেন যে এগুলি পরিচালনা করা সহজ। আমাদের গবেষণার সময় অফ-দ্য-শেল্ফ ক্যারোসেলগুলি জনপ্রিয় ছিল, কিন্তু এই পরিসংখ্যানটি আমাদের অবাক করেছে, কারণ এটি খুব একটা সমাধানযোগ্য বলে মনে হচ্ছে না।

অসীম স্ক্রোল

প্রশ্ন ২২

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

যদিও content-visibility এবং contain-intrinsic-size একত্রিত করে দীর্ঘ স্ক্রোলযোগ্য এলাকার জন্য রেন্ডার খরচ কমানো যেতে পারে, তবে এটি "আরও লোড" ইনফিনিট স্ক্রোল UX-এর ক্ষেত্রে সাহায্য করছে বলে মনে হচ্ছে না।

স্ক্রোল-লিঙ্কড বা স্ক্রোল-ট্রিগারড অ্যানিমেশন

প্রশ্ন ২৪

প্রায় অর্ধেক উত্তরদাতা স্ক্রোল-অর্কেস্ট্রেটেড অ্যানিমেশন ব্যবহার করেন এবং অর্ধেক উত্তরদাতা এটিকে কঠিন বলে মনে করেন, আবারও উচ্চ ব্যবহারকে অসুবিধার সাথে যুক্ত করেছেন।

বিল্ট-ইন স্ক্রলিংয়ের সাথে প্রতিযোগিতা করুন

প্রশ্ন ২৬

ফোন এবং ট্যাবলেট অ্যাপ্লিকেশনের অন্তর্নির্মিত স্ক্রোল এবং স্পর্শ মিথস্ক্রিয়াকে প্রায়শই ওয়েবের সাথে যোগাযোগের জন্য একটি স্পষ্ট জায়গা হিসাবে প্রচার করা হয়। বৈশিষ্ট্যগুলির মধ্যে রয়েছে স্ক্রোল-লিঙ্কড অ্যানিমেশন, প্রোগ্রাম্যাটিক ইন্টারফেস, ভয়েস ইন্টিগ্রেশন, স্ক্রোল ইঙ্গিত এবং পুল-টু-রিফ্রেশ API।

উত্তরদাতাদের মাত্র অর্ধেক মনে করেছেন যে বিল্ট-ইন স্ক্রলিংয়ের অভিজ্ঞতার সাথে মিল পাওয়া কখনও কখনও সম্ভব।

ওয়েবে স্ক্রোল ইন্টারঅ্যাকশন তৈরি করে সামগ্রিক সন্তুষ্টি অর্জন করা

প্রশ্ন ২৭

জরিপ টেকওয়েজ

জরিপের ফলাফলগুলি চারটি বিভাগে বিভক্ত: সামঞ্জস্যতা , শিক্ষা , API এবং বৈশিষ্ট্য ।

সামঞ্জস্য

ক্রোম টিম স্ক্রোল সামঞ্জস্য সহ ওয়েব সামঞ্জস্যের সমস্যার সংখ্যা হ্রাস করার লক্ষ্য ঘোষণা করেছে।

প্রথম তিনটি সামঞ্জস্যের সমস্যা যার উপর মনোযোগ দেওয়া উচিত: ১. অনুভূমিক স্ক্রলিং সামঞ্জস্য। ১. overscroll-behavior ক্রস ব্রাউজার। ১. -webkit-scrollbar থেকে উপসর্গগুলি অপসারণ এবং মান অনুসরণ করা।

শিক্ষা

জরিপের ফলাফলে দেখা গেছে যে touch-action এবং লজিক্যাল বৈশিষ্ট্য সম্পর্কে আরও শিক্ষার প্রয়োজন। আন্তর্জাতিক বিন্যাসের ক্ষেত্রে ব্রাউজারটি অগ্রভাগে রয়েছে এবং এটি স্পষ্টতই অব্যবহৃত বা ভুল বোঝাবুঝি।

যেসব ক্ষেত্রে মনোযোগ দেওয়া উচিত: ১. touch-action ১. যৌক্তিক বৈশিষ্ট্য

এপিআই

স্ক্রোল স্ন্যাপিংয়ের ব্যবহার ক্রমবর্ধমান, এবং ডেভেলপাররা প্রতিক্রিয়া জানিয়েছেন যে তারা জনপ্রিয় লাইব্রেরি এবং প্লাগইনগুলির সাথে আন্তঃকার্যকরীভাবে বৈশিষ্ট্যগুলি ব্যবহার করতে চান। CSS এবং প্লাগইন লাইব্রেরির মধ্যে এই ব্যবধান কমিয়ে আনা স্ক্রোল স্ন্যাপ ডেভেলপার এবং ব্যবহারকারীর অভিজ্ঞতার সন্তুষ্টি অর্জনে সহায়তা করবে।

আমরা scroll-snap এর উপর API এর কাজ ফোকাস করব: ১. ব্রাউজার জুড়ে API এর উপলব্ধতা এবং সামঞ্জস্যতা। ১. scroll-start মতো নতুন CSS API গুলিতে কাজ শুরু করুন। ১. snapChanged() এর মতো নতুন JS ইভেন্টগুলিতে কাজ শুরু করুন।

ফিচার

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

ডেভেলপাররা যেসব বৈশিষ্ট্য তৈরি করতে হিমশিম খাচ্ছে তার মধ্যে রয়েছে: ১. ক্যারোসেল ১. ভার্চুয়াল স্ক্রোল ১. অসীম স্ক্রোল

রিসোর্স

• স্ক্রোল জরিপ প্রতিবেদন
• জরিপের ঘোষণা
• মজিলা ডিএনএ রিপোর্টস
• Compat2021: ওয়েবে পাঁচটি শীর্ষ সামঞ্জস্যপূর্ণ সমস্যা দূর করা

থাম্বনেইল ছবি: আনস্প্ল্যাশে টেলর উইলকক্সের তোলা ছবি।