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