החשיבות של מיקום הכפתורים באתרי וורדפרס: כך תביאו לאחוזי המרה גבוהים יותר

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

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

חוויית המשתמש (UX) בעלת חשיבות עליונה – מדוע?

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

אחד הגורמים המשפיעים ביותר על חוויית המשתמש הוא מיקום ונראות הכפתורים באתר/דף שלכם, על כך נרחיב בכתבה הבאה.

כפתור בהירו – בדסקטופ ובמובייל באתר ITMOMZ

מושגים חשובים שכדאי לדעת

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

סוגי כפתורים באתרי אינטרנט

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

חשיבות מיקום הכפתורים

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

הצבת הכפתורים באזורים בולטים לעין, תשפר משמעותית את הסבירות למעורבות המשתמשים, אם בהשארת פרטים או רכישת מוצר מסוים.

כפתור הנעה לפעולה – באתר Winebox

מיקום הכפתור ב-Hero

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

אם מדובר בחנות אי-קומרס או אתר תדמית, מרבית הכפתורים בהירו יובילו לטופס לידים/יצירת קשר.

כאשר ממקמים את הכפתור חשוב מאוד לשים לב לפרטים הבאים:

  • הכפתור צריך להופיע בשלמותו כאשר דף האינטרנט עולה, ללא צורך לגלול מטה.
  • הכפתור צריך להיות בולט לעין – להבליט את הכפתור, כך שיהיה ברור לעין שמדובר בכפתור, גם מבחינת הטקסט וגם מבחינת הצבע.
  • המלצה – להוסיף Hover לכפתור (כאשר העכבר עומד מעל הכפתור, צבע הכפתור ישתנה, הדבר יוביל להמחשת הכפתור ולשיפור חווית המשתמש).
  • גודל הטקסט – בדקו כי גודל הכפתור לא יורד מ-16px בדסקטופ ו-px14/15px במובייל.
  • בדקו את תצוגת הכפתור במובייל, בדקו שהטקסט לא נשבר לשתי שורות, שהכפתור בגודל המתאים ונראה לעין.
כפתור לרכישה בהירו – בחנות האינטרנטית Betha Italia

מיקום הכפתור ב-Header

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

כפתור הנעה לפעולה ב-Header בחנות האינטרנטית של חוות נעמי

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

  • כניסה לטמפלט של ה-Header
  • לחיצה על האזור המלא של ה-Header
  • לחיצה על "מתקדם"
  • לחיצה על "אפקטי תנועה”
  • לחיצה על "גלילה" ובחירה של "דביק" / "Sticky"
  • לחיצה על "Save"

או בצורה הבאה:

  • לחיצה על Customize ואז על Appearance בסרגל של אלמנטור
  • לחיצה על Header
  • לחיצה על Theme Options ואז על Sticky Header
  • לחיצה על Save & Publish

כפתורים ברחבי האתר

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

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

מיקום הכפתורים לפי סוג האתר

מיקום כפתורים בדף נחיתה

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

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

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

כפתורים בדף הנחיתה – המרכז להסרת שיער לגברים ונשים MC

מיקום הכפתורים באתרי אי-קומרס

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

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

תצוגת כפתורים בחנות האינטרנטית של Sapore

מיקום הכפתורים באתרי תדמית

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

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

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

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

כפתורים בהירו באתר תדמית של Bizer

שיפור מיקום ונראות הכפתורים

רספונסיביות

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

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

כמו כן, הכפתורים צריכים להיות בולטים לעין – ושהטקסט לא ישבר לשתי שורות.

גודל הטקסט המומלץ הוא 14px-15px במובייל, בנוסף חשוב להשתמש בגודל טקסט ובגודל כפתור אחיד לכל הכפתורים באתר בתצוגת המובייל (כפי שיש לעשות גם בדסקטופ ובטאבלט).

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

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

כפתורי הוספה לסל לצד המוצר – בחנות של Winebox

אופטימיזציה

אסטרטגיית מיקום כפתורים מאפשרת גם בדיקות A/B ואופטימיזציה.

ניתן לערוך בדיקה אודות מיקומי הכפתורים השונים ומעקב אחר התנהגות המשתמשים ברחבי האתר/הדף הנוכחי.

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

לסיכום

למיקום הכפתורים באתרי וורדפרס יש חשיבות רבה מבחינת ה-UI/UX ותרומה למשפך השיווקי.

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

תוכן עניינים

בלוג

Hit Enter to search or Esc key to close
איך אפשר לעזור?

לרשותכם עומד צוות מנוסה שישמחו לעזור לכם
בכל פניה במהירות המירבית.

תודה שפנית אלינו!

צוות BRN יחזור אליכם בהקדם האפשרי

לכל שירותי BRN

דילוג לתוכן