رابط‌های کاربری مدرن صرفاً به کارایی محدود نمی‌شوند. آنها باید کاربرپسند، شهودی و لذت‌بخش باشند. اگر دو برنامه با قابلیت‌های مشابه داشته باشید، احتمالاً آن برنامه‌ای را انتخاب می‌کنید که احساس راحتی بیشتری به شما می‌دهد و با زبانی واضح و بدون ابهام با شما صحبت می‌کند.
بیش از ۲۰ سال پیش، یک مطالعه مشهور دانشگاه استنفورد۷۵ درصد کاربران، درک خود از اعتبار یک شرکت را بر اساس طراحی وب‌سایت یا اپلیکیشن آن شکل می‌دهند.
فقط تصور کنید که طراحی امروز چقدر بر ادراک اعتبار تاثیر می‌گذارد! طراحی UX خوب نه تنها می‌تواند تجربه کاربری را بهبود بخشد بلکه اعتماد به شرکت را نیز به طور چشمگیری افزایش داده و فروش را به شدت رونق می‌بخشد.
طراحان رابط کاربری و تجربه کاربری از ترفندهای مختلفی برای ایجاد رابط کاربری ساده و آسان استفاده می‌کنند: معماری اطلاعات را مشخص می‌کنند، آزمون‌های استفاده‌پذیری و خیلی چیزهای دیگر. اما جادوی واقعی UX زمانی اتفاق می‌افتد که ساختار اصلی یک برنامه آماده می‌شود، و این جادو اسمی دارد: میکرو تعاملات.
تعاملات ریز رابط کاربری، پاسخ‌های ظریف سیستم به اقدامات کاربر یا رخدادهای سیستم هستند (مانند به روز رسانی وضعیت سفارش، دریافت پیام جدید و غیره). این تعاملات معمولاً به شکل انیمیشن‌های کوچک، جلوه‌های بصری یا صوتی هستند که پس از انجام یک عمل ظاهر می‌شوند.
اغلب کاربران به طور آگاهانه متوجه وجود تعاملات ریز در رابط کاربری نمی‌شوند. اما چیزی که بدون شک متوجه آن می‌شوند، نبود آنهاست.
تصور کنید یک برنامه را باز می‌کنید و با یک صفحه خالی روبرو می‌شوید که هیچ نشانه‌ای از بارگذاری ندارد. این احتمالا احساس عدم قطعیت را در شما ایجاد می‌کند: چه اتفاقی در حال رخ دادن است؟ یا تصور کنید دکمه‌هایی روی یک سایت وجود دارند که هنگام قرار گرفتن نشانگر ماوس روی آنها، حالتشان تغییر نمی‌کند. در این صورت مشخص نیست که آیا آنها اصلا کار می‌کنند یا خیر.
در نهایت، تصور کنید که در حال پر کردن یک فرم طولانی هستید، اما فیلدها ثابت مانده‌اند و رابط کاربری هیچ بازخوردی در مورد صحت پر شدن آنها ارائه نمی‌دهد. فقط پس از ارسال فرم متوجه می‌شوید که خطاهایی رخ داده است و تمام اطلاعاتی که وارد کرده‌اید باید مجددا وارد شوند.
خلاصه اینکه، بعد از چنین تجربه‌ای، احتمالاً به این محصول برنمی‌گردید و به جای آن از اپلیکیشن رقیبی با رابط کاربری خوب استفاده خواهید کرد.
تمام مسائلی که در بالا به آن ها اشاره شد، نتیجه عدم توجه کافی به میکرواینتراکشن هاست. تأثیر میکرواینتراکشن ها، ارزش اساسی آن ها در تجربه کاربری امروز، موضوعی است که در این مقاله درباره آن صحبت خواهیم کرد.
تعاملات ریز UX چگونه تجربه کاربری را بهبود می‌بخشند؟
تعاملات کوچک یک سیستم خودکار و بی روح را به یک رابط کاربری پاسخگو، دوستانه و انسانی‌تر تبدیل می‌کنند. این مانند اضافه کردن ادویه به غذا است: بدون ادویه، هر غذایی ممکن است بی‌مزه باشد، اما به محض اینکه کمی ادویه اضافه کنید، طیف وسیعی از طعم‌ها و عطرها آشکار می‌شود. اما دقیقا چگونه تعاملات کوچک قابلیت استفاده را افزایش می‌دهند؟ بیایید عمیق‌تر به این موضوع بپردازیم.
وضعیت فعلی سیستم را نمایش دهید.
در اینجا، می‌توانیم (مفهوم اساسی را به یاد بیاوریم) اصول ارگونومی سیستم باید همیشه وضعیت فعلی خود را به کاربر نشان دهد.
با وجود میکرو تعاملات، کاربران می‌فهمند که در رابط کاربری چه اتفاقی می‌افتد: نشانگر بارگذاری نشان می‌دهد که برنامه در حال کار است و پنجره پاپ آپ در مورد خطا اطلاع می‌دهد.اینجا چه خبره؟یا اینکهمن هستم؟سیستم باید قبل از اینکه این سوالات مطرح شود، پاسخ آنها را ارائه دهد.
(توجه را جلب و حفظ کنید)
وقتی کاربر با رابط کاربری تعامل می‌کند و پاسخ پویایی دریافت می‌کند، دیالوگی آغاز می‌شود. این دیالوگ، علاقه و تعامل را افزایش می‌دهد. به همین دلیل، ریز تعاملات به‌خوبی طراحی‌شده، کاربران را ترغیب می‌کنند مدت زمان بیشتری در برنامه یا وب‌سایت بمانند که این امر به‌نوبه خود، تأثیر مثبتی بر تحلیل‌ها می‌گذارد. نرخ تبدیل تحقیقات انجام شده توسط فورستر نشان می‌دهد کهنرخ تبدیل را تا ۲۰۰٪ افزایش دهید.
راهنمایی و راهکار بده
راهنمایی‌ها به کاربران کمک می‌کنند تا راحت‌تر در سیستم حرکت کنند و افراد جدید در زمان آموزش سریع‌تر با محیط آشنا شوند. انیمیشن‌های کوتاه، راهنماها و подскаش‌های کوچک، مسیر را برای کاربر مشخص می‌کنند و به او کمک می‌کنند تا درک بهتری از نحوه تعامل با برنامه داشته باشد.
برای مثال، وقتی کاربر جدیدی برای اولین بار وارد برنامه می‌شود، یک راهنمای انیمیشنِ پاپ‌آپ می‌تواند گزینه‌های عملی را پیشنهاد دهد و احساس سردرگمی را کاهش دهد و فرایند را شهودی‌تر کند.
از اشتباهات جلوگیری کنید
در اینجا می‌توانیم به یکی دیگر از اصول طراحی نیلسن اشاره کنیم که بر اهمیت پیشگیری از خطا در مراحل اولیه تأکید دارد. این امر با ارائه بازخورد به کاربران و هشدار قبلی در مورد مشکلات احتمالی قبل از بحرانی شدن آنها، قابل دستیابی است.
مثلاً هنگام ساخت رمز عبور، سیستم باید قبل از فشردن دکمه تأیید، بازخوردی در مورد برآورده شدن همه معیارها ارائه دهد.
آناتومی میکرو تعاملات UX
بیایید با دقت بیشتری به ساختار ریزبرهم‌کنش‌ها نگاه کنیم و بفهمیم از چه چیزی ساخته شده‌اند.
معمولاً چهار عنصر اصلی شناخته شده است:
محرک‌هارویدادها یا اعمالی هستند که میکرواکنش‌ها را آغاز می‌کنند. آنها را می‌توان به دو نوع تقسیم کرد.
- محرک‌های کاربری اینها اعمالی هستند که کاربر به طور عمدی انجام می‌دهد مانند کلیک کردن روی یک دکمه، کشیدن یک عنصر یا ارسال یک پیام.
- محرک‌های خودکار سیستم اینها رویدادهای خاص سیستم هستند، مانند تکمیل بارگذاری یک صفحه، تغییر در وضعیت شبکه یا شناسایی خطا.
قوانینتعریف عملکردها و ترتیب رخداد آنها پس از فعال شدن یک محرک. این قوانین معمولاً در حین استفاده از سیستم قابل مشاهده نیستند اما برای مدیریت میکرواکنش ضروری هستند. بخش سوم این طرح – بازخورد – برای تجسم این قوانین به کار می‌رود.
بازخوردشیوه‌ای برای اطلاع‌رسانی به کاربر از نتایج یک تعامل کوچک است.
- دیداری بازخورد شامل انیمیشن‌ها، جلوه‌های شناور، تغییر آیکون‌ها و دیگر عناصر بصری است.
- صدا بازخورد می‌تواند به شکل سیگنال‌های صوتی مختلف مثل بوق، کلیک و غیره ظاهر شود.
- لمسی بازخورد معمولا با لرزش در دستگاه‌های همراه همراه است.
چرخه‌ها و حالت‌ها
- چرخه‌ها مدت زمان، بسامد تکرار و تغییرات رخ‌داده در تکرار یک ریزکنش، رفتار آن را در طول زمان تعیین می‌کند. به عنوان مثال، چرخه تکراری را می‌توان با سیگنال صوتی ماکروفر نشان داد که اگر پس از اتمام گرمایش، در باز نشود، پس از مدتی تکرار می‌شود.
- حالت ها نحوه انطباق تعاملات میکرو با تغییرات در زمینه یا شرایط را شرح دهید. به عنوان مثال، اگر کاربری حالت بی‌صدا را در گوشی هوشمند خود فعال کند، اعلان‌های صوتی غیرفعال می‌شوند.
تجزیه آناتومی میکرو تعامل: نمونه ای از چرخ فلک متحرک
برای درک عملکرد این ساختار در دنیای واقعی، بیایید مثالی از یک چرخ‌وفلک متحرک که در فرایند آموزش یکی از پروژه‌های شرکت الاینکست استفاده شده است را بررسی کنیم.
این برهم‌کنش کوچک را به چهار بخش اصلی که پیش‌تر توضیح دادیم، تجزیه و تحلیل می‌کنیم.
(محرک ها)
در این مثال، دو محرک برای شروع تغییر اسلایدها وجود دارد. محرک اول توسط سیستم آغاز می‌شود: اسلایدها هر 5 ثانیه به طور خودکار تغییر می‌کنند. محرک دوم توسط کاربر آغاز می‌شود: کاربر می‌تواند با کشیدن انگشت به چپ یا راست، اسلایدها را به صورت دستی تغییر دهد.
قوانین
در چرخش‌نمای تصاویر، قوانین، ترتیب اسلایدها، زمان تأخیر قبل از تعویض خودکار و روش‌های پیمایش دستی کاربران بین اسلایدها را تعیین می‌کنند. علاوه بر این، قوانین شرایطی را که در آن تغییر خودکار اسلاید متوقف می‌شود (در مورد ما، زمانی که کاربر شروع به کشیدن می‌کند) مشخص می‌کنند.
بازخورد
در چرخش، از بازخورد بصری استفاده می‌شود. این بازخورد شامل یک انتقال انیمیشنی از یک اسلاید به اسلاید دیگر هنگام فعال شدن محرک است.
چرخه‌ها و مدها
چرخه میکرو تعامل ما با نمایش اسلاید اول شروع و با نمایش اسلاید آخر پایان می‌یابد. بعد از آن، این چرخه به طور خودکار تکرار می‌شود. این چرخه در هنگام پخش مجدد تغییری نمی‌کند.
مثال‌های تعاملات ریز در زندگی واقعی
برای درک بهتر نحوه عملکرد ریزکنش‌ها در عمل، بیایید چند نمونه از پروژه‌های شرکت الاینکست را بررسی کنیم.
کشیدن
کشیدن و رها کردن یک میکرو تعامل بسیار رایج است که اغلب در برنامه‌های ردیابی وظایف و برنامه‌های مبتنی بر لیست یافت می‌شود. این امکان را به کاربران می‌دهد تا اشیاء را جابجا کنند، ترتیب آنها را تغییر دهند و آنها را به بخش‌های مختلف منتقل کنند. این الگو احساس تعامل با اشیاء فیزیکی واقعی را ایجاد می‌کند.
مثلاً وقتی وظیفه‌ای را از یک بخش به بخش دیگر می‌کشید، مثل این است که برگه وظیفه کاغذی را از یک پوشه به پوشه دیگر منتقل می‌کنید. این تحریک لمسی کاربران را درگیر می‌کند و باعث می‌شود زمان بیشتری را در برنامه بگذرانند.
داشبوردهای تعاملی
داشبوردها زمین بازی بزرگی برای پیاده‌سازی میکرو تعاملات هستند. می‌توانید ویجت‌ها را پویاتر کنید و به کاربران اجازه دهید روی نقشه‌ها و نمودارها بزرگنمایی و کوچک‌نمایی کنند، به طور آزاد حرکت کنند، آمار را به طور لحظه‌ای به‌روزرسانی کنند و تنظیمات نمودارها و گراف‌ها را سفارشی کنند.
این روش‌ها کاربران فعلی را تشویق می‌کنند تا با برنامه بیشتر در ارتباط باشند.
اثرهای شناور
بدون افکت‌های شناور، دیگر کاربری مدرن نمی‌تواند یک رابط کاربری وب را تصور کند، این تعامل کوچک جزو «ضروریات» محسوب می‌شود.
هنگامی که نشانگر ماوس روی یک عنصر قابل کلیک قرار می‌گیرد، باید حالت آن تغییر کند تا نشان دهد که تعاملی است. این الگو با روشن کردن اینکه کدام اشیا قابل کلیک هستند و کدام نیستند، ناوبری را به طور قابل توجهی ساده می‌کند. علاوه بر این، افکت‌های شناور می‌توانند عناصر ضروری را برجسته‌تر کنند و شانس انجام اقدامات خاص، مانند خرید یا اشتراک، را افزایش دهند.
(پاپ‌آپ‌ها و راهنمایی‌های ابزار)
پاپ‌آپ‌ها پنجره‌هایی هستند که بدون رفتن به صفحه دیگری اطلاعات بیشتری ارائه می‌دهند. این پنجره‌ها معمولاً با کلیک روی یک عنصر خاص در رابط کاربری باز می‌شوند و می‌توان با کلیک روی فضای خالی آنها را بست.
از طرف دیگر، راهنمایی‌ها (Tooltips) وقتی روی یک عنصر خاص موس را می‌برید، راهنمایی‌ها و اطلاعات اضافی ارائه می‌دهند. هر دو این تعاملات ریز، به صرفه‌جویی در فضا روی صفحه اصلی کمک می‌کنند، بدون اینکه صفحه را به طور کامل پر کنند.
ابزار راهنما (Tooltip) با ارائه راهنمایی به کاربران دچار سردرگمی، نرخ ترک سایت را کاهش می‌دهند و در عین حال بار روی تیم پشتیبانی را نیز به طور قابل توجهی کم می‌کنند.
پیش‌بینی خودکار
به محض اینکه کاربر شروع به تایپ کردن متن یا حروف اولیه می‌کند، پیشنهادات خودکار، گزینه‌هایی را که با حروف وارد شده مطابقت دارند، پیشنهاد می‌دهند. این امر در زمان صرف شده صرفه جویی می‌کند و نیازی به وارد کردن متن طولانی و خسته کننده را از بین می‌برد. مزیت دیگر این است که احتمال خطا در داده‌های وارد شده را کاهش می‌دهد و بدین ترتیب شانس موفقیت در انجام اقدامات مورد نظر را افزایش می‌دهد.
تغییر حالت روز و شب
حالت‌های روز و شب به ایجاد تجربه استفاده راحت‌تر از برنامه در زمان‌های مختلف روز کمک می‌کنند که منجر به افزایش تعامل کاربر و تعداد جلسات کلی می‌شود.
تعاملات ظریف در جدول‌ها
افزودن ریزکنش‌ها به جدول، کار با آن را بسیار راحت‌تر و لذت‌بخش‌تر می‌کند. برای مثال، به‌روزرسانی خودکار داده‌ها باعث می‌شود کاربران بدون نیاز به بارگذاری مجدد صفحه، جدیدترین اطلاعات را ببینند. انیمیشن در حین به‌روزرسانی‌ها، جدول را پویاتر و جذاب‌تر می‌سازد.
همانطور که احتمالا متوجه شدید، آنچه کاربران در تعاملات کوچک می‌بینند، فقط بخش کوچکی از کار است. پشت انیمیشن‌های کوچک، اغلب کار سیستماتیک و دقیقی نهفته است. اما این تلاش‌ها نتیجه‌بخش هستند و زندگی کاربران را کمی بهتر و دلپذیرتر می‌کنند.
سرمایه‌گذاری در توسعه ریزبرهم‌کنش‌های رابط کاربری و تجربه کلی کاربر، چندین برابر بازده دارد و سرمایه‌گذاری بسیار سودآوری محسوب می‌شود.
نتیجه گیری
در نهایت، میکروتعاملات ابزاری قدرتمند هستند که می‌توانند به طور قابل‌توجهی تجربه کاربری را بهبود بخشند و مزایای قابل توجهی برای مشاغل به ارمغان آورند. با این حال، قبل از غوطه‌ور شدن در میکروتعاملات، لازم است به طور کامل و قابل اطمینان کارکرد اصلی و معماری برنامه خود را توسعه دهید، زیرا کارکرد پایه و اساس محصول است.
می‌توانید این موضوع را با هرم نیازهای مازلو مقایسه کنید: ابتدا به نیازهای اولیه‌ای که برای بقای ما ضروری هستند، می‌پردازیم؛ بعد از آن به نیازهای سطح بالاتر می‌رسیم. اگر عملکرد اصلی کار نکند، تمام جزئیات ریز و درشت که امروز درباره آنها بحث کردیم، بی‌معنی خواهند بود.
هنگامی که پایه و اساس به طور قابل اعتمادی برقرار شد، تعاملات ریز به ما کمک می‌کنند تا کیفیت محصول را به سطحی بسیار بالاتر ارتقا دهیم.
