פריט לא לחיץ בתפריט ניווט – למה, למה לא ואיך?

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

שיתוף ב facebook
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

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

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

תפריט עם תת תפריט

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

פריט לא לחיץ – למה כן?

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

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

פריט לא לחיץ – למה לא?

עם זאת, זה לא תמיד חכם לוותר על עמוד ראשי, מכמה סיבות:

  1. UI/UX – משתמשים רבים תופסים פריטים בתפריט כדבר לחיץ. הם יכולים להתבלבל מכך שהם לוחצים על הפריט פעם – פעמיים ולא עוברים לעמוד המתאים (כי העמוד לא קיים). נכון, במעבר עכבר נפתח תפריט משנה, ובסוף מבינים מה צריך לעשות, אבל הרגע של חוסר האוריינטציה עלול ליצור חוויה לא טובה. זו הסיבה המרכזית בגללה אני בעד ליצור עמוד עבור כל פריט בתפריט.
  2. גם אם אין תוכן "טבעי" שתפור על העמוד הראשי, עמוד ראשי הוא הזדמנות ליצור לובי. הלובי הוא חדר כניסה בו המשתמש יכול "לטעום" ממה שמחכה לו בעמודים הפנימיים, ולהחליט על סמך זה איפה הוא רוצה לבקר. מצד שני, משתמש יוכל לדלג על הלובי ולהיכנס ישר ל"חדרים" – אם הוא יכנס ישר לעמוד פנימי לא יגרם שום נזק, כי כל התוכן החשוב נמצא בעיקר בעמודים הפנימיים.
  3. אופטימיזציה למנועי חיפוש – יש סברה שעמוד ראשי, שהתוכן שלו מכיל קישורים אל העמודים הפנימיים, עושה טוב ל-SEO (חשוב שהתוכן שלו יהיה מקורי ולא מועתק מהעמודים הפנימיים).

מה אפשר ללמוד מהחברות הגדולות?

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

אתרים בהם אין עמוד ראשי עבור הפריטים הראשיים בתפריט

  • IBM – ארבעה פריטים ראשיים. כולם פותחים במעבר עכבר מגה-תפריטים. כולם לא לחיצים. אין עמודים ראשיים.
  • SalesForce – חמישה פריטים בתפריט. כל אחד מהם אינו לחיץ ופותח במעבר עכבר מגה-תפריט. אין עמודים ראשיים.
  • Microsoft – חמישה פריטים ללא תפריטי משנה, ופריט אחד שפותח מגה-תפריט בקליק (ולא במעבר עכבר)
  • Intel – חמישה פריטים בתפריט הראשי. כל אחד מהם פותח בלחיצה (ולא במעבר עכבר) מגה-תפריט. אין עמודים ראשיים.
  • Adobe – חמישה פריטים בתפריט הראשי. כל פריט ראשי פותח בלחיצה (ולא במעבר עכבר) מגה-תפריט. אין עמודים ראשיים.
  • Samsung – שבעה פריטים בתפריט. כל אחד מהם פותח בלחיצה (ולא במעבר עכבר) מגה-תפריט. אין עמודים ראשיים.
  • Dell – שבעה פריטים בתפריט. כל אחד מהם פותח בלחיצה (ולא במעבר עכבר) מגה-תפריט. אין עמודים ראשיים.
  • Huawei -חמישה פריטים בתפריט הראשי. כל אחד מהם פותח בלחיצה (ולא במעבר עכבר) מגה-תפריט. אין עמודים ראשיים.

אתרים בהם יש עמוד ראשי עבור הפריטים הראשיים בתפריט

  • SAP – שמונה פריטים בתפריט הראשי. כולם פותחים במעבר עכבר מגה-תפריט. כולם לחיצים ומובילים לעמוד ראשי של אותו אזור.
  • Sony – שבעה פריטים בתפריט. כולם פותחים במעבר עכבר מגה-תפריט. כולם לחיצים ומובילים לעמוד ראשי של אותו אזור.

אתרים עם מבנה ניווט יחודי

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

ממצאים

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

הערות

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

איך עושים פריט לא-לחיץ באתר וורדפרס?

בוורדפרס מגדירים תפריטים בלוח הבקרה > עיצוב > תפריטים.

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

תפריטי משנה בוורדפרס

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

  1. בחירה בתבנית / תוסף שמאפשרים באופן מובנה פתיחה של תפריט משנה בקליק – מבחינת נגישות זה רעיון טוב (צריך לבחון את הישום הספציפי ולהעריך נגישות)
  2. הוספה של פריט ב"קישורים מותאמים" והכנסה של סולמית (#) – הבעייה בפיתרון הזה היא שכאשר משתמש לוחץ על הפריט בתפריט נוספת סולמית לשורת הכתובת ועלולה להיווצר קפיצה קטנה של המסך. אולי אני פדנט, אבל בעיני זה מרגיז.
    תפריטים בוורדפרס - קישורים מותאמים - סולמית עבור פריט לא לחיץ
  3. השארה של הפריט ריק מURL, ע"י שמירה של סולמית (#) ואח"כ מחיקה שלה ושמירה מחודשת – זהו טריק ידוע שפותר את הבעייה שהסולמית יוצרת, ואם תחפשו פיתרון בגוגל, זה מה שתמצאו. אבל יש לפיתרון הזה בעייה ענקית – הוא פוגע בנגישות בכך שהוא משבש את האפשרות לניווט באמצעות מקלדת.

ויש גם אפשרות רביעית, שאותה אני רוצה להציע לכם:

  1. גשו ללוח הבקרה > עיצוב > תפריטים.
  2. צרו קישור מותאם עם סולמית ולחצו על כפתור הוספה לתפריט.
  3. כעת, הקליקו על הפריט שהוספתם לתפריט על מנת להרחיב אותו. תחת מחלקות CSS הזינו not-clickable
    כעת, הפריט הזה מובדל משאר הפריטים בתפריט. יש לו קלאס יחודי, מזהה באמצעותו ניתן להבדיל בינו ובין הפריטים האחרים בתפריט.
    פריט לא לחיץ עבור תפריטי משנה בוורדפרס - קלאס not-clickable
    אם שדה מחלקות CSS אינו מופיע לכם (וזה סביר מאוד שהוא לא יופיע כברירת מחדל) עליכם להפעיל אותו באמצעות לחיצה על כפתור אפשרויות תצוגה בקצה העליון של המסך וסימון של מחלקות CSS.
  4. הזינו את הסקריפט הבא (באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):
    
    <script>
       // Not clickable menu item
       jQuery( ".not-clickable > a" ).click(function(){
          event.preventDefault();
       }); 
    </script>
    

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

  5. אין מגבלה על כמות הפריטים שניתן להגדיר להם את המחלקה not-clickable. את הסקריפט מספיק להכניס פעם אחת והוא ישפיע על כל הפריטים.
  6. התוצאה: התפריט נשאר נגיש ונוח לניווט באמצעות המקלדת. חוויית המשתמש לא רעה.

סיכום

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

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

שיתוף   //

שיתוף ב facebook
שיתוף ב whatsapp
שיתוף ב linkedin
שיתוף ב email

עוד באותו נושא
//

נשמח לספק לחברה שלך פתרונות מקצועיים בהתאמה אישית.

אלחנן, מנהל הסטודיו, יחזור אליך בשעות הקרובות וישמח לשוחח איתך.

דילוג לתוכן