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