منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۳ دقیقه

صفحه‌بندی (Pagination) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

منبع اولین مزیت صفحه‌بندی را «کاهش بار شناختی» می‌گوید، و چند بند پایین‌تر یکی از عیب‌هایش را این می‌داند که «وقتی کاربر باید محتوا را میان چند صفحه مقایسه کند خسته‌کننده می‌شود».

این دو یک چیزند: بار حذف نشده، نوعش عوض شده.

تعریف

صفحه‌بندی فرایند تقسیم‌کردن محتوای یک سایت — یا بخشی از آن — به صفحه‌های مجزاست، تا بازدیدکننده زیر انبوهی از داده در یک صفحه نماند. رایج‌ترین کاربردش تقسیم فهرست‌های بلند (نتایج جست‌وجو، فهرست محصول) و جدول‌های بزرگ داده است.

مزیت‌ها و عیب‌ها

منبع شش مزیت می‌شمارد: کاهش بار شناختی · پیمایش آسان، چون صفحه‌ها «نشانهٔ راه» می‌شوند و کاربر یادش می‌آید فلان مورد در صفحهٔ سوم بود — و در دادهٔ مرتب‌شده، شمارهٔ صفحه می‌تواند به بازهٔ تاریخ یا قیمت اشاره کند · تنظیم انتظار، چون کاربر می‌داند حجم داده چقدر است و کجای آن رسیده · کنترل کاربر، اگر بتواند تعداد آیتم هر صفحه را عوض کند · سازگاری با موتور جست‌وجو، چون هر صفحه مجزا ایندکس می‌شود · و پشتیبانی از تداوم، چون کاربر می‌تواند از همان‌جا که رها کرده ادامه بدهد.

و دو عیب: گسستن جریان کار کاربر در انتهای هر صفحه · و نیاز به چند بار بارگذاری، که مقایسهٔ محتوا میان صفحه‌ها را خسته‌کننده می‌کند.

در برابر اسکرول بی‌نهایت

منبع مقایسهٔ منصفانه‌ای می‌کند. اسکرول بی‌نهایت برای کاوش آزاد خوب است و در موبایل شهودی‌تر، ولی مسائل کاربردپذیری دارد: نرسیدن به فوتر · سختی یافتن محتوا پس از ترک صفحه و بازگشت · حجم صفحه و افت کارایی · خستگی اسکرول · و ایندکس ضعیف‌تر.

و می‌گوید صفحه‌بندی وقتی مفیدتر است که کاربر هدف مشخصی دارد و می‌خواهد محتوایی را پیدا کند، و وقتی محتوا ساختار دارد یا با معیار عینی مرتب‌شدنی است — مثل فروشگاهی که اجازهٔ فیلتر و مرتب‌سازی بر پایهٔ قیمت می‌دهد.

و نتیجه‌گیری درستی دارد: فرمول مشخصی وجود ندارد؛ انتخاب به هدف کاربر بستگی دارد و باید آزمون شود.

بهترین‌روش‌ها

کنترل صفحه‌بندی را هم بالا و هم پایین محتوا بگذارید و چیدمانش را یکدست نگه دارید · سطح کلیک را بزرگ کنید، چون شمارهٔ متنی هدف کوچکی می‌سازد (و منبع نمونهٔ لوگوی قدیمی گوگل را می‌آورد که زیبا بود ولی شماره‌ها به هم چسبیده بودند) · تنظیم تعداد آیتم را پیشنهاد بدهید و انتخاب کاربر را به‌یاد بسپارید · پریدن به صفحهٔ اول و آخر را ممکن کنید · و موقعیت فعلی کاربر را نشان بدهید.

و در پرسش‌وپاسخ چند قلم خوب دیگر: تعداد شماره‌های نمایش‌داده‌شده را محدود کنید (چند صفحهٔ اطراف صفحهٔ فعلی، به‌همراه اول و آخر) · پیمایش با صفحه‌کلید · و طراحی واکنش‌گرا برای صفحه‌های کوچک.

بار کم نشده؛ جا عوض کرده

این بخش افزودهٔ مترجم است. تقسیم‌کردن ۲۰۰ آیتم به ۱۰ صفحه، مقدار چیزی که کاربر باید در نظر بگیرد را کم نمی‌کند؛ یک کار اسکن را به یک کار حافظه و پیمایش تبدیل می‌کند — حالا باید یادت بماند در صفحهٔ سوم چه دیدی و چطور برگردی.

پس صورت‌بندی صادقانه‌اش این است:

صفحه‌بندی بار را در هر صفحه کم می‌کند و در کل کار زیاد می‌کند.

و همین یک قاعدهٔ تصمیم روشن‌تر از «محتوای ساخت‌دار در برابر بی‌ساختار» به‌دست می‌دهد:

