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

پیمایش پارالاکس (Parallax Scrolling) چیست؟

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

یک صفحهٔ وب دو بُعد دارد. پارالاکس بُعد سوم را نمی‌سازد؛ آن را از راه اختلاف سرعت جعل می‌کند.

تعریف

پیمایش پارالاکس تکنیکی است که در آن تصویر پس‌زمینه کندتر از تصویر پیش‌زمینه حرکت می‌کند.

نتیجهٔ این اختلاف، حس عمق روی یک صفحهٔ مسطح است.

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

پس وقتی دو لایه با دو سرعت جابه‌جا می‌شوند، مغز نتیجه می‌گیرد که یکی جلوتر از دیگری ایستاده است. هیچ عمقی در کار نیست و توهم عمق کامل است.

کارکرد دومش گرفتن توجه است. حرکت نسبی روی صفحه‌ای که بقیه‌اش ساکن است، چشم را به خودش می‌کشد.

از کجا آمد

تصور رایج این است که پارالاکس زادهٔ وب است. این تصور غلط است.

تکنیک در بازی‌های رایانه‌ای دههٔ هشتاد میلادی شکل گرفت، سال‌ها پیش از آنکه مرورگری در کار باشد.

دو نمونهٔ شاخصش Jump Bug در ۱۹۸۱ و Moon Patrol در ۱۹۸۲ هستند.

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

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

همین ترفند بعدها به صفحهٔ وب رسید. مسئله هم عوض نشده بود: یک سطح تخت که باید حس فضا بدهد.

چهار روش اجرا

پارالاکس یک پیاده‌سازی واحد ندارد. چهار روش شناخته‌شده وجود دارد و تفاوتشان در این است که «لایه» را چطور تعریف می‌کنند.

• - ۱. لایه‌ای: سامانهٔ نمایش چند لایهٔ پس‌زمینه را پشتیبانی می‌کند و هر لایه با نرخ مستقل خودش پیمایش می‌شود. این همان تصویری است که بیشتر مردم از پارالاکس در ذهن دارند.
• - ۲. اسپرایت: ترکیبی از تصویرها در قالب «اسپرایت» کنار هم می‌نشینند و یک لایه‌بندی شبه‌واقعی می‌سازند. جابه‌جاکردن زاویهٔ دوربین تعیین می‌کند کدام لایه یا کدام گروه از لایه‌ها دیده شود.
• - ۳. الگوی تکرارشونده: کاشی‌های شناور روی یک پس‌زمینهٔ تکرارشونده می‌لغزند و خودِ نقشک هر کاشی متحرک است. توهم پارالاکس از همین انیمیشن کاشی‌ها می‌آید.
• - و ۴. رَستر: خط‌های تک‌پیکسلی یکی‌یکی از بالا به پایین صفحه بازکشیده می‌شوند و بین هر خط تأخیر کوچکی می‌افتد. همان تأخیر است که عمق را می‌سازد.

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

چرا سراغش می‌روند

طرفداران پارالاکس فهرست روشنی از فایده‌ها دارند.

یک: عمق بصری و جذابیت متحرک. صفحه از حالت سند تخت بیرون می‌آید.

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

سه: هدایت مسیر بازدیدکننده. حرکت، جهت می‌دهد و کاربر بی‌آنکه فکر کند در همان مسیر پیش می‌رود.

چهار: برانگیختن کنجکاوی. چیزی که نیمه‌دیده وارد قاب می‌شود، پیمایش بعدی را تشویق می‌کند.

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

شش: بالارفتن اعتبار ظاهریِ سایت. کاری که پرداخته به‌نظر می‌رسد، حرفه‌ای‌تر خوانده می‌شود.

اینجا یک هشدار قدیمی هم هست. جوئل مارش می‌گوید «ظاهر و حس، جذابیت می‌سازد نه وفاداری» — یعنی کاربر حرفه‌ای تصمیمش را بر پایهٔ زیبایی نمی‌گیرد. پس اعتبارِ ظاهری، جای کاربردپذیری را نمی‌گیرد.

هزینه‌ها

فهرست بالا نصف ماجراست. نصف دیگرش، بهایی است که پارالاکس می‌گیرد.

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

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

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

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

پنج: خطر اجرای بد. پارالاکسی که سنجیده اجرا نشود، به‌جای ارزش‌افزودن آزاردهنده می‌شود.

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

حرکت، سرگیجه و دسترس‌پذیری

