Microinteractions Model - ساختار ریزتعامل‌ها

مقدمه‌ای بر Microinteractions یا جزییات دوست‌داشتنی در طراحی

پنج‌شنبه هفته پیش در ریحون ارایه‌هایی داشتیم در مورد Whitespace، Node.js و من هم در مورد Microinteractions صبحت کردم که در این مطلب قصد دارم در موردش بنویسم.

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

The details are not the details. They make the design.
~ Charles Eames

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

Microinteractions آن جزییاتی از طراحی است که کاربر معمولا نمیبینه ولی حسش میکنه و حتی ممکن یادش هم نمونه که آن Microinteractionsی که دیده چه بوده، اما قطعا آن برنامه را یادش میمونه و میگه “من عاشق این اپلیکیشن هستم!”

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

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

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

Like Microinteractions in Facebook

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

ساختار Microinteractions

Microinteractions Model - ساختار ریزتعامل‌ها

این تصویر مدل، پیشنهادی برای ریز‌تعامل‌ها است که هر ریز‌تعامل از چهار قسمت مهم تشکیل می‌شود:

۱. Trigger یا فعال کننده

هر ریزتعاملی با فراخوانی شروع می‌شود. مانند کلید چراغ که با زدنش چراغ روشن می‌شود یا لینکی که کاربر روی آن کلیک میکنید. پس برای شروع ریزتعامل‌ها نیاز به یک نیروی اولیه است که به دو صورت میتواند اعمال شود:

Manual Trigger یا فعال کننده دستی

Manual Trigger - فعال کننده دستی

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

System Trigger یا فعال کننده اتوماتیک

System Trigger - فعال کننده اتوماتیک

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

۲. Rules یا قوانین

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

۳. Feedback یا بازخورد قوانین

Feedback - بازخورد

کاربر قوانین را نمی‌داند ولی در این مرحله بازخوردی از قوانین پشت پرده دریافت میکند تا متوجه اتفاقی که افتاده بشود. در مثال iPhone وقتی گوشی را Silent می‌کنید دو بازخورد دریافت می‌کنید:

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

۴. Loops & Modes یا چرخه‌ها و حالت‌ها

این بخش مربوط به قوانین اضافی ریزتعامل‌ها هست:

Modes یا حالت‌ها

Microinteractions Modes - حالت‌های ریزتعامل‌ها

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

Loops یا چرخه

microinteractions-ebay

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

 

چند اصل پایه‌ای ریز‌تعامل‌ها

چند اصل پایه وجود داره که در طراحی بهتر ریز‌تعامل‌ها می‌تونه به شما کمک کنه:

Bring the data Forward یا اطلاعات را دم دست بذارید

microinteractions-chrome-download

اطلاعاتی که فکر می‌کنید برای کاربر میتونه مفید باشه را دم دستش قرار بدین و بذارید در سریع‌ترین حالت ممکن بهش دست پیدا کنه. به عکس بالا توجه کنید، در سیستم عامل مک، برنامه Chrome در هنگام دانلود فایل با یک علامت کوچک و واضح تعداد فایل‌های در حال دانلود و مقدار حجم دانلود شده را نشان می‌دهد.(این اصل معمولا برای Manual Triggerها کاربرد دارد.)

Prevent human error یا جلوی خطا‌ها را بگیرید

microinteractions-gmail

سعی کنیم جلوی خطا‌ها را بگیریم و حتی در صورت امکان مشکل را هم حل کنیم. مثال برای این مورد در Gmail زیاد هست، مثالا وقتی در ایمیل خود نوشته باشید “I’ve attached” ولی فایلی را پیوست ایمیل نکرده باشید، سیستم به شما پیغامی را نشان می‌دهد که جلو ارسال اشتباه ایمیل را بگیرد.

Don’t start from zero یا از صفر شروع نکنید

microinteractions-office-hours

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

Use the overlooked یا از المان‌های موجود استفاده کنید

microinteractions-chrome

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

Speak human یا صرفا ماشین نباشید!

speak-human-microinteractions

مردم دوست دارند که به زبان خودشون، راحت و ساده باهاشون صحبت کنید و می‌توانند احساس را نسبت به یک صورتک هم دریافت کنند.(تصویر بالا) سعی کنیم به زبان انسان‌ها صحبت کنیم نه ربات‌ها!

Use Long Loops یا حلقه‌های بلند مدت

foursquare

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

افزودن ریز‌تعامل‌ها به محصول

به سه روش می‌توانیم ریز‌تعامل‌ها را به محصولمان اضافه کنیم:

۱. بررسى مورد به مورد

در روش اول، طى دوره طراحى یا زمانى که مى‌خواهید پروژه را بازنگرى و بهتر کنید(Realign)، ریزتعامل هاى موجود را شناسایى و لیستى از آن‌ها  تهیه کنید و به مرور روى آن ریزتعامل ها کار کنید تا هر یک تبدیل به یک ریزتعامل خوب شود.
مسله‌ای که در این روش وجود دارد محدودیت در آزادى عمل و وسعت ریزتعامل ها هست. اما روش خوبى نیز براى پروژه هاى موجود و در حال توسعه است.

۲. محصول به عنوان یک ریزتعامل

Toaster is a Microinteractions

روش دوم که روش محبوب من هم هست رویکرد خاص ترى داره و خود محصول را یک ریزتعامل میبینه. یک ریزتعامل خود مى تواند تبدیل به یک محصول شود. تستر نان را ببینید، نان را داخلش میذارید بعد از یک زمان مشخص میپره بیرون، تستر تنها یک ریزتعامل است ولى این ریزتعامل کارش را به بهترین روش ممکن دارد انجام میدهد.
در این روش شما باید پیچیدگى هاى محصول خود را تا حد ممکن کم کنید تا جایى که محصول شما یک کار را خیلى خوب انجام دهد و اگر بخواهید ویژگى جدیدى به محصول اضافه کنید، آن ویژگى را به عنوان یک محصول جدا و با یک ریزتعامل باید ببینید.
استراتژی محصول به عنوان یک ریز تعامل، روشى است که خیلى از استارتاپ‌ها، برنامه‌ها و دیوایس‌ها بر این اساس کار می‌کنند(یا حداقل در ابتدا به این شیوه شروع کرده‌اند)، مانند Instagram، Nest، iPod، iA Writer و … به عنوان مثال Evernote با یک ریزتعامل ساده شروع کرد: نوشته‌ها را روى هر پلت فورمى در اختیار بذارد.
مسله‌ای که وجود دارد این است که خیلی از محصولات را نمی‌توان به یک ریزتعامل تبدیل کرد و آن‌ها پیچیدگی‌های خیلی بیشتری دارند که روش سوم می‌تواند جواب‌گوی این محصولات(مانند Microsoft Word) باشد.

۳. محصول به عنوان مجموعه‌ای از ریزتعامل‌ها

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

امیدوارم این مطلب انگیزه‌ای باشد تا به جزییات بیشتر توجه کنیم و همینطور به تعامل بهتر با کاربر به عنوان یک انسان و نه یک ماشین. برای مطالعه بیشتر در مورد این موضوع پیشنهاد می‌کنم کتاب Microinteractions – Designing with Details را بخوانید.

فایل این ارایه را اینجا میتونید ببینید: Microinteractions

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

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


10 thoughts on “مقدمه‌ای بر Microinteractions یا جزییات دوست‌داشتنی در طراحی”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *