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

מבוא

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

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

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

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

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

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

בפלטפורמות שלנו למחשבים יש תבנית עיצוב שלפיה בכל פעם שאתר טוען 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, ממשק המשתמש שהראינו ברגע שמשתמש החליט להתקין אפליקציית אינטרנט היה מועט יחסית. לכן, הצוות החליט לבחון חוויית התקנה עשירה יותר שתיתן למשתמשים שלנו הקשר לגבי אפליקציית האינטרנט, ותאפשר למפתחים לחגוג את האפליקציות ה-PWA שמתאימות לחוויות נייטיב.

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

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

סיכום

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