كيف بدأنا في إنشاء عناصر واجهة المستخدم المدخلة لمنصة Chatbot الخاصة بنا
نشرت: 2017-01-01لا تمتلك روبوتات المحادثة ، كما هي موجودة اليوم ، العديد من القدرات لفهم لغة الإنسان الطبيعية. وهذا أحد الأسباب الرئيسية التي تجعل معظم تطبيقات المراسلة (Messenger ، Kik ، إلخ) تلجأ إلى مزيج من واجهة المستخدم الرسومية والنصية في منصات الروبوت الخاصة بهم - فكر في الأزرار ، الدوارات ، بطاقات الصور وليس مجرد الردود النصية.
نحن ، في Tars ، نستخدم المتصفح كمنصة لبناء واجهة الدردشة الخاصة بنا لكي تعمل الروبوتات. وهذا يمنحنا الحرية الكاملة فيما يتعلق بكل المكونات التي لدينا. إذا كنت قد جربت أيًا من برامج الروبوت الخاصة بنا (إذا لم تكن قد جربتها ، فجرّب واحدة أولاً من هنا وهنا) ، فستعلم أننا نؤيد بشدة نهج UI الرسومي + المستند إلى النص. كجزء من عملية التفكير هذه ، أنشأنا عددًا من مدخلات لوحة المفاتيح المخصصة في واجهة الواجهة الأمامية لتسهيل تفاعلات المستخدم والمواقف المختلفة.
Messenger و Kik و Telegram منصات ضخمة حيث ينشر المطورون مئات الروبوتات كل يوم. ما زلت أشعر أن منصات المراسلة هذه لم تفعل ما يكفي على مكونات الواجهة الأمامية لمساعدة صانع الطفرة في إنشاء تفاعلات مستخدم ثرية.
ولهذا السبب ، أردت أن أتحدث أكثر عن كيفية إنشاء كل واجهة مستخدم مخصصة ، ولماذا تبدو كل واحدة منها منطقية وكيف يؤدي عدم وجودها إلى إفساد تفاعلات المستخدم في الوقت الحالي.
حسنا هيا بنا:
التاريخ والوقت سكرولر
فكر في سيناريو حيث تريد أن تسأل المستخدم متى يرغب في تحديد موعد؟ يمكن أن تكون هناك طرق متعددة لإعطاء نفس المعلومات.
25 نوفمبر ، 25 نوفمبر ، 25 نوفمبر ، 25/11 ، 25-11-2016 ، 11/25/16 - كلها تعني في الأساس نفس الشيء ولكن يصعب على الآلة فهم هذه البيانات.
هذا هو السبب في أننا قمنا بدمج سكرولر التاريخ والوقت حيث يمكن للمستخدمين تحريك الأوجه واختيار التاريخ / الوقت.
لم أر أي منصة مراسلة أخرى توفر واجهة المستخدم هذه حتى الآن وأشعر أن هذا أمر لا بد منه إذا كان الروبوت يطلب التاريخ أو الوقت من المستخدم.
الأزرار العمودية
فكر في هذه الخيارات كخيارات متعددة في نموذج يكون لديك فيه عدد محدود من الأشياء للاختيار من بينها. يؤدي النقر على الأزرار إلى جعل التفاعل أسرع ويحافظ أيضًا على تقييد نطاق المحادثة.
يعتبر النهج القائم على الأزرار منطقيًا عندما يتعين عليك الاختيار بين بيتزا نباتية وغير نباتية ، ولكنها قد لا تكون أفضل واجهة مستخدم لديك إذا كان لديك 100 بوليصة تأمين للاختيار من بينها.
ما الذي يمكن عمله أكثر باستخدام الأزرار الرأسية؟
- أضف صورة بجوار كل خيار لجعله أكثر جاذبية من الناحية المرئية.
- يمكنك إما السماح للمستخدم بالرد على نقرة واحدة أو جعله ينقر على "إرسال" بعد أن ينقر على أي من الخيارات. يساعد هذا الأخير في إعادة تأكيد ما إذا لم يحدد المستخدم خيارًا معينًا عن طريق الخطأ. لا توجد طريقة للعودة في تدفق الدردشة وهذا هو السبب في أن هذا التخصيص منطقي.
- أضف قائمة معلومات سريعة لكل خيار لتوفير معلومات مفصلة ولتحسين عملية اتخاذ القرار.
لا يعرف الجميع الفرق بين الوجه المتقدم والأساسي. إضافة تفاصيل حول كل ما يتم تضمينه والتسعير يجعل تجربة المستخدم أفضل.
هناك شيء آخر يجب مراعاته عند استخدام Button UI وهو صياغة سؤالك بالطريقة الصحيحة. كما يوضح ليزيك في مقالته هنا ، من الأفضل طرح السؤال بطريقة تحد من نطاق الخيارات وتضع السياق بدلاً من طرح سؤال مفتوح للغاية.
تقييد إدخال المستخدم
أشعر أن هذا أحد أفضل الأشياء التي قمنا بها لواجهة الدردشة الخاصة بنا. عندما نوفر واجهة مستخدم إدخال رسومية (أزرار ، دوارات ، إلخ) ، لا نسمح للمستخدم بكتابة أي شيء في النص.
لماذا تفعل ذلك؟ لأن المستخدم يمكنه كتابة أي شيء في الخارج وروبوتك ليس جاهزًا لذلك. حتى تكون هناك ، من الأفضل أن تبقيها بسيطة ومقيدة بدلاً من كسر المحادثة.
موصى به لك:
كيف ستحول Metaverse صناعة السيارات الهندية
ماذا يعني توفير مكافحة الربح بالنسبة للشركات الهندية الناشئة؟
كيف تساعد الشركات الناشئة في تكنولوجيا التعليم في تطوير مهارات القوى العاملة في الهند وتصبح جاهزة للمستقبل ...
الأسهم التقنية في العصر الجديد هذا الأسبوع: مشاكل Zomato مستمرة ، EaseMyTrip تنشر Stro ...
تتخذ الشركات الهندية الناشئة اختصارات في مطاردة للتمويل
منصة التسويق الرقمي Logicserve Bags INR 80 Cr Funding، Rbrands as LS Dig ...
ما نقوم به هو هذا:
هذه هي واجهة الدردشة الخاصة بنا
وهذا ما يحدث عندما لا يكون لديك شيء مثل هذا:
هذا هو Facebook Messenger الذي لا يسمح بإدخال نص مقيد عندما يكون لديك ردود سريعة
زر "تم" و "تمرير"
هذان نوعان صغيران جدًا من الفروق الدقيقة التي انتهينا من دمجها لأننا فكرنا دائمًا في روبوتات المحادثة النصية باعتبارها تطورًا للأشكال.
عندما ترسل عبر عنوانك أو تقدم ملاحظات مفصلة عبر واجهة الدردشة ، فإن السلوك العام هو الضغط على زر الإرسال بعد كتابة بضع كلمات وينتشر الرد بالكامل في النهاية عبر 3-4 عبارات. باستخدام "زر تم" ، يمكنك الاستمرار في الكتابة والضغط على هذا بمجرد تقديم الرد الكامل.
إذا لم يكن لديك مثل هذا الخيار ، فستأتي الرسالة التالية للجهاز بعد المثيل الأول نفسه مما يؤدي إلى استجابات غير كاملة.
احصل على زر "تم" عندما تضطر إلى تحديد خيارات متعددة أو استجابات متعددة الأسطر
قد تكون هناك أيضًا حالات يرغب فيها المستخدم في تخطي السؤال ولهذا ، لدينا "زر المرور" بدلاً من "زر الإرسال". بمجرد أن يبدأ المستخدم في الكتابة ، يتحول زر المرور إلى زر إرسال.
لا تريد أن تعطي بريدك الإلكتروني؟ اضغط على "اجتياز" لتخطي السؤال.
اقتراحات الإكمال التلقائي
هذا يشبه وظيفة الإكمال التلقائي في بحث google حيث تبدأ الكتابة وتقترح الخيارات الممكنة. يصبح هذا مفيدًا بشكل خاص عندما يكون لديك قائمة طويلة من الخيارات ويكون لديك أزرار عمودية ليس خيارًا ممكنًا. فكر في قائمة طويلة من المحليات والمدن ونماذج السيارات وما إلى ذلك.
النجوم والاعجابات
مفيد بشكل خاص عندما تطلب ملاحظات المستخدم أو تجربته وتكون الاستجابة أكثر جودة بطبيعتها. ويمكنك أيضًا تخصيص الرموز لتكون نجومًا وإعجابات وقلوبًا ورموز تعبيرية.
بطاقات الصور
هذا مفيد حيث تحتاج إلى عرض أجزاء متعددة من المعلومات حول كل عنصر دفعة واحدة. يمكن أن يكون برجر في عملية طلب الطعام أو قميصًا في تدفق التسوق. جميع البطاقات مكدسة مقابل بعضها البعض ويمكنك التمرير خلالها لإلقاء نظرة على جميع الخيارات.
هناك 4 أجزاء من عنصر واجهة المستخدم هذا - الصورة والعنوان والوصف والتذييل. يمكنك الاستفادة منها بشكل مختلف اعتمادًا على ما تريد عرضه هناك.
إذا كنت ترغب في اختبار كل عناصر واجهة المستخدم المدخلة ، فإليك الرابط إلى chatbot الذي يأخذك عبر واحد تلو الآخر.
كون الدردشة عبارة عن واجهة بسيطة مع فقاعات فقط ومربع نص لا يعطي نطاقًا كبيرًا. وأعتقد أنه سيتعين علينا إعادة التفكير في كيفية تسهيل مجموعة متنوعة من التفاعلات باستخدام العناصر الموجودة وإضافة عناصر جديدة إلى واجهة الدردشة.
هل ترغب في معرفة ما إذا كنت تتلاعب بواجهة المراسلة بنفسك وأضفت بعض عناصر واجهة المستخدم الرسومية الرائعة إليها؟
[هذا المنشور من Ish Jindal ظهر لأول مرة على Medium وتم إعادة إنتاجه بإذن.]