۴ نوع اسکرول خلاق در طراحی سایت

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

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

در این مقاله قصد داریم نمونه های جذاب و عالی از الگوهای اسکرول در سایت را با هم مرور کنیم.

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

۱. اسکرول طولانی

۲.اسکرول طولانی( اسکرول کردن) ثابت

۳.اسکرول نامحدود

۴.اسکرول پارالاکس مناسب

۱. اسکرول طولانی:

سایت Le Mugs:

سایت Take It:

سایت Beoplay:

سایت Flickr:

مشکل:

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

راه حل:

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

ترفندها و نکات موجود:

•  از ناوبری چسبنده(sticky navigation) استفاده کنید. سردرگمی و ناتوانی  برای رفتن به عقب، یکی از معایب اصلی اسکرول طولانی است اما منوی ثابت  به کاربران اجازه می دهد ازادانه حرکت کنند.
•  اسکرول طولانی ممکن است اثرات منفی بر روی سئو داشته باشد اما  با استفاده از برخی از نکات و ترفندها می توان از بروز چنین مشکلاتی جلوگیری کرد.
•  از خاصیت پخش خودکار در رسانه هایی همچون فایل های ویدئویی استفاده نکنید زیرا اگر بیش از حد مورد استفاده قرار گیرد می تواند سرعت بارگذاری سایت را تا حد زیادی کاهش دهد.
•  نیازی نیست از یک فرمت تک صفحه ای به همراه اسکرول طولانی استفاده کنید. برخی از سایت ها  دارای  صفحه اصلی با اسکرول طولانی هستند که به  صفحات دیگر لینک می دهند. سایت هایی همچون  فیس بوک و  توییتر از این قابلیت استفاده می کنند.
•  برای اسکرول های طولانی در بخش های خاصی از یک صفحه، سعی کنید از تکنیک های توضیح داده شده در بخش زیر استفاده کنید.

۲. اسکرول طولانی ثابت:

سایت Squarespace

سایتUXPin Tour

مشکل:

یک سایت می تواند از مزایای اسکرول طولانی  به خوبی استفاده کند اما ممکن است  نخواهید سایت را به کلی تغییر دهید.

راه حل:

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

نکات و ترفندها:

•  زمانی که می خواهید درباره مورادی که باید در بخش اسکرول ثابت قرار گیرد تصمیم گیری کنید،مطمئن شوید که تنها محتوایی را انتخاب می کنید که متناسب با موضوع یا دسته بندی واحد باشد.  به عنوان مثال هر  قسمت از اسکرول ثابت سایت Squarespace بر روی توضیح چگونگی ایجاد یک وبسایت زیبا برای کسب وکارهای مختلف تمرکز دارد.

• Call to action های خود را در انتهای هر فریم اسکرول ثابت قرار دهید.

• همانطور که در سایت UXPin مشاهده می کنید، شما می توانید نوار پیشرفت اسکرول(scroll progress bar) را به بالای ناوبری خود اضافه کنید. اگر بیش از سه الی چهار فریم داشته باشید استفاده از این قابلیت باعث افزایش سرعت می شود.

۳. اسکرول نامحدود:

سایت True Tube:

سایت Tumblr:

سایتBy Kato:

سایتImgur :

مشکل:

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

راه حل:

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

نکات و ترفندها:

• علاوه بر ناوبری چسبنده، روش های دیگری برای کمک به مشکل سردرگمی در اسکرول نامحدود وجود دارد. گزینه پرش به بخش مورد نظر(همانطور که در سایت Tumblr وجود دارد) به کاربران اجازه می دهد به هنگام گم شدن در میان محتوای سایت، به مکان اصلی خود بازگردند.
• اسکرول نامحدود را می توان با صفحه بندی ترکیب کرد . در این صورت جستجو دقیق تر و سریع تر می شود.
• خود را با دایره های بارگذاری سنتی محدود نکنید. انتخاب یک آیکون مناسب می تواند هویت سایت شما را مشخص کند. سایت هایی همچون فیس بوک، Tumblr و Imgur دارای آیکون بارگذاری سفارشی هستند.

۴. اسکرول پارالاکس مناسب:

سایتThe Walking Dead:

سایتOakley: Airbrake MX:

سایتThe Boat (SBS):

سایتMcWhopper:

مشکل:

کاربران در فرمت اسکرول طولانی نمی توانند تعامل کافی با سایت داشته باشند.

راه حل:

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

افکت پارالاکس(اختلاف منظر) جنبه های بسیار خلاقانه ای را در اسکرول ایجاد می کند.این سبک را می توان در سایت های داستان سرا مشاهده کرد و  استفاده از آن می تواند تجربه بهتری را در عناصر بصری ایجاد کند. سایت The Walking Dead از پارالاکس و سایر تکنیک های اسکرول استفاده کرده است.پس زمینه متفاوت، تماشای اسکرول را بسیار لذت بخش تر کرده است.

ترفندها و نکات:

• در مورد زمان بارگذاری محتاط باشید. یک سایت ساده با سرعت بارگذاری بالا بهتر از سایتی با سرعت بارگذاری پایین است.

برای بهینه سازی طراحی وب سایت که یکی از نیازهای اولیه دیجیتال مارکتینگ می باشد با مشاوران طراحی وب سایت کانون تبلیغاتی کروشه تماس حاصل نمائید.

منبع