זה לא דביק, זה דבש! פוסט נוסף בסדרת ההדרכות על UX design. הפעם: על אלמנטים דביקים באתרים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://bit.ly/3571MGC

מה לקחת מזה?

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

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

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

0

אטי הדר

עוד בנושא:

חרדת נטישה: איך להקטין אחוזי נטישה באתר שלך?

המטרה של כל אתר היא לגרום למשתמשים להישאר בו כמה שיותר זמן, אבל מה עושים כשהם נוטשים מהר מדי?

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

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

המשך קריאה
צור קשר. זה כנראה העמוד הכי חשוב באתר

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

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

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

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

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

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

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

המשך קריאה

הוספת תגובה

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