motion در طراحی ux

motion در طراحی uxReviewed by مهرخ on Dec 3Rating: 5.0motion در طراحی uxدر دنیای طراحی از کلمه حرکت برای توصیف روابط فضایی و عملکرد و مفهوم زیبایی و راحتی استفاده می کنیم. این کلمه ممکن است مفهومی بسیار کلی داشته باشد اما در عمل میبینیم که کلمه ای بسیار زیرکانه و خوب است. استفاده درست از این مبحث به طراحان کمک میکند تا تجربیاتشان را افزایش دهند.

motion در طراحی ux

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

خب بگذارید راجع به پایه و اساس مفهوم حرکت در طراحی بحث کنیم. به شما خواهم گفت که چرا و در چه مواقعی باید از motion (حرکت) در ui استفاده کنیم و این کار چه تاثیری بر بهتر شدن ux دارد.

طراحی حرکت محور (motion-based)

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

motion-based1

چرا motion با اهمیت است؟

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

  • کدام قسمت برنامه مهم تر است؟
  • باید در مرحله بعد چکار کنم؟
  • چجوری متوجه بشوم که این مرحله انجام شده است؟

این سوالات باعث می شود که به اهمیت حرکت بیشتر پی ببریم. حرکت به بهبود ux کمک می کند و به سوالات بالا پاسخ می دهد:

  • حرکت توجه کاربر را جلب می کند و با دادن توضیحات او را راهنمایی می کند.
  • به طراح کمک می کند تا جهت درست را در interface به کاربر نشان دهد و بین view ها نکات راهنما را قرار دهد.
  • تاثیر بصری بر کاربر دارد.

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

زبان motion

Motion به کاربر کمک می کند که بهتر با برنامه ارتباط برقرار کند و روابط بین اجزای برنامه را بهتر درک کند. عناصر طراحی حرکت محور درحین گردش کار ux در قالب های مختلف مانند transition (انتقال و جا به جایی)، انیمیشن و حتی texture دیده شوند.

جلب کردن توجه کاربران

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

hidden

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

animation

طراحی فضایی ui

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

طراحی motion با توصیف کردن روابط فضایی بین صفحه و المنت های مختلف فضاهای خالی را پر می کنند. در مثال زیر در حین transition کابر به صفحه بعدی می رود و صفحه به communicate hierarchy تبدیل می شود:

animation2

تایید action ها

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

animation4

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

ایجاد شادی و نشاط

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

animation3

تغییر جزییات شاد و جذاب باعث می شود که کاربر فکر کند دارد با یک ادم واقعی ارتباط برقرار می کند.

details

اما هدف اصلی طراحی حرکت جلب توجه کاربر و برقراری ارتباطی بهتر با برنامه است.

ترجمه کاری از سایت لرن اس تی یو ، مهرخ اکبری

پاسخ دهید