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