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

תוספי עריכה בונים ממשקי משתמש (תפריטים, סרגלי צד ותיבות דו-שיח) באמצעות שירות ה-HTML של Apps Script. מכיוון שהממשקים מפותחים ב-HTML וב-CSS, הם ניתנים להתאמה אישית רבה. עם זאת, כשאתם בונים את ממשק התוספים, עליכם לתכנן אותו באופן שיספק חוויית משתמש מעולה.

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

טקסט

שם התוסף

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

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

סגנון כתיבה

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

כשכותבים טקסט בממשק המשתמש:

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

טיפ לאחר ההתקנה

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

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

בניגוד לפרויקטים רגילים של Apps Script, תוספים לא מופיעים בעורך הסקריפטים או במנהל הסקריפטים; המשתמשים לא יכולים להריץ סקריפטים של תוספים באופן ישיר. במקום זאת, לכל תוסף יש מקום בתפריט התוספים. התפריט (ואולי גם תיבת דו-שיח או סרגל צד) מאפשר למשתמשים ליצור אינטראקציה עם התוסף.

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

הודעות שגיאה

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

  • לא לאפשר למשתמש לראות חריגים בקוד. במקום זאת, אפשר להשתמש בהצהרות try...catch כדי ליירט חריגים, ולאחר מכן להציג הודעת שגיאה למשתמש עם טקסט מוטבע שמעוצב במחלקה error מחבילת ה-CSS של התוספים או מתיבת הדו-שיח התראה.
  • לפני הפרסום, כדאי לוודא שהתוסף לא רושם מידע על תוצאות ניפוי הבאגים בלוח JavaScript. במקום זאת, כדאי להשתמש ברישום ביומן ב-Stackdriver.
מה לא לעשות מה כן לעשות
הודעת שגיאה לא טובה הודעת שגיאה טובה

תוכן עזרה

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

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

ממשקי משתמש בהתאמה אישית

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

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

טקסט בממשק המשתמש

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

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

תיבות דו-שיח

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

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

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

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

אמצעי בקרה

ממשקי משתמש טובים של תוספים משאירים לפקדים שלהם מרחב נשימה. שוליים מספיקים ומרווח פנימי תורמים מאוד, ולעומת זאת אמצעי בקרה צפופים נראים מסובכים מדי. אם יש לכם ספק, תוכלו לשאול את הפריסה מהעורך עצמו. לדוגמה, כשאתם יוצרים תיבות דו-שיח משלכם, כדאי לבדוק תיבות דו-שיח קיימות ב-Google Docs, כמו File > Page setup.

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

לחצנים

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

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

תיבות סימון ולחצני בחירה

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

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

בחירת תפריטים

בחירות הן דרך מצוינת להציע רשימה קצרה של חלופות.

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

אזורי טקסט

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

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

שדות טקסט

השתמשו בשדות טקסט אם המשתמשים צריכים רק להקליד מילה או שתיים.

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

פרטי החברה

בתוסף שלך

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

  • כל ההיבטים של התוסף חייבים לעמוד בהנחיות המיתוג.
  • אין לכלול את המילה "Google" או להשתמש בסמלים של מוצרי Google.
  • הטקסט לא יכול להכיל יותר מכמה מילים, והטקסט צריך להיות מעוצב במחלקה gray מתוך חבילת ה-CSS של התוספים.
  • הגרפיקה צריכה להיות על רקע לבן ולא יותר מ-200 פיקסלים × 60 פיקסלים.
  • כדי להציג תיבות דו-שיח, המיתוג צריך להיות בפינה השמאלית התחתונה.
  • בסרגלי הצד, המיתוג יכול להיות למעלה או למטה.

בחנות

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

נגישות

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

  • כדאי לוודא שאפשר לנווט לכל הפקדים בממשק המשתמש באמצעות המקלדת. צריך להוסיף את tabindex=0 לאמצעי בקרה מותאמים אישית (כמו אלה שנוצרו באמצעות <div>) כדי שהמשתמשים יוכלו להקיש עליהם. בדקו אם יש תמיכה גם במקשים אחרים, כמו חיצים ברשימה.
  • חלק מהאנשים עשויים להשתמש בקורא מסך עם התוסף שלך. לכן, לתמונות צריכים להיות מאפיין alt, ואמצעי הבקרה בהתאמה אישית צריכים לכלול מאפייני ARIA כדי לתאר את השימוש בהם.
  • אין להסתמך רק על צבע כדי להעביר את המצב. השתמשו גם בסמלים ובטקסט.

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