תפריט ניווט באתר: איך בונים תפריט שלא מבלבל.

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

למה תפריט ניווט משפיע יותר ממה שנדמה

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

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

כמה פריטים לשים בתפריט

ברוב אתרי העסקים חמישה עד שבעה פריטים מספיקים. מבנה נפוץ שעובד:

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

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

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

שמות ברורים לפריטים

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

דוגמה: תפריט לפני ואחרי

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

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

תפריטי משנה ואתרים גדולים

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

דוגמה מאתר גדול

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

תפריט בעמוד אחד

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

אתר בכמה שפות

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

התפריט בטלפון

בטלפון התפריט מתקפל לכפתור, בדרך כלל אייקון של שלושה קווים. כמה דברים שעושים הבדל:

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

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

כותרת קבועה וסימון המיקום

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

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

התחתית של העמוד היא תפריט שני

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

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

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

מקלדת, נגישות וטעויות נפוצות

תפריט צריך לעבוד גם במקלדת בלבד: מעבר בין פריטים במקש Tab, פתיחת תפריט משנה ב-Enter, וסימון ברור של הפריט שנמצא בפוקוס. בתחילת כל עמוד כדאי קישור "דלג לתוכן", כדי שמי שמנווט במקלדת או בקורא מסך לא יעבור כל פעם על כל התפריט. אלה חלק מהדרישות של ת"י 5568 ברמה AA.

הטעויות שאני רואה הכי הרבה:

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

לסיכום

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