انیمیشن های عملیاتی

بهبود تجربه کاربری با کمک انیمیشن های عملیاتی – بخش دوم


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

ترنزیشن های ناوبری

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

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

انیمیشن های عملیاتی

انیمیشن های عملیاتی

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

انیمیشن های عملیاتی

اهداف:

- تعریف ارتباطات بین صفحات و عناصر مختلف

- جلوگیری از نمایش یک ترنزیشن غیرمنتظره از طریق کمک به کاربر در درک تغییری که در لی اوت به وقوع پیوسته است

برندینگ

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

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

انیمیشن های عملیاتی

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

انیمیشن های عملیاتی

اهداف

- سرگرم کردن کاربران

- خلق هویت برای محصول، کمک به برقراری ارتباط با محصول، بهبود ادراک برند

نحوه یافتن یک تعادل مناسب

در پیاده سازی انیمیشن ها لازم است دقت زیادی شود، چرا که همه انیمیشن ها برای تمامی شرایط مناسب نیستند.

متحرک سازی با هدف

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

انیمیشن های عملیاتی

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

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

انیمیشن های عملیاتی

نمونه سازی اولیه و تست انیمیشن

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

انیمیشن های عملیاتی

جمع بندی

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

 

https://www.smashingmagazine.com برگرفته از

اینها را هم بخوانید

نظرات کاربران

  1. avatar
    اسامه
    با سلام بنده مطالب آموزشی شما رو کاملا پیگیری می کنم و خیلی مفید هستند برای من با تشکر از زحمات شما دوستان

    به این نظر پاسخ دهید