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

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

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

טקסט

שם התוסף

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

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

סגנון כתיבה

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

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

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

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

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

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

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

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

הודעות שגיאה

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

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

תוכן עזרה

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

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

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

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

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

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

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

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

תיבות דו-שיח

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

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

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

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

פקדים

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

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

לחצנים

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

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

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

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

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

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

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

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

אזורי טקסט

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

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

שדות טקסט

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

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

מיתוג

בתוסף שלך

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

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

בחנות

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

נגישות

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

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

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