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

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

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

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

הפעם נרחיב על Sticky Header, תפריט נצמד, ניווט קבוע- מתי זה נכון?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

לקריאה נוספת: מחקר על הפסיכולוגיה שמאחורי הסטיקי

https://bit.ly/3571MGC

מה לקחת מזה?

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

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

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

0

אטי הדר

עוד בנושא:

תמונות לאתר: מדריך לחיפוש, בחירה ושילוב תמונות שמשפרות עיצוב, תוכן, UX וגם SEO

לתמונות חשיבות עליונה בהצלחה של האתר. אבל איך מוצאים תמונות נכונות? איך מתאימים אותן? כל מה שצריך לדעת על בחירת תמונות לאתר

המשך קריאה
כנס WordCamp Europe 2020

WordCamp Europe הוא הכנס השנתי הגדול של מפתחי ומשתמשי WordPress באירופה. סיכום היום הראשון- ההרצאות, החידושים, החשיפות

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

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

המשך קריאה
טפסים באתר- עשה ואל תעשה

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

המשך קריאה
בקרוב: גוגל תיתן עדיפות לאתרים בעלי חווית משתמש UX טובה יותר

גם בגוגל לקחו את המושכות לידיים ועשו צעד משמעותי בכיוון שיפור עולם הדיגיטל: עדיפות לאתרים עם חווית משתמש UX ועיצוב טובים יותר

המשך קריאה
קידום אתרים SEO ב-2020: מה באמת צריך לדעת?

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

המשך קריאה

הוספת תגובה

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