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

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

تفاوت دو مفهوم : «انیمیشن رابط کاربری» و «موشن»

طراحان عموما مفهوم موشن(Motion) را به اشتباه، همان مفهوم انیمیشنِ رابط کاربری (UI Animation) تلقی میکنند. درحالی‌که انیمیشن، چیزی شناخته شده است که رابط کاربری را دلپذیرتر میکند ولی ارزش زیادی به آن اضافه نمیکند.

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

تعامل‌های(Interactions) بلادرنگ و غیربلادرنگ

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

قبل از توضیح این دو نوع تعامل، بهتر است ابتدا به تفاوت دو کلمه‌ی «حالت» و «کنش» بپردازیم. حالتِ یک شیء در تجربه‌ی‌ کاربری ایستاست، مثل کمپوزیشن یک طرح. اما کنشِ یک شیء در تجربه‌ی ‌کاربری، زمانی و مبنی بر متحرک سازی است.

برای مثال یک عکس می‌تواند یا در حالتِ ماسک شدن(Masking) باشد یا در کنشِ ماسک شدن ( عملِ ماسک شدن ). اگر در کنشِ ماسک شدن باشد بحث موشن هم مطرح میشود که چگونه این موشن می‌تواند در خدمت کاربردپذیری به کار گرفته شود.

تعاملِ بلادرنگ ( Realtime Interaction) به این معنی است که کاربر به صورت مستقیم با اشیاء رابط ‌کاربری تعامل میکند و اثر تعامل خود را به صورت همزمان می‌بیند. به عبارت دیگر رفتار رابط‌ کاربری همزمان با استفاده کاربر رخ می‌دهد.

تعاملِ غیر بلادرنگ ( non-Realtime Interaction) به این معنی است کاربر رفتار شیء را بعد از تعامل با آن مشاهده میکند و ممکن است تا انتهای رفتار زمانی آن شیء، تعامل کاربر با رابط‌ کاربری قطع شود.

موشن از چهار جهت کاربردپذیری را پشتیبانی می‌کند

این چهار مورد بیان می‌کنند که چگونه رفتار زمانی در تجربه کاربری به کمک کاربردپذیری می‌آید.

انتظارات

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

پیوستگی

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

روایت

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

ارتباط

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

اجزای یک موشن

برای درک بهتر موشن و همچنین جایگاه اصول در آنها، بهتر است ابتدا نگاهی به اجزای آن داشته باشیم.

اصول

فرضیه‌های اساسی و قوانینی که به منجر به تعدادی از تکنیک‌های اجرای موشن می‌شوند. در قسمت بعد به معرفی ۱۲ اصل بنیادی از این اصول می‌پردازیم.

تکنیک‌ها

به روش‌های مختلف پیاده سازی اصول یا ترکیبی از اصل‌ها تکنیک میگویند که به می‌توان آن‌را سبک (Style) نیز نامید.

خواص

به پارامترهای مشخصی از اشیاء که متحرک‌سازی آنها منجر به شکل‌گیری تکنیک می‌شود. برخی از خواص اشیاء که در موشن مورد استفاده قرار می‌گیرند عبارتند از : موقعیت(position)، شفافیت(opacity)، مقیاس(scale)، چرخش(rotation)، رنگ، ضخامت حاشیه(stroke-width)، شکل و غیره.

مقادیر

مقادیر عددی خواص که در طی زمان تغییر میکنند تا انیمیشن ایجاد گردد.

برای مثال یک انیمیشن را اینگونه توصیف می‌کنیم : این انیمیشن بر طبق اصول Obscuration و با تکنیک شیشه‌ی بلور شده، با مقدار عددی ۷۵٪ برای خاصیت شفافیت ، ساخته شده است.

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

اصل اول : ‌Easing

وقتی که یک رخداد زمانی اتفاق می‌افتد، باید رفتار شیء با انتظارات کاربر، هم‌تراز و یکی باشد.

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

به عنوان طراح همیشه باید در نظر بگیریم که فارغ از زیبایی، کدام نوع Easing کاردبردپذیری را ارتقاء می‌دهد.

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

سوال : آیا می‌توان Easing را به گونه‌ای استفاده کرد تا اثر خنثی یا حتی منفی بر روی کاربردپذیری داشته باشد ؟

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

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

اصل دوم : Offset & Delay

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

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

در مثال بالا، دکمه‌ی FAB به header تبدیل می‌شود که از سه دکمه تشکیل شده است. در اینجا هم طراح توانسته از زمان استفاده کند تا به کاربر بفهماند که این ۳ دکمه از هم جدا هستند. جالب اینجاست که رساندن مفهوم جدا بودن اشیاء از همدیگر با این اصل کاملا از بحث طراحی بصری، مستقل است.

یک مثال از نقض اصل Offset & Delay

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

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

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

منبع :

https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc