ב-Online
 
 
 
 
 
 
 
טרנדים 
תפריטים בלתי נשכחים 

תפריטים בלתי נשכחים

 
טרנדים |
 

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

 
 
 
 
 
 
 
 
 

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

 

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

 

האם יש מיקום אידיאלי לתפריט?

 

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

 

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

 

מיקום סטנדרטי, אבל בעיצוב בלתי סטנדרטי

   

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

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

 

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

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

תפריט במיקום בלתי צפוי

 

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

 
התפריט נמצא בצד "הלא נכון"
 התפריט נמצא בצד "הלא נכון"   צילום: צילומסך 
 

 

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

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

התפריט העיקרי נמצא בצד

 

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

 

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

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

תפריט בתחתית המסך

 

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

 

 
התפריט הראשי ממוקם בחלקו התחתון של המסך
 התפריט הראשי ממוקם בחלקו התחתון של המסך   צילום: צילומסך 
 

תפריט חוויתי: פזור על פני כל העמוד

 

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

 
הקישורים פזורים לאורך כל העמוד
 הקישורים פזורים לאורך כל העמוד   צילום: צילומסך 
 

תפריט במיקום משתנה בהתאם למיקום באתר

 

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

 
התפריט משנה את מיקומו בהתאם למיקומו של הגולש על המסך
 התפריט משנה את מיקומו בהתאם למיקומו של הגולש על המסך   צילום: צילומסך 
 

השפעת HTML5 על תפריטי הניווט

 

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

 
מעצב שמודע ל-html5 ומשתמש בטכנולוגיה הזו
 מעצב שמודע ל-html5 ומשתמש בטכנולוגיה הזו   צילום: צילומסך 
 

 

יונית רושו היא מרצה במסלול האינטראקטיבי במכללת שנקר ומנכ"לית דיינמיק-ווב, בוטיק להקמת אתרי אינטרנט

 
 
 
@@@@@@@@@@@@@@@@@@@ ilan @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
@@@@@@@@@@@@@@@@@@@ ilan @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
 
תגובות
הוסף תגובה0 תגובות
הוספת תגובה
מאת
 
נושא
 
תוכן
 
 
 
 
תודה! תגובתך התקבלה.
התגובה תתפרסם בכפוף לתנאי האתר.
 
 
 
 
 

כל הזכויות שמורות 2011 © נענע 10 בע"מ
 
 
 
 
כל הזכויות שמורות © Nana10 בע"מ
Video powered by