מטרתו של ההדר להציג ללקוח את תמצית העסק ולהוות את הניווט העיקרי באתר.
באמצעותו צריך הגולש להצליח לנווט את דרכו בקלות וביעילות לשאר דפי האתר, למצוא בקלות ובמהירות את המוצר או קטגוריות המוצרים שהוא מחפש ולבסוף לבצע רכישה,
ולכן סופר חשוב שיהיה אינטואיטיבי, ברור ופשוט.
ניווט מורכב ומסובך עלול לגרום לגולשים ולרוכשים פוטנציאלים לנטוש את האתר במהרה.
ההדר כשמו כן הוא, ממוקם בראש הדף ומלווה את הגולש בכל דפי האתר.
רשימת האלמנטים שחשוב להציג בהדר:
בתהליך האיפיון יש לתכנן היכן ימוקמו האלמנטים בהיררכיה מתאימה ובמיקומים אינטואיטיבים כך שיובילו את הגולש לאן שנרצה שהוא יגיע.
חשוב למצוא את האיזון הנכון בין הרצון להציג לגולש הרבה מידע על העסק, לבין הרצון להציג הדר נקי פשוט ואסתטי. הדר עמוס מדי יפספס את המטרה, ועלול לגרום לתחושת בלבול אצל הגולש.
לוגו העסק - הלוגו הוא האלמנט שיאפשר ללקוחות שלכם לזהות את העסק ואת המוצרים של העסק. על הלוגו להיות בעל עיצוב ייחודי, מבחינה פונקציונלית צריך להיות ברור וקריא, גם במדיות קטנות. הלוגו עוזר מאוד בבידול העסק ממתחריו.
לוגו העסק משפיע על עיצוב ונראות האתר כי הוא מכתיב צבעוניות ושפה גרפית לכלל האתר ולכן יש לו חשיבות רבה מאוד.
גודל הלוגו מוגבל לגובה ההדר ולכן לא יוכל להיות גדול מדי ולכן חשוב להתייחס לכך בעת עיצוב הלוגו. מהבחינה הזאת רצוי לעצב לוגו כזה ששם העסק אינו קטן מדי ביחס לאלמנט הגרפי לצידו.
רצוי, בגלל מגבלת גובה ההדר, שללוגו יהיה פורמט רוחבי ולא פורמט אנכי המתאים יותר לדפוס.
מבנה קטגורי / סרגל קטגוריות - סרגל שמציג את קטגוריות המוצרים שנמכרים בחנות. סרגל הקטגוריות צריך לכלול שמות ברורים של שמות הקטגוריה, ולא להקרא ״מוצרים״.
מבנה קטגורי ברור ופשוט יעזור לגוגל להבין את המבניות של האתר שלך ,שמות ברורים לקטגוריה יועילו גם בקידום seo.
עקרונות seo: מומלץ לבצע מחקר מילות מפתח בטרם ההחלטה על שמות הקטוריות בסרגל, כדי להשפיע על הקידום בגוגל.
מומלץ לא להרבות בקטגוריות ראשיות ולנסות להציג כמה שפחות קטגוריות אב ויותר קטגוריות בן.
תפריט נפתח dropdown menu - רצוי שהסרגל יכלול תפריט נפתח המציג את קטגוריות הבנים, במידה ויש.
מומלץ לעבוד עם שתי רמות בלבד של קטגוריות (אבא ובן), יש אתרים שבהם תוכל למצוא חלוקה ל-3 רמות של קטגוריות (אבא בן ונכד). ממחקרים ובדיקות שעשינו מצאנו כי הרמה השלישית הנכונה היא עבודה עם סינונים ולא עם רמת קטגוריה שלישית אשר מוסיפה עוד שלב מיותר בדרך למוצר הנכסף, ומסרבלת את הגלישה והניווט באתר.
תפריט נפתח כזה יעזור לגולש להבין את מבנה האתר ויקל עליו למצוא את מה שמחפש עוד בטרם ביצע פעולה באתר.
התפריט יכול להיות רשימה או להיות ויזואלי ולכלול תמונות של תתי הקטגוריות או מוצרים במבצע מקטגוריה מסויימת ועוד.
במידה וללקוח ריבוי מוצרים ,כדאי לשקול להציג תפריט נפתח המחלק את תתי הקטגוריות לקבוצות לפי נושאים (דרופ קבוצות) ומקל על הגולש באיתור הקטגוריה/תת קטגוריה/ המוצר שהוא מחפש.
שדה חיפוש - בתכנון ההדר קיימת חשיבות לעיצוב שדה החיפוש בהתאם לנדלן ההדר.
כאן נכנסים שיקולים לעיתים של סוג העסק ועד כמה הגולש בו מחפש מוצר או מנווט דרכו למוצר.
בעסקים שבו הגולש מחפש מוצר (למשל אתרי סלולר שבהם הגולש מחפש דגם מסויים) נשאף לשדה חיפוש גדול ובולט, לעומתם באתרי אופנה החיפוש לעיתים זניח יותר, ויכול להיות קטן יותר, או אפילו סגור (שדה החיפוש נפתח בהקלקה)
שדה החיפוש צריך לאפשר השלמה אוטומטית של מה שהגולש מחפש. אבל מה שקורה בפועל שבעצם גולשים ממלאים איזהו טקסט, למשל אייפון, אבל רוב הגולשים בעצם מקישים אייפון ואנטר ומגיעים למצב שיש להם 72 תוצאות, במרבית המערכות ישלחו עכשיו את הגולש לחפש ידנית מתוך ה72 תוצאות את מה שהוא רצה -אף לקוח לא עושה את זה.
אנחנו מיקדנו והצרנו את החיפוש ע״י כך שיישמנו פתרון שלקוח ממערכות גדולות ומכרות כגון איביי וזאפ ובעצם אמרנו לגולש - " חיפשת אייפון יש 72 תוצאות, מצאנו את זה בקטגוריות האלו - למה בעצם התכוונת ?" ואז בעצם הלקוח חושב " אהה נכון חיפשתי סמארטפון" - ואז הגולש נכנס לקטגורית סמארטפונים, והוא יכול בעצם יכול לבחור מתוך מה שרלוונטי לאייפון בתוך קטגוריית "סמארטפונים". - הפיצ'ר הזה הגדיל בממוצעים פי 2 ו 3 את זמני ההשארות של גולשים שחיפשו ביטויים כלליים בשדה החיפוש ובעצם הביא אותם לתוצאה שהם ביקשו למצוא.
פרטי התקשרות (טלפון בית העסק/ וואטסאפ)- חשוב להציג טלפון, זה מחזק את תחושת הבטחון בבית העסק- הידיעה שיש למי לפנות- אדם אמיתי לשוחח עימו וגם אמצעי יעיל להשגת לידים. הוואטסאפ הוא כלי יעיל ונוח.
נקודות ציון לבידול החנות ממתחרים - הצג לגולש את הייחוד של העסק שלך. למה שיקנה אצלך ולא באתר אחר? מהן החוזקות שלך (למשל- משלוחים חינם, חניה חינם, החזרות והחלפות ללא עלות, עבודת יד, אחריות 4 שנים על כל המוצרים וכו)
סרגל לינקים לשאר דפי האתר (אודות / צור קשר / התחברות / שאלות ותשובות ועוד)- נועד לספק מידע אינפורמטיבי על החנות, על המוצרים. תורם לתחושת הבטחון של הגולש, אולי ירצה לקרוא ב״אודות״ על החנות ולאן הגיע וישמח לדעת שקיימים לה גם סניפים פיזים.
מבחינה ויזואלית הסרגל יכול להיות פתוח ומוצג במלואו בהדר, לעיתים נסתפק בצגת ״המבורגר״ המחביא בתוכו את הלינקים ולעיתים ,אם נרצה הדר נקי מאוד, נוותר על הסרגל הנ״ל ונציג אותו בפוטר בלבד.
עגלת קניות - עגלת הקניות מופיעה בהדר עם חיווי מספרי שעוזר לגולש להבין מתי מתווסף מוצר לסל. חשוב להפריד בין תהליך קניה של ״קנה עכשיו״ לבין תהליך קניה של ״הוסף לסל״
בתהליך הקניה של ״הוסף לסל״ הגולש יכול לבצע קניה בחנות של פריטים רבים ולהוסיפם לעגלה ולבחור מתי לעבור לצ׳ק אאוט ולשלם. תהליך קניה זה מתאים לעסקים שבהם הגולש סביר שיקנה בקניה אחת מספר מוצרים ( מוצרים במחירים לא גבוהים כגון אופנה, סופרמרקט, אקססוריז וכו)
במקרה זה תופיע בהדר עגלה צפה שתפתח בכל פעם שהגולש יוסיף מוצר לעגלה.
בתהליך הקניה ״קנה עכשיו״ - זהו תהליך קניה שמתאים לחנויות שבהם סביר שהגולש ירכוש מוצר אחד בלבד (מחירים גבוהים, רמת מעורבות גבוהה כגון סלולר, אלקטרוניקה, ריהוט, מחשבים וכו).במקרה זה לאחר לחיצה על כפתור הקניה, יעבור הגולש באופן מיידי לשלב הצ׳קאאוט, המטרה היא למקד אותו ברכישה הנוכחית. במקרה זה לא תופיע עגלה צפה כי אין בה צורך.
עקרונות חשובים בתכנון הדר לחנות הוירטואלית
רספונסיביות -יותר מ50% מהגולשים שלך יבקרו בחנות שלך מהטלפון הנייד שלהם!
ולכן ההדר חייב להיות רספונסיבי, כלומר -מותאם לכל מסך, גם למסכי דסקטופ גדולים מאוד ובעיקר למסכי מובייל קטנים. חשוב לתכנן בקפידה איזה מידע יוצג בכל מסך , וכיצד למקסם את הניווט בו גם כשהנדלן מצטמצם, כי כמובן שלא נוכל להציג את כל התוכן שהצגנו במסך דסקטופ גדול.
רשימת האלמנטים שמומלץ להציג במובייל:
לוגו העסק, עגלת קניות, חיפוש (מצומצם), תפריט (אייקון המבורגר) נפתח בלחיצה שמציג את כל הלינקים החשובים וקטגוריות המוצרים, פרטי התקשרות מצומצמים (טלפון ו /או קישור לוואטסאפ צ׳אט) אם יש עוד מקום ניתן להציג מידע נוסף כגון ניווט וויז.
במידה ויש מסרים שמאוד חשוב לתקשר אותם לגולשים (כי הם יכולים להגדיל סיכוי לרכישה באתר), ניתן להוסיף סטריפ מעל ההדר הכולל את המסרים הללו- כגון משלוחים חינם / החזרות חינם וכו.
במובייל מטעמי חסכון בנדל״ן, לא תמיד נרצה שההדר יהיה סטיקי. במידה וההדר מאוד צר אפשר שיהיה סטיקי גם במובייל. אפשרות נוספת היא שההדר יתעורר ויתגלה בכל פעם שהגולש מנסה לחזור למעלה.
סטיקי הדר- בעל חשיבות פונקציונלית- לעיתים נרצה שחלק מההדר או כל ההדר (תלוי בגובהו) ישאר סטיקי בגלילה, או יתעורר ויתגלה כשנראה שהגולש מנסה לחזור למעלה, שוב הסיבה היא להקל עליו כמה שיותר בניווט, ושלא יצטרך לחזור למעלה בכל פעם כדי לעבור לקטגוריה אחרת או מוצר אחר.
גובה ההדר- קיימת חשיבות בתכנון ההדר לכך שלא יהיה גבוה מדי כי אז הוא עלול לדחוף כלפי מטה מידע חשוב / כפתורי הנעה לפעולה, ״ולבזבז״ נדלן גדול מגובה הפולד (Above the fold), אם בכל זאת תוכנן הדר גבוה (לעיתים לוגו הלקוח מכתיב הדר גבוה, לפעמים זאת החלטה עיצובית, ולעיתים יש הרבה מידע שחשוב להציג בהדר), רצוי שיתקצר / יתקפל בגלילה ובדפי האתר אחרים.
דינימיות של הדר- ההדר חייב להיות מקושר לממשק ניהול נוח, שיאפשר ללקוח לערוך בקלות וביעילות את האלמנטים בהדר (או את רובם) באופן עצמאי. הדר, טוב ככל שיהיה, שאינו מאפשר דינימיות ללקוח ויוצר תלות במעצב / מפתח, מקשה מאוד על תפעול שוטף.
בקונימבו ההדר הוא דינמי כמובן.
רשתות חברתיות -לקוחות רבים מבקשים להציג בהדר לינקים לפייסבוק ורשתות חברתיות אחרות, חשוב לזכור כי המטרה של הרשתות החברתיות היא להביא גולשים מהרשתות לתוך האתר כדי שיבצעו רכישה ולא להיפך. לא נרצה להוציא את הגולש מהאתר שלנו, זה מבלבל אותו ואנחנו נשאף למקד אותו ולהוביל אותו למוצר שהוא מחפש בחנות.
לינקים כאלו, מקומם בפוטר ומרבית הגולשים יודעים לחפש אותם שם.