Infinite scroll va pagination β ko'p sahifali ro'yxatlar (mahsulot katalog, blog, qidiruv natijalari) uchun ikki turli UX yondashuv. Pagination klassik β \"Sahifa 1, 2, 3\". Infinite scroll modern β foydalanuvchi pastga scroll qilsa, yangi natijalar avtomatik yuklanadi. Qaysi yaxshi? Bu kontekstga bog'liq.
Pagination β klassik yondashuv
Foydalanuvchi sahifalar orasida navigation: \"Avvalgi | 1 | 2 | 3 | Keyingi\".
Afzalliklari: foydalanuvchi qaerda ekanini biladi, oxirigacha yetish mumkin, sahifa marker'lash mumkin (bookmark), SEO uchun yaxshiroq.
Kamchiligi: har \"Keyingi\" click yangi sahifa yuklash (sekinroq), foydalanuvchi click qilishni xohlashi kerak.
Infinite scroll β modern yondashuv
Foydalanuvchi pastga scroll qilsa β yangi natijalar avtomatik yuklanadi. Klick yo'q.
Afzalliklari: smooth experience, foydalanuvchi natijalarni ko'rishni davom ettiradi, social feed'lar uchun mos (Twitter, Instagram).
Kamchiligi: foydalanuvchi oxirini bilmaydi, footer kirib bo'lmaydi, performance muammosi (juda ko'p DOM element), SEO qiyin.
Qachon pagination ishlatish
E-commerce mahsulot katalog: foydalanuvchi maqsadli xarid qilmoqchi, oxirigacha yetishi shart, fokus kerak. Pagination yaxshi.
Qidiruv natijalari: pagination klassik. Foydalanuvchi sahifa orasida easy navigation.
Documentation, blog archive: pagination o'qish va navigatsiya uchun yaxshi.
Qachon infinite scroll ishlatish
Social feed (Twitter, Instagram, Facebook): foydalanuvchi browse qilmoqchi, fokus kerak emas. Infinite scroll mos.
Image gallery: foydalanuvchi rasm'larni ko'rib chiqmoqchi, click kam.
News feed: yangi content kelishi davomli.
Hybrid yondashuv β \"Load More\"
Infinite scroll va pagination o'rtasidagi yo'l. Foydalanuvchi pastga scroll qilsa β \"Load More\" tugmasi. Click qilgach β yangi natijalar yuklanadi.
Afzalliklari: foydalanuvchi nazoratga ega, footer ko'rinadi, performance yaxshiroq.
Eng yaxshi yondashuv ko'p sayt uchun.
SEO va infinite scroll
SEO uchun infinite scroll qiyin. Google chuqur sahifalardagi kontentni topishi qiyin.
Yechim: ?page=2 URL'lari (Google buni ko'radi), History API (URL o'zgaradi scroll davomida), rel=\"next\"/\"prev\" (Google 2019'da rasmiy ravishda ishlatmasligini e'lon qildi, lekin Bing uchun foydali).
Performance
Infinite scroll DOM element ko'p β sahifa sekin bo'ladi.
Yechim: virtual scrolling. Faqat ekranda ko'rinadigan element'lar render bo'ladi. Yuqori va pastdagi'lar olib tashlanadi.
Libraries: react-window, vue-virtual-scroller, Intersection Observer API.
Footer muammosi
Infinite scroll bilan footer ko'rinmaydi β har scroll yangi kontent yuklanadi.
Yechim: \"Load More\" tugma. Yoki avtomatik scroll cheklangan (5-10 marta), keyin pagination.
Loading state
Yangi natijalar yuklanayotganda β loading indicator. Spinner, skeleton loading.
Foydalanuvchi bilishi shart: tizim yangi narsalar yuklayapti.
End of content
Infinite scroll'da oxiri kelganda β clear xabar. \"Hammasi ko'rsatildi\" yoki \"Boshiga qaytish\".
Foydalanuvchi adashmasin.
Mobile va infinite scroll
Mobile'da infinite scroll natural β foydalanuvchi already scroll qiladi. Twitter, Instagram, TikTok β barchasi infinite scroll.
Lekin performance ehtiyot. Mobile kuchsizroq qurilma.
UX research natijalari
Nielsen Norman Group: infinite scroll foydalanuvchini chalkashtiradi, ayniqsa qaytib oldingi joyga qaytmoqchi bo'lsa.
Pagination β foydalanuvchi tayyor, biladi, control'da.
Hybrid (Load More) β ko'p UX research'da eng yaxshi.
Implementatsiya
Pagination: oddiy HTML/CSS. Backend pagination logic.
Infinite scroll: JavaScript event listener (scroll). Intersection Observer API β modern, performance yaxshi.
Load More: button click event.
Common xato
1. Infinite scroll'da footer access yo'q.
2. Loading indicator yo'q β foydalanuvchi nima sodir bo'layotganini bilmaydi.
3. Browser back tugmasi ishlamaydi (URL o'zgarmaydi).
4. Performance β juda ko'p DOM element.
5. SEO β chuqur sahifalar indekslanmaydi.
Sayt.uz strategiyasi
Sayt.uz blog'da klassik pagination. Sahifa raqamlari ko'rinadi (1, 2, 3 ... 25 ... 50). Foydalanuvchi qaerda ekanini biladi.
Mahsulot sahifalarida pagination kerakmas β kam mahsulot.
Hosting plan'larda β barchasi bir sahifada. Pagination yo'q.
Mobile blog'da: pagination kichik bo'lib pastida. Hozircha infinite scroll'ga o'tish rejada emas β SEO va UX uchun pagination yaxshi.
Natija: blog page navigation foydalanuvchilar tomonidan oson ishlatiladi. \"Sahifa 5\"ga to'g'ridan-to'g'ri o'tish mumkin.