במאמר הזה אנחנו מתארים דפוסי עיצוב ורעיונות שונים שיעזרו לכם להתחיל להשתמש בתצוגת אוויר. חשוב לחשוב היטב איך להציג את התצוגה האווירית ללקוחות, כדי להבטיח רמת מעורבות טובה עם המוצר ושהלקוחות יראו את הערך שלו.
התכונה 'מבט מהאוויר' מוסיפה לאתר רכיב מושך מבחינה ויזואלית, שבו מוצג מבט מלמעלה על נכס ועל הסביבה שלו.
כשמשתמשים רואים נכס בתלת-ממד, הם יכולים לקבל תחושה טובה יותר לגבי המיקום והגודל שלו. התמונות עוזרות גם להדגיש את המאפיינים של הנכס, כמו בריכה, מבני חוץ או חצר גדולה, בנוסף למאפיינים בסביבה כמו כבישים, מקווי מים, הרים או פארקים.
הגברת המעורבות
תצוגת אוויר תהיה גורם וואו עבור הלקוחות שלכם, וכדי ליהנות מהיתרון המלא, צריך להקל ככל האפשר על גילוי התוכן. בקטע הזה נסביר על כמה דפוסי עיצוב להטמעה של תצוגת אוויר כדי להשיג את זה.
כיוון הסרטון
חשוב לקחת בחשבון את כיוון המסך של המכשיר שבו נטען הסרטון של התצוגה האווירית. הצגת סרטון לרוחב במכשיר נייד, במיוחד במסך מלא, עלולה לפגוע בחוויית המשתמש. אם מציגים סרטון ביחס גובה-רוחב שגוי למכשיר, מבזבזים חלק משמעותי משטח המסך.
סרטוני תצוגה אווירית מוצגים בתצוגה לרוחב ולגובה.
בהמשך מוצגת דוגמה להבדל בין הפעלת תצוגת אוויר במכשיר נייד בכיוון המומלץ לבין הפעלה בכיוון שלא מומלץ:
כרטיס מרחף מוטמע
כשמציגים כמה נכסים בתצוגת חיפוש נכסים, כדאי להוסיף כרטיסי מידע מוטמעים שיוצג בהם סרטון של תצוגה אווירית, עם מידע נוסף על הנכס, כמו הכתובת והמחיר שמוצגים בשכבת-על. כך המשתמשים יכולים להתרשם מהנכס במהירות ובקלות, בלי להיכנס לדף הפרטים של הנכס.
בדוגמה הבאה מוצג סמן שמייצג את מתחם Googleplex במאונטיין ויו. כשמעבירים את העכבר מעל הסמן הזה, מופיע כרטיס צף עם סרטון של הנכס בתצוגת אוויר.
אפשר להוסיף אירוע onClick גם לסמן וגם לכרטיס המידע המוטמע, כדי להעביר את המשתמש לדף פרטי הנכס. כך המשתמשים יכולים לקבל מידע נוסף על הנכס ולהחליט אם הוא מתאים להם.
יצירת חוויה שדומה לסיפור בנכס
אם אתם רוצים ליצור חוויה סוחפת באמת לקונים פוטנציאליים, אתם יכולים להציג את הנכס באמצעות חוויה שמזכירה סיפור ומשלבת תמונות וסרטון של תצלומי אוויר.אפשר ליצור את החוויה הזו בדומה לקרוסלת תמונות, באמצעות שילוב של HTML, CSS ו-JavaScript.
בדוגמה שלמעלה, הוספנו את סרטון התצוגה האווירית לאחד השקפים, עם קישור בתחתית לצפייה בפרטים נוספים על הנכס. הכפתור הזה צריך להפנות את המשתמש לדף פרטי הנכס.
ככה זה עובד:
- בוחרים את התמונות. מומלץ לבחור מגוון תמונות שמבליטות את התכונות הטובות ביותר של הנכס.
- יוצרים סרטון של תצוגה אווירית.
- אפשר לשלב תמונות וסרטונים כדי ליצור סטורי.
- לשתף את הסיפור שלכם. אתם יכולים לשתף את הסיפור שלכם עם קונים פוטנציאליים באתר שלכם או בקמפיינים שיווקיים באימייל.
אם תיצרו חוויה שדומה לסיפור בנכס המרכזי שלכם, תוכלו למשוך את תשומת הלב של קונים פוטנציאליים.
הפעלה של תצוגת אוויר בזמן טעינת הדף
ממחקרים שערכנו ב-Google על חוויית המשתמש עולה שהאינטראקציה הכי גבוהה עם המשתמשים מתרחשת כשתצוגת התלת-ממד נטענת כברירת מחדל. מדובר בגורם צורה חדש ומלהיב, ולכן אנחנו רוצים לטעון אותו ברגע שלקוח רוצה לראות את פרטי הנכס. כשחושבים על עלות, אם מאחזרים סרטון של תצוגת אוויר מה-API, תחויבו. אחרי שהסרטון מתחיל לפעול, כדאי להפעיל אותו אוטומטית כדי שהמשתמשים יראו את היתרון.
דפוס אנטי: הסתרת התצוגה האווירית מאחורי לחצן נחשבת לדפוס אנטי, כי היא מחייבת את המשתמשים לבצע שלב נוסף כדי לראות את התצוגה התלת-ממדית. זה יכול להיות מתסכל, וגם לגרום להם לפספס את היתרונות של תצוגות תלת-ממד או לטעות ולחשוב שהתצוגה האווירית היא תוכן סטטי.
מומלץ לטעון את תצוגת האוויר כברירת מחדל כשלקוח רוצה לראות את פרטי הנכס. כך תוכלו לספק חוויית משתמש מעולה ולעזור למשתמשים לקבל החלטה מושכלת לגבי הנכס. כשמעצבים את חוויית ההפעלה האוטומטית, חשוב לזכור שסרטון התצוגה האווירית הוא בנפח של 30MB ומעלה, ויכול להיות שייקח זמן לטעון אותו אצל חלק מהמשתמשים.
אם יש לכם קרוסלת תמונות כחלק מהדף, אפשר לכלול את סרטון התצוגה האווירית כפריט הראשון בקרוסלה, וכך לשלב בקלות את חוויית התלת-ממד בעיצוב הקיים של האתר.
קל להטמיע כפתורים לטעינת תצוגות תלת-ממד, אבל הם עלולים להפחית את רמת המעורבות. כברירת מחדל, מפות Google טוענות תצוגות תלת-ממדיות. לדוגמה, כשמחפשים את בניין האמפייר סטייט, התצוגה בתלת-ממד נטענת באופן אוטומטי, ואפשר לראות תצוגה חלקית של התמונות כשעדיין נמצאים בתצוגה בתלת-ממד. זו דרך מצוינת לספק למשתמשים חוויה סוחפת ומעוררת עניין.
עיצוב הלחצן
אם בוחרים להשתמש בלחצן כדי לגשת לתצוגת אוויר, חשוב לקחת בחשבון את הנקודות הבאות:
- מיקום: הלחצן צריך להיות מקובץ עם לחצנים אחרים שקשורים למיפוי, כדי שהמשתמשים ידעו שהוא קשור למיקום של הנכס.
- מעבר: המעבר לסרטון צריך להיות חלק ורציף. אם כבר יש בדף קטע שבו מוצגות תמונות, מפות ו-Street View, סרטון התצוגה האווירית צריך להופיע באותו קטע.
- הדגשה: מכיוון שמדובר בתוספת חדשה לדף, כדאי להדגיש את הלחצן באמצעות התג 'תכונה חדשה' או תמונה ממוזערת של הסרטון.
- הדגשה: הכפתור צריך להיות מעוצב עם הדגשה בינונית או גבוהה, כי לחיצה עליו תבצע פעולה בולטת. ב-Google Material Design יש הנחיות לעיצוב כפתורים עם רמות שונות של הדגשה.
הנה כמה טיפים נוספים לעיצוב לחצן יעיל של תצוגת אוויר:
- השתמשו בשפה ברורה ותמציתית. התווית של הלחצן צריכה להיות ברורה כדי שהמשתמשים ידעו מה הוא עושה.
- משתמשים בגופן גדול וקריא. הכפתור צריך להיות גדול מספיק כדי שהמשתמשים יוכלו לראות אותו בקלות וללחוץ עליו.
- משתמשים בצבע מנוגד. הלחצן צריך להיות בצבע שונה מהטקסט ומהרקע שמסביב כדי שהוא יבלוט.
- להשתמש בקריאה לפעולה. הלחצן צריך לכלול קריאה ברורה לפעולה, כמו 'צפייה בתצלומי אוויר' או 'צפייה בסרטון'.
שיקולים לגבי מודעות לרשת המדיה
הסרטון בטעינה
כדאי לקחת בחשבון חיבורים איטיים יותר, ולהציג תצוגה מקדימה של תמונה סטטית של הסרטון, ולטעון את החוויה המלאה באינטראקציה של המשתמש, כמו קליק. בנוסף לסרטון של תצלומי האוויר, תהיה לכם גם גישה לתמונה ממוזערת שתוכלו להשתמש בה למטרה הזו.
תהיה לכם גם גישה לסרטון ברזולוציות שונות, כך שתוכלו להשתמש בהן באופן אסטרטגי כדי לצמצם את הזמן שבו המשתמש צריך לחכות לטעינת חוויית הצפייה, במהירויות חיבור שונות.
שיוכים של לוגו
כשמטמיעים את התכונה 'תצוגה אווירית', צריך לוודא שמקפידים על כל התנאים, כולל שיוך הלוגו. פרטים נוספים זמינים בדף הזה.
סיכום
אנחנו מקווים שהמאמר הזה נתן לכם השראה לחשוב איך אתם רוצים להטמיע את התצוגה האווירית באתר שלכם, כדי לעודד התעניינות גבוהה של המשתמשים.
חשוב לחשוב איך המשתמש יגלה את התוכן, ובאיזה פורמט הכי מתאים להציג אותו. כדאי גם לקחת בחשבון את סוג המכשיר שבו הסרטון יופעל, במיוחד את כיוון המסך ואת מהירות החיבור של המשתמש.
השלבים הבאים
הצעות לקריאה נוספת:
תורמים
Google היא זו שכותבת את המאמר הזה. הכותבים המקוריים הם:
המחבר הראשי:
Henrik Valve | Google Maps Platform Solutions Engineer