یک پروژه درسی (پردازش گفتار) که کار یک تیم شش نفره بود در این پست می خوام روند توسعه و طراحی شو بحث کنم. در نوشته با اصول و نحوه طراحی رابط کاربری محاوره ای ( conversational UI) آشنا می شویم.

? https://dribbble.com/shots/5978418-RoboFood

در این مطالعه موردی ما یک ربات سفارش گیر غذا را طراحی و پیاده‌سازی کرده ایم. برای این منظور 18 غذا انتخاب شده و اعضای تیم هر کدام از 12 گویشور با لهجه مختلف یک دیتاست جمع آوری نموده و آن را برچسپ گذاری کردیم. در فاز بعدی رابط کاربری آن طراحی و پیاده سازی شد که در ادامه آورده شده و در نهایت با آموزش دادگان جمع آوری شده با روش مدل پنهان مارکف توانستیم ربوفود را بسازیم!

حال داستان طراحی رابط کاربری اش را بخوانید..!

رابط کاربری محاوره‌ای

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

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

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

بعلاوه با بررسی آتی جواب های مشتری در سرویس محاوره ای، اطلاعات وسیعی از دید و رفتار مشتری کسب می شود. نحوه سخن گفتن مشتری و رضایتش، نیازهای جدید مشتری، استراتژی بازاریابی را می توان از این اطلاعات استخراج کرد.

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

اصول طراحی رابط کاربری محاوره ای

فراهم آوری اطلاعاتی برای اینکه کاربران بدانند چه چیزی را می‌توانند انجام دهند

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

مشخص بودن جایی که کاربر در آن حضور دارد

باید به کاربر بگوییم هم‌اکنون در حال انجام چه کارکردی از سیستم است. مطمئن باشید که کاربر می‌داند که در مکان درستی است.

محدود کردن میزان اطلاعات

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

از بازخورد دیداری استفاده کنید

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

همه چیز در یک ترتیب اتفاق می‌افتد

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

نحوه طراحی رابط کاربری محاوره ای

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

اسکچ زدن رابط کاربری

حال با درنظر داشتن اصول گفته شده، می‌خواهیم یک رابط کاربری برای تعامل با سیستم تشخیص غذا به عنوان یک مطالعه موردی انجام دهیم. در ابتدا طرح اولیه روی کاغذ زده شد (Sketch) و با گرفتن بازخورد از هم تیم ها و مدیر پروژه اشکالاتی طرح داشت برطرف شد.

طراحی وایرفریم و پروتوتایپ

در مرحله طراحی واسط کاربری ابتدا بازخوردها و ایده‌های قبلی که روی کاغذ آورده بودیم را کشیدیم تا نقشه راه مان در مراحل بعد باشد، که در شکل زیر ردیف اول (اشکال هندسی توخالی) پروتوتایپ low-fidelity یا سطح پایین نیز گفته می‌شود.
در ستون دوم با استفاده از راهنمای طراحی متریال گوگل و اقدم به کامل‌تر نمودن پروتوتایپ ها کردیم که با استفاده از پلت رنگی بنفش که بالای آرت برد ها آورده شده است.با تکیه بر سادگی، زیبایی و در عین حال کاربردپذیری واسط کاربری طراحی ها انجام شده اند.

شروع تعامل با ربوفود

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

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

نحوه سفارش گیری غذا و سبدخرید

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

نتیجه کار

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

این شما و این هم خروجی برنامه بعد از پیاده سازی!

جمع بندی

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

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

✅ نحوه پیاده سازی رابط کاربری – با تکیه بر اصول طراحی واسط کاربری محاوره ای و با استفاده از راهنمای طراحی متریال گوگل که شامل یکسری قواعد و باید و نباید های طراحی عناصر واسط کاربری حتی انتخاب رنگ­ها با وسواس خاصی استفاده شد. البته سعی شد که این قواعد محدود کننده خلاقیت در پیاده سازی رابط کاربری هنگام طراحی پروتوتایپ ها نباشد.

✅ نحوه ارتباط رابط کاربری با سمت سرور برنامه – مهمترین چالش های فنی این پروژه را به این شکل حل کردیم که با استفاده از یک API گفتار گویشور به سرور آپلود می­ شود و در سرور برنامه متلب که وظیفه استخراج ویژگی ها را دارد، توسط API اجرا شده و خروجی آن در response api بازگردانده می شود و در نهایت در رابط کاربری برنامه اندروید نشان دهیم.

پ. ن. 1: برنامه نهایی حاصل تلاش یه تیم باحال و پرانرژی بود که تو دانشگاه شهید بهشتی ارشد مالتی مدیا می خونن. جا داره از استاد خوبمون خانم طبیبیان تشکر کنیم ?

پ. ن. 2: لیست اعضا تیم (ترتیب حرف الفبا):

ندا اسدی، علی دهقانی، امیر حسین حکمت شعار، محمد شریفی، فاطمه نظری، پویا یوسف نژاد

پ. ن. 3:

منابع برای مطالعه بیشتر [+ و + و + و +]