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

מבוא

בתחילת 2020, צוות Chrome למכשירים ניידים ולמחשבים פיתח תוכנית לשיפור החשיפה והמעורבות של אפליקציות אינטרנט מותקנות. בעקבות העבודה שלנו, חלה עלייה של יותר מ-100% במספר ההתקנות של אפליקציות ה-PWA ובמעורבות של המשתמשים בהן. כדי לעשות זאת, ביצענו מחקר על התכונות הקיימות, הרצנו ניסויים של בדיקות A/B ושיחות עם משתמשים כדי לקבל תובנות לגבי התפיסות והציפיות של המשתמשים. במאמר הזה נסביר איך הגענו לשם.

שפת ההתקנה המאוחדת

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

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

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

סמל ההתקנה במחשב

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

סמל הפלוס של ההתקנה המקורית.
סמל הפלוס המקורי להתקנה.

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

באג בסרגל הכתובות עם סמלי זום והתקנה.
באג בסרגל הכתובות עם סמלי זום והתקנה.

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

גילינו גם שהמשתמשים משייכים בעיקר תמונות כמו חצים ומכשירים להתקנה. על סמך המסקנות האלה, הרצנו בדיקת A/B/C ב-Chrome, והשווינו בין העיצוב הקיים לשתי חלופות. בחרנו באפשרות של החץ שמצביע למטה לתוך צג, שהביצועים שלה היו טובים בהרבה משתי האפשרויות האחרות. כמו כן, ראינו ירידה במספר הפעמים שבהן משתמשים סגרו את ממשק המשתמש של ההתקנה עם הסמל החדש.

התקנה של וריאנטים של סמלים מתוך קבוצת הסמלים של Material Design.
גרסאות שונות של הסמליות של התקנות, שאפשר להוריד מתוך קבוצת הסמלים שלנו בסגנון Material Design.

התוצאה היא העיצוב שאתם רואים היום, שבעקבותיו שיעור ההתקנות של אפליקציות PWA הוכפל בהשוואה לאתרים. הוספנו את הסמל הזה ואת הסמל המקביל לנייד לקבוצת הסמלים של Material Design, כדי לאפשר לקהילה להשתמש בסמליות שמצאנו הכי מעניינת.

כמובן שסמל אחד לא ישנה את העולם, ולכן אנחנו ממשיכים לתכונה הבאה.

עזרה במוצר עצמו

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

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

כשמשתמש מבקר באתר באופן קבוע, Chrome משתמש בשירות שנקרא התעניינות באתר. המדד הזה מספק מידע על מידת ההתעניינות של משתמש באתר. בדף chrome://site-engagement/ תוכלו לראות את האתרים שבהם אתם מבקרים באופן קבוע. בעזרת הציונים האלה אנחנו יכולים לקבוע אם משתמש מתעניין באתר מסוים. אם האתר היה אפליקציה לנייד (PWA) והמשתמש היה מעורב, היינו מציגים לו את ממשק המשתמש של העזרה במוצר. כך הצלחנו להתמקד רק במשתמשים שהתעניינו באתר, ולא להטריד משתמשים שעשויים לבקר באתר רק פעם אחת.

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

ממשק משתמש עשיר יותר של התקנה

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

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

ממשק משתמש עשיר יותר להתקנה.
ממשק משתמש עשיר יותר של התקנה, במצבים מכווץ ומורחב.

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

סיכום

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