UI/UX - ادامه‌دار بودن لیست رو چطوری نشون بدیم؟

سلام. برام خیلی پیش اومده تو پروژه‌های مختلف و تو گجت‌های مختلف اونم با سبک‌های طراحی متفاوت به کاربر بفهمونم که خانم/آقا این لیست ادامه دار هستش لطفا آیتمهای دیگه رو هم اسکرول کن ببین!

شاید بگید اینو همه اکثرا متوجهن و نیازی به اینکار نیست.

اما به شخصه بیشتر پروژه‌هایی که کار کردم مخاطبای هدفشون رو کاربرهایی فرض کردن که متوسط رو به پایین از موبایل چیز زیادی سرشون نمیشه و فن فناوری نیستن. به همین خاطر باید جوری ایده داد که مناسب این قشر باشه و همه چیز قابل فهم باشه.

من چند تا ایده رو که تا الان ازشون استفاده کردم رو لیست میکنم. البته میدونم که خیلیاشو میدونید? ولی دیگه به روتون نیارید:

نصفه کردن آخرین آیتم

این چیزیه که کاربر میره دنبالش تا بتونه آیتم رو کامل ببینه. چون یه حس کنجکاوی مانندی درست میشه در کاربر. اینجا می‌تونید آیتم آخر لیست رو جوری تنظیم کنید که یه تیکه از بالای متن آیتم دیده بشه و کاربر رو ترغیب کنه به اسکرول. مثل نمونه زیر:

نمایش اسکرول‌بار (overflow = visible)

این بستگی به سیستم‌های طراحی داره. مثلا ممکنه برای نرم‌افزار دسکتاپ طراحی انجام بدید که عموما اسکرولبار همیشه دیده میشه و در کاربرای این سیستم‌ها به یه عادت تبدیل شده که همیشه اسکرولبار دیده بشه.

اما اگه بیایم رو متریال دیزاین یا فلت یا فلوئنت دیزاین، می‌بینیم که اسکرولبار اکثرا بصورت مخفی هستن و با اسکرول کردن میشه نوار لغزنده اسکرولبار رو دید.

خب در این حالت که اسکرولبار همیشه مخفیه می‌تونیم، با فعالسازی حالت ویزیبیلیتی اسکرولبار، اونرو نمایش بدیم. اینجوری تا حدود زیادی کاربر متوجه میشه که "آها این لیست ادامه داره".

استفاده از گرادیانت (من بهش میگم fade)

می‌تونید در ابتدا و انتهای لیست یه لایه گرادیانت از سفید به رنگ بی‌رنگ بذارید. مثل نمونه زیر:

اینکار رو ما تو پروژه نرم‌افزار طلافروشی کیمیا انجام دادیم. به اینصورت که هر چقدر کاربر به انتها یا ابتدای لیست نزدیک می‌شه، فید هم محوتر میشه و در نهایت مخفی. البته قابلیت کلیک رو هم بهش اضافه کردیم که کاربر می‌تونه روش هم کلیک کنه و اسکرول کنه تو لیست.

قرار دادن باتن "ادامه"

تو این روش ته لیست یه باتن (لینک/ آیتم یا هر چیزی که صلاح می‌دونید) میذاریم و با کلیک روی اون ادامه لیست برامون باز میشه. اگه بخوام این ایده رو تکمیل‌ترش کنم از طراحی رفتار هم استفاده می‌کنم تا کاربر رو مجبور کنم روش کلیک کنه. چطوری؟

می‌تونم تعداد نتایجی که در ادامه لیست وجود داره و هنوز کاربر اونا رو ندیده رو روی کپشن این باتن بنویسم. مثلا کپشن میشه اینطوری: "نمایش 230 آیتم دیگر" یا "ادامه نتایج (بیش از 200 مورد)". من ux writing خوبی ندارم متاسفانه. کپشن رو خودتون بهبود بدین ?

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

خلاصه اینکه میتونید از تکنیکهای طراحی رفتار (Behaviour Design) هم استفاده کنید.

ادغام شماره‌گذاری لیست با حرکت اسکرول

این روش رو دیجیکالا به شکل کاملا حرفه‌ای انجام داده. اگه در دیجیکالا (نسخه مربوط به سال 1401) به عنوان مثال وارد دسته‌بندی لپتاپ بشید و اسکرول کنید به سمت پایین. همش انتظار دارید اون شماره‌گذاری صفحه بعد از 30-40 آیتم دیگه دیده بشه.

اما این اتفاق نمی‌افته و اسکرول کردن رو باید ادامه بدید تا حدود 100 آیتم فکر کنم. یهو میرسید به ته نتایج و می‌بینید که عه شماره صفحه روی 4 یا 5 قرار داره. میگید من که اینو نزدم. ممکنه اولش گیج کننده باشه اما بعدش متوجه می‌شید که دیجیکالا اینجا خواسته یه کار پرتکرار رو از بین ببره تا حدودی و از طرفی کاربر رو با اسکرول خودکار و ناتمام اذیت نکنه!

شما هم اگه ایده‌ای دارین تو نظرات بگین تا بیشتر تعامل داشته باشیم در این مورد??