הארגון לשיווק מכשירים ושירותים (DSM) של Google מפקח על האסטרטגיות של יציאה לשוק במגוון רחב של מוצרים: טלפונים חכמים, שעונים, אוזניות כפתור, טאבלטים, מכשירים לבית חכם ומינויים רלוונטיים. כל השירותים האלה זמינים ב-Google Store וגם אצל ספקי צד שלישי ברחבי העולם. אנשים מקבלים מידע על המוצרים האלה באינטרנט ובחנויות פיזיות.
אחד האתגרים הקבועים לצוות הזה הוא ללמד את הצרכנים והקמעונאים לגבי התרחישים לדוגמה והיתרונות של סביבת החומרה של Google וחוויות AI מתקדמות. כדי לעזור לצרכנים להבין טוב יותר את המוצרים ואת הפונקציונליות, צוות DSM יצר מרחב וירטואלי תלת-ממדי עם טכנולוגיית אינטרנט מתקדמת, כדי להתמודד עם רבים מהאתגרים האלה. במקרה לדוגמה הזה תוכלו ללמוד איך הצוות יצר חוויה סוחפת יותר עבור הלקוחות, והשיק את החוויות החדשות האלה פי ארבעה מהר יותר ובחצי מהעלות של נכסים דיגיטליים מסורתיים.
האתגר: הכרת המוצר
הדרכת אנשי מכירות ולקוחות חדשים במוצרי החומרה של Google לגבי היתרונות של תכונות כמו יכולת פעולה הדדית ו-AI הוא יקר וקשו. אסטרטגיות מסורתיות של חינוך למוצרים מסתמכות על תוכן דיגיטלי שמופק באמצעות מוצרים פיזיים, ולאחר מכן מתארח בפלטפורמות למידה דיגיטליות. פלטפורמות הלמידה האלה מספקות מפרט טכני של מוצרים, תמונות וסרטונים, אבל לא גישה למוצרים פיזיים או למוצרים מחוברים.
הפקה של תוכן כמו וידאו היא יקרת, מורכב ללוקליזציה לשווקים בינלאומיים וכמעט בלתי אפשרי לעשות שימוש חוזר בין מוצרים. כדי ליצור את הנכסים הראשוניים, צריך תקציבים: העברה, מלתחה, חיפוש מקומות, עמלות מיקום, תשלומים לאולפן, צוותי צילום ועבודות פוסט-פרודקטיביות. גם עלויות ההפקה והמשאבים הנדרשים צריכים להביא בחשבון את הלוקליזציה; שינוי הנכסים, המיקומים, המוצרים, התוכן והכישרונות הוא מאתגר במיוחד כשמנהלים את השיווק המסורתי בקנה מידה נרחב. אם מביאים בחשבון שברוב המוצרים הנתמכים מושקות פיצ'רים כל כמה חודשים, הנכסים האלה כבר מיושנים כשהם מוכנים.
גילוי דרכים טובות יותר לשיתוף מידע על מוצרים
צוות DSM ניסה למצוא דרך טובה יותר לשתף מידע על מוצרים, והתנסה בחוויות VR ו-AR באפליקציה. התוצאות היו מבטיחות – גם חיזוק המעורבות וגם הגדלת עגלות הקניות בנקודות המכירה. עם זאת, הורדות של אפליקציות היו חסם כניסה משמעותי למפרסמים וללקוחות, וחוויית השימוש באפליקציה הייתה מוגבלת. כתוצאה מכך, לא הייתה אפשרות להטמיע אותה בנכסים אחרים של צד ראשון או של צד שלישי, כמו store.google.com.
פתרונות קלים עם <model-viewer>
לאחר שזיהו את ההצלחה של מודלים תלת-ממדיים של מוצר חינוכי, הצוות החליט ליישם את הגישה הזו באינטרנט. אחת הדרכים לעשות זאת היא להשתמש ב-<model-viewer> כדי ליצור חוויות תלת-ממדיות עם מוצרים נפרדים.
<model-viewer> הוא רכיב אינטרנט שמאפשר להוסיף מודל תלת-ממדי לדף האינטרנט באופן הצהרתי, וגם לארח את המודל באתר שלכם.
אפשר לראות את זה בפעולה בדף Pixel Fold ב-Google Store, שבו <model-viewer> מאפשר למשתמשים לראות את מכשיר Pixel Fold מכל זווית עם מיקומים מקופלים שונים. היה קל לשלב את המודל התלת-ממדי בשאר חלקי חוויית המשתמש של HTML, עם לחצנים שמספרים סיפור דרך זוויות המצלמה וגרסאות צבעים אינטראקטיביות. עם <model-viewer>, אפשר לספק למשתמשים כל סוג של חוויות שהם יכולים לדמיין.
יצירת המודלים התלת-ממדיים
השלב הראשון בפיתוח של חוויה וירטואלית בתלת-ממד הוא ליצור מודלים תלת-ממדיים של מוצרים. צוות DSM יצר את המודלים התלת-ממדיים שלהם ב-CAD. בשיתוף פעולה הדוק עם המעצבים שהפיקו את המוצר CAD, צוות DSM הצליח לייצא עיבודי פוליגונים נמוכים שניתן היה לבצע בהם אופטימיזציה לאינטרנט. חלק מהשיטות המומלצות לשם כך היו בתחומים הבאים.
- גיאומטריה:
- התמקדו בשיפור הדיוק של הגיאומטריה (הצורה וקנה המידה) מכל זווית.
- יש להימנע משימוש במפות רגילות כדי לקצוות מעוגלים.
- יוצרים מדבקות כגיאומטריה נפרדת.
- צבעים וחומרים:
- המטרה: ייצוג חזותי עקבי של נכסים פיזיים.
- כדאי להשתמש בדינמיקה של התאורה בזמן אמת.
- משתמשים בקבוצות נפרדות של טקסטורה ובחומרים לכל סוג של רשת (אטומים, שקופה, מדבקות).
- אם יש צורך בהתאמות נוספות, כדאי לחזור על עיצובים יחד עם המעצבים המקוריים של ה-CAD.
- גודל הקובץ:
- מייצאים כמודל פוליגונים נמוך בפורמט GLB כדי שאפשר יהיה להשתמש במודל עד
<model-viewer>. - דוחסים את הרשתות הגיאומטריות באופן ידני באמצעות מעצב תלת-ממד, בעזרת ספק או באמצעות תוכנת דחיסה כמו DRACO (OS).
- מייצאים כמודל פוליגונים נמוך בפורמט GLB כדי שאפשר יהיה להשתמש במודל עד
המודלים התלת-ממדיים נמצאים בשימוש לעיתים קרובות בטלפונים ניידים, ולכן הם עברו אופטימיזציה על ידי הגדרה של גודל קובץ מקסימלי במרקמים של 2MB, כדי לתמוך במכשירים מדור קודם ובחיבורי אינטרנט חלשים.
<model-viewer>
צוות DSM משתמש ברכיב האינטרנט <model-viewer> של Google בקוד פתוח כדי להטמיע את המודלים התלת-ממדיים החדשים שנוצרו בדפי האינטרנט שלו. כדי שהמודלים שנוצרו בשלב הראשון יתאימו ל-<model-viewer>, הנכסים צריכים להיות בפורמט gITF או GLB (תוסף .glb). שני הפורמטים קומפקטיים, ניתנים לדחיסה ונטענים במהירות ב-GPU. הרכיב <model-viewer> נתמך בכל הדפדפנים העיקריים לטווח ארוך.
בשלב הזה, האתגר הגדול ביותר שצוות DSM נתקל בו היה שלוח הצבעים של החומרה של Google לא הוצג בצורה מדויקת. בסופו של דבר הצוות גילה שמיפוי הגוונים של ACES (תקן בתעשיית הסרטים) היה אחראי לצבעים האבודים. כדי לפתור את הבעיה, הם פיתחו כלי מיפוי טון נייטרלי חדש של Khronos PBR, שנועד במיוחד לטיפול בחוסרים האלה ולהציג צבעים באופן מדויק במסך, תוך הימנעות מאזורים בולטים ומשינויי גוון המשויכים למיפוי גוונים לינאריים.
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
למידע נוסף על <model-viewer>, עיינו ב-modelviewer.dev. כדי לבדוק את המודלים התלת-ממדיים ולהוריד אתר שלם לתחילת הדרך, נסו את העורך שלנו.
פתרונות כבדים עם שלושה.js
<model-viewer> היא דרך מצוינת ויעילה להציג מודל תלת-ממדי ולבצע איתו אינטראקציה. עם זאת, לפעמים צוות DSM היה זקוק לחוויית אינטרנט סוחפת ומחוברת יותר ממה שאפשר היה עם <model-viewer>. למשל, ההשקה של Nest Mini + C. <model-viewer> יכול לאפשר
ללקוחות פוטנציאליים לחוות מוצר בתלת-ממד באינטרנט, אבל לא יכול היה להראות עד כמה הוא יעיל בשילוב עם מוצרי חומרה אחרים של Google ותכונות AI, כמו ה-Assistant.
לצורך המשימה הזו, הצוות פנה לספרייה שמסתמכת על <model-viewer>, {6/}.js. Three.js הוא מנוע משחק JavaScript בקוד פתוח, והצוות הצליח ליצור מסגרת של נכסים לשימוש חוזר לסביבת בית וירטואלית שמכילה מצלמות, מנורות ורמקולים של Nest בתוך הבית. כך חברי הצוות ניצלו משוב בזמן אמת על האינטראקציה בין המכשירים.
Dialogflow
השלב האחרון ביצירת החוויה המקושרת הוא להוסיף את Google Assistant. כך המשתמשים יכלו לנסות פקודות ותרחישים אותנטיים עם החוויה הווירטואלית המחוברת. עם זאת, הוספה של Google Assistant מהחשבון הקיים של המשתמש תפתח מספר בעיות שקשורות לפרטיות. כדי ליצור פתרון לשמירה על הפרטיות, ב-DSM עבדו עם שירות Google Cloud Dialogflow כדי לחקות את Google Assistant במרחב המשותף. בתרשים הבא מוצג פירוט של האופן שבו אפליקציית האינטרנט השתמשה ב-API של Dialogflow (מותאם מ-Dialogflow Basics). בכל פנייה שיחה, אפליקציית האינטרנט השתמשה בסיווג Intent של Dialogflow וה-API החזירו ביטויים של משתמשי קצה שהוגדרו מראש שתואמים ל-Intent.
במשאבי העזרה של Google Cloud מופיע מידע נוסף על Dialogflow.
תוצאה סופית: iFrame ניתן להטמעה
התוצאה הסופית היא ספרייה של נכסים שאפשר להטמיע בדף אינטרנט באמצעות <model-viewer> או להשתמש בהם בסביבה וירטואלית מלאה כדי לעזור ללקוחות לקבל מידע נוסף על מוצרים ספציפיים ועל האופן שבו המוצרים מתחברים. החוויה היא גם אותנטית, גם ניתנת להתאמה וגם משתלמת. החוויה הווירטואלית הראשונה הזו הושקה במאי 2021, ולמרות שהיא כבר לא מופיעה באתר של Google Store,
תוכלו לנסות אותה.
התוצאות
מאז ההשקה של Nest Mini +C, ב-DSM התאפשר ל-DSM לעשות שימוש חוזר ולהרחיב את המסגרת בשנתיים האחרונות של השקות תיקי ההשקעות של Pixel עם הצלחה הולכת וגדלה. באמצעות איטרציה של הנכסים והחוויות בתלת-ממד האלה, הצוות הצליח עד כה להגדיל פי ארבעה את מספר החוויות האינטראקטיביות של הדרכות המוצרים ולהגדיל פי שלושה את מספר המוצרים שהועילו לטכנולוגיית האינטרנט הזו.
התוצאה הסופית היא הדרכה ממותגת ואותנטית של המוצר, שיש בו יותר קיימוּת, אחידה ואינטראקטיבית מתוך האסטרטגיות הקודמות. במבט קדימה, לצוות DSM יש עכשיו מבחר נרחב של רכיבים של חוויה סוחפת שאפשר להסתגל במהירות ליעדים עסקיים דינמיים. השיפורים האלה אפשרו לצוות DSM להשיק תוכן חדש להדרכת מוצרים במהירות גדולה פי ארבעה, בפחות ממחצית מהעלות מאשר תהליכים מוקדמים ומסורתיים יותר.