הנחיות לעיצוב (Dialogflow)

יש שני היבטים עיקריים בעיצוב לוח הציור האינטראקטיבי:

  • עיצוב השיחה
  • עיצוב ממשק המשתמש (UI)

המשתמשים יכולים לדבר אל Assistant או לגעת בממשק המשתמש כדי לקיים אינטראקציה עם לוח שיתופי אינטראקטיבי. חשוב לוודא שהשיחה וממשק המשתמש משלימים זה את זה, ועוזרים למשתמשים להתקדם באקשן בקלות ובצורה מרגשת. בקטע הזה נסביר איך לעצב גם את השיחה וגם את ממשק המשתמש כדי לספק את חוויית המשתמש הטובה ביותר.

האם לוח הציור האינטראקטיבי מתאים לפעולה שלי?

לפני שתתחילו לעצב, כדאי לחשוב אם הפעולה תפעל היטב עם לוח הציור האינטראקטיבי. כדאי לשקול את השימוש בלוח הציור האינטראקטיבי אם:

  • אפשר להפיק תועלת מחוויות תצוגה עשירות במסך מלא כדי לשפר את הפעולה. Canvas האינטראקטיבי הוא אידיאלי לחוויות במסך מלא שמפיקות תועלת ויזואלית עשירה, כמו משחקים סוחפים עם הפעלה קולית.
  • לפעולה יש חוויית שיחה אינטואיטיבית. הנתיב הקריטי של הפעולה צריך להיות מאפשר ניווט באמצעות הקול בלבד. בפעולה שמחייבת דיוק מרחבי, כמו אפליקציית ציור, יכולה להיות חוויה קשה לעיצוב רצף שיחה אינטואיטיבי.
  • הרכיבים הקיימים וההתאמה האישית לא מספיקים (לדוגמה, אם רוצים להתעמק מעבר לרכיבים החזותיים ולהתאמה האישית של Assistant). 'לוח שיתופי אינטראקטיבי' הוא כלי מעולה להצגת מאפייני המותג החזותיים הייחודיים, האלמנטים הדינמיים והאנימציות שלך. בנוסף, אפשר להשתמש בלוח הציור האינטראקטיבי כדי לעדכן את הממשק החזותי במהלך השיחה של המשתמשים.

דרישות

'לוח הציור האינטראקטיבי' הוא סביבת פיתוח מוכרת באינטרנט, אבל יש כמה דרישות שצריך להביא בחשבון לפני שמתכננים את הפעולה.

בחלק העליון של כל אפליקציית אינטרנט על קנבס יש כותרת עם שם המותג שלכם. הגובה של האזור השמור הזה הוא 56dp לנייד, 96dp ל-Home Hub ו-120dp לתצוגה חכמה. חשוב לעמוד בדרישה הבאה:

  • מוודאים שלא מוסתרים מאחורי הכותרת מידע חשוב או רכיבים אינטראקטיביים. השיטה getHeaderHeightPx() קובעת את גובה הכותרת.
איור 1. דוגמאות לאופן שבו הכותרת מופיעה בפעולות שונות.

מגבלות

כדאי להביא בחשבון את האילוצים הבאים לפני שמתכננים את הפעולה באמצעות לוח שיתופי אינטראקטיבי:

  • אין אחסון מקומי של נתונים. אנחנו מונעים מהפעולה לאחסן קובצי cookie ולגשת ל-Web Storage API. בהתאם להגבלות האלה, מומלץ שהפעולה תנהל את המצב ב-webhook ולהשתמש בשדה userStorage של AppRequest כדי לשמור את נתוני המשתמשים.
  • ללא חלונות קופצים או אופנים. אנחנו מונעים את ההצגה של חלונות קופצים או חלונות קופצים ב-Action. בנוסף, מומלץ מאוד לא להשתמש ברכיבים רגילים אחרים בממשק המשתמש לניווט, שמופיעים בדרך כלל באפליקציות אינטרנט, כמו מקלדות ועימוד.

