هر آنچه که باید درباره اسکرول کردن سایت بدانید

هر آنچه که باید درباره اسکرول کردن سایت بدانید
5.0/5 rating (4 votes)

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

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

امروزه بسیاری از شبکه‌های اجتماعی همچون اینستاگرام و توییتر از اسکرول‌ طولانی (long scrolling) استفاده می‌کنند تا کاربران را بیشتر درگیر محتوا کنند.

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

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

 

در طراحی سایت مدرن، تجربه کاربری در اولویت قرار دارد.

در این مقاله با نکات مهم در طراحی وب‌سایت مدرن آشنا شوید.
طراحی سایت مدرن

 

اهمیت اسکرول کردن (scrolling) در طراحی سایت

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

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

از این رو؛ امروزه اغلب وب‌سایت‌ها برای نمایش محتوای از اسکرول‌ عمودی (Vertical Scrolling) استفاده می‌کنند و تا حد امکان کاربر برای مطالعه ادامه مطالب نیازی به کلیک روی لینک ندارد.

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

 

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

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

 

مزایای اسکرول سایت

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

به عنوان مثال، وب‌سایت 7up.nl به خوبی توانسته است با استفاده از افکت‌های اسکرولینگ در کنار انیمیشن‌، وب‌سایتی خلاقانه و هیجان انگیز برای معرفی محصولات خود ایجاد کند. در ادامه برخی از مهم‌ترین مزایای اسکرول کردن وب‌سایت را بررسی می‌کنیم. 

 

  • افزایش سرعت وب‌سایت

هنگامی که از اسکرولینگ برای طراحی صفحات استفاده می‌کنید، نیاز ندارید که تمامی محتوای صفحه‌ها را در لحظه بارگذاری کنید. تا زمانی که کاربر مشغول بازدید از قسمت اول صفحه است، فرصت دارید تا سایر محتوا را بارگذاری کنید و دیگر نیاز نیست کاربر زمان زیادی را منتظر بارگذاری کامل صفحه بماند.

 

سرعت بارگذاری صفحات وب‌سایت، یکی از عوامل تاثیرگذار روی سئو سایت است.

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

 

  • تعامل کاربر با وب‌سایت

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

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

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

 

  • داستان سرایی

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

وب‌سایت matterarchitects.co.nz به خوبی توانسته است از اسکرولینگ در جهت معرفی کسب‌وکار خود و داستان سرایی استفاده کند. 

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

 

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

در این مقاله درباره نکات مهم طراحی صفحه لندینگ پیج صحبت کرده‌ایم.
لندینگ پیج

 

  • مناسب برای تلفن همراه

از آنجایی که امروزه اغلب کاربران با استفاده از تلفن همراه و تبلت وب‌ گردی می‌کنند و اغلب تلفن‌های همراه صفحات کوچکی دارند؛ به کمک اسکرولینگ می‌توان محتوای وب‌سایت را برای کاربران تلفن همراه نیز بهینه کرد.

 

  • بهینه سازی سئو

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

 

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

 

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

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

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

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

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

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

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

 

استفاده از انیمیشن در کنار افکت‌های اسکرول می‌تواند وب‌سایت‌های جذابی را به وجود آورد.

مطالعه این مقاله را به شما پیشنهاد می‌کنیم.
انیمیشن در طراحی سایت

 

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

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

 

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

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

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

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

 

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

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

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

 

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

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

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

در نهایت باید گفت که اگرچه افکت‌های مختلف اسکرول می‌تواند به جذابیت وب‌سایت کمک کند، اما این افکت‌ها برای تمامی وب‌سایت‌ها مناسب نیست. اگر از افکت نامناسبی برای وب‌سایت خود استفاده کنید، نه تنها تجربه کاربری خود را بالا نبرده‌اید، بلکه باعث سردرگمی و نارضایتی کاربر نیز می‌شود.

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

 

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

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

مزایای استفاده از اسکرول در طراحی سایت کدام اند؟

  • افزایش سرعت وب‌سایت
  • تعامل با کاربر
  • کمک به داستان سرایی بهتر
  • نمایش مناسب در تلفن همراه
  • بهینه سازی سئو