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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://bit.ly/3571MGC

מה לקחת מזה?

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

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

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

0

אטי הדר

עוד בנושא:

SEO vs UX אוהבים או אויבים?

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

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

popup פופאפ באתר. מועיל או מזיק? איך הוא משפר את אחוזי ההמרה וההרשמה לרשימת דיוור ומה עושה פופ אפ לדירוג האתר בגוגל ולחווית המשתמש? מדריך מלא וטיפים להטמעה

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

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

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

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

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

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

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

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

המשך קריאה

הוספת תגובה

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