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

מוסטפה קורטולדו
מוסטפה קורטולדו

מבוא

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

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

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

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

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

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

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

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

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

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

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

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

התקנת וריאנטים של סמלים מתוך קבוצת הסמלים של Material Design.
וריאציות של סמל ההתקנה שלנו שניתן להוריד מתוך קבוצת הסמלים של עיצוב חדשני תלת-ממדי.

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

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

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

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

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

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

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

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

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

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

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

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

סיכום

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