اصول طراحیِ صفحه بندی (pagination) در وب

تجربه کاربری pagination

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

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

2. خیلی از کاربران دوست دارند همه رکوردها رو یکجا ببینند . بخصوص در مواردی که ستونها، امکان sort خوبی ندارند این قضیه واجبه (توصیه سایت nngroup). پس یه دکمه view All بذارید در کنار صفحه بندی. (بخصوص در سایت‌هایی فروشگاهی که کاربران میخوان پارامترهای زیادی از چند محصول را یکجا مقایسه کنند)

3. دیفالت خر است! تعداد رکوردهای پیشفرض در خیلی از کامپوننتهای دات نت، 10 تاست و این باعث شده خیلی از برنامه نویسان، این عدد رو تغییر نمی‌دهند و جداولشون (مثل عکس زیر) بیخودی paging داره.

درحالیکه گاهی نمایش تا 100 رکورد هم اوکیه. (بسته به میزان داده‌ها و حجم عکسهای هر محصول/رکورد)

4. ستون هایی که امکان sort دارند را با یک آیکون از بقیه ستون‌ها متمایز کنید. همچنین توجه کنید که قرار نیست قابلیت sort برای همه ستونها فعال باشد. (مثلا وجود امکان sort روی ستون description که یکسری توضیح هست، منطق جدول رو زیر سوال می‌بره و احمقانه بنظر میرسه)

5. بر اساس تحقیقات گروه نیلسن نورمن، استفاده از کمبوباکسی برای تعیین تعداد آیتم‌های موجود در هر صفحه، داغون کردن ux است. و پیشنهاد میکنند از همون دکمه view all استفاده کنید. اما اگر مجبور شدید ازونا بذارید، عدد آیتمها بهتره باهم فاصله زیادی داشته باشد. مثلا 10 و 50 . نه 10 و 20.

6. برای صفحه بندی، شماره اعداد صفحات را بگذاریم، یا از next , previous page استفاده کنیم؟ اگر برای کاربر، پریدن به صفحه شماره مثلا 10 مزیتی ایجاد میکنه (مثلا در لیست دانش آموزان یک مدرسه که بترتیب الفباست)، اعداد رو بذارید. وگرنه از «صفحه بعد» استفاده کنید. مثل نتایج جدید گوگل در نسخه موبایل.

7. مساله دیگر؛ دسترسی به آدرس صفحات است (صفحه دوم و سوم و…) اگر صفحه شما در وب بصورت public در دسترس است، شماره صفحه را در url قرار بدید تا وقتی لینک صفحه چهارم را برای کسی فرستادید، کاربر دقیقا به صفحه چهارم وارد شود. همچنین امکان استفاده از دکمه back مرورگر را مدنظر قرار دهید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *