کروسل در طراحی وب سایت

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

منظور از کروسل در طراحی وب سایت چیست؟

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

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

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

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

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

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

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

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

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

1. جذابیت بالا

مهمترین مزیت جذابیت بالای این کروسل ها برای کاربران است. هم کاربران علاقه زیادی به این کروسل ها نشان می دهند و هم به طور کلی این کروسل ها یک جلوه زیبا به سایت شما می دهد و در واقع یک UI جذاب برای شما به ارمغان می آورد.

2. با یک تیر چند نشان

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

3. حجم صفحه تان بالا می رود

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

4. انتقال حجم زیاد اطلاعات در زمان کم

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

کروسل در طراحی وب سایت باید چگونه باشد؟

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

1. زمان بندی آن ها مناسب باشد

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

2. ریسپانسیو باشد

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

3. اطلاعات به صورت خلاصه باشد

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