ورود به سایت

لوگو آکادمی آی تی
info[at]academyit.net 02144140935 09126492189

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

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


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

ببین دوست من نوشتن این محتوای تبلیغاتی هم خیلی مهمه یعنی باید متن طوری باشه که کاربر رو جذب خودش کنه یعنی مثلا باید تصویر واضح باشه و به گونه ای باشه که کاربر بتونه با عکس ارتباط برقرار کنه و اطلاعات بسیار خوبی رو در اختیار کاربر قرار بده ، سبک حروف و رنگ متن ها باید با هم مطابقت داشته باشد که کاربر از دید تبلیغات به انها نگاه نکند.
پس اگه مجبور هستید یا اینکه بهتره در سایت از کروسل استفاده کنی بهتره تمام موارد مربوط به کروسل رو رعایت کنی مثلا تنها 5 فریم یا کمتر را در کروسل قرار بدی چون که خیلی احتمال کمه که کاربری تمام این تصاویر نگاه کنه ، واینکه تناسب زیاد میان فریم های کروسل توی گوشی های همراه خیلی سخته وحتی تشخیص موضوع برای کاربران رو سخت میکنه پس تعداد کم تصویر به کاربر کمک میکنه که براحتی محتوا رو کشف کنه و بخاطر بسپاره ،
 
•    از متن ها و تصاویری استفاده کنی که نشان دهنده مواردی باشد که سازمان و یا تجارت مربوطه انجام می دهد و یا ارائه می دارد. خیلی سخت است تا کاربران متن های کوچک و تصاویر ناواضحی را درک نمایند، مخصوصا اگر از ابزارهای گوشی همراه استفاده می کنند. هیچ وقت ایده خوبی نیست که یک تصویر بزرگ با حجم زیاد را در یک قسمت کوچک طراحی وب سایت جای دهید. هر چه متن و تصویر واضح تر باشند، کاربران بیشتر می توانند موارد مورد نظر وب سایت را درک نمایند و به آن ها جذب شوند.
وب سایت corning museum of glass از تصویر جذاب و متن های مربوطه ای در کروسل خود استفاده کرده است که به خوبی مشخص می کند که این تجارت  چه کارهایی را انجام می دهد.

 

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

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

 

 

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

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

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

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

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


 

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