موشن دیزاین: از تجربه کاربر تا درک برند

25 ارديبهشت 1395
امید کاوه راد

نمیدانم چقدر با Motion Design (انیمیشن ها و ترنزیشن ها) و تاثیر آن بر کاربر و در آخر بر تجربه کاربری هنگام استفاده از یک اپلیکیشن موبایل یا وبسایت آگاه هستید!

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

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

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

در ادامه دو مثال ( Lyft , Uber و Snapchat , Instagram ) را بررسی کرده و به نکاتی اشاره می کنیم تا به اهمیت بسیار بالای توجه به جزئیات در طراحی پی برده و بدانید جزئیات تا چه حد می تواند بر رفتار کاربر موثر باشد.

 

Lyft و Uber:

این دو اپلیکیشن شبکه‌ هایی برای حمل‌ و نقل و ارتباط آسان میان مسافر و راننده هستند (اطلاعات بیشتر).

اگر شما تصمیم به طراحی یک فرم لاگین برای این دو اپلیکیشن داشته باشید، باید بدانید که کلاس کاری این دو محصول با هم تفاوت داشته و کاربران هرکدام به شیوه خودشان با این دو تعامل دارند! خب این یعنی چه؟

Lyft سعی می کند به عنوان یک دوست (استقبال کننده، مقرون بصرفه و خاطره انگیز) برای کاربر بوده و Uber برای شما به عنوان یک راننده شخصی (لوکس و گران قیمت و با کلاس و پرستیژ) باشد.

به دو انیمیشن زیر دقت کنید:

Uber Lyft

چه تفاوتی در دو تصویر متحرک بالا میبینید؟

اگر با دقت بررسی کنید متوجه خواهید شد که مربع Lyft دارای گوشه هایی گرد و حرکتی ملایم و چشم نواز بوده ولی مربع Uber دارای گوشه های خشک ، تیز و ساختاری محکمتر هست ولی در عین حال حس مرتب بودن رو می رساند.

این حرکت ها(Motions) باید بگونه ای باشد که احساسات اصلی برند را به کاربر القا کند.

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

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

 

 Snapchat و Instagram  :

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

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

به دو انیمیشن زیر دقت کنید:

 

چه تفاوتی در دو تصویر متحرک بالا میبینید؟

Motion Design در عین حال که یک ارتباط قابل فهم بین کاربر و تصویر ایجاد میکند تا تعامل راحت تری داشته باشند، این قدرت را در خورد دارد تا به ذهن کاربر جهت داده و به آنها کمک کرده تا اکشن مورد نظرشان را انجام بدهند یا حتی آنها را وادار به انجام کاری بکند.

 این نکته را همیشه در نظر داشته باشید که Motion Design فقط جهت زیبایی استفاده نمی شود، بلکه بوسیله آن میتوان احساس واقعی برند را به کاربر انتقال بدهید.

این مطلب در نخستین کنفرانس UX شیراز در بخش تریبون آزاد ارائه شد.

امید کاوه راد

یک طراح رابط کاربری خودآموخته با تجربه ای 7 ساله، طرفدار دو آتیشه پیکسل پرفکت و طراحی بر پایه No grid.
درحال حاضر در شرکت پارت، مدیر بخش طراحی و فرانت اند است..

دیدگاه‌ها  

soheila.gh 15078313710ب ظ_پنج شنبهب ظ+0330E+03300مهرE_مهر+0330Rمهرب ظ+0330
با سلام
برای درج و طراحی این انیمیشن ها در طراحی ui یک اپ موبایل از چه نرم افزاری استفاده کنیم؟
مهدی منافی 14639887951ب ظ_دوشنبهب ظ+0430E+04301خردادE_خرداد+0430Rخردادب ظ+0430
مطلب خوبی بود
ممنون
تبعیت از قوانین فیزیکی پیرامون محیط زندگی ما میتونه منبع خوبی برای ایده گرفتن تو انیمیشن هامون باشه. اکثر این انیمیشن ها هم از قوانین فیزیک بهره گرفتن.

ما تو یه شرکت داریم روی نرم افزار فاکتورزنی دسکتاپ کار میکنیم. بعضی قسمتها هستن که نیاز به چندین مرحله و یا کنترل دارن برای فهموندن عملکرد به کاربر، ولی تونستیم با یه انیمیشن (1 یا کمتر ثانیه) مفهوم عملکرد اون بخش رو به کاربر برسونیم و بازخوردهای خوبی هم گرفته شد.
امید کاوه راد 14634673611ق ظ_سه شنبهق ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتق ظ+0430
به نقل از مهدی مرتضوی:
سلام مقاله بسیار مفیدی بود.

