خانه خلاقیت مانایید
خانه خلاقیت مانایید
خواندن ۷ دقیقه·۲ سال پیش

2/5 نکته برای جایگزینی صفحه‌بندی پَجینِیشِن در صفحات فهرست و دسته‌بندی


چکیده:

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



صفحه‌بندی سنتی (پجینیشن)

صفحه‌بندی سنتی شامل تقسیم فهرستی از آیتم‌ها به چند صفحه است که هر صفحه شامل تعداد ثابتی از آیتم‌ها است. برای دیدن گزینه های بیشتر، کاربران باید معمولاً با کلیک کردن “بعدی” یا شماره بعدی در بالا یا پایین صفحه موجود  به صفحه بعدی بروند –. هر صفحه شماره گذاری شده است و کاربران می توانند با انتخاب دکمه های مربوطه به صفحات شماره خاصی حرکت کنند.فروشگاههای بزرگ مانند دیجیکالا با تعداد زیاد آیتم به منظور کنترل‌ بهتر محصولات ارایه شده و راحتی کاربر بهتر است از همین کنترل کننده صفحه‌بندی سنتی ( پجینیشن Pagination ) استفاده کنند چرا که این کنترل‌ها هنگام جستجو و مرور مجموعه‌های عظیم محصولاتشان، کنترل دقیقی را ارائه می‌دهند. سایت فروشگاهی زنبیل از این روش برای صفحه بندی محصولات خود استفاده میکند. سایت‌هایی با تعداد محصولات کم یا عملکرد بارگیری خوب ممکن است بتوانند به سادگی همه محصولات را به صورت بارگزاری تدریجی (معادل  lazy loading ) دریک صفحه بارگیری کنند. در این روش وقتی کاربر به انتهای لیست محصولات بارگزاری شده می رسد، به طور اتوماتیک تعداد بیشتری از محصولات بارگزاری می شوند. این فروشگاه قهوه ملو از این روش استفاده میکند.به طور کلی اگر صفحه  شما قرار است  تعداد کمی آیتم  ( به طور میانگین کمتر از 100) یا متوسط (بین 100 تا 300)  را بارگزاری کند ​ ، بهتر است  به جای پجینیشن از “دکمه های بارگذاری تدریجی” یا “نمایش محصولات بیشتر”  و یا بارگزاری تدریجی (lazy loading)استفاده کنید.

صفحه بندی سنتی یا pagination
صفحه بندی سنتی یا pagination




نمایش دکمه های بیشتر

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

ما همیشه گفتیم کار شرکتهای دیگه رو (به دلایل زیادی) کپی نکنید اما گوگل یک استثنا است. صرفاً به دلیل اینکه طراحی و تغییرات طراحی در محصولات گوگل نتیجه بازخورد تعداد زیادی کاربر با طیف گسترده ای از سطح  ویژگی ها است.این روش به کاربران امکان می‌دهد بدلخواه موارد بیشتری را بارگیری کنند یا نه. از این رو برای آن دسته از کسانی که از اینترنت همراه استفاده میکنند و نمیخواهند محصولات اضافی را به دلیل مصرف اینترنت یا سرعت بارگزاری پایین  به طور مداوم بارگیری کنند، خوب است. همانند متد بارگزاری خودکار بهتر است برای خلق تجربه کاربری بهتر موارد مانند  “تعداد کل اقلام موجود در مجموعه”،  “تعداد محصول بارگزاری شده ” و ”    تعداد محصول برای بارگذاری در مجموعه “ را در معرض دید کاربر قرار دهید. اینگونه کاربر متوجه می شود کجای لیست محصولات قرار دارد و  چه موقع به انتهای لیست رسیده است.چه از بارگزاری تدریجی استفاده میکنید چه از  دگمه “بارگزاری بیشتر“، مطمئن شوید که صفحات فهرست شما از pogo sticking پشتیبانی می‌کنند . منظور این است وقتی کاربر پس از پیمایش لیست ،محصولی را انتخاب کرد و وارد صفحه آن شد. چنانچه دگمه برگشت را زد به همان قسمت از لیست برگردد و برای یافتن موقعیت خود مجبور به اسکرول کردن دوباره یا زدن دگمه بارگزاری ببیشتر به صورت پیاپی نشود. این کار به ویژه برای کاربرانی که عادت ندارند جزییات محصولات را در تب جدید باز کنند، بسیار کلافه کننده خواهد بود