עיצוב השיחה

תחילה עליך לעצב את האינטראקציה של הפעולה. השימוש בלוח הציור האינטראקטיבי עדיין מועבר באמצעות פקודות קוליות, ולכן חשוב שהשיחה תנחה את המשתמש באופן אפקטיבי לגבי הפעולה. אפשר לדמות פעולה שמשתמשת בלוח הציור האינטראקטיבי כשיחה עם רכיבים חזותיים שימושיים. למידע נוסף על עיצוב שיחות, עיינו בדף תחילת העבודה באתר Conversation Design.

הנחיות

כדי ליהנות מחוויית המשתמש הטובה ביותר, צריך:

  • לפעול בהתאם לתהליך עיצוב השיחה ולשיטות המומלצות שמפורטות ב אתר לעיצוב שיחות. כלומר, בין היתר, צריך לבצע את הפעולות הבאות:

    • חשוב לוודא שחוויית המשתמש באפליקציה מתאימה לשיחות
    • יצירת פרסונה למותג
    • טיפול בשגיאות בשיחה
    • התנסו בחוויה קולית בלבד לפני שתבדקו איך הוא ייראה באמצעות המסך

  • כדאי לנסות לספק את אותן יכולות באמצעות מגע וקול. אם הדבר אפשרי, ודאו שכל הפעולות שניתן לבצע על ידי נגיעה במסך ניתן לבצע גם באמצעות הקול.

  • ודאו שניתן לבצע את הנתיב הקריטי של הפעולה באמצעות הקול. המשתמשים אמורים להיות מסוגלים לנווט בנתיבים הראשיים של הפעולה באמצעות הקול בלבד.

  • צריך לוודא שהמשתמש יכול להשתמש בפעולה ללא אודיו. במכשירים ניידים, ייתכן שהמשתמש לא הפעיל את האודיו. לכן כדאי להוסיף סקריפטים לפעולה כדי להנחות את המשתמש.

  • חשוב להביא בחשבון עומס קוגניטיבי. הימנעו מתגובות קוליות ארוכות מדי כדי להפחית את המחיר הקוגניטיבי של המשתמש.

עיצוב ממשק המשתמש

אחרי שמעצבים את השיחה, אפשר לעצב את ממשק המשתמש כך שישלים אותה. כשאתם מתכננים את האתר, נסו לחשוב איך השילוב בין הדו-שיח לבין דיאלוג יכול להניע את המשתמש לממשק החזותי שאתם מציגים למשתמש. אם אתם מעצבים מסכים חכמים, כדאי לקרוא את המאמר עיצוב למסכים חכמים בשיקולים ספציפיים.

הנחיות

כדי ליהנות מחוויית המשתמש הטובה ביותר, צריך:

  • יצירת עיצובים רספונסיביים. ודאו שהעיצובים מתאימים לתצוגה לרוחב ולאורך, מטלפונים קטנים למסכים גדולים יותר. המשתמשים צריכים להיות מסוגלים לקרוא בקלות את ממשק המשתמש של כל סוג של פלטפורמה.
  • חשוב להביא בחשבון עומס קוגניטיבי. כדי למנוע עומס על המשתמשים, חשוב לשמור על סדר, נקי ותמציתי של המידע והתוכן שמוצגים במסך.
  • התאמת הפלט הקולי למסך. חשוב להיות יצירתיים בשימוש ברכיבים חזותיים כדי להוסיף לאודיו – לא מספיק לכתוב את מה שנאמר בקול. כשיש מסך זמין, יכול להיות שהפלט הקולי שלנו תמציתי יותר מאשר כשהמסך לא זמין.
  • אל תציבו מידע קריטי או רכיבים חשובים בחלק התחתון של המסך. בנייד, תמליל המשתמש מופיע מעל לוחית המיקרופון ועשוי לכלול עד כמה שורות. התמליל הזה זמני, אבל כדאי להימנע מכתיבה של תוכן חשוב קרוב לתחתית המסך. לחצנים שדומים לצ'יפים של הצעות פועלים בתחתית המסך, מאחר שקלט של משתמשים הוא חלופה לשימוש בצ'יפים של הצעות.
  • טיפול בשגיאות בשיחה באופן חזותי. שגיאות עשויות להתרחש כשהמשתמשים לא מגיבים, אם לא הבנתם אותם או אם לא מילאתם את מה שנאמר. בדקו איפה מוצגות הודעות השגיאה בממשק המשתמש. זה יכול להיות המקום שבו תציבו את הנחיות התצוגה (למשל, בכותרת) או משהו שונה (למשל, אזור תוכן מיוחד שמופיע לפי הצורך). לטיפים נוספים בנושא טיפול בשגיאות, היכנסו לאתר לעיצוב שיחות.

