انواع اسکرول در طراحی وب سایت مزایا و معایب
توسط مجید احدی
در این مقاله قصد داریم نمونه های جذاب و عالی از الگوهای اسکرول در سایت را با هم مرور کنیم.
- اسکرول طولانی
- اسکرول طولانی( اسکرول کردن) ثابت
- اسکرول نامحدود
- اسکرول پارالاکس مناسب
۱- اسکرول طولانی:
مشکل: یک سایت دارای محتوای گلچین شده است که استفاده از فرمت چند صفحه ای برای نمایش آن ممکن است کار ناوبری را دشوار تر سازد. یک سایت نیازمند داستان سرایی به شیوه نرم و خطی است.
راه حل: یک صفحه واحد ایجاد کنید و اسکرول طولانی را در آن قرار دهید تا بتواند محتوای مورد نظر را در یک مکان واحد به نمایش بگذارد. این گزینه برای سایت های رسانه اجتماعی و سایت هایی که دارای محتوای تولید شده توسط کاربر هستند بسیار مفید و کار ساز است. در این گونه سایت ها به خاطر آپدیت های روزانه، محتوای متعدد و متفاوتی وجود دارد و طبقه بندی آن بسیار دشوار است. بیشتر مرورگر ها در گوشی های تلفن همراه نیز از الگوی اسکرول طولانی پشتیبانی می کنند. اگر الگوی اسکرول طولانی با اسکرول نامحدود که در ادامه آن را توضیح می دهیم، ترکیب شود می تواند تجربه مرور بسیار شگفت انگیزی را ایجاد نماید. اگر کاربران در حال جستجوی یک موضوع خاص هستند، وجود سیستم ناوبری ساخت یافته همچون سیستم موجود در آمازون، بهتر کار می کند اما برای اینکه محتوای موجود قابلیت کاوش را داشته باشد، اسکرول طولانی سریع ترین و بهترین راه برای کاربران است.
ترفندها و نکات موجود: از ناوبری چسبنده( sticky navigation ) استفاده کنید. سردرگمی و ناتوانی برای رفتن به عقب، یکی از معایب اصلی اسکرول طولانی است اما منوی ثابت به کاربران اجازه می دهد ازادانه حرکت کنند.
اسکرول طولانی ممکن است اثرات منفی بر روی سئو داشته باشد اما با استفاده از برخی از نکات و ترفندها می توان از بروز چنین مشکلاتی جلوگیری کرد.
از خاصیت پخش خودکار در رسانه هایی همچون فایل های ویدئویی استفاده نکنید زیرا اگر بیش از حد مورد استفاده قرار گیرد می تواند سرعت بارگذاری سایت را تا حد زیادی کاهش دهد.
نیازی نیست از یک فرمت تک صفحه ای به همراه اسکرول طولانی استفاده کنید. برخی از سایت ها دارای صفحه اصلی با اسکرول طولانی هستند که به صفحات دیگر لینک می دهند. سایت هایی همچون فیس بوک و توییتر از این قابلیت استفاده می کنند.
برای اسکرول های طولانی در بخش های خاصی از یک صفحه، سعی کنید از تکنیک های توضیح داده شده در بخش زیر استفاده کنید.
۲- اسکرول طولانی ثابت:
مشکل: یک سایت می تواند از مزایای اسکرول طولانی به خوبی استفاده کند اما ممکن است نخواهید سایت را به کلی تغییر دهید.
راه حل: سایت هایی با اسکرول طولانی ثابت، اطلاعات را به گونه ای نمایش می دهد که در یک سایت با اسکرول طولانی ممکن است به بخش های متعددی نیاز داشته باشد. در این صورت نیاز به ایجاد بخش های طولانی مدت رفع می شود.
نکات و ترفندها: زمانی که می خواهید درباره مورادی که باید در بخش اسکرول ثابت قرار گیرد تصمیم گیری کنید،مطمئن شوید که تنها محتوایی را انتخاب می کنید که متناسب با موضوع یا دسته بندی واحد باشد. به عنوان مثال هر قسمت از اسکرول ثابت سایت Squarespace بر روی توضیح چگونگی ایجاد یک وبسایت زیبا برای کسب وکارهای مختلف تمرکز دارد.
Call to action های خود را در انتهای هر فریم اسکرول ثابت قرار دهید.
همانطور که در سایت UXPin مشاهده می کنید، شما می توانید نوار پیشرفت اسکرول( scroll progress bar ) را به بالای ناوبری خود اضافه کنید. اگر بیش از سه الی چهار فریم داشته باشید استفاده از این قابلیت باعث افزایش سرعت می شود.
۳- اسکرول نامحدود:
مشکل: محتوای سایت یا وبلاگ شما در یک صفحه سازماندهی خوبی دارد اما به خاطر وجود تعداد زیادی از محتواها، امکان بارگذاری فوری آن وجود ندارد.
راه حل: با استفاده از الگوی اسکرول نامحدود، محتوا به گونه ای بارگذاری می شود که می تواند تجربه بهتری در اختیار کاربران قرار دهد. اسکرول نامحدود برای سایت های تک صفحه ای به خصوص گالری چند رسانه ای مفید است. اسکرول نامحدود ریتم بسیار خوبی برای سایت های رسانه اجتماعی ایجاد می کند. در این شرایط کاربر بدون کلیک کردن یا منتظر ماندن می تواند از محتوای جدید لذت ببرد. مشکل اصلی اسکرول نامحدود زمانی است که کاربر مکان خود را در سایت از دست می دهد. ناوبری چسبنده بهترین روش برای ایجاد تحرک در این شرایط است .
نکات و ترفندها: علاوه بر ناوبری چسبنده، روش های دیگری برای کمک به مشکل سردرگمی در اسکرول نامحدود وجود دارد. گزینه پرش به بخش مورد نظر(همانطور که در سایت Tumblr وجود دارد) به کاربران اجازه می دهد به هنگام گم شدن در میان محتوای سایت، به مکان اصلی خود بازگردند.
اسکرول نامحدود را می توان با صفحه بندی ترکیب کرد . در این صورت جستجو دقیق تر و سریع تر می شود.
خود را با دایره های بارگذاری سنتی محدود نکنید. انتخاب یک آیکون مناسب می تواند هویت سایت شما را مشخص کند. سایت هایی همچون فیس بوک، Tumblr و Imgur دارای آیکون بارگذاری سفارشی هستند.
۴- اسکرول پارالاکس مناسب:
مشکل: کاربران در فرمت اسکرول طولانی نمی توانند تعامل کافی با سایت داشته باشند.
راه حل: با استفاده از افکت پارالاکس ، سایت خود را بهبود ببخشید. افکت پارالاکس سال هاست که در حوزه بازی سازی ویدئویی شناخته شده و مشهور است. این الگو به لایه ای از تصاویر دو بعدی اطلاق می شود که به هنگام اسکرول، با سرعت های متفاوت حرکت می کنند. پس زمینه و پیش زمینه با سرعت های متفاوت حرکت می کنند. این کار باعث ایجاد یک افکت سه بعدی می شود.
افکت پارالاکس(اختلاف منظر) جنبه های بسیار خلاقانه ای را در اسکرول ایجاد می کند.این سبک را می توان در سایت های داستان سرا مشاهده کرد و استفاده از آن می تواند تجربه بهتری را در عناصر بصری ایجاد کند.
در ادامه دستورالعمل های کاربردی و ضروری برای اسکرول کردن و نوار اسکرول در طراحی سایت ها را با هم مرور می کنیم:
- نوار اسکرول را تنها در جایی که محتوا ها نیاز به این امر دارند، استفاده کنید. نباید روی اسکرول اتوماتیک و یا عمل درگ کردن حساب باز کنید که مردم اصلا به این موارد توجه ای نمی کنند.
- نوار اسکرول را در جایی که محتواها آشکار می باشند، مخفی سازید. اگر مردم یک نوار اسکرول را ببینند، فرض می کنند که محتواهای اضافه دیگری وجود دارد و زمانی که نتوانند اسکرول کنند، از وب سایت تجربه نامتناسبی را کسب می کنند.
- با استاندارد های GUI مطابقت یابید و از نوارهای اسکرول که شبیه نوار اسکرول های واقعی هستند، استفاده کنید و در این زمینه نباید از خلاقیت و هنر طراحی خود بهره ببرید.
- اسکرول افقی در صفحات وب سایت را از یاد ببرید و استفاده از آن را در هر جای دیگر در طراحی وب سایت کاهش دهید. تمامی اطلاعات را در بالای صفحه وب سایت نشان دهید. کاربران اغلب بر اساس آن چه که بدون اسکرول می بینند، تصمیم گیری می کنند. به علاوه، آن ها تنها ۲۰ درصد از توجه خود را به قسمت های زیرین وب سایت اختصاص می دهند.
اگر چه اسکرول افقی یکی از ۱۰ اشتباه برتر محاسبه شده در صنعت طراحی وب سایت و طراحی اپلیکیشن می باشد، اما ما هم چنان این اشتباه بزرگ را در برخی وب سایت ها مشاهده می کنیم، از این رو واجب است تا بار دیگر طراحان و دارندگان وب سایت و یا اپلیکیشن را به این مورد هشدار دهیم.
مشکلات رایج
از تست کاربردی بودن طراحی سایت و یا اپلیکیشن دریافتیم که کاربران از اسکرول افقی متنفر می باشند و همیشه زمانی که با این مورد در طراحی سایت ها رو به رو می شوند، شکایت دارند. دو دلیل بر عدم کاربردی بودن اسکرول های افقی وجود دارد:
در طراحی سایت ها، کاربران انتظار دارند تا از اسکرول عمودی استفاده کنند. مانند تمامی عوامل طراحی سایت، بهتر است در این مورد نیز انتظارات کاربران وب سایت را تحقق ببخشیم.
زمانی که اسکرول افقی و عمودی در یک صفحه از وب سایت به اتفاق وجود داشته باشند، کاربران مجبور می باشند به محتوای وب سایت از دو جانب بنگرند که این امر بسیار برای آن ها سخت می باشد. برای آن دسته از کسانی که در بینایی خود اخلال دارند، بسیار دشوار است تا حرکات محتوا را در هر دو جهت تشخیص دهند. در مقایسه، اسکرول یک بعدی می تواند راه ساده ای برای انتقال محتواها به کاربران وب سایت باشد، بدون این که این افراد نیاز داشته باشند تا عملی خاص و یا پیچیده ای را انجام دهند.
در هر شرایطی، تمامی اطلاعات کلیدی باید در قسمت اول صفحه وب سایت نمایان شود، زیرا اسکرول کردن می تواند برای کاربران، مشکلات دستیابی به محتواهای مورد شان را به وجود بیاورد:
- دسترسی به محتواهای که نیاز به اسکرول کردن کاربران سایت دارند، می توانند بسیار برای افرادی که مشکلات و اختلالات حرکتی دارند، سخت باشند.
- کاربران وب سایت کم سواد نمی توانند به راحتی به موقعیت قبلی خود بازگردند.
- کاربران وب سایت سن بالا اغلب برای تشخیص مکان اسکرول و یا نحوه استفاده از آن ها، مشکل دارند.
اسکرول کردن برای کودکان (در وب سایت های که برای این رده سنی طراحی شده است) نیز می تواند کاربرد پایینی داشته باشد، زیرا آن ها شتاب بیشتری از بزرگسالان دارند و بیشتر بر اساس آن چه که می بینند تصمیم گیری می کنند. اسکرول کردن برای نوجوانان به اندازه کودکان مشکل ساز نیست، اما آن ها ترجیح می دهند از طراحی وبسایت هایی استفاده کنند که دارای اسکرول بسیار اندکی می باشند.
طراحی GUI استاندارد
دستورالعمل های اصلی برای طراحی بصری و کارکرد اسکرول در طراحی سایت ها بسیار ساده است: از جستجویابی ها مطابق با سیستم عامل مورد استفاده خود استفاده کنید که کاربران انتظار آن ها را در این مکان ها دارند، برای مثال زمانی که برای ویندوز ها طراحی می کنید، باید از ویجت های مایکروسافت استفاده نمایید. زمانی که برای سیستم عامل MAC طراحی می کنید، باید از ویجت اپل استفاده نمایید. و اگر از FLASH استفاده می کنید، باید اجزای از پیش ساخته شده GUI استاندارد را به کار ببرید.
با وجود نوارهای اسکرول با طراحی های مدرن و امروزی، شما به شدت در معرض خطر عدم کاربردی بودن آن ها در وب سایت خود می باشید. در تست کاربردی بودنFLASH USEABILITY مشخص شد که مردم از اسکرول ها با طراحی های جدید استفاده نمی کنند.
برخی کاربران وب سایت نمی توانند مفهوم کاراکترهای عمودی را تشخیص دهند، زیرا متوجه نمی شوند که باید روی مستطیل ها در کنار صفحه سایت که امکان اسکرول کردن نیز در آن وجود دارد، کلیک کنند تا آپشن هایی مانند مو، لباس، رنگ و غیره را تغییر دهند.
برخی کاربران سایت حتی توجه نمی کنند که نوار اسکرول در کجای وب سایت وجود دارد، زیرا اشکال مستطیلی با رنگ های مشابه در کنار آن قرار گرفته و آن را از دید پنهان ساخته است.
در نقشه تعاملی که در قسمت راست قرار دارد، کاربران وب سایت توجه ای به نوار اسکرول نمی کنند، زیرا ردیف های بالا و پایین این نوار شبیه علایم شمال جنوب در تمامی نقشه ها می باشند و دیگر مشکل موجود به این ترتیب است: نوار اسکرول در خارج از محدوده کنترلی کاربران قرار گرفته و اسکرول دارای هیچ علایم اسلایدی نمی باشد.
- از نوار اسکرول واقعی در قالب مستطیلی شکل استفاده کنید و ترجیحا بهتر است با رنگی نمایان شود که با پس زمینه طراحی وب سایت متضاد می باشد.
ردیف هایی را در بالا و پایین نوار اسکرول نشان دهید. - اسلایدری نیز در این نوار اسکرول قرار دهید که به عنوان “بالا برنده، پایین برنده و یا محرک” نیز خوانده می شود و ترجیحا باید در رنگی متضاد با چارچوب نوار اسکرول باشد.
- موقعیت اسلایدر باید مساوی با موقعیت بخش و یا قسمت مورد نظر در کل صفحه وب سایت باشد، از این رو مردم می توانند دریابند که چه مقدار از محتوای وب سایت را اسکرول کردند و چه مقدار محتوا نیز باقی مانده است که می توانند مرور نمایند.
اجازه دهید تا کاربران وب سایت به روش های زیر اسکرول نمایند:
- کلیک کردن در محدوده نوار اسکرول.
- کلیک کردن روی دریف های بالا و پایین نوار اسکرول.
- درگ کردن اسلایدر به بالا و پایین.
- استفاده از غلطک ماوس.
نوار های اسکرول می توانند به راحتی در طراحی وب سایت ها قرار بگیرند. در حقیقت، شما هر چه در این زمینه تلاش کمتری کنید، نتیجه بهتری به دست خواهید آورد. کاربرد این نوار های اسکرول همیشه زمانی که شما از نوارهای و الگوهای از پیش ساخته شده و متداولی استفاده می کنید، بهبود و ارتقاء می یابد، زیرا طراحی های جدید در این زمینه باعث می شود تا کاربر در مواجه با آن دچار ابهام شود و نداند که باید چگونه از آن استفاده نماید.
اگر باید در طراحی سایت خود از نوار اسکرول استفاده کنید، باید انتظارات کاربران وب سایت خود را تا حد امکان تحقق ببخشید. اگر نوار های اسکرول در وب سایت تان واقعی و مانند همیشه نباشند، هیچ کس به آن ها توجه ای نمی کنند. اگر نوار اسکرول شما به صورت واقعی کار نکند، نمی توانید محتوا های متناسبی را در اختیار کاربران سایت خود بگذارید. در شرایط دیگر، اگر کاربران وب سایت ندانند که اسکرول در وب سایت تان کجا می باشد و به چه ترتیب کار می کند، هرگز نمی تواند به محتوای مورد نیاز خود دست یابند و مجبور می باشند با مواردی که قابل مشاهده هستند، نیاز خود را برطرف سازند که این امر تجربه کاربری نامتناسبی را به آن ها ارائه می دهد. شکی نیست که استفاده از نوار اسکرول کاربردی و مفید می تواند بازگشت سود از سرمایه وب سایت ها و تجارت ها را ارتقاء دهد. اگر دستورالعمل هایی که در این مقاله وجود دارد را رعایت فرمایید و در طراحی سایت خود به کار ببندید، مطمئنا به این مزیت دست خواهید یافت و روز به روز درآمد و اعتبار وب سایت خود را افزایش می دهید. به یاد داشته باشید که استفاده از خلاقیت در تمامی زمینه ها نمی تواند نتایج مثبت و بهینه ای را به ارمغان آورد، نوار اسکرول در وب سایت ها و اپلیکیشن ها یکی از این موارد می باشد، مردم به اسکرول های جدید عادت ندارند و در صورتی که با نوار های اسکرولی جدید مواجه شوند، نمی توانند از آن ها استفاده کنند و به همین ترتیب تجربه کاربری نامتناسبی را به دست می آورند و این امر به ضرر تجارت و یا وب سایت مورد نظر می باشد.
اینکه با باز کردن صفحه نخست یک وبسایت، نوار اسکرول سریعا شروع به کوچک و کوچکتر شدن کند کمی ترسناک است، این موضوع بدین معناست که صفحه‌ی شما در حال بارگذاری حجم زیادی از اطلاعات و تصاویر می‌باشد، مسلما شما نمی‌خواهید این موضوع اولین برداشت بازدیدکننده از وبسایت شما باشد.
به جای این کار، به صفحات و بخش‌های زیرمجموعه دیگر، لینک بدهید. اگرچه صفحه‌ی اصلی وبسایت شما می‌تواند باعث ایجاد فرصت برای ارتقای محصولات یا پیشنهادهای به خصوص باشد، اما از طرف دیگر، دسترسی به فهرست، به منظور رسیدن به این اهداف باید به آسانی امکان‌پذیر باشد.
در مورد زمان بارگذاری محتاط باشید. یک سایت ساده با سرعت بارگذاری بالا بهتر از سایتی با سرعت بارگذاری پایین است.
مجید احدی
مجید احدی هستم، تولید کننده محتوا برای سایت، قبلا در زمینه تعمیرات موبایل و مدتی هم در زمینه دوربین های مداربسته فعالیت داشتم. در حال حاضر مدتی هست که به حوضه فناوری اطلاعات علاقه مند شدم در حال حاضر به عنوان تولید کننده محتوا و ویرایشگر سایت فعالیت می کنم.
مطالب پیشنهادی
روش هایی جهت حفظ رتبه در موتورهای جستجو
25 مهر 1396