این بخش افزودهٔ من است، چون مطلب اصلی «اجرای بد» را نام می‌برد اما نمی‌گوید بد برای چه کسی.

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

مکانیسمش هم قابل توضیح است. چشم حرکت گزارش می‌کند، دستگاه تعادل سکون گزارش می‌کند، و ناسازگاری این دو گزارش همان چیزی است که حالت تهوع می‌سازد.

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

راه‌حل، کنارگذاشتن پارالاکس نیست. راه‌حل این است که حرکت را یک ترجیح کاربر بدانید، نه یک ثابت طراحی.

سیستم‌عامل‌ها این ترجیح را از کاربر می‌پرسند و مرورگر آن را در اختیار شما می‌گذارد. پرسوجوی prefers-reduced-motion همان کلید است.

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

معیار سنجش هم ساده است: اگر با خاموش‌کردن حرکت، بخشی از اطلاعات ناپدید شود، آن اطلاعات از اول در جای غلطی گذاشته شده بود.

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

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

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

قاعدهٔ اول از همه مهم‌تر است و بیشتر از همه نادیده گرفته می‌شود. سادگی اینجا یعنی تعداد کم لایه، دامنهٔ کم جابه‌جایی، و نبود جلوه‌های هم‌زمانِ رقیب.

قاعدهٔ آخر هم شرط عملی‌بودن بقیه است. پارالاکس روی سخت‌افزارهای مختلف رفتار یکسانی ندارد، و تنها راه فهمیدنش آزمودن روی همان دستگاه‌هایی است که کاربران واقعی دارند.

سه پرسش پیش از افزودن پارالاکس

این بخش هم افزودهٔ من است، چون فهرست بهترین‌روش‌ها می‌گوید چطور اجرا کنید و نمی‌گوید اصلاً اجرا بکنید یا نه.

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

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

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

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

مقایسه با پیمایش بی‌نهایت اینجا آموزنده است. هر دو تکنیک، پیمایش را از یک عمل ساده به بخشی از تجربه تبدیل می‌کنند، و هر دو وقتی به کار می‌آیند که کاربر برای کاوش آمده باشد، نه برای انجام کاری مشخص.

در بافت فارسی

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

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

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

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

سه: جهت حرکت باید با جهت خواندن بخواند. در چیدمان راست‌به‌چپ، لایه‌ای که به راست می‌لغزد حس عقب‌گرد می‌دهد.

هر جابه‌جایی افقی را قرینه کنید، وگرنه چشمِ فارسی‌خوان با متن هم‌جهت نمی‌شود. این همان خطایی است که از کپی‌کردن یک قالب چپ‌به‌راست بیرون می‌آید.

چهار: صفحهٔ فرود فارسی معمولاً متن بیشتری دارد. توضیح و ترجمه، ارتفاع صفحه را بلند می‌کند و لایهٔ متحرک روی متن بلند خسته‌کننده می‌شود.

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

جمع‌بندی

• - پارالاکس: پس‌زمینه کندتر از پیش‌زمینه حرکت می‌کند و همین اختلاف، عمق را روی صفحهٔ مسطح می‌سازد
• - ریشه‌اش وب نیست: بازی‌های رایانه‌ای دههٔ هشتاد میلادی، از جامپ باگ ۱۹۸۱ و مون پاترول ۱۹۸۲
• - چهار روش اجرا: لایه‌ای · اسپرایت · الگوی تکرارشونده · رَستر
• - فایده‌ها: عمق بصری · روایت · هدایت مسیر · کنجکاوی · برجسته‌شدن فراخوان عمل · اعتبار ظاهری
• - هزینه‌ها: بارگذاری کند · ناسازگاری با واکنش‌گرا · محدودیت سئو · کاهش پیوند داخلی · و آزاردهندگی اجرای بد
• - حرکت یک ترجیح کاربر است: با کاهش حرکت، لایه‌ها می‌خوابند و محتوا می‌ماند
• - بهترین‌روش‌ها: ساده بماند · در خدمت روایت · عمق و سرگرمی · فراخوان عمل · و آزمون گسترده
• - سه پرسش: این حرکت چه می‌گوید · بدون جلوه هم کار می‌کند · چند بار دیده می‌شود
• - مرز کاربرد: صفحهٔ فرود و روایت، نه پیشخوان و فرم
• - و در فارسی: بودجهٔ بایت · اولویت گوشی · قرینه‌کردن جهت حرکت · و محدودکردن جلوه به چند ایستگاه