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

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

1- ظریف عمل کنید

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

2- مستقیم عمل کنید

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

3- توازن ایجاد کنید و جهت رو مشخص کنید

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

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

مثال: سایت http://www.akita.co.uk/ با بکارگیری انیمیشن های ظریف کاربر رو از عنصری به عنصری دیگه در سایت هدایت میکنه و هدفش آموزش نحوه کار ایمیل به کاربرهاست. اما حتی بدون این یه ذره انیمیشن هم، اون خط چین­ها یه مسیر حرکت درست میکنند که چشم کاربر رو به سمت اطلاعات جهت میدن.

4 – انتظارات رو برآورده کنید

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

5- حواستون به سرعتتون باشه

خیلی ها تو سرعت و زمانبندی حرکتها اشتباه میکنند. اگه حرکتها سریع باشند به کاربرها شوک وارد میشه و حس راحتیشونو از بین میبره – حتی شاید خودشونم متوجه نشن این احساس ناراحتی از کجا نشأت میگیره.
از طرفی اگه حرکتها بیش از حد کند باشند، کاربرها حس میکنند روی هیچی کنترل ندارند.
سرعت و زمانبندی رو بهتره با حرکت تصاویر در فیلم های سینمایی مقایسه کنید تا کارتون راحتتر بشه. فرض کنید دارید فیلم میگیرید و بعد حرکتها رو فریم به فریم از نمایشگرتون ببینید. سرعت حرکتها به قدری هست که اطلاعات مورد نیاز به مغز مخاطب منتقل بشه؟ یا وقتی دارید نگاه میکنید حوصلتون سر میره و مجبورید برای حرکت بعدی منتظر بمونید؟
حرکت میتونه یه واکنش فیزیکی و احساسی در مخاطب بوجود بیاره. حرکتهای تند حس هرج و مرج و عجله رو در مخاطب ایجاد میکنه و حرکتهای کندتر احساس راحتی و آرامش قابل توجهی رو بهشون منتقل میکنه. سرعت حرکتها رو با سرعت فعالیت هایی که میخواهید کاربر انجام بده هماهنگ کنید. دوست دارید کاری رو سریع انجام بدن (مثل عضویت در سایت یا پر کردن فرم یا خرید) یا ترجیح میدید اول یه مدتی در سایت بگردند و از قسمتهای مختلف دیدن کنند.
مثال: سایت  Polona Typo از حروف انیمیشنی استفاده کرده و برای ترغیب کاربر به انجام کاری که مد نظرشونه حروف درون عکسها رو عوض میکنه. سرعت همین حرکتها باعث موفقیت سایت شده. حروف به صورت کوچیک تایپ شدند ولی چون آروم حرکت میکنند براحتی خونده میشن. یکم رو این سایت بچرخید و مدل حرکتهای حروف رو ببینید.

6- قصه بگید

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

7- نحوه استفاده از حرکت رو تعیین کنید – حرکت برای زیبایی یا برای رابط کاربری

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

نتیجه

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