11 نکته مهم در طراحی اسلایدر

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

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

11 نکته مهم در طراحی اسلایدر

اسلایدر ها با اهداف مختلفی ساخته می شوند که از مهم ترین آن‌ها می توان به نمایش محتوای مهم سایت اشاره نمود. بهتر بگویم اسلایدر ها در جهت تبلیغات سایت استفاده می شود. خیلی از سایت ها اسلایدر یا بخشی (چند عکس) از اسلایدر خود را اختصاص به تبلیغات سایت های دیگر می دهند و از این راه کسب درآمد می کنند.

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

1) از تصاویر با کیفیت استفاده کنید

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

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

2) حجم تصاویر را کاهش دهید

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

• روش اول فشرده سازی تصاویر
  اولین راهکار اینکه از خود فتوشاپ اقدام کنید به این شکل که از منوی File به قسمت Export برید و گزینه Save For Web رو بزنید. البته می تونید از Alt+Shift+Ctrl+S برای دسترسی به این گزینه استفاده کنید و در آخر گزینه Save رو بزنید.

• روش دوم فشرده سازی تصاویر
  در روش دوم از سایت های فشرده سازی تصاویر بدون افت کیفیت مثل compressjpeg و imagecompressor می توان استفاده نمود. شیوه کار در این سایت ها به این شکل که عکس مورد نظر رو آپلود می کنید و بعد از فشرده سازی اتومات توسط سایت، عکس های فشرده را دانلود می کنید. به همین سادگی ??.

3) اندازه تصاویر را در نظر بگیرید

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

• به دست آوردن اندازه تصاویر از طریق Extensions مرورگر
  پیشنهاد می کنم برای به دست آوردن یک اندازه استادندارد، سایت ها رقیب را بررسی کرده و از اندازه های آن استفاده کنید. برای به دست آوردن اندازه دقیق عکس های اسلایدر سایت رقیب هم می توانید از طریق Ruler (خط کش) در مرورگرتان استفاده نماید.
  اگر تا الان از Ruler مرورگر استفاده نکردید، کافی ابتدا در Extensions های مرورگر کلمه Ruler را جستجو و آن را دانلود و به مرورگر اضافه کنید و در نهایت وارد سایت رقیب شده و با فعال کردن خط کش اندازه ها را پیدا کنید. می توانید Extension Ruler از طریق لینک ( https://chrome.google.com/webstore/detail/page-ruler-redux ) دانلود نماید.

4) اسلایدری هدفمند طراحی کنید!

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

5) از انواع اسلایدر استفاده کنید

اسلایدر ها انواع مختلفی دارند و شما باید متناسب با نیاز خود از اسلایدر های مختلف استفاده کنید؛ مثلا در زمانی شما می خواهید 3 محصول جدید سایت را معرفی کنید، می توانید از اسلایدر معمولی که هر کدام یک عکس کامل را در برمی گیرد استفاده کنید، اما زمانی است که شما می خواهید تعداد زیادی محصول را پیش فروش یا فروش ویژه قرار دهید. پس باید از اسلایدری استفاده کنید که در هر صفحه‌ی آن 3 تا 5 محصول قرار داده شده باشد و به صورت افقی جابه‌جا شود.

6) اسلایدری متناسب با طرح سایتتان طراحی کنید

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

7) متنی هدفمند و جذب کننده تولید کنید

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

8) رنگ بندی درستی انتخاب کنید

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

9) کال تو اکشن (CTA) را فراموش نکنید

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

10) مکان های مناسب برای اسلایدر در نظر داشته باشید

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

11) ریسپانسیو بودن را در نظر داشته باشید

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

جمع بندی

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