מה הופך עיצוב אתר עסקי לכזה שמביא פניות
אתר עסקי טוב נמדד לפי מה שהמבקרים עושים בו: משאירים פרטים, מתקשרים, שולחים הודעה בוואטסאפ או קונים. לכן עיצוב אתר אינטרנט לעסק מתחיל בשאלה מה המבקר צריך להבין ולעשות בכל עמוד, ורק אחר כך עוברים לצבעים ולגופנים.
אלה שבעת העקרונות שחוזרים באתרים עסקיים שבנויים להביא פניות:
- מסר ראשי ברור בראש העמוד: מה אתם עושים, בשביל מי ובאיזה אזור.
- היררכיה חזותית: הדבר החשוב ביותר הוא הגדול והבולט ביותר.
- קריאות: גופן בגודל נוח, ניגודיות מספקת ופסקאות קצרות.
- מובייל קודם: מעצבים קודם למסך הטלפון ורק אחר כך מרחיבים למחשב.
- מהירות ויציבות: העמוד נטען מהר והתוכן לא קופץ בזמן הטעינה.
- קריאה לפעולה אחת עיקרית בכל עמוד, שחוזרת במקומות הנכונים.
- אמון: פרטי קשר אמיתיים, דוגמאות עבודה, הצהרת נגישות ומדיניות פרטיות.
בסעיפים הבאים מפורט איך מיישמים כל עיקרון ואילו מספרים כדאי לבדוק.
היררכיה: מה המבקר רואה בשלוש השניות הראשונות
החלק העליון של העמוד, מה שמופיע לפני הגלילה, צריך לענות על שלוש שאלות: מה זה, למה זה מתאים לי ומה עושים עכשיו. בפועל זו כותרת ראשית אחת, משפט משנה שמפרט את התועלת, וכפתור פעולה.
נניח שאתם משרד הנהלת חשבונות בחיפה. הכותרת "פתרונות פיננסיים מתקדמים" לא אומרת למבקר כלום. הכותרת "הנהלת חשבונות לעצמאים ולעסקים קטנים בחיפה והקריות" עונה מיד על השאלה אם הגיע למקום הנכון.
כלים ליצירת היררכיה
- גודל: הבדל ברור בין כותרת, כותרת משנה וטקסט רגיל.
- משקל וצבע: צבע מותג אחד לפעולות, ולא לקישוטים.
- רווח לבן: מרווח סביב אלמנט מבליט אותו יותר מכל מסגרת.
- סדר: התועלת המרכזית למעלה, אחריה שירותים, הוכחות (דוגמאות, ביקורות) ושאלות נפוצות.
בדיקה פשוטה: הראו את העמוד לאדם שלא מכיר את העסק למשך חמש שניות, ובקשו ממנו לומר מה אתם מוכרים. אם הוא מהסס, ההיררכיה לא עובדת.
קריאות וניגודיות: המספרים שכדאי לבדוק
טקסט שקשה לקרוא מבריח מבקרים, וגם עלול לפגוע בנגישות. הנחיות WCAG ברמה AA דורשות יחס ניגודיות של 4.5:1 לפחות בין טקסט רגיל לרקע, ו-3:1 לטקסט גדול, כלומר 18 נקודות (כ-24 פיקסלים) ומעלה, או 14 נקודות (כ-18.5 פיקסלים) מודגש. הערכים הם סף מדויק: יחס של 4.499:1 נכשל. טקסט אפור בהיר על רקע לבן, טרנד עיצובי נפוץ, נכשל לא פעם בבדיקה הזאת.
הנחיות מעשיות לאתר בעברית:
- גופן עברי שנבנה למסך, עם הבחנה טובה בין אותיות דומות כמו ו/ז, ד/ר, ה/ח.
- שורות לא רחבות מדי במחשב. טקסט שנמתח לרוחב כל המסך מעייף את העין.
- פסקאות של 2–4 שורות, כותרות משנה ורשימות במקום גושי טקסט.
- יישור לימין ותמיכה מלאה בכיווניות RTL, כולל טפסים, תפריטים ואייקוני חיצים.
בישראל חלות תקנות שוויון זכויות לאנשים עם מוגבלות בנוגע לנגישות שירות, והתקן הישראלי לנגישות אתרים הוא ת"י 5568, שמבוסס על WCAG. אתרים ישראליים מפרסמים בדרך כלל הצהרת נגישות שמפרטת את הרמה שאליה הם מתאימים. יש הקלות ופטורים במקרים מסוימים, ולכן את החובה המדויקת שחלה על העסק שלכם כדאי לבדוק מול יועץ נגישות או עורך דין.
מובייל קודם: איך מעצבים לאצבע ולא לעכבר
Google משתמשת בגרסת המובייל של האתר לאינדוקס ולדירוג. תוכן שמופיע רק בגרסת המחשב לא נלקח בחשבון. המשמעות המעשית: עיצוב שנראה מצוין במחשב ומקוצץ בטלפון פוגע גם בחוויה וגם בקידום האורגני.
אפשר לארגן תוכן מחדש למסך קטן, למשל באקורדיונים או בלשוניות, כל עוד התוכן עצמו נשאר זמין בגרסת המובייל.
מה לבדוק בטלפון
- גודל אזורי לחיצה: לפי WCAG 2.2, יעד לחיצה צריך להיות לפחות 24 על 24 פיקסלים, או מרוחק מספיק מהיעדים שסביבו. כפתורים מרכזיים כדאי לעשות גדולים מזה בהרבה.
- כפתור פעולה נגיש לאגודל: פס תחתון קבוע עם "התקשרו" ו"וואטסאפ" מתאים לעסקי שירות מקומיים.
- תפריט קצר: 4–6 פריטים. מה שלא נכנס, עובר לפוטר.
- טפסים: מקלדת מספרית לשדה טלפון, מינימום שדות ותוויות שלא נעלמות כשמתחילים להקליד.
- חלונות קופצים: חלון שמכסה את כל המסך מיד עם הכניסה מפריע לקריאה.
הבדיקה הכי חשובה היא מעשית: פתחו את האתר בטלפון אמיתי, ברשת סלולרית, ונסו להשאיר פנייה ביד אחת. אם אתם מפעילים מסעדה, תמצאו במדריך לבניית אתר למסעדה דגשים לתפריט קריא בטלפון.
מהירות ויציבות: יעדי Core Web Vitals
Google מגדירה שלושה מדדים לחוויית טעינה, תגובה ויציבות, ומעריכה אותם באחוזון ה-75 של טעינות העמוד, בנפרד למובייל ולמחשב.
| מדד | מה הוא מודד | יעד "טוב" | מה בדרך כלל פוגע בו |
|---|---|---|---|
| LCP | מתי האלמנט הגדול ביותר מופיע | עד 2.5 שניות | תמונת פתיחה כבדה, סליידר, אחסון איטי |
| INP | כמה מהר העמוד מגיב ללחיצה | עד 200 מילישניות | הרבה סקריפטים, תוספים וכלי מעקב |
| CLS | כמה התוכן קופץ בזמן הטעינה | עד 0.1 | תמונות בלי מידות, באנרים שנטענים מאוחר |
החלטות עיצוב משפיעות ישירות על המספרים האלה. סרטון רקע, סליידר עם חמש תמונות ואנימציות כניסה נראים מרשים במצגת, אבל מאטים את הטעינה בטלפון. תמונה אחת דחוסה בפורמט מודרני וכותרת ברורה עושות בדרך כלל עבודה טובה יותר. את גודל התמונות אפשר להקטין בעזרת כלי כיווץ תמונות אונליין לפני העלאה לאתר.
אם האתר בנוי על וורדפרס, גם האחסון משפיע. השוואה בין ספקים תמצאו במדריך אחסון וורדפרס ומה לבדוק לפני שבוחרים ספק.
קריאה לפעולה ואמון: איך הופכים מבקר לפנייה
לכל עמוד צריכה להיות פעולה עיקרית אחת. בעמוד שירות זה יכול להיות "קבעו שיחת ייעוץ", ובעמוד מוצר "הוסיפו לסל". פעולה משנית, כמו וואטסאפ או טלפון, יכולה להופיע לידה, אבל בעיצוב פחות בולט. כדי שגם סוכני בינה מלאכותית יצליחו להשלים פנייה בטופס, עברו על סדר הבדיקות לסוכני בינה מלאכותית.
כללים לכפתור שעובד
- טקסט שמתאר מה יקרה: "קבלו הצעת מחיר תוך יום עסקים" ברור יותר מ"שלח".
- צבע שמשמש באתר רק לפעולות, כך שהעין לומדת לזהות אותו.
- הכפתור חוזר אחרי כל בלוק תוכן מרכזי, כדי שלא יהיה צורך לגלול חזרה למעלה.
- אחרי שליחה מופיע עמוד תודה שאומר מה קורה עכשיו ומתי תחזרו אליהם.
ליד הכפתור כדאי לשים אלמנטים שמורידים חשש: כתובת וטלפון אמיתיים, תמונות של עבודות שביצעתם, ביקורות עם שם ומקור, ותשובות לשאלות על מחיר ולוחות זמנים. הימנעו מלוגואים של לקוחות או מציטוטים שאין לכם רשות לפרסם.
עמודים שנבנו לקמפיין צריכים להיות ממוקדים עוד יותר. איך בונים כאלה מוסבר במדריך מה חייב להיות בדף נחיתה שממיר.
מעצב אתרים, סטודיו או בונה אתרים: איך בוחרים ומה לבקש
את העקרונות האלה אפשר ליישם לבד בבונה אתרים כמו Wix, או לשכור מעצב אתרים פרילנסר, סטודיו לעיצוב אתרים או סוכנות שמשלבת עיצוב, פיתוח ושיווק. הבחירה תלויה בתקציב, בכמות העמודים ובמידה שהאתר צריך להביא תנועה מגוגל וממודעות. אם אתם משרד עורכי דין, כדאי לקרוא על בניית אתרים לעורכי דין לפני שמתחילים.
| אפשרות | מתאים כש... | על מה לשים לב |
|---|---|---|
| בונה אתרים לבד | אתר קטן, תקציב מצומצם וזמן פנוי | קל להגיע לתבנית יפה עם היררכיה חלשה ומובייל עמוס |
| מעצב אתרים עצמאי | אתר תדמית עם עיצוב מותאם | לברר מי מפתח, מי מטפל בנגישות ומי מתחזק אחרי ההשקה |
| סטודיו או סוכנות | אתר שצריך להביא לידים מקידום ומפרסום | לבקש מדדי ביצוע ולא רק הדמיות |
טווחי המחירים לפי סוג אתר מפורטים במאמר כמה עולה בניית אתר ומה משפיע על ההצעה. בגילוי נאות: ברנדיני, הסוכנות שמפעילה את המגזין, מציעה בניית אתרים יחד עם קידום אתרים ופרסום ממומן, וזו אחת האפשרויות בקטגוריה השלישית.
מה לדרוש בכל הצעה
- עיצוב מובייל מלא, ולא רק "התאמה" של עיצוב המחשב.
- הגדרה ברורה של רמת הנגישות שהאתר יעמוד בה לפי ת"י 5568, והצהרת נגישות.
- יעדי Core Web Vitals ובדיקה שלהם לפני מסירה.
- הגדרת מעקב אחרי פניות (טפסים, לחיצות טלפון ווואטסאפ) מהיום הראשון.
- בעלות מלאה שלכם על הדומיין, האחסון והתכנים.
- מי מעדכן תוכן אחרי ההשקה, וכמה זה עולה.
שאלות נפוצות
כמה זמן לוקח עיצוב אתר לעסק קטן?
זה תלוי בכמות העמודים, בזמינות התכנים ובמספר סבבי התיקונים. העיכוב הנפוץ ביותר הוא דווקא בצד העסק: טקסטים ותמונות שלא מוכנים. כדאי לסכם לוח זמנים עם אבני דרך כבר בהצעת המחיר.
האם חובה להנגיש אתר עסקי בישראל?
בישראל חלות תקנות נגישות שירות שמתייחסות גם לשירות באינטרנט, והתקן הרלוונטי הוא ת"י 5568. יש פטורים והקלות במקרים מסוימים, ולכן כדאי לבדוק את המצב הספציפי של העסק מול יועץ נגישות או עורך דין.
האם תוסף נגישות מספיק כדי שהאתר יהיה נגיש?
לא בהכרח. תוסף שמגדיל טקסט או משנה ניגודיות לא מתקן מבנה כותרות, טפסים בלי תוויות או תמונות בלי טקסט חלופי. את אלה צריך לבנות נכון בקוד ובעיצוב.
איך בודקים אם עיצוב האתר מאט אותו?
מריצים את העמוד ב-PageSpeed Insights של Google ובודקים את LCP, INP ו-CLS מול היעדים: 2.5 שניות, 200 מילישניות ו-0.1. אם LCP גבוה, התמונה או הסליידר בראש העמוד הם בדרך כלל החשודים הראשונים.
כמה כפתורי קריאה לפעולה צריך בעמוד?
פעולה עיקרית אחת לכל עמוד. אפשר להציג את הכפתור כמה פעמים לאורך העמוד ולהוסיף לידו פעולה משנית בולטת פחות, כמו וואטסאפ.
