تحتوي واجهة المستخدم الجيدة لروبوت الدردشة المدعم بالذكاء الاصطناعي على منطقة إدخال واضحة تحتوي على أمثلة للمطالبات، وسلسلة رسائل قابلة للقراءة، وحالات مرئية للتفكير والتدفق، وطرق سهلة للنسخ والتحرير وإعادة المحاولة والإيقاف، والتعامل الصادق مع الأخطاء والحدود. على الهاتف المحمول، اجعل المدخلات قابلة للوصول وتجنب تغطيتها بلوحة المفاتيح.
الوجبات الجاهزة الأساسية
الحالة الفارغة: اشرح ما يمكن أن يفعله الروبوت وقدم أمثلة على المطالبات
الموضوع: فرق واضح بين رسائل المستخدم ورسائل الذكاء الاصطناعي، وعرض قابل للقراءة
الدول: إرسال، تفكير، تدفق، تم، خطأ، توقف
الضوابط: التوقف وإعادة المحاولة والتحرير والنسخ والتعليق على كل إجابة
الهاتف المحمول: الإدخال أعلى لوحة المفاتيح، وأهداف اللمس الكبيرة، والتمرير السهل إلى الأحدث
تشترك معظم واجهات chatbot في نفس الأجزاء: منطقة الإدخال، وسلسلة الرسائل، وعناصر التحكم في كل رسالة. يكمن الاختلاف بين برنامج الدردشة الآلي الجيد والمحبط في تفاصيل تلك الأجزاء وحالاتها.
ابدأ بالحالة الفارغة. لا تعطي الشاشة الفارغة التي تحتوي على مربع نص أي فكرة عما يمكن أن يفعله الروبوت. أضف وصفًا قصيرًا وثلاثة أو أربعة أمثلة للمطالبات التي يمكن للأشخاص النقر عليها.
اجعل الموضوع سهل القراءة. حافظ على عرض الرسالة مريحًا للقراءة، وافصل رسائل المستخدم ورسائل الذكاء الاصطناعي بوضوح، واعرض التنسيق مثل القوائم والتعليمات البرمجية بشكل صحيح، واحتفظ بأحدث رسالة في العرض أثناء تدفق النص الجديد، دون القفز إذا قام الشخص بالتمرير لأعلى.
تصميم كل ولاية. يجب أن يبدو كل من الإرسال والتفكير والبث والانتهاء والتوقف والفشل مختلفًا. يُخبر مؤشر التفكير، الذي غالبًا ما يكون على شكل نقطة متحركة أو مدار، الأشخاص بأن الطلب قد تم استلامه. زر التوقف أثناء البث يعيد التحكم. يجب أن توضح الأخطاء ما حدث وتقدم إعادة المحاولة.
إضافة عناصر تحكم إلى الإجابات: نسخ الموجه السابق وإعادة إنشائه وتحريره وتقديم التعليقات. بالنسبة للمساعد الصوتي، استخدم وسيلة مرئية واضحة للاستماع والتفكير والتحدث حتى يعرف الأشخاص متى يتحدثون. يحتوي ExodeUI، الذي نصنعه، على أجرام سماوية متحركة مجانية لهذه الحالات التي تعمل في React وVue وSwiftUI وFlutter وأطر عمل أخرى.
الأسئلة المتداولة
ما الذي يجعل واجهة chatbot جيدة؟
توقعات واضحة، رسائل مقروءة، تقدم واضح، تصحيح سهل، أخطاء صادقة. السرعة والدقة أمران مهمان، لكن الواجهة تقرر ما إذا كان الأشخاص يفهمون ما يحدث.
هل يجب أن يكون لدى chatbot صورة رمزية؟
يمكن أن يساعد في إعطاء المنتج شخصية وإظهار الحالة، مثل التفكير أو التحدث. اجعله صغيرًا وتأكد من أنه لن يعيق القراءة أبدًا.
كيف يمكنني إظهار أن الذكاء الاصطناعي يفكر؟
استخدم مؤشرًا متحركًا صغيرًا بالقرب من المكان الذي ستظهر فيه الإجابة، ثم قم بالتبديل إلى تدفق النص بمجرد بدء الإخراج. بالنسبة للمهام الطويلة، قم بإظهار الخطوة التي يتم اتباعها.
كيف أقوم بتصميم واجهة مستخدم للمساعد الصوتي؟
استخدم صورة مرئية واضحة لكل حالة: الخمول، والاستماع، والتفكير، والتحدث. اعرض النص، واعرض دائمًا طريقة لإيقاف النص أو التبديل إليه.