إرشادات التصميم (Dialogflow)

هناك جانبان رئيسيان للتصميم لـ "لوحة الرسم التفاعلية":

  • تصميم المحادثة
  • تصميم واجهة المستخدم (UI)

بإمكان المستخدمين التفاعل مع الإجراء الخاص بك الذي يستخدم "لوحة الرسم التفاعلية" من خلال التحدث إلى "مساعد Google" أو لمس واجهة المستخدم. عليك التأكّد من أنّ محادثتك المنطوقة وواجهة المستخدم تتكامل مع بعضهما البعض وتسهّل على المستخدمين التقدّم في الإجراء الخاص بك بأسلوب ممتع ومشوّق. في هذا القسم، سنتعرف على كيفية تصميم كل من المحادثة وواجهة المستخدم للحصول على أفضل تجربة مستخدم.

هل "لوحة الرسم التفاعلية" مناسبة للإجراء؟

قبل البدء في التصميم، فكر في ما إذا كان الإجراء الخاص بك سيعمل بشكل جيد باستخدام لوحة الرسم التفاعلية. ننصحك باستخدام "لوحة الرسم التفاعلية" في الحالات التالية:

  • سيستفيد الإجراء الخاص بك من تجارب غنية بصريًا بملء الشاشة. تُعدّ ميزة "لوحة الرسم التفاعلية" مثالية لتجارب ملء الشاشة التي تستفيد من المرئيات الغنية، مثل الألعاب الغامرة التي تعتمد على الصوت.
  • يتضمّن الإجراء الخاص بك سلسلة محادثات سهلة. يجب أن يكون المسار الحرج ضمن الإجراء الخاص بك متاحًا من خلال الصوت فقط. فالإجراء الذي يتطلب دقة مكانية، مثل تطبيق رسم، يمكن أن يوفر تجربة صعبة يمكن من خلالها تصميم تدفق حواري بديهي.
  • لا تكفي المكوّنات الحالية والتخصيص (على سبيل المثال، إذا كنت تريد استخدام المكوّنات المرئية والتخصيص الحالية في "مساعد Google"). تعد لوحة الرسم التفاعلية رائعة لعرض سمات العلامة التجارية المرئية الفريدة والعناصر الديناميكية والرسوم المتحركة. بالإضافة إلى ذلك، يمكن استخدام "لوحة الرسم التفاعلية" لتوفير تحديثات لواجهة مرئية واحدة أثناء تقدّم المستخدم في المحادثة.

المتطلّبات

بالرغم من أنّ ميزة "لوحة الرسم التفاعلية" هي بيئة تطوير مألوفة على الويب، يجب مراعاة بعض المتطلبات التي يجب أخذها في الاعتبار قبل تصميم الإجراء الخاص بك.

هناك عنوان في الجزء العلوي من كل تطبيق ويب لوحة رسم يحمل اسم علامتك التجارية. يبلغ ارتفاع هذه المنطقة المحجوزة 56 وحدة بكسل مستقلة الكثافة للأجهزة الجوّالة و96 بكسل مستقل الكثافة لـ Home Hub و120 بكسل مستقل الكثافة للشاشة الذكية. تأكد من اتباع متطلبات الرأس التالية:

  • تأكَّد من عدم إخفاء أي معلومات مهمة أو عناصر تفاعلية خلف العنوان. تحدّد الطريقة getHeaderHeightPx() ارتفاع العنوان.
الشكل 1. أمثلة على كيفية ظهور العنوان في الإجراءات المختلفة

القيود

ضع في اعتبارك هذه القيود قبل تصميم الإجراء الخاص بك باستخدام لوحة الرسم التفاعلية:

  • لا تتوفّر مساحة تخزين محلية للبيانات. نمنع الإجراء من تخزين ملفات تعريف الارتباط والوصول إلى Web Storage API. بسبب هذه القيود، ننصح بأن يدير الإجراء الخاص بك الحالة في الرد التلقائي على الويب ويستخدم الحقل userStorage في AppRequest من أجل حفظ بيانات المستخدمين.
  • عدم استخدام النوافذ المنبثقة أو النوافذ المشروطة: نمنع الإجراء من عرض أي نوافذ أو نوافذ منبثقة. لا ننصح بشدة باستخدام عناصر واجهة المستخدم العادية الأخرى التي تراها عادةً في تطبيقات الويب، مثل لوحات المفاتيح والتقسيم على صفحات.

تصميم محادثتك

عليك أولاً تصميم محادثة الإجراء. لا تزال تجارب "لوحة الرسم التفاعلية" تعيد توجيه الصوت، لذا من المهم أن توجّه محادثتك المستخدم بشكل فعّال خلال الإجراء الخاص بك. يمكنك التفكير في إجراء يستخدم لوحة الرسم التفاعلية كمحادثة مع عناصر مرئية مفيدة. لمزيد من المعلومات حول تصميم المحادثات، راجع صفحة البدء لموقع Conversation Design.

الإرشادات

لتحقيق أفضل تجربة للمستخدم، عليك:

  • اتّبِع عملية تصميم المحادثات وأفضل الممارسات الموضّحة على موقع تصميم المحادثات. وهذا يعني أنّه عليك، من بين أمور أخرى، تنفيذ ما يلي:

    • التأكّد من أنّ تجربة "الإجراء" مناسبة للمحادثة
    • إنشاء شخصية علامة تجارية
    • التعامل مع الأخطاء في محادثتك
    • تجربة ميزة الصوت فقط قبل معرفة الشكل الذي ستبدو عليه من خلال الشاشة

  • حاوِل توفير الإمكانيات نفسها من خلال اللمس والصوت. إذا أمكن، تأكد من تنفيذ كل ما يمكنك فعله عن طريق لمس الشاشة التي يمكنك فعلها أيضًا بصوتك.

  • تأكَّد من أنّ المسار الحرج في الإجراء الخاص بك ممكن باستخدام الصوت. يجب أن يتمكّن المستخدمون من التنقّل بين المسارات الرئيسية للإجراء الخاص بك باستخدام الصوت فقط.

  • التأكُّد من أنّ المستخدم يستطيع استخدام الإجراء الخاص بك بدون صوت أمّا على الأجهزة الجوّالة، قد لا يكون الصوت مفعلاً لدى المستخدم. لهذا السبب، يمكنك إضافة نصوص إلى الإجراء الخاص بك لإرشاد المستخدم.

  • ضع العبء المعرفي في الاعتبار. تجنب الردود الصوتية الطويلة للحد من الخسائر الإدراكية للمستخدم.

تصميم واجهة المستخدم الخاصة بك

بمجرد تصميم محادثتك، يمكنك تصميم واجهة المستخدم لتتكامل معها. أثناء التصميم، ضع في اعتبارك كيف يمكن للحديث المتبادل الطبيعي أن يقود الواجهة المرئية التي تقدمها للمستخدم. إذا كنت تصمّم الشاشات الذكية، ننصحك بالاطّلاع على اعتبارات محدّدة في القسم تصميم الشاشات الذكية.

الإرشادات

لتحقيق أفضل تجربة للمستخدم، عليك:

  • أنشئ تصميمات سريعة الاستجابة. تأكد من أن تصميماتك تعمل إما للوضع الأفقي والرأسي وتحرك من الهواتف الصغيرة إلى الشاشات الأكبر. يجب أن يكون المستخدمون قادرين على قراءة واجهة المستخدم بسهولة لكل نوع من أنواع الأسطح.
  • ضع العبء المعرفي في الاعتبار. لتجنب إرباك المستخدمين، اجعل المعلومات والمحتوى الذي تقدمه على الشاشة منظمة ونظيفة وموجزة.
  • تعديل الإخراج الصوتي لملاءمة الشاشة كن مبدعًا في كيفية استخدامك المرئيات لتكامل الصوت - لا تكتب فقط ما يقال بصوت عالٍ. عندما تكون الشاشة متاحة، قد نكون أكثر إيجازًا مع إخراج الصوت الخاص بنا أكثر من عندما لا يكون أحدهما كذلك.
  • تجنَّب وضع أي معلومات أو مكوّنات مهمة في أسفل الشاشة. على الأجهزة الجوّالة، يظهر نص المستخدم فوق لوحة الميكروفون ويمكن أن يزداد إلى بضعة أسطر. على الرغم من أن هذا النص مؤقت، فتجنب كتابة محتوى مهم باتجاه أسفل الشاشة. يمكن استخدام الأزرار المشابهة لشرائح الاقتراح أسفل الشاشة، لأن إدخال المستخدم هو بديل لاستخدام شرائح الاقتراحات.
  • يمكنك معالجة الأخطاء داخل المحادثة بشكل مرئي. يمكن أن تحدث الأخطاء عندما لا يستجيب المستخدم أو إذا لم تفهمها أو لا تفي بما قاله. اكتشف مكان ظهور مطالبات الخطأ هذه على واجهة المستخدم لديك. يمكن أن يكون هذا في أي مكان تضع فيه مطالبات العرض (على سبيل المثال، في العنوان) أو يمكن أن يكون شيئًا مختلفًا (على سبيل المثال، منطقة خاصة من المحتوى تظهر حسب الحاجة). راجع موقع تصميم المحادثات للحصول على مزيد من النصائح حول التعامل مع الأخطاء.

تصميم يتناسب مع الشاشات الذكية

بينما لا تزال الإرشادات المذكورة أعلاه تنطبق، يجب عليك مراعاة اعتبارات التصميم الأخرى عند التصميم للشاشات الذكية. من المغري التعامل مع الشاشات الذكية مثل الأجهزة اللوحية عند تصميمها لها. في المقابل، الشاشات الذكية هي فئة أجهزة جديدة ومختلفة تمامًا لسببَين:

  • تعمل الشاشات الذكية على تفعيل الصوت، ونظام التشغيل هو "مساعد Google".
  • إنّ الشاشات الذكية ثابتة، وعلى عكس الأجهزة الجوّالة، غالبًا ما توضع في المطبخ أو غرفة النوم عند استخدامها في المنزل.

بسبب هذه الخصائص، لا يكون المستخدمون في بعض الأحيان بالقرب من الجهاز ويتفاعلون مع الشاشات الذكية باستخدام الصوت فقط. قد يقوم المستخدمون أيضًا بإنجاز مهام متعددة أثناء استخدام الشاشات الذكية. من المهم أن تضع هذه الاستخدامات في الاعتبار عند التصميم للشاشات الذكية.

الإرشادات

لتقديم أفضل تجربة ممكنة لمستخدمي الشاشات الذكية، يجب استيفاء المتطلبات التالية:

  • مراعاة التصميم مع التركيز على الصوت أولاً. تصميم "لوحة الرسم التفاعلية" بهدف إعادة توجيه الصوت هو أمر أكثر أهمية للشاشات الذكية. على عكس الجهاز الجوّال، قد يكون المستخدم واقفًا في الغرفة ويتواصل مع الشاشة الذكية فقط من خلال الصوت. لهذا السبب، لا يمكنك دائمًا الاعتماد على أن يلمس المستخدم الجهاز لمواصلة تنفيذ الإجراء، بل عليك التأكد من إمكانية متابعة المستخدمين للإجراء الخاص بك باستخدام الصوت.
  • مراعاة مسافة مشاهدة محدّدة عند التصميم: صمِّم المحتوى على الشاشة الذكية بحيث يمكن مشاهدته من مسافة بعيدة وبناءً على حجم الغرفة، تتراوح مسافة المشاهدة العادية للشاشات الذكية بين 3 و10 أقدام.
    • استخدام حد أدنى لحجم الخط يبلغ 32 نقطة للنص الأساسي مثل العناوين. استخدِم 24 نقطة على الأقل للنص الثانوي، مثل الأوصاف أو الفقرات النصية.
  • ركِّز على نقطة اتصال واحدة في كل مرة: اعرض نوعًا واحدًا من المعلومات أو المهام الأساسية في كل مرة لتقليل عبء العمل المعرفي وإبقاء المحتوى مقروءًا عن بُعد. على سبيل المثال، عندما يسأل المستخدمون "كيف يبدو يومي؟"، يستجيب "مساعد Google" لتقديم محتوى عن الطقس والتقويم والتنقل والأخبار. يشغل كل نوع من أنواع المحتوى وضع ملء الشاشة ويتم عرضه بشكل تسلسلي بدلاً من عرضه كلها دفعة واحدة على الشاشة.

المراجِع

لمزيد من المعلومات حول تصميم إجراء يستخدم "لوحة الرسم التفاعلية"، راجع الموارد التالية: