چگونه با موشن، کاربرد پذیری را ایجاد کنیم ؟ ( قسمت دوم )

در مقاله قبل به بررسی مفاهیم اولیه و درک مساله‌ی موشن در تجربه کاربری پرداختیم و همچنین دو مورد از اصول موشن در تجربه‌ی کاربری را بررسی کردیم. در این مقاله به بررسی ۵ اصل دیگر خواهیم پرداخت.

لینک مقاله اول : چگونه با موشن، کاربرد پذیری را ایجاد کنیم ؟ ( قسمت اول )

ادامه‌ی ۱۲ اصل تجربه‌ی کاربری در موشن

اصل سوم : Parenting

زمانی‌که کاربر با چند شیء تعامل میکند، اصل Parenting یک ارتباط سلسله‌مراتبی زمانی و فضایی بین آن اشیاء ایجاد میکند

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

به عبارت دیگر ‌Parenting یعنی متصل و مرتبط کردن خواص یک شیء به خواص شیء دیگر. این اصل، ارتباطات و سلسله مراتب اشیاء نسبت به یکدیگر را مشخص میکند و ازین طریق به خدمت کاربردپذیری می‌آید.

اصل ‌Parenting همچنین به طراحان اجازه می‌دهد که در حین نشان دادن ارتباطات اشیاء به کاربر، رخدادهای زمانی رابط کاربری را هماهنگ‌تر و متناسب‌تر طراحی بکنند.

اصل Parenting به عنوان یک تعامل بلادرنگ(‌Realtime Interaction) عمل می‌کند. زیرا همزمان با اینکه کاربر در رابط کاربری عملی انجام می‌دهد، طراح با استفاده از موشن ارتباط و اتصال بین اشیاء را به کاربر نشان می‌دهد.

این اصل در ۳ شکل قابل پیاده سازی است:

۱- مستقیم ( Direct Parenting ) که در مثال های بالا نشان داده شد.

۲- تأخیردار ( ‌Delayed Parenting)

۳- معکوس (Inverse Parenting)

اصل چهارم : اصل تبدیل (Transformation)

زمانی‌که کاربرد یک شیء در رابط کاربری تغییر می‌کند، این اصل پیوستگی را در روند داستانی آن شیء حفظ می‌کند.

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

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

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

اصل پنجم : اصل تغییر مقدار (Value change)

هنگامی که مقدار یک موضوع تغییر می‌کند، یک ارتباط روایی پیوسته و پویا (Dynamic) بین مقادیر ایجاد می‌کند.

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

این اصل در سه موضوع مختلف می‌تواند در خدمت کاربردپذیری به کار گرفته شود :

۱- واقعیت پشت داده‌ها

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

۲- پویا (‌Dynamic) بودن داده

چیزی که ما از طریق موشن می‌فهمیم این است که موضوع مرتبط با این مقدار پویا (‌Dynamic) و قابل تغییر است. و در نتیجه می‌توان فهمید که واقعیت پشت این عدد و داده، دینامیک و پویاست.

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

۳- عامل شدن کاربر

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

اصل تغییر مقدار میتواند هم به صورت بلادرنگ(‌‌Realtime) به کارگرفته شود و هم به صورت غیربلادرنگ(non-Realtime). در حالت بلادرنگ همزمان با تعامل کاربر با محصول، اعداد و مقادیر تغییر می‌کنند. در حالت غیربلادرنگ، مقادیر و اعداد بدون تعامل کاربر با محصول می‌توانند تغییر کنند.

اصل ششم : Masking

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

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

در مثال بالا تصویر Header به یک دایره محدود می‌شود (عمل ‌‌Mask اتفاق می‌افتد) ولی محتوایش عوض نمی‌شود و در نهایت به تصویر آلبوم تغییر ماهیت می‌دهد. در واقع محتوایش ثابت می‌ماند ولی کاربردش تغییر می‌کند و به ابزار دیگری تبدیل می‌شود.

اصل هفتم : Overlay

در یک تصویر مسطح، زمانی‌که اشیاءِ لایه‌بندی شده وابسته به مکان هستند، رابطه‌ی فضایی و داستانی اشیاء را ایجاد می‌کند.

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

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

در مثال بالا لایه‌ی رویی (foreground) به سمت راست حرکت می‌کند و موقعیت گزینه‌های زیرین را آشکار می‌سازد.

در مثال پایین، کل صفحه به سمت پایین حرکت می‌کند و محتوا و گزینه های دیگری را آشکار می‌سازد. ( البته در آشکار سازی محتوای مخفی شده از اصل Offset & Delay هم استفاده شده)