זה לא דביק, זה דבש! על אלמנטים דביקים באתרים

מאת   אטי הדר
14 באוקטובר 2019

מדי פעם אנחנו רוצים לתת פוקוס ולהרחיב לגבי רכיבים ספציפיים של חווית משתמש, כאלה שיכולים לעשות את ההבדל בין אתר סטנדרטי לאתר מושקע, כזה שהחלקים בו מצטברים לחוויה שלמה ואפקטיבית יותר.

מזמינים אצכם לפוסטים נוספים בסדרה:
טפסים | עמודי צור קשר

הפעם נרחיב על Sticky Header, תפריט נצמד, ניווט קבוע וכפתור קריאה לפעולה שנגלל איתך לאורך האתר.

מה זה בעצם אלמנט סטיקי?

פס ניווט או תפריט שנשאר על המסך גם כאשר אנחנו גוללים למטה או למעלה את העמוד.

אלמנטים מקובעים או דביקים כאלה מאפשרים גישה לפעולה העיקרית ולמידע החשוב ביותר באתר.
אנחנו מעצבים ומתכננים את האתר בשאיפה שהמבקרים בו יגיעו עד סוף המסך, אבל זה לא תמיד כך וחלק יעזבו עוד לפני סוף הגלילה. כדי לא לפספס אותם, כדאי למקם אלמנט שנגלל עם המסך ולא מצריך הגעה עד לתחתית (למשל במרה של כפתורים) או גלילה חזרה לראש האתר כדי להתמצא (במקרה שמדובר בתפריט).

אלמנטים כאלה עוזרים למשתמש להרגיש יותר בטוח בגלילה מטה ומעלה, יותר בשליטה לגבי האופציות שהאתר מציע ונותנים תחושה שכל התוכן החשוב נמצא מולנו כל הזמן.
אלה אלמנטים שלא מפריעים לגלישה החלקה, ומצד שני מושכים את תשומת הלב של המשתמש.

איך עושים את זה נכון ומתי מתאים במיוחד להשתמש באלמנט סטיקי?

  • באתרים שבהם העמודים ארוכים יחסית או בדפי נחיתה ארוכים, הניווט הנצמד מועיל יותר. כלל אצבע: אם התוכן נמשך יותר מ 3 גלילות מסך, סטיקי בתחתית המסך יעזור. בעמודים קצרים הוא רק יפגע.
  • מקמו באלמנט הנצמד רק מה שבאמת חשוב. בחרו את כפתור ה-CTA (הנעה לפעולה) המרכזי או הקישורים החשובים (לדוגמה אם יש חלון חיפוש- כאשר עוברים למצב סטיקי החביאו אותו והשאירו במקומו רק אייקון זכוכית מגדלת).
  • הדגישו את האלמנט הדביק באמצעות רקע מנוגד או צבעוניות חזקה.
  • שמרו על גובה מינימלי. אל תתנו לחלק הדביק להשתלט על יותר מדי שטח. גובה שורה, לא יותר. אבל שימו לב לתת מספיק גובה לטקסט להיות קריא ולכפתורים להיות לחיצים בצורה נוחה.
  • לא לשכוח את המובייל. שמרו על גובה מינימלי עם מספיק מקום ללחיצת האצבע ולא יותר. לעיתים עדיף שהסטיקי ייעלם בגלילה למטה ויחזור רק כשגוללים שוב למעלה.
  • סטיקי של פעולה ספציפית (לא ניווט) פחות מתאים לאתרי תוכן, היות והם מתחרים בתוכן עצמו. השימוש בהם צריך להיות מותאם לאתר הספציפי.

כמה דוגמאות לאלמנטים דביקים מוצלחים כחלק מניווט באתר:

הצמדה למעלה: תפריטים שנצמדים לראש האתר תוך כדי גלילה למטה- עוזרים להתמצאות:

תפריטים נצמדים
מתוך אתר לירון מור

כפתור sticky להורדת הקטלוג באתר שפיתחנו לחברת שתלים בינ"ל. אלפי דפים שונים, ובכולם מלווה אותנו הכפתור, עם התאמה תכנית לפי הצורך:

 כפתור sticky להורדת הקטלוג

הצמדה הצידה: התוכן העיקרי של האתר נותר במיקום קבוע גם כשממשיכים לקרוא בעמוד:

אלמנטים דביקים מתוך אתר recruiters
מתוך אתר recruiters

עוד דוגמה ממש כאן למטה:

טופס הרשמה לעדכונים מהבלוג. בתחילת ימי הבלוג האלמנט הזה לא היה "סטיקי". אבל מרגע שהדבקנו אותו לתחתית האתר, כמות ההרשמות גדלה דרמטית.
זו הזדמנות להזמין אתכם להצטרף ולהירשם

לקריאה נוספת: מחקר על הפסיכולוגיה שמאחורי הסטיקי
https://bit.ly/3G2jlsW

מה לקחת מזה?

לפעמים אלמנט קטן יכול לעשות הבדל גדול.

כדאי לשקול לשלב באתר רכיבים שעוזרים למשתמש לנווט בקלות או כאלה שמגרים אותו לבצע את הפעולה השיווקית המרכזית באתר.

אבל! צריך לתכנן את הסטיקי נכון מבחינת מיקום, גודל ופונקציונליות כדי שהוא יהיה נעים ולא דביק מדי.

0

אטי הדר

עוד בנושא:

אסטרטגיות להגדלת מעורבות גולשים באתר

בפוסט הזה נשתף כמה טיפים מצוינים להשיג יותר מעורבות מבקרים באתר. טיפים שכדאי ליישם בהקדם כדי להשיג את המטרות של הנכס הדיגיטלי שלך

המשך קריאה
SEO vs UX אוהבים או אויבים?

SEO vs UX. המאבק בין מחנה ה UX למחנה ה SEO מתחיל לרוב כשצריך להחליט איזה צרכים מקבלים יותר חשיבות באתר: אלה של המשתמשים או אלה של הבוט של גוגל. דוגמאות להבנת המתח בין SEO ל UX ואיך לשלב UX עם SEO באתר כדי לייצר אתר טוב יותר

המשך קריאה
design UX – המבחן הגדול

במבחן ה UX הגדול שלנו נאסוף מידע לגבי התנהגות המשתמשים, נסביר איך לאתר את האזורים או הרכיבים הבעייתיים שפוגעים בתוצאות ונצביע על השיפורים שאפשר לבצע בחוויית המשתמש.

המשך קריאה
אתרי one pager: יפים, ממירים, קשים לקידום. המדריך המלא עם פתרונות ודוגמאות

One Pager, טרנד עיצובי חזק ביותר. במאמר נבדוק למי מתאים כזה סוג של אתר, מה חשוב שיהיה בו ואיך מקדמים אותו

המשך קריאה
שיווק וחווית משתמש – 4 נתונים מעניינים ומה אפשר ללמוד מהם כדי לשפר עכשיו את האתר שלך?

כמה סטטיסיקות והמסקנות שאפשר להסיק מהן וליישם כבר היום כדי לשפר את האתר שלך

המשך קריאה
שמישות אתרים (Usability): איך לגרום לאתר להיות שימושי יותר?

שמישות גרועה באתר פוגעת באתר ובחווית השימוש בו ולכן תפגע גם בעסק שהאתר מקדם. במדריך נלמד איך לשפר שמישות ולחזק את חווית המשתמש החיובית

המשך קריאה

הוספת תגובה

האימייל לא יוצג באתר.