הארגון Devices and Services Marketing (DSM) של Google אחראי על אסטרטגיות השיווק של מגוון רחב של מוצרים: טלפונים חכמים, שעונים, אוזניות כפתור, טאבלטים, מכשירים לבית חכם ומינוי רלוונטיים. כל המוצרים האלה זמינים דרך Google Store וגם דרך ספקים גלובליים של צד שלישי. אנשים מקבלים מידע על המוצרים האלה באינטרנט ובחנויות פיזיות.
אחד האתגרים המתמידים של הצוות הזה הוא להסביר לצרכנים ולקמעונאים את התרחישים לדוגמה ואת היתרונות של הסביבה העסקית של חומרת Google ושל חוויות מתקדמות של AI. כדי לעזור לצרכנים להבין טוב יותר את המוצרים והפונקציונליות, צוות DSM יצר מרחב וירטואלי תלת-ממדי עם טכנולוגיית אינטרנט מתקדמת כדי להתמודד עם הרבה מהאתגרים האלה. בניתוח המקרה הזה תוכלו ללמוד איך הצוות יצר חוויה מעמיקה יותר ללקוחות, והשיק את החוויות החדשות האלה פי ארבעה מהר יותר ובמחצית מהעלות של נכסים דיגיטליים מסורתיים.
האתגר: חינוך בנושא המוצר
קשה ומסוכן להסביר ללקוחות ולנציגי מכירות שלא מכירים את מוצרי החומרה של Google על היתרונות של תכונות כמו יכולת פעולה הדדית ובינה מלאכותית. אסטרטגיות חינוכיות רגילות למוצרים מבוססות על תוכן דיגיטלי שנוצר באמצעות מוצרים פיזיים, ולאחר מכן מתארח בפלטפורמות למידה דיגיטליות. פלטפורמות הלמידה האלה מספקות תמונות, סרטונים ומפרטים טכניים של מוצרים, אבל לא גישה למוצרים פיזיים או מחוברים.
ייצור תוכן לימודי כמו סרטונים הוא יקר, קשה מאוד לבצע לו לוקליזציה לשווקים גלובליים וקשה כמעט להשתמש בו שוב במוצרים שונים. כדי ליצור את הנכסים הראשוניים, צריך תקציבים לליהוק, לתלבושות, לאיתור מיקומים, לדמי מיקום, לדמי אולפן, לצוותים של צילום ולעבודות שלאחר הפקה. עלויות ההפקה והתוצרים צריכות לכלול גם את העלויות של תהליך הלוקליזציה. שינוי הנכסים, המיקומים, המוצרים, הטקסט והכישרונות הוא אתגר משמעותי במיוחד לניהול בקנה מידה רחב בשיווק מסורתי. בנוסף, כשמביאים בחשבון שלרוב המוצרים הנתמכים יש השקות של תכונות חדשות כל כמה חודשים, הנכסים האלה כבר לא מעודכנים כשהם מוכנים.
דרכים טובות יותר לשיתוף מידע על מוצרים
כדי למצוא דרך טובה יותר לשתף מידע על מוצרים, צוות 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>
, הנכסים צריכים להיות בפורמט glTF או GLB (סיומת .glb). שני הפורמטים הם קומפקטיים, ניתנים לדחיסה וטעונים במהירות ב-GPU. כל הדפדפנים העיקריים הנתמכים נתמכים ברכיב <model-viewer>
.
בשלב הזה, האתגר הגדול ביותר שבו נתקל צוות DSM היה שהעיצוב של לוח הצבעים של החומרה של Google לא היה מדויק. בסופו של דבר, הצוות גילה שמיפוי הטונים של ACES (תקן בתעשיית הקולנוע) אחראי לבעיית הצבעים. כדי לפתור את הבעיה, הם פיתחו ממיר צבעים חדש של Khronos PBR Neutral Tone Mapper שמיועד במיוחד לטפל בחסרונות האלה ולהציג צבעים בצורה מדויקת במסך, תוך הימנעות מהדגשים מודגשים מדי ומשינויי גוון שקשורים למיפוי צבעים לינאריים.
<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. כדי לבדוק את המודלים התלת-ממדיים שלכם ולהוריד אתר התחלה שלם, תוכלו לנסות את העורך שלנו.
פתרונות כבדים עם three.js
<model-viewer>
היא דרך מצוינת עם ביצועים טובים להצגת מודל תלת-מימדי אחד וליצירת אינטראקציה איתו. עם זאת, לפעמים צוות DSM נזקק לחוויית אינטרנט עשירה ומחוברת יותר ממה שאפשר לקבל באמצעות <model-viewer>
. דוגמה לכך היא ההשקה של Nest Mini + C. <model-viewer>
אפשר להציג ללקוחות פוטנציאליים מוצר בתלת-ממד באינטרנט, אבל אי אפשר להציג את התועלת שלו בשילוב עם מוצרי חומרה אחרים של Google ותכונות AI כמו Assistant.
כדי לבצע את המשימה הזו, הצוות פנה לספרייה שעליה מבוססת <model-viewer>
, three.js. Three.js הוא מנוע משחקים בקוד פתוח של JavaScript, והצוות הצליח ליצור מסגרת של נכסים לשימוש חוזר לסביבת בית וירטואלית שמכילה מצלמות, נורות ורמקולים של Nest לשימוש בתוך הבית. כך הצוות יכול היה לקבל משוב בזמן אמת על האינטראקציה בין המכשירים.
Dialogflow
השלב האחרון ביצירת חוויית השימוש המשולבת הוא הוספת Google Assistant. כך המשתמשים יכלו לנסות פקודות ותרחישי עבודה אמיתיים בחוויה הווירטואלית המקושרת. עם זאת, הוספת Google Assistant מהחשבון הקיים של המשתמש תיצור כמה בעיות פרטיות. כדי ליצור פתרון שמתמקד בשמירה על הפרטיות, צוות DSM עבד עם שירות Dialogflow של Google Cloud כדי לחקות את Google Assistant במרחב הזה. בדיאגרמה הכללית הבאה מוצג איך אפליקציית האינטרנט השתמשה ב-API של Dialogflow (התאמה מהיסודות של Dialogflow). בכל תור בשיחת הצ'אט, אפליקציית האינטרנט השתמשה בסיווג הכוונה של Dialogflow וה-API החזיר ביטויים מוגדרים מראש של משתמשי קצה שתואמים לכוונת הדיבור.
מידע נוסף על Dialogflow זמין במסמכי התיעוד של Google Cloud.
התוצאה הסופית: iFrame שניתן להטמיע
התוצאה הסופית היא ספרייה של נכסים שאפשר להטמיע בדף אינטרנט באמצעות <model-viewer>
או להשתמש בה בסביבה וירטואלית מלאה כדי לעזור ללקוחות לקבל מידע נוסף על מוצרים ספציפיים ועל האופן שבו המוצרים מקושרים זה לזה. החוויה היא אותנטית, ניתנת להתאמה וחסכונית. חוויית הווירטואליות הראשונה הושקה במאי 2021, והיא כבר לא זמינה באתר של Google Store, אבל עדיין אפשר לנסות אותה.
התוצאות
מאז ההשקה של Nest Mini +C, צוות DSM הצליח לעשות שימוש חוזר במסגרת ולהרחיב אותה בשנתיים האחרונות במהלך השקות של מכשירים מ-Pixel Portfolio, עם הצלחה גוברת. בעזרת הפעלת הגרסאות החדשות של הנכסים והחוויות האלה בתלת-ממד, הצוות הצליח עד עכשיו להכפיל פי ארבע את מספר החוויות האינטראקטיביות של חינוך בנושא מוצרים, ולהכפיל פי שלושה את מספר המוצרים שנהנים מטכנולוגיית האינטרנט הזו.
התוצאה הסופית היא תוכן ממותג ואותנטי בנושא המוצר, שמתאים למגוון הולך וגדל של תרחישים לדוגמה, באופן שתואם יותר לצרכים שלכם, עקבי יותר ואינטראקטיבי יותר בהשוואה לשיטות קודמות. בנוסף, לצוות DSM יש עכשיו תיק מוצרים עשיר של רכיבים לחוויה מעשירה, שאפשר להתאים במהירות ליעדים העסקיים הדינמיים. השיפורים האלה מאפשרים לצוות DSM להשיק תוכן חינוכי חדש על מוצרים במהירות פי ארבעה ובמחיר של פחות ממחצית מהעלות של התהליכים הקודמים והמסורתיים יותר.