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

ویژگی سایت های دارای کروسل:

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

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

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

مزیت کروسل:

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

تصاویر و کروسل:

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

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

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

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

بایدهای استفاده از کروسل:

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

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

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

وب سایت corning museum of glass از تصویر جذاب و متن های مربوطه ای در کروسل خود استفاده کرده است که به خوبی مشخص می کند که این تجارت چه کارهایی را انجام می دهد.

تعداد فریم ورک های کروسل:

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

کنترل پنل جستجوهای کروسل ها:

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

یا مثلا کنترل پنل کروسل سایت shining star therapy زمانی که در آیفون ها اجرا می شوند تقسیم می شوند این بهتر از اینکه هیچ پنل کنترلی را نشان ندیم.

ببین اگر ما بیایم و برای هر فریم در کروسل یک دکمه جستجویابی قرار دهیم مطمئن باش که هر دکمه به نظر با دیگر دکمه فریم ها متفاوت می باشد و فریم مخصوص به خود را نمایان می کند.

وب سایت John Deere دکمه های تصویری همراه با متن هایی را در کروسل ارائه میده که با این کار به کاربر میفهمونه که کارکرد این کروسل چطور کار میکنه به هر حال این متن ها کنار دکمه های خیلی کوچک هست و برای خوندن خیلی سخت میشه.

اندازه دکمه ها و سادگی پس زمینه:

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

حرکت خودکار کروسل ها

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

توصیه برای کروسل های متحرک

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

توصیه برای کروسل های ثابت

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