مقدمه ای بر انیمیشن در طراحی وب

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

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

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

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

جلب توجه

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

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

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

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

استفاده از انیمیشن در طراحی وب برای آموزش

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

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

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

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

 انجام تغییرات به صورت روان

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

این گونه تغییر حالت های خشک به تجربه کاربری از سایت (UX) آسیب می زند و باید برای اجتناب از این موضوع از انیمیش در طراح سایت به گونه ای استفاده نمود که باعث روان شدن تغییر و تحولات سایت گردد.

به کارگیری انیمیش ها به منظور تغییر حالت ها هنگام طراحی سایت باعث جذاب تر شدن و همچنین ایجاد احساس بهتر در کاربر می گردد.

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

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

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

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

پرت کردن حواس کاربر هنگام لود شدن سایت

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

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

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

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

محبوبیتی که امروزه برای اسکرول کردن در بین طراحان سایت و کاربران ایجاد شده بدون شک بدون وجود انیمیشن امکان پذیر نبود.در واقع اسکرول کردن یک نوع تغییرحالت بی پایان در سایت با استفاده از انیمیشن است که در نکته شماره 3 راجع به آن صحبت شد.

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

حتی می توان با استفاده از انیمیشن های اسکرول فعال شونده (Scroll-Triggered Animations) در طراحی وب سایت یک مرحله نیز پا را فراتر گذاشت و به این طریق کاربران علاوه بر اسکرول کردن می.توانند در ظاهر صفحه تغییرات ایجاد کنند و به نوعی خودشان نیز درگیر فرایند اسکرول شوند.از این طریق وب سایت از یک صفحه معمولی تبدیل به یک نوع بازی درگیر کننده و جالب برای کاربر خواهد شد.

 شوق آفرینی

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