• - وقتی کاربر یک آیتم می‌خواهد، صفحه‌بندی کنید. او یک بار پیدا می‌کند و بیرون می‌رود؛ حافظه‌ای لازم نیست.
• - وقتی کاربر باید آیتم‌ها را مقایسه کند، هرگز صفحه‌بندی نکنید. مقایسه یعنی نگه‌داشتن چند چیز در ذهن به‌طور همزمان، و مرز صفحه دقیقاً همان چیزی را می‌شکند که کار به آن نیاز دارد.

و نتیجهٔ عملی‌اش این است که برای فهرست‌های مقایسه‌ای — انتخاب بیمه، مقایسهٔ گوشی، انتخاب پرواز — راه‌حل نه صفحه‌بندی است و نه اسکرول بی‌نهایت: فیلتر بهتر و نمای مقایسه است.

شمارهٔ صفحه فقط وقتی نشانهٔ راه است که ترتیب پایدار بماند

این بخش هم افزودهٔ مترجم است، و به‌نظرم مهم‌ترین چیزی که در آن متن نیست.

قوی‌ترین استدلال منبع به‌نفع صفحه‌بندی این است که شمارهٔ صفحه نشانهٔ راه می‌شود. اما این فقط وقتی درست است که فهرست زیرین بین دو بازدید عوض نشود — و در محصول واقعی معمولاً عوض می‌شود:

• - فهرستی که بر پایهٔ تازگی مرتب شده، فردا «صفحهٔ سه»‌اش صفحهٔ دیگری است.
• - فهرست محصولی با موجودی زنده، هر ساعت جابه‌جا می‌شود.
• - و رتبه‌بندی شخصی‌سازی‌شده اصلاً برای دو کاربر یکی نیست.

و از این بدتر، یک باگ مشخص است که منبع یک کلمه هم درباره‌اش نمی‌گوید: وقتی کاربر در حال ورق‌زدن است و فهرست عوض می‌شود، آیتم‌ها از مرز صفحه‌ها می‌لغزند — یعنی یک آیتم می‌تواند کاملاً از چشم کاربر بیفتد یا دو بار نشانش داده شود.

علتش هم روشن است: صفحه‌بندی مبتنی بر آفست («از آیتم ۲۰ به بعد را بده») روی فهرستی که تغییر می‌کند، بی‌معناست.

و راه‌حلش دو گزینه است:

• - نشانگر پایدار به‌جای آفست. یعنی «بعد از این آیتم مشخص» را بخواهید، نه «از شمارهٔ بیست». این روش آیتم گم‌نمی‌کند و تکرار هم نمی‌سازد — ولی شمارهٔ صفحه نمی‌دهد، و پذیرفتن این معاوضه صادقانه‌تر از دادن شماره‌ای است که دروغ می‌گوید.
• - یا ترتیب را برای طول نشست فریز کنید (یک عکس لحظه‌ای بگیرید و همان را ورق بزنید). این شماره را حفظ می‌کند و هزینه‌اش نگه‌داشتن آن عکس است.

و قاعدهٔ کوتاهش: اگر ترتیب فهرستتان پایدار نیست، شمارهٔ صفحه یک وعدهٔ بی‌پشتوانه است.

و «تنظیم انتظار» همان چیزی است که همه دورش می‌ریزند

این بخش هم افزودهٔ مترجم است و کوتاه است. از میان شش مزیت منبع، «کاربر می‌داند حجم داده چقدر است» ارزان‌ترین و پرکاربردترین است — و در عمل بیشترین دورریختن را دارد، چون شمردن روی جدول بزرگ گران است. پس تیم‌ها «بعدی ←» را می‌فرستند بی هیچ عددی.

سه قلم عملی:

• - اگر نمی‌توانید تعداد را ارزان بشمارید، همین را بگویید — «بیش از ۱٬۰۰۰ نتیجه» صادقانه است؛ نشان‌دادن ۱۰ صفحه وقتی نمی‌دانید چند صفحه است، نیست.
• - هرگز شمارش صفحه‌ای را نشان ندهید که نمی‌توانید محاسبه‌اش کنید. «صفحهٔ ۱ از ۱۰» که واقعاً ۹۰ صفحه است، بدتر از هیچ است.
• - و عدد مفید، تعداد صفحه نیست: تعداد نتیجه پس از فیلتر است — چون همان است که به کاربر می‌گوید باید بیشتر محدود کند یا نه.

و دو هشدار که در نمونه‌های خود منبع پنهان‌اند و برچسب نخورده‌اند: کنترل صفحه‌بندی یک کنترل حرکتی‌–‌ظریف در انتهای یک صفحهٔ بلند است — یعنی بدترین جای ممکن برای هدف کوچک، خصوصاً با یک دست در موبایل. و مسئلهٔ جدول ESPN که منبع به «نمایش بیشتر» نسبت می‌دهد، در واقع مسئلهٔ سرستون چسبان است و به جدول صفحه‌بندی‌شده هم به‌همان اندازه وارد است.