بارگذاری تدریجی

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

  • تعداد نسبتاً کمی از محصولات در هر مجموعه (معمولاً کمتر از 40 محصول)
  • ارایه گزینه های مناسب برای فیلتر کردن و کمک به کاربران برای محدود کردن مجموعه نتایج
  • بارگزاری تعداد مشخصی از آیتمها  (“مثلا 50  مورد”)

این راه‌حل برای سایت‌هایی با دسته بندی هایی که دارای تعداد محدودی محصول هستند عالی است اما برای سایت‌هایی با محصولات زیاد باید از اسکرول بی‌نهایت به دو دلیل اجتناب شود؛

  1. دسترسی  کاربران به فوتر و اطلاعات آن سخت و عذاب آور می شود.
  2. وقتی صفحه شامل تعداد زیادی محصول است کاربران ممکن است دچار سردرگمی شوند و متوجه نشوند که در کجای لیست محصولات قرار دارند.

مشکل دسترسی به فوتر

از آنجایی که در بارگزاری بینهایت همواره با اسکرول کردن کاربر به پایین صفحه موارد جدیدی اضافه می‌شوند، کاربران نمی‌توانند به قسمت فوتر دسترسی پیدا کنند. در سایت‌هایی که از بارگزاری تدریجی استفاده میکنند، اغلب برای کاربرانی که قصد دسترسی به فوتر را دارند خسته کننده و مشکل‌زامی شود. وقتی از  بارگذاری تدریجی برای تعداد زیادی محصول استفاده کنید وب سایت شما تبدیل به یک کابوس برای کاربر می شود. چرا که کاربر مجبور می شود برای رسیدن به فوتر (پاورقی) به مدت 15 دقیقه اسکرول کند! در حالی که پاورقی بنا بر رسالت خود (سیاست بازگشت کاربر به سایت) میبایست به راحتی در دسترس باشد تا بتواند اطلاعات مربوط به فرآیند خرید حمل و نقل و بازگشت محصول، اطلاعات تماس و غیره … را در اختیار کاربر قرار دهد.

نقشه راهنما داشته باشید!

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

ترفند: بهتراست تعداد  محصولات را به صورت نشانگری بصری  با قابلیت چسبان (Sticky)   یا ثابت (fixed) در گوشه صفحه همواره در معرض دید کاربر قرار داده و همچنین موقعیت فعلی کاربر را به صورت المانهای متحرک به نمایش بگذارید. این نشانگر به کاربران کمک می‌کند موقعیت فعلی خود را ببیند و همچنین بفهمند که قبلاً چند مورد را مشاهده کرده و چند مورد برای دیده شدن باقی مانده‌است. با افزوده شدن موارد جدید به صفحات دارای،  نوار اسکرول استاندارد مرورگر مدام شکسته و پرش میکند، بنابراین کاربران نمی توانند برای تعیین مکان خود در یک صفحه به آن تکیه کنند. چرا که ممکن است دستگیره آن از میانه صفحه به ناگاه به یک سوم بالای صفحه جهش کند. از این رو نمایش یک نشانگر سفارشی برای مشخص کردن مکان فعلی از سردرگمی کابر می کاهد.

گاهی لازم است علاوه بر بارگزاری خودکار از یک دگمه برای مواقع غیر قابل پیشبینی استفاده کرد
گاهی لازم است علاوه بر بارگزاری خودکار از یک دگمه برای مواقع غیر قابل پیشبینی استفاده کرد



جمع بندی

علاوه بر آنچه گفته شد روشهای ترکیبی مانند صفخات موبایل در گوگل می توانید از روشهای ترکیبی استفاده کنید.  برای مثال وب سایت دیجیکالا و یا سایت مدیسه از روشهای بارگزاری تدریجی و پجینیشن  به طور همزمان استفاده میکند. از هر متدی که استفاده میکنید قبل از همه خودتان صفحه ای که طراحی  کرده اید را امتحان کنید و با فرض اینکه یک کاربر عادی هستید ببینید با آن چه طراحی کرده اید احساس راختی میکنید و میتوانید به راختی چیزی که دنبال آن هستید را بیابید همه اشکالات را چک کنید مانند عدم دسترسی به فوتر  یا مشخص نبودن دکمه نمایش بیشترو غیره …

منبع: خانه خلاقیت مانایید


طراحی رابط کاربریطراحی وبطراحی وب سایت
به رسم خلقت از خلاقیت میگوییم ...
شاید از این پست‌ها خوشتان بیاید