مقالات تجربه کاربری - اسکرول بینهایت
اسکرول بینهایت
اسکرول بینهایت 
اسکرول بینهایت (Infinite Scrolling) چیست؟
💡 این متن «بازنویسی آزاد» است: ایدهها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثالهای تازه بازگو شدهاند و ترجمهٔ کلمهبهکلمه نیست. بخشهای افزودهٔ مترجم در جعبهٔ منبع مشخص شدهاند.
در فهرست «چه وقت استفاده کنیم»، مورد اول افزایش درگیری و زمان صرفشده است. و در فهرست «عیبها»، مورد اول اعتیاد است.
این دو، دو فقره نیستند. یک سازوکار واحدند که از دو سر نگاه شده — و انتخاب میانشان تصمیم طراحی نیست.
تعریف
اسکرول بینهایت الگویی از طراحی تعامل است که در آن صفحه با پایینرفتن کاربر محتوای تازه بارگذاری میکند و به کاربر اجازه میدهد حجم زیادی از محتوا را بی انتهای مشخص بگردد. معمولاً در شبکههای اجتماعی و فیدهایی بهکار میرود که محتوایشان ساختار یا ترتیب معینی ندارد.
و سازوکارش ساده است: در بازدید اول فقط مقدار کمی داده بار میشود، سایت موقعیت کاربر را رد میگیرد، و با رسیدن به انتها دستهٔ بعدی را میگیرد و نشان میدهد. این الگو، جانشین صفحهبندی است — که محتوا را به صفحههای مجزا تقسیم میکند.
کجا بهکار میآید
- - افزایش درگیری و زمان صرفشده در سایت. فیدهای محتوامحور و شبکههای اجتماعی میخواهند کاربر بیشترین زمان را بگذراند؛ با اسکرول بینهایت کاربر لازم نیست هیچجا کلیک کند و محتوای بیپایان دریافت میکند.
- - کشف اُرگانیک محتوا. وقتی کاربر چیز مشخصی نمیخواهد کار میکند؛ و اگر چیز مشخصی میخواهد، جستوجو میکند و انتظار دارد در چند نتیجهٔ اول پیدایش کند — آنجا گرداندن بیپایان مناسب نیست.
- - سهولت پیمایش در موبایل، چون کشیدن انگشت از کلیک روی لینکهای ریز صفحهبندی شهودیتر است.
عیبهایش
منبع فهرست کاملی میدهد: اعتیاد (و اشاره به اینکه اینستاگرام و یوتیوب پس از اعتراض عمومی تنظیمات محدودکردن زمان اضافه کردند) · مشکل کارایی و مصرف حافظه، خصوصاً روی دستگاههای محدود · دشواری پیمایش، بازنگشتن به نقطهٔ قبلی و ناتوانی در نشانهگذاری یا همرسانی یک آیتم مشخص · محتوای کوبنده و خستگی اسکرول · پنهانشدن فوتر و لینکهای ضروریاش · ضعف در سئو · مشکلات دسترسپذیری، چون کنترلهای دسترسپذیری بالای صفحهاند و با اسکرول بینهایت دورتر و دورتر میشوند · نبودِ کنترل و مصرف داده، چون محتوا بی هیچ کنش صریحی از کاربر بار میشود · و نبودِ نشانگر پایان محتوا.
و دربارهٔ سئو نکتهٔ بهروزی دارد: گوگل تا ۲۰۱۹ توصیه میکرد نسخهٔ صفحهبندیشدهٔ موازی ارائه شود، و بعد که پشتیبانی از آن نشانههای نشانهگذاری را برداشت این توصیه را پس گرفت. رویکرد امروزی این است که محتوای بارگذاریشدهٔ پویا از ابتدا برای خزنده قابل دسترس باشد — با رندر سمت سرور یا بهسازی تدریجی. و اصل بنیادیاش: محتوایی که فقط داخل جاوااسکریپت وجود دارد و هرگز در HTML ارسالی نیست، در خطر ایندکسنشدن است.
بدیلها و بهترینروشها
سه بدیل معرفی میکند: صفحهبندی (کلیک بیشتر میخواهد ولی از خستگی جلوگیری میکند، سئوپسند است و پریدن به جلو یا به اول فهرست را آسان میکند) · اسکرول بینهایت با دکمهٔ «بیشتر» · و اسکرول بینهایت با صفحهبندی یکپارچه، که شمارهٔ صفحه را همانجا که محتوای تازه ظاهر میشود نشان میدهد تا بهعنوان نشانهٔ راه عمل کند.
و در بهترینروشها: نشانگر بارگذاری · امکان نشانهگذاری و همرسانی با بهروزرسانی پویای نشانی · بهینهسازی کارایی و بارگذاری تنبل · دکمهٔ «بیشتر» برای کنترل کاربر · ملاحظات دسترسپذیری · دکمهٔ «بازگشت به بالا» · ملاحظات سئو · مدیریت حافظه با تخلیهٔ محتوای خارج از صفحه یا اسکرول مجازی · نشانگر پایان محتوا · آزمون روی دستگاههای مختلف · گزینهٔ انتخاب میان اسکرول بینهایت و صفحهبندی · و دسترسپذیر نگهداشتن فوتر.
و بخش دسترسپذیریاش دقیق است: نقش role="feed" روی ظرف و role="article" روی هر آیتم، که به کاربر صفحهخوان اجازه میدهد آیتمبهآیتم حرکت کند — تقریباً معادل کاری که کاربر بینا با اسکن بصری میکند · و aria-busy برای حالت بارگذاری و ناحیهٔ aria-live پنهان برای اعلام «در حال بارگذاری نتایج بیشتر».
کاربردِ اول و عیبِ اول، یک چیزند
این بخش افزودهٔ مترجم است. اسکرول بینهایت تنها الگوی رابط است که در فهرست «چه وقت استفاده کنیم»اش، هدفِ اعلامشدهاش طولانیکردن نشست است — و همان چیز، چند بند پایینتر، بهعنوان «اعتیاد» عیب شمرده میشود.
و اگر این دو یک چیزند، پس انتخاب میانشان تصمیم طراحی نیست. تصمیمِ مدل کسبوکار است:
- - اگر درآمد شما از زمانِ کاربر میآید (تبلیغات، فید)، این الگو با انگیزهٔ شما همراستا و با نفع کاربر ناهمراستا است — و هیچکدام از بهترینروشهای آن فهرست این را عوض نمیکند. یک دکمهٔ «بیشتر» تعارض منافع را حل نمیکند.
- - و اگر درآمد شما وقتی میآید که کاربر کاری را تمام کند (فروشگاه، بانک، خدمات)، اسکرول بینهایت صاف و ساده یک باگ است — و همانطور که در چارچوب HEART نوشتم، وقتِ صرفشده اینجا هزینهٔ کاربر است نه فایده.
پس آزمون انتخاب این الگو یک جمله است: پول ما از زمان کاربر میآید یا از تمامشدن کارش؟ و این را باید قبل از بحث دربارهٔ نشانگر بارگذاری و دکمهٔ بازگشتبهبالا جواب داد.
فهرست بهترینروشها دارد صفحهبندی را از نو میسازد
این بخش هم افزودهٔ مترجم است. آن فهرست را یکبار دیگر بخوانید و کنار هر قلم بنویسید چه چیزی را برمیگرداند:
- - دکمهٔ «بیشتر» ← کنشِ صریح کاربر برای دریافت محتوای بعدی. صفحهبندی این را داشت.
- - نشانهگذاری و همرسانی ← نشانیِ پایدار. صفحهبندی این را داشت.
- - نشانگر پایان محتوا ← دانستن اینکه فهرست تمام شد. صفحهبندی این را داشت.
- - فوتر دسترسپذیر ← رسیدن به انتهای صفحه. صفحهبندی این را داشت.
- - صفحهبندی یکپارچه و شمارهٔ صفحه بهعنوان نشانهٔ راه ← موقعیت قابلارجاع. این یکی دیگر عملاً خودِ صفحهبندی است.
- - گزینهٔ انتخاب صفحهبندی ← ...
یعنی این فهرست، خصلتهای صفحهبندی را یکییکی و با هزینهٔ جاوااسکریپت بازسازی میکند. و اگر همهشان را صادقانه پیاده کنید، چیزی که ساختهاید صفحهبندی است با پیچیدگی بیشتر.
پس یک قاعدهٔ عملی: بشمارید چند قلم از آن فهرست را واقعاً لازم دارید. اگر بیشتر از دو تا بود، صفحهبندی بسازید.
چیزی که این الگو نابود میکند، «نشانی» است
این بخش هم افزودهٔ مترجم است. منبع به این نزدیک میشود («کاربر ممکن است نتواند آیتم مشخصی را نشانهگذاری یا همرسانی کند») ولی آن را یک آزار پیمایشی میداند. مسئله بزرگتر است.
نشانی (URL) واحد حافظه در وب است — و چهار طرف به آن نیاز دارند:
- - کاربر، برای برگشتن به چیزی که دید.
- - دیگران، برای فرستادن لینک.
- - موتور جستوجو، برای ایندکس.
- - و تیم خودتان، برای گزارش باگی که میگوید «همین آیتم».
و اسکرول بینهایت مجموعهای از چیزهای نشانیدار را به یک چیزِ بینشانی تبدیل میکند.
و راهحل، آن چیزی نیست که منبع پیشنهاد میدهد (بهروزرسانی نشانی همزمان با اسکرول) — چون آن با تاریخچهٔ مرورگر و دکمهٔ بازگشت میجنگد و معمولاً هر دو را خراب میکند. راهحل ساختاری این است:
هر آیتم نشانی خودش را داشته باشد، و فید فقط فهرستی از آنها باشد. یعنی نشانی را در سطح آیتم نگه دارید و از تلاش برای نشانیدادن به موقعیت در جریان دست بردارید. موقعیت در جریان چیزی نیست که ارزش آدرسدادن داشته باشد؛ آیتم هست.
در بافت فارسی: بارگذاری خودکار یعنی خرجکردن پول کاربر
این بخش هم افزودهٔ مترجم است و سه نکته دارد.
یک: منبع «مصرف داده» را در یک عبارت میآورد، و اینجا این استدلال قاطع است. اسکرول بینهایت بی هیچ کنش صریحی از کاربر بار میکند — یعنی روی یک بستهٔ اینترنت حجمی، دارد پول کاربر را خرج میکند بی آنکه بپرسد. یک فید تصویر که خودکار بار میشود، بهطور مشخص یک هزینه است.
پس در اتصال کند یا حجمی، دکمهٔ «بیشتر» یک لطف نیست — رضایت است. و یک اضافهٔ عملی که در فهرست منبع نیست: سیگنال ذخیرهٔ داده مرورگر را بخوانید و اگر روشن بود، پیشفرض را روی دکمهٔ «بیشتر» بگذارید.
و مسئله فقط داده نیست: باتری و گرمای گوشی میانرده هم هست. همان رشد حافظهای که منبع میگوید، روی این دستگاهها به لرزش و کندی میرسد که کاربر آن را «اپ خراب است» میخواند، نه «محتوا زیاد است».
دو: حالت شکست این الگو روی شبکهٔ نامطمئن، خاموش است. چرخندهٔ بارگذاری میچرخد و کاربر نمیتواند «محتوای بیشتری نیست» را از «درخواست مرد» تشخیص بدهد. و صفحهبندی بلند شکست میخورد: صفحه یا بار میشود یا خطا میدهد.
پس آن قلم «نشانگر پایان محتوا» در فهرست منبع، اینجا از یک ظرافت به یک الزام ارتقا پیدا میکند — و کنارش یک حالت خطای صریح با دکمهٔ تلاش مجدد لازم است. سه حالت باید از هم قابل تفکیک باشند: در حال بارگذاری · پایان فهرست · خطا.
سه: بازگرداندن موقعیت اسکرول با فونت فارسی میشکند. صفحه پس از رسیدن فونت بازچینش میشود، و فونتهای وب فارسی سنگینترند و دیرتر میرسند — پس اگر موقعیت اسکرول را پیش از آن بازگردانید، جای کاربر میپرد.
و درمانش ساده است: پیش از رسیدن فونت، فضای متن را رزرو کنید (تنظیم متریک فونت جانشین یا size-adjust) و بازگرداندن موقعیت را پس از پایدارشدن چینش انجام دهید. و اگر نمیتوانید، اصلاً موقعیت را بازنگردانید — پرش ناگهانی از بالابودن بدتر است.
و یک نکتهٔ کوچک راستبهچپ: دکمهٔ «بازگشت به بالا» و هدر چسبان، دو چیزی هستند که در چیدمان راستبهچپ بیشتر از همه اشتباه جا میافتند — سمتشان را در دستگاه واقعی چک کنید، نه در نمای آینهای فیگما.
جمعبندی
- - اسکرول بینهایت محتوا را با پایینرفتن کاربر بار میکند و جانشین صفحهبندی است؛ برای کشف اُرگانیک و موبایل مناسب است و عیبهای مستندی دارد از اعتیاد و کارایی تا سئو و دسترسپذیری.
- - اما کاربردِ اول («افزایش زمان») و عیبِ اول («اعتیاد») یک سازوکار واحدند، و انتخاب میانشان تصمیم مدل کسبوکار است: پول ما از زمان کاربر میآید یا از تمامشدن کارش؟
- - اگر از زمان میآید، هیچ بهترینروشی تعارض منافع را حل نمیکند؛ و اگر از تمامشدن کار میآید، این الگو یک باگ است.
- - فهرست بهترینروشها دارد صفحهبندی را قلمبهقلم از نو میسازد — دکمهٔ «بیشتر»، نشانی پایدار، نشانگر پایان، فوتر دسترسپذیر، شمارهٔ صفحه. قاعده: اگر بیشتر از دو قلم لازم دارید، صفحهبندی بسازید.
- - و چیزی که این الگو نابود میکند «نشانی» است — واحد حافظهٔ وب برای کاربر و دیگران و موتور جستوجو و تیم خودتان. راهحل: هر آیتم نشانی خودش را داشته باشد و فید فقط فهرستی از آنها باشد، نه آدرسدادن به موقعیت در جریان.
- - و در بافت ما: بارگذاری خودکار خرجکردن پول کاربر است بی پرسیدن، پس دکمهٔ «بیشتر» رضایت است نه لطف · سه حالت بارگذاری، پایان، خطا باید قابل تفکیک باشند چون شکست این الگو خاموش است · و بازگرداندن موقعیت اسکرول را پس از پایدارشدن چینش فونت فارسی انجام دهید.
منبع
این نوشته «بازنویسی آزاد» است از مطلب What is Infinite Scrolling? در وبسایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف اسکرول بینهایت بهعنوان الگوی بارگذاری محتوا با پایینرفتن کاربر و مناسببودنش برای محتوای بیساختار، شرح سازوکار فنیاش از بارگذاری اولیه و ردگیری موقعیت تا دریافت دستهٔ بعدی، جانشینیاش با صفحهبندی، سه کاربرد شامل افزایش درگیری و زمان صرفشده و کشف اُرگانیک محتوا و سهولت پیمایش در موبایل، نُه عیب شامل اعتیاد با نمونهٔ تنظیمات محدودکردن زمان در اینستاگرام و یوتیوب و مشکل کارایی و مصرف حافظه و دشواری پیمایش و ناتوانی در نشانهگذاری و همرسانی و محتوای کوبنده و خستگی اسکرول و پنهانشدن فوتر و ضعف سئو و مشکلات دسترسپذیری و نبودِ کنترل و مصرف داده و نبودِ نشانگر پایان، تاریخ توصیهٔ گوگل تا ۲۰۱۹ و پسگرفتنش و رویکرد امروزی رندر سمت سرور و بهسازی تدریجی و اصل خطر ایندکسنشدن محتوای صرفاً جاوااسکریپتی، سه بدیل شامل صفحهبندی و اسکرول با دکمهٔ «بیشتر» و اسکرول با صفحهبندی یکپارچه، دوازده بهترینروش شامل نشانگر بارگذاری و نشانهگذاری و بهینهسازی کارایی و دکمهٔ «بیشتر» و دسترسپذیری و بازگشت به بالا و ملاحظات سئو و مدیریت حافظه و نشانگر پایان و آزمون چنددستگاهی و گزینهٔ انتخاب صفحهبندی و دسترسپذیر نگهداشتن فوتر، و بخش دسترسپذیری با نقشهای feed و article و ویژگیهای aria-busy و ناحیهٔ aria-live — از این منبع گرفته شده. منبع نمونههایی از گوگل و X و اینستاگرام و BuzzFeed و Mashable میآورد و به ویدیویی از Vitaly Friedman ارجاع میدهد. متن فارسی، ساختار بخشها و همهٔ تحلیلها کاملاً مستقل نوشته شدهاند.
متن مقالهٔ اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمهبهکلمه ارائه نشده و متن کامل انگلیسی (بههمراه همهٔ تصاویر) در لینک زیر در دسترس است.
بخشهای افزودهٔ مترجم: صورتبندی آغازین دربارهٔ یکیبودن مورد اول فهرست کاربردها با مورد اول فهرست عیبها؛ کل بخش «کاربردِ اول و عیبِ اول یک چیزند» شامل تشخیص یگانگی این الگو در داشتنِ «طولانیکردن نشست» بهعنوان هدف اعلامشده، انتقال تصمیم از سطح طراحی به سطح مدل کسبوکار با دو شاخهٔ درآمداززمان و درآمدازتمامشدنکار، استدلال بیاثربودن بهترینروشها بر تعارض منافع، و آزمون تکجملهای انتخاب الگو؛ کل بخش «فهرست بهترینروشها دارد صفحهبندی را از نو میسازد» شامل نگاشت ششقلمی هر بهترینروش به خصلتی که صفحهبندی رایگان داشت، نتیجهگیری بازسازی صفحهبندی با هزینهٔ جاوااسکریپت، و قاعدهٔ عملی «بیشتر از دو قلم، صفحهبندی بسازید»؛ کل بخش «چیزی که این الگو نابود میکند نشانی است» شامل ارتقای مسئله از آزار پیمایشی به نابودی واحد حافظهٔ وب با چهار ذینفع نشانی، نقد راهحل بهروزرسانی نشانی همزمان با اسکرول بر پایهٔ جنگش با تاریخچهٔ مرورگر، و راهحل ساختاری نشانی در سطح آیتم بهجای نشانیدادن به موقعیت در جریان؛ و کل بخش بافت فارسی شامل ارتقای «مصرف داده» به استدلال خرجکردن پول کاربر بی پرسیدن و صورتبندی دکمهٔ «بیشتر» بهعنوان رضایت و توصیهٔ خواندن سیگنال ذخیرهٔ داده و افزودن مسئلهٔ باتری و گرمای دستگاه میانرده و تفسیر کاربر از آن، تحلیل خاموشبودن حالت شکست روی شبکهٔ نامطمئن در برابر شکست بلندِ صفحهبندی با الزام تفکیک سه حالت بارگذاری و پایان و خطا، و مسئلهٔ شکستن بازگرداندن موقعیت اسکرول با بازچینش پس از رسیدن فونت فارسی بههمراه دو راهحل رزرو فضا و تأخیر بازگردانی، و نکتهٔ راستبهچپ دربارهٔ دکمهٔ بازگشتبهبالا و هدر چسبان.
تصاویر: هر سه نمودار این صفحه طراحی مستقل مترجم است. تصاویر نسخهٔ اصلی نماهایی از محصولات دیگر با اجازهٔ استفادهٔ منصفانه است؛ اینجا بازتولید نشدهاند و در مطلب اصلی قابل مشاهدهاند.
مشاهدهٔ مقالهٔ اصلی
مترجم: سپنتا پویا
طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمیگردانم.
دربارهٔ من