مهدی جان خوشحالم مفید بوده.
امید کاوه راد 14634672511ق ظ_سه شنبهق ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتق ظ+0430
به نقل از محمد رضا هاشمی:
ممنون از اگید کاوه راد عزیز. بسیار جالب و جذاب بود.

خواهش میکنم
در ضمن "امید" هستم :دی
موسی 14634283841ق ظ_سه شنبهق ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتق ظ+0430
سلام مطلب مفیدی بود ممنون
بازهم منتظر هستیم
امید کاوه راد 14634271531ق ظ_سه شنبهق ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتق ظ+0430
به نقل از زهرا کشاورز:
سلام
من دانشجوی ترم آخر ارشد طراحی صنعتی هستم. از دوره کارشناسی تا کنون در برخی موارد درگیر موضوع این متن شده ام. مطلبتان بسیار مفید و خوب ارائه شده بود و این مباحث این روزها در بین دان آموختگان طراحی صنعتی باب شده است. چرا که بحث پرزنت کردن کارهایمان نسبت به گذشته که محدود به اسکچینگ و شیت بندی بود، بسیار متفاوت میتواند باشد و یکی از این شیوه ها موشن دیزاین است.
بسیار استفاده کردم
ممنون
موفق باشید

خانم کشاورز
خوشحالم که هستند دانشجویانی مثل شما که فقط به مباحث دانشگاه بسنده نمی کنند و بدنبال مباحث روز در رشته خودشون هستند و خب این هست که اون نفر رو نسبت به بقیه متمایز میکنه.
موشن دیزاین در پرزنت کار تاثیر گزاری زیادی داره که باعث جذب کاربر در نگاه اول میشه و با همین جذب میشه کاربر رو هدایت کرد.
زهرا کشاورز 14633927141ب ظ_دوشنبهب ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتب ظ+0430
سلام
من دانشجوی ترم آخر ارشد طراحی صنعتی هستم. از دوره کارشناسی تا کنون در برخی موارد درگیر موضوع این متن شده ام. مطلبتان بسیار مفید و خوب ارائه شده بود و این مباحث این روزها در بین دان آموختگان طراحی صنعتی باب شده است. چرا که بحث پرزنت کردن کارهایمان نسبت به گذشته که محدود به اسکچینگ و شیت بندی بود، بسیار متفاوت میتواند باشد و یکی از این شیوه ها موشن دیزاین است.
بسیار استفاده کردم
ممنون
موفق باشید
امید کاوه راد 14633785411ق ظ_دوشنبهق ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتق ظ+0430
به نقل از علیرضا شهریاری:
سلام
خیلی مطلب جالبی بود.
از خوندنش لذت بردم.
و یه سوال برام پیش اومد ، اینکه در طراحی چه سایت هایی باید از موشن های خشک و منظم و چه زمانی موشن های نرم و ملایم استفاده کنیم؟
ممنون بابت سایت تون
کاش خبرنامه میداشتید که مقالات تون رو دنبال میکردم!

علیرضا جان
ممنون از توجهی که به مطلب داشتی.
همونطور که در بالا گفتم، اگر محصول شما(وب سایت یا اپلیکیشن) دارای فضا و روحیه غیر رسمی(مثل وب سایتهایی در رابطه با غذا یا ورزش)باشه میتونید از موشن های نرم و ملایم استفاده کنید ولی اگر دارای محیط رسمی(مثلا فروشگاه فروش جواهر آلات و لوازم لوکس) باشه اونجاس که باید از موشن هایی با حرکات خشک و منظم استفاده کنید.
باز هم اینو در نظر داشته باش که استفاده بیش از حد از این نوع موشن ها میتونه نتیجه عکس در پی داشته باشه.
علیرضا شهریاری 14633416461ق ظ_دوشنبهق ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتق ظ+0430
سلام
خیلی مطلب جالبی بود.
از خوندنش لذت بردم.
و یه سوال برام پیش اومد ، اینکه در طراحی چه سایت هایی باید از موشن های خشک و منظم و چه زمانی موشن های نرم و ملایم استفاده کنیم؟
ممنون بابت سایت تون
کاش خبرنامه میداشتید که مقالات تون رو دنبال میکردم!
محمد رضا هاشمی 14633220571ب ظ_یکشنبهب ظ+0430E+04301ارديبهشتE_ارديبهشت+0430Rارديبهشتب ظ+0430
ممنون از اگید کاوه راد عزیز. بسیار جالب و جذاب بود.

You have no rights to post comments