انواع افکتهای اسکرولینگ در طراحی سایت

هنگام استفاده از اسکرولینگ به چه نکاتی باید توجه کرد؟

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

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

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

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

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

انواع افکت‌های اسکرول صفحات

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

اسکرول تمام صفحه (Full Page Scrolling)

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

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

یکی از تکنیک‌هایی که می‌توانید برای دسترسی راحت‌تر کاربران در کنار اسکرول تمام صفحه استفاده کنید، ایجاد یک آدرس URL متمایز برای هر یک از صفحات اسکرول شده است. وب‌سایت alvarotrigo.com از این تکنیک استفاده کرده است. به این ترتیب، هر بخش از صفحه یک آدرس مجزا دارد و راحتی می‌توانید تنها به بخشی خاص از صفحه لینک دهید. 

اسکرول پارالاکس (Parallax Scrolling)

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

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

اسکرول نامحدود (Infinite Scrolling)

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

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