מדי פעם אנחנו רוצים לתת פוקוס ולהרחיב לגבי רכיבים ספציפיים של חווית משתמש, כאלה שיכולים לעשות את ההבדל בין אתר סטנדרטי לאתר מושקע, כזה שהחלקים בו מצטברים לחוויה שלמה ואפקטיבית יותר.
מזמינים אצכם לפוסטים נוספים בסדרה:
טפסים | עמודי צור קשר
הפעם נרחיב על Sticky Header, תפריט נצמד, ניווט קבוע וכפתור קריאה לפעולה שנגלל איתך לאורך האתר.
מה זה בעצם אלמנט סטיקי?
פס ניווט או תפריט שנשאר על המסך גם כאשר אנחנו גוללים למטה או למעלה את העמוד.
אלמנטים מקובעים או דביקים כאלה מאפשרים גישה לפעולה העיקרית ולמידע החשוב ביותר באתר.
אנחנו מעצבים ומתכננים את האתר בשאיפה שהמבקרים בו יגיעו עד סוף המסך, אבל זה לא תמיד כך וחלק יעזבו עוד לפני סוף הגלילה. כדי לא לפספס אותם, כדאי למקם אלמנט שנגלל עם המסך ולא מצריך הגעה עד לתחתית (למשל במרה של כפתורים) או גלילה חזרה לראש האתר כדי להתמצא (במקרה שמדובר בתפריט).
אלמנטים כאלה עוזרים למשתמש להרגיש יותר בטוח בגלילה מטה ומעלה, יותר בשליטה לגבי האופציות שהאתר מציע ונותנים תחושה שכל התוכן החשוב נמצא מולנו כל הזמן.
אלה אלמנטים שלא מפריעים לגלישה החלקה, ומצד שני מושכים את תשומת הלב של המשתמש.
איך עושים את זה נכון ומתי מתאים במיוחד להשתמש באלמנט סטיקי?
- באתרים שבהם העמודים ארוכים יחסית או בדפי נחיתה ארוכים, הניווט הנצמד מועיל יותר. כלל אצבע: אם התוכן נמשך יותר מ 3 גלילות מסך, סטיקי בתחתית המסך יעזור. בעמודים קצרים הוא רק יפגע.
- מקמו באלמנט הנצמד רק מה שבאמת חשוב. בחרו את כפתור ה-CTA (הנעה לפעולה) המרכזי או הקישורים החשובים (לדוגמה אם יש חלון חיפוש- כאשר עוברים למצב סטיקי החביאו אותו והשאירו במקומו רק אייקון זכוכית מגדלת).
- הדגישו את האלמנט הדביק באמצעות רקע מנוגד או צבעוניות חזקה.
- שמרו על גובה מינימלי. אל תתנו לחלק הדביק להשתלט על יותר מדי שטח. גובה שורה, לא יותר. אבל שימו לב לתת מספיק גובה לטקסט להיות קריא ולכפתורים להיות לחיצים בצורה נוחה.
- לא לשכוח את המובייל. שמרו על גובה מינימלי עם מספיק מקום ללחיצת האצבע ולא יותר. לעיתים עדיף שהסטיקי ייעלם בגלילה למטה ויחזור רק כשגוללים שוב למעלה.
- סטיקי של פעולה ספציפית (לא ניווט) פחות מתאים לאתרי תוכן, היות והם מתחרים בתוכן עצמו. השימוש בהם צריך להיות מותאם לאתר הספציפי.
כמה דוגמאות לאלמנטים דביקים מוצלחים כחלק מניווט באתר:
הצמדה למעלה: תפריטים שנצמדים לראש האתר תוך כדי גלילה למטה- עוזרים להתמצאות:
כפתור sticky להורדת הקטלוג באתר שפיתחנו לחברת שתלים בינ"ל. אלפי דפים שונים, ובכולם מלווה אותנו הכפתור, עם התאמה תכנית לפי הצורך:
הצמדה הצידה: התוכן העיקרי של האתר נותר במיקום קבוע גם כשממשיכים לקרוא בעמוד:
עוד דוגמה ממש כאן למטה:
טופס הרשמה לעדכונים מהבלוג. בתחילת ימי הבלוג האלמנט הזה לא היה "סטיקי". אבל מרגע שהדבקנו אותו לתחתית האתר, כמות ההרשמות גדלה דרמטית.
זו הזדמנות להזמין אתכם להצטרף ולהירשם 
לקריאה נוספת: מחקר על הפסיכולוגיה שמאחורי הסטיקי
https://bit.ly/3G2jlsW
מה לקחת מזה?
לפעמים אלמנט קטן יכול לעשות הבדל גדול.
כדאי לשקול לשלב באתר רכיבים שעוזרים למשתמש לנווט בקלות או כאלה שמגרים אותו לבצע את הפעולה השיווקית המרכזית באתר.
אבל! צריך לתכנן את הסטיקי נכון מבחינת מיקום, גודל ופונקציונליות כדי שהוא יהיה נעים ולא דביק מדי.