در بافت فارسی: جهت فلش، طول برچسب، و عمق

این بخش هم افزودهٔ مترجم است و چهار نکته دارد.

یک: خودِ کنترل صفحه‌بندی دو جهت متفاوت دارد و همین جایی است که آینه‌کردنِ کورکورانه خرابی می‌سازد. در چیدمان راست‌به‌چپ، «بعدی» به سمت چپ است — ولی دنبالهٔ عددی همچنان صعودی است. حالت شکست رایج این است که کل کنترل آینه شود و شمارهٔ ۱ سمت راست بنشیند در حالی که فلشِ «بعدی» به راست اشاره می‌کند.

قاعده: فلش از جهت خواندن پیروی می‌کند (بعدی = ←)، و دنبالهٔ شماره‌ها ترتیب صعودی خودش را نگه می‌دارد. و این را روی دستگاه واقعی آزمون کنید، نه روی ماکت آینه‌شده.

دو: برچسب‌های فارسی بلندترند. «صفحهٔ بعدی» و «آخرین صفحه» چند برابر Next و Last جا می‌گیرند — پس کنترلی که در انگلیسی جا می‌شود، در فارسی روی صفحهٔ ۳۶۰ پیکسلی می‌شکند. تصمیم را زود بگیرید: روی موبایل فقط آیکون و شماره، و کلمه‌ها در aria-label.

سه: ارقام. شمارهٔ صفحه عددی است که کاربر آن را با چیزی که به‌یاد دارد تطبیق می‌دهد — و همان‌طور که در شناخت نوشتم، عددِ تطبیق‌شدنی بهتر است لاتین باشد. اما نکتهٔ کشندهٔ اینجا چیز دیگری است: مخلوط‌کردن — ارقام فارسی در کنترل و ارقام لاتین در نشانی صفحه، کاربر را وادار به یک تبدیل ذهنی بی‌فایده می‌کند.

چهار: صفحه‌بندی عمیق اینجا گران است، از دو طرف. سمت سرور، پرش به آفست بزرگ روی میزبانی ارزان کند است؛ و سمت کاربر، رفتن به صفحهٔ نهم روی اتصال با تأخیر بالا یعنی نُه رفت‌و‌برگشت، در حالی که یک فیلتر یک رفت‌و‌برگشت است.

پس اولویت محلی روشن است: فیلتر را بهتر کنید، نه صفحه‌بندی را عمیق‌تر. عمق قابل‌دسترس را سقف بگذارید و کاربر را به محدود‌کردن هدایت کنید — همان کاری که موتورهای جست‌وجو می‌کنند.

جمع‌بندی

• - صفحه‌بندی تقسیم محتوا به صفحه‌های مجزاست؛ مزیت‌هایش نشانهٔ راه و تنظیم انتظار و کنترل کاربر و سازگاری با موتور جست‌وجوست، و عیب‌هایش گسستن جریان و هزینهٔ مقایسه.
• - اما «کاهش بار شناختی» دقیق نیست: بار در هر صفحه کم و در کل کار زیاد می‌شود، چون یک کار اسکن به کار حافظه و پیمایش تبدیل می‌شود.
• - قاعدهٔ تصمیم: برای پیدا‌کردن یک آیتم صفحه‌بندی کنید، و برای مقایسه هرگز — که پاسخش نه صفحه‌بندی است و نه اسکرول بی‌نهایت، بلکه فیلتر بهتر و نمای مقایسه است.
• - شمارهٔ صفحه فقط وقتی نشانهٔ راه است که ترتیب فهرست پایدار بماند؛ روی فهرست متغیر، آیتم‌ها از مرز صفحه می‌لغزند و گم می‌شوند یا دو بار دیده می‌شوند.
• - راه‌حل: نشانگر پایدار به‌جای آفست (که شماره نمی‌دهد و صادق است)، یا فریز‌کردن ترتیب برای طول نشست.
• - «تنظیم انتظار» را دور نریزید: اگر نمی‌توانید بشمارید بگویید «بیش از ۱٬۰۰۰»، شمارش صفحه‌ای که محاسبه‌شدنی نیست را نشان ندهید، و عدد مفید تعداد نتیجه پس از فیلتر است.
• - و در بافت ما: فلش از جهت خواندن پیروی می‌کند و دنبالهٔ عددی صعودی می‌ماند · برچسب فارسی بلند است، پس در موبایل آیکون و شماره · ارقام را مخلوط نکنید · و فیلتر را بهتر کنید، نه صفحه‌بندی را عمیق‌تر.