תפריט ניווט הוא רשימת הקישורים הראשית של האתר — בדרך כלל בראש כל עמוד — שמראה לגולש מה יש באתר ואיך מגיעים לכל חלק. תפריט טוב משתמש בשמות שהלקוח מבין, מכיל רק את העמודים החשובים, ועובד באותה קלות בטלפון, במחשב ובמקלדת בלבד. הוא גם אחד הסימנים החזקים לגוגל לגבי מבנה האתר ואילו עמודים חשובים בו.
עקרונות לתפריט ראשי
- שמות של הלקוח, לא של העסק. "שירותים" ו"צור קשר" מובנים מיד; "הפתרונות שלנו" ו"העולם שלנו" — לא.
- מעט פריטים ברמה העליונה. כל פריט נוסף מקשה על הסריקה. עדיף לקבץ תחת כותרת.
- סדר לפי חשיבות: השירותים לרוב ראשונים, וצור קשר — בולט, לרוב ככפתור.
- עקביות: אותו תפריט, באותו מקום, בכל עמוד.
- סימון העמוד הנוכחי, כדי שהגולש יידע איפה הוא.
תפריט במובייל: המבורגר או ניווט גלוי?
בטלפון אין מקום לתפריט מלא, ולכן רוב האתרים מסתירים אותו מאחורי אייקון "המבורגר". Nielsen Norman Group בדקו את זה על 179 משתמשים בשישה אתרים, ומצאו שהסתרת הניווט פוגעת בחוויה — פחות במובייל מאשר בדסקטופ, אבל בצורה שמשתנה מאוד בין אתרים. שיעור השימוש בניווט נע בין 89% באתר אחד ל-44% באתר שבו כפתור התפריט היה קטן ולא בולט. האתרים שהצליחו יותר שילבו ניווט גלוי (כמה קישורים מרכזיים) עם תפריט מוסתר לשאר.
המסקנה המעשית:
- אייקון תפריט גדול, בולט, במקום צפוי — ורצוי עם המילה "תפריט".
- הפעולה החשובה ביותר (טלפון, וואטסאפ, "צור קשר") גלויה גם בלי לפתוח את התפריט.
- בדסקטופ — תפריט גלוי, לא המבורגר.
תפריט נפתח ומגה-מנו
| סוג | מתאים ל | לשים לב |
|---|---|---|
| תפריט שטוח | אתר תדמית עם מעט עמודים | הכי פשוט ונגיש |
| תפריט נפתח (Dropdown) | קטגוריה עם כמה עמודי משנה, כמו "שירותים" | חייב לעבוד בלחיצה ובמקלדת, לא רק במעבר עכבר |
| מגה-מנו | חנויות, פורטלים, אתרים עם הרבה קטגוריות | קבוצות עם כותרות; לא להפוך אותו למפת אתר |
באתר הזה, למשל, "שירותים" הוא תפריט נפתח שמכיל את עמודי השירות לפי סדר, לצד פרויקטים, בלוג ואודות — וכפתור פנייה ("בואו נדבר") בולט בנפרד.
נגישות של תפריט
- הכול נגיש במקלדת: Tab עובר בין הפריטים, Enter פותח תת-תפריט, Escape סוגר.
- כפתור שפותח תפריט מסומן ככפתור, עם מצב פתוח/סגור (
aria-expanded). - אזור הניווט מסומן כ-
<nav>, עם קישור "דלג לתוכן" לפניו. - פוקוס גלוי על כל פריט.
תפריט שנפתח רק במעבר עכבר הוא אחת התקלות הנפוצות בבדיקות נגישות. ראו גם הנגשת אתר וורדפרס.
תפריט, מבנה האתר וגוגל
התפריט משקף את מבנה האתר: אם עמוד שירות חשוב לא מופיע בו, לא בתפריט הנפתח ולא בשום ניווט — סביר שגם גוגל יתייחס אליו כפחות חשוב. מצד שני, תפריט שמכיל מאה קישורים לא עוזר לאף אחד. המבנה הנכון הוא היררכי: תפריט לעמודי הרמה העליונה, פירורי לחם שמראים את המיקום, וקישורים פנימיים בתוך התוכן. באתרים גדולים, גם חיפוש פנימי הופך לחלק מהניווט.
טעויות נפוצות
- שמות יצירתיים שאף אחד לא מבין.
- "דף הבית" כפריט ראשון — הלוגו כבר מקשר לדף הבית.
- תפריט מובייל שמכסה את המסך ואין לו כפתור סגירה ברור.
- קישורים לעמודים ריקים או ל"בקרוב".
- תפריט שמתעדכן ידנית ושוכחים להוסיף אליו עמוד שירות חדש.
תפריט באתר בעברית ובאתר רב-לשוני
- כיוון: באתר בעברית התפריט מתחיל מימין, ותתי-התפריטים נפתחים בכיוון הנכון. אייקון חץ "קדימה" מצביע שמאלה.
- מעבר שפה: בורר שפות מציג כל שפה בשמה המקורי — "English", "Русский" — ומוביל לגרסה המקבילה של אותו עמוד, לא לדף הבית של השפה. ראו אתר בכמה שפות.
- אורך מילים: אותו תפריט בשפה אחרת יכול להיות ארוך בהרבה, ולכן בודקים אותו בכל שפה.
תפריט שמתעדכן מעצמו, או בכוונה
בוורדפרס, התפריט מנוהל במסך ייעודי, וזה יתרון: אפשר לשנות סדר ושמות בלי מפתח. אבל זה גם אומר שמישהו צריך לזכור לעדכן אותו. כשמוסיפים עמוד שירות חדש, הוא לא נכנס לתפריט מעצמו — צריך להוסיף אותו, לבחור לו שם קצר, ולמקם אותו בסדר הנכון. באתרים גדולים, למשל אינדקסים עם עשרות קטגוריות, לעיתים עדיף לבנות את התפריט אוטומטית מהקטגוריות עצמן, כך שהוא תמיד משקף את מבנה האתר. ההחלטה בין שתי הגישות היא חלק מהאפיון.
שאלות נפוצות
כמה פריטים צריכים להיות בתפריט?
אין מספר קסם, אבל באתר של עסק קטן בדרך כלל מספיקים כמה פריטים ברמה העליונה, עם תת-תפריט לשירותים.
האם לשים את הטלפון בתפריט?
בטלפון — כן, כפתור חיוג או וואטסאפ גלוי בראש העמוד חוסך לגולש חיפוש.
מבנה התפריט נקבע אצלי בשלב האפיון, יחד עם מפת האתר — ראו אפיון אתר. לבניית אתר שבנוי נכון מהיסוד: בניית אתרים לעסקים או פנייה ישירה.
אהבתם את המאמר?
