چه زمانی در ساخت وب سایت از انیمیشن ها استفاده کنیم؟

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

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

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

انیمیشن به چه معناست و منظور از وب انیمیشن‌ها چیست؟

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

استفاده از انیمیشن‌ها و افکت‌ها در نرم افزارهای مختلف رایانه ای بسیار معمول است و ممکن است بارها با آنها مواجه شده باشید. به کمک ابزارهایی چون GIF ها، CSS Animation ها و SVG Animation ها، انیمیشن‌ها راه به دنیای وب باز کردند. در حال حاضر می‌توان با روش های گوناگونی این جلوه‌ها و پویانمایی‌ها را برای عناصر مختلف یک صفحه در نظر گرفت و از آنها سرتاسر وب سایت‌ها استفاده کرد.

کاربرد انیمیشن در وب سایت ها

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

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

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

انواع انیمیشن‌ها و نحوه استفاده از آنها

وب انیمیشن‌ها گستره‌ی عظیمی دارند. بخش عمده‌ای از المان‌هایی که در سایت ها مختلف می‌بینیم، نمونه هایی از همین انیمیشن‌ها هستند. بطور کلی سه دسته‌بندی اصلی برای انیمیشن‌ها در نظر گرفته می‌شود:

میکرو انیمیشن‌ها: این انیمیشن‌ها به منظور هایلایت قسمت کوچکی از صفحه و تمایز دادن آن نسبت به دیگر المان ها مورد استفاده قرار می‌گیرند. مثل تغییر شکل یک دکمه هنگام قرار گیری موس (هاور)

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

انیمیشن‌های پس‌زمینه (Background): جلوه بخشی به پس زمینه‌ی یک بخش از صفحه‌ی وب، به منظوز افزایش توجه، مانند افکت پارالاکس که نمونه ای از انیمیشن‌های پس‌زمینه است.

چطور در سایت از انیمیشن‌ها استفاده کنیم؟

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

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

از افزودن انیمیشن‌های پیچیده و طولانی پرهیز کنید. چرا که زیاده روی باعث سردرگمی کاربران در استفاده از بخش های مختلف سایت شما می‌شود.

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

استفاده از انیمیشن‌ها برای هدف مشخص

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

• استفاده از انیمیشن در اسلایدر اصلی سایت (به منظور گیرایی بیشتر مخاطب در نگاه اول)
• استفاده از انیمیشن های انتقال در قسمت خدمات (به منظور معرفی جزء به جزء)
• افکت پارالاکس در پس زمینه بخش های تصویری (به منظور تمایز بخشیدن نسبت به بخش های مشابه سایت)

موارد بالا می‌توانند ایده هایی برای استفاده از انیمیشن‌ در سایت شما باشند. همچینن اگر نیاز می‌بینید در بخش های دیگر سایت هم انیمیشن داشته باشید، از آنها استفاده کنید.

در کجا از انیمیشن استفاده کنیم و در کجا نه؟!

هر چیزی که در صفحه قرار دارد، مناسب محترک سازی و انیمشن دار شدن نیست.

در این قسمت برخی المان های مشترک سایت‌ها که برای انیمیشن دار شدن مناسب هستند را باهم مرور می‌کنیم.

• بخش هایی که منجر به یک عمل می‌شوند (مثل دکمه‌ها یا تصاویر لینک دار)
• المان های هدایت کننده (فلش‌ها و دکمه های ناوبری)
•  قسمت های لودینگ
• بخش هایی که باید بیشتر موردتوجه قرار گیرند (لایت باکس ها، بنرهای جشنواره و پیغام ها) 

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

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

محتوا ساده ساخته شده

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

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

در هر حال سلیقه مخاطب را در نظر بگیرید.

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

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

منبع: وبزی