עיצוב למסכים חכמים

ההנחיות שפירטנו כאן עדיין רלוונטיות, אבל כדאי להביא בחשבון גם שיקולי עיצוב אחרים במהלך התכנון עבור מסכים חכמים. מפתה להתייחס במסכים חכמים כמו טאבלטים כשמתכננים אותם. עם זאת, תצוגות חכמות הן קטגוריה חדשה לחלוטין של מכשירים משתי סיבות:

  • במסכים חכמים אפשר להפעיל פקודות קוליות ומערכת ההפעלה של Google Assistant
  • מסכים חכמים נייחים, ובניגוד למכשירים ניידים, ממוקמים בדרך כלל במטבח או בחדר השינה כשמשתמשים בהם בבית

בשל המאפיינים האלה, המשתמשים לפעמים לא נמצאים פיזית ליד המכשיר ויוצרים אינטראקציה עם מסכים חכמים באמצעות הקול בלבד. יכול להיות שמשתמשים מבצעים כמה משימות במקביל במהלך השימוש במסכים חכמים. כשמתכננים מסכים חכמים, חשוב להביא בחשבון את השימושים האלה.

הנחיות

כדי ליהנות מחוויית המשתמש הטובה ביותר במסכים חכמים, צריך:

  • מעצבים מתוך מחשבה על הקול. העיצוב של פעולת הקנבס האינטראקטיבית לצורך הרצה קולית חשוב עוד יותר במסכים חכמים. בניגוד למכשירים ניידים, יכול להיות שהמשתמשים עומדים בחדר ומתקשרים עם המסך החכם רק באמצעות הקול. לכן אי אפשר תמיד להסתמך על כך שהמשתמש יגע במכשיר כדי לבצע את הפעולה, וצריך לוודא שהמשתמשים יכולים להמשיך בפעולה באמצעות הקול.
  • תכנון תוך מחשבה על מרחק צפייה ספציפי. עצב תוכן במסך החכם כך שניתן יהיה להציג אותו מרחוק. בהתאם לגודל החדר, מרחק הצפייה הטיפוסי של מסכים חכמים נע בין 3 ל-3 מטרים.
    • מומלץ להשתמש בגודל גופן מינימלי של 32 נקודות לטקסט ראשי, כמו כותרות. צריך להשתמש ב-24 נק' לפחות לטקסט משני, כמו תיאורים או פסקאות טקסט.
  • התמקדו בנקודת מגע אחת בכל פעם. הצגה של סוג אחד של מידע או משימה עיקריים בכל פעם, כדי להפחית את עומס העבודה הקוגניטיבי וכדי שהתוכן יהיה קריא ממרחק. לדוגמה, כשמשתמשים שואלים "What’s my day like? ", Assistant מגיבה עם תוכן של מזג האוויר, היומן, הנסיעה היומית וחדשות. כל סוגי התכנים מופיעים במסך מלא, ומוצגים ברצף במקום שכולם יופיעו בו-זמנית.

מקורות מידע

למידע נוסף על עיצוב פעולה שמשתמשת בלוח הציור האינטראקטיבי, תוכלו לעיין במקורות המידע הבאים: