אתר יכול להיות יפה מאוד ועדיין לא להביא פניות. זה קורה כשהגולשים לא מבינים תוך כמה שניות מה אתם מציעים, לא מוצאים את הכפתור הנכון, או נתקעים בטופס. UX/UI לאתרים זה בדיוק התחום שמטפל בזה: UX (חוויית משתמש) הוא האופן שבו האתר עובד ומרגיש, ו-UI (ממשק משתמש) הוא מה שרואים על המסך: צבעים, טיפוגרפיה, כפתורים ומרווחים.
במדריך הזה ריכזתי את העקרונות שאני מיישם בכל אתר שאני בונה, עם דגש על מה שייחודי לאתרים בעברית: כתיבה מימין לשמאל, פונטים עבריים ודרישות הנגישות בישראל.
למה UX/UI לאתרים משפיע ישירות על העסק
גולש לא קורא אתר, הוא סורק אותו. אם הוא לא מוצא מהר את מה שחיפש, הוא חוזר לגוגל. עיצוב טוב מקצר את הדרך מהכניסה לאתר ועד הפעולה שאתם רוצים שיעשה: להשאיר פרטים, להתקשר, לקנות. וזה לא עניין של טעם אישי. לרוב אפשר לראות בדיוק איפה הגולשים נתקעים, ולתקן.
10 עקרונות UX/UI שאני מיישם בכל פרויקט
1. היררכיה ויזואלית: מה רואים קודם
בכל מסך צריך להיות ברור מה הדבר הכי חשוב, מה השני, ומה השלישי. עושים את זה עם גודל, משקל פונט, צבע ומרווחים, ולא עם עוד אנימציה. באתר בעברית העין מתחילה מהצד הימני העליון, ולכן שם נמצאים הלוגו, הכותרת הראשית והמסר המרכזי.
בדיקה פשוטה שאני עושה: מראה את המסך הראשון למישהו שלא מכיר את העסק למשך חמש שניות, ושואל מה העסק עושה ומה אפשר לעשות באתר. אם הוא לא יודע לענות, ההיררכיה לא עובדת.
2. קריאה לפעולה אחת ברורה בכל מסך
- כפתור ראשי אחד בולט, בצבע שלא משמש לשום דבר אחר באתר. פעולות משניות מקבלות עיצוב שקט יותר (מסגרת בלבד או קישור).
- טקסט שמתאר מה יקרה: במקום "שליחה" או "למידע נוסף", כתבו "קבלו הצעת מחיר" או "לבדיקת זמינות".
- חזרה על הקריאה לפעולה אחרי כל חלק משמעותי בעמוד, כדי שלא יצטרכו לגלול חזרה למעלה.
3. ניווט שלא מכריח לחשוב
תפריט ראשי קצר (אני משתדל לא לעבור שש או שבע אפשרויות), עם שמות ברורים ולא "יצירתיים". "שירותים" עדיף על "המסע שלכם מתחיל כאן". באתרים גדולים מוסיפים חיפוש ופירורי לחם, ובמובייל כדאי שהטלפון או כפתור הוואטסאפ יהיו גלויים גם כשהתפריט סגור.
הדר דביק עוזר לגולשים להגיע לתפריט ולכפתור הראשי מכל מקום בעמוד. איך בונים אחד כזה, עם צל עדין שמופיע בגלילה, הסברתי במדריך לסטיקי הדר עם צל באלמנטור.
4. טפסים שאנשים באמת ממלאים
הטופס הוא הרגע שבו גולש הופך לליד, ושם אני רואה הכי הרבה טעויות:
- תווית גלויה לכל שדה. טקסט בתוך השדה (Placeholder) נעלם כשמתחילים להקליד, ואז כבר לא ברור מה ביקשו.
- כמה שפחות שדות. שם, טלפון ואולי שדה אחד נוסף. כל שאלה שאפשר לשאול בשיחה, אל תשאלו בטופס.
- הודעות שגיאה ספציפיות. ליד השדה עצמו, בשפה פשוטה: "מספר הטלפון קצר מדי", לא "שגיאה בטופס". ולעולם לא למחוק את מה שכבר הוקלד.
- המקלדת הנכונה במובייל. שדה טלפון עם type="tel", מייל עם type="email", ומאפייני autocomplete שמאפשרים לדפדפן למלא אוטומטית.
דוגמה לשדה טלפון שעושה את כל זה. שימו לב ל-dir="ltr": מספרים ומיילים נכתבים משמאל לימין גם באתר עברי, וכך הסמן לא קופץ בזמן ההקלדה.
<label for="phone">טלפון</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" dir="ltr" required>5. קריאות בעברית: פונטים, שורות וניגודיות
- פונט שנבנה לעברית. Assistant, Heebo, Rubik ו-Noto Sans Hebrew הם בחירות טובות וחינמיות. פונט לטיני עם "תמיכה" בעברית נראה בדרך כלל לא אחיד.
- גודל ומרווח. טקסט רץ בגודל 16 עד 18 פיקסלים, עם גובה שורה של בערך פי 1.5 מגודל הפונט.
- אורך שורה. שורות ארוכות מדי מעייפות. WCAG ממליצה לא לעבור 80 תווים בשורה, ואני מכוון לטווח של 60 עד 75.
- בלי נטוי ובלי יישור לשני הצדדים. לרוב הפונטים העבריים אין נטוי אמיתי, ויישור לשני הצדדים יוצר רווחים לא אחידים בין מילים. להדגשה השתמשו במשקל מודגש.
- ניגודיות. לפחות 4.5:1 בין טקסט רגיל לרקע, ו-3:1 לטקסט גדול. אפור בהיר על לבן נראה אלגנטי במסך של המעצב ובלתי קריא בטלפון בשמש.
- כיווניות. חצים של "הבא" מצביעים שמאלה, סליידרים מתקדמים משמאל, ומילים באנגלית בתוך משפט עברי לא אמורות להזיז את סימני הפיסוק. בדקו את זה בכל רכיב.
6. נגישות: WCAG 2.2 ברמת AA והתקן הישראלי 5568
בישראל, אתר שמספק שירות או מידע לציבור חייב להיות נגיש. התקן הישראלי ת"י 5568 מבוסס על WCAG 2.0 ברמת AA, אבל מאז יצאו גרסאות חדשות יותר, ו-WCAG 2.2 פורסמה באוקטובר 2023. אני בונה לפי WCAG 2.2 ברמת AA: זה עונה על דרישות התקן ומוסיף כמה עקרונות שחשובים במיוחד היום:
- אזור לחיצה של לפחות 24 על 24 פיקסלים לכל כפתור וקישור.
- אלמנט שמקבל פוקוס מהמקלדת לא מוסתר מתחת להדר דביק או באנר עוגיות.
- חלופה לכל פעולה של גרירה, למשל כפתורים לצד סליידר.
- לא לבקש מהגולש להקליד שוב מידע שכבר מסר באותו תהליך.
שני דברים שכדאי לדעת: צריך לפרסם באתר הצהרת נגישות, ותוסף נגישות (הכפתור הצף) לבדו לא הופך אתר לנגיש. הבדיקה הכי בסיסית שאני עושה: לעבור על כל העמוד רק עם המקלדת, בעזרת Tab ו-Enter, ולראות שאפשר להגיע לכל דבר ושתמיד רואים איפה הפוקוס.
7. מיקרו-אינטראקציות, בלי לפגוע ב-INP
מיקרו-אינטראקציה היא תגובה קטנה לפעולה: כפתור שמשנה צבע במעבר עכבר, הודעת "נוסף לסל", אינדיקציית טעינה אחרי שליחת טופס. היא אומרת לגולש "קיבלתי", והיא חשובה. הבעיה מתחילה כשהיא דורשת הרבה JavaScript. גוגל מודדת במדד INP כמה מהר העמוד מגיב ללחיצה, והיעד הוא עד 200 מילישניות.
- אנימציות ב-CSS על transform ו-opacity בלבד, ולא על רוחב, גובה או מיקום.
- משוב מיידי ללחיצה (שינוי מצב הכפתור), גם אם הפעולה עצמה לוקחת עוד רגע.
- בלי ספריית אנימציות שלמה בשביל אפקט אחד.
- כיבוד הגדרת "הפחתת תנועה" של מערכת ההפעלה:
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}על INP ושאר מדדי המהירות כתבתי בהרחבה במדריך איך לשפר את מהירות אתר וורדפרס.
8. מובייל קודם
רוב הגולשים מגיעים מהטלפון, ולכן אני מתכנן קודם את המסך הקטן: כפתורים באזור שהאגודל מגיע אליו, טקסט שלא דורש זום, ותפריט שנפתח מהר. ובעיקר, בודק בטלפון אמיתי ולא רק בתצוגת המובייל של אלמנטור. הרחבתי על זה במדריך לעיצוב אתר רספונסיבי.
9. עקביות: אותו כפתור נראה אותו דבר בכל מקום
כשכל כפתור באתר נראה קצת אחרת, הגולשים מפסיקים לזהות מה לחיץ. באלמנטור אני מגדיר מראש צבעים גלובליים ופונטים גלובליים בהגדרות האתר, ובונה את כל העמודים מהם. מעבר לעקביות, זה גם חוסך זמן: שינוי צבע המותג הוא שינוי אחד ולא מאה.
10. בדיקה עם משתמשים אמיתיים
אתם מכירים את האתר שלכם טוב מדי כדי לראות איפה הוא מבלבל. שתי שיטות שאני עובד איתן:
- בדיקה קטנה עם אנשים. מושיבים שלושה עד חמישה אנשים מקהל היעד, נותנים להם משימה ("מצאו כמה עולה השירות והשאירו פרטים"), ושותקים. כבר בבדיקה הראשונה עולות רוב הבעיות הגדולות.
- Microsoft Clarity. כלי חינמי, בלי מגבלת תנועה, שנותן מפות חום והקלטות של סשנים אמיתיים. אני מסתכל במיוחד על לחיצות זעם (Rage clicks) ולחיצות על אלמנטים שלא עושים כלום (Dead clicks), שמראים בדיוק איפה גולשים ציפו למשהו שלא קרה. ודאו שהגדרות ההסתרה מסתירות שדות רגישים, ועדכנו את מדיניות הפרטיות.
טעויות UX/UI נפוצות שאני רואה באתרים
- סליידר שמתחלף לבד בראש העמוד, כשכל שקופית מנסה להגיד משהו אחר.
- פופאפ שקופץ ברגע הכניסה, לפני שהגולש הספיק להבין איפה הוא.
- אייקונים בלי טקסט, שרק המעצב יודע מה הם עושים.
- קישורים בנוסח "לחצו כאן" במקום טקסט שמתאר לאן הם מובילים.
- טקסט אפור בהיר, קטן, על רקע תמונה.
- חמישה כפתורים באותו צבע ובאותו גודל על אותו מסך.
- עיצוב שנבדק רק במחשב, כשרוב הגולשים בכלל בטלפון.
בחנויות אונליין הטעויות האלה עולות כסף ישירות, ועל התיקונים הספציפיים לחנויות כתבתי במדריך איך לשפר המרות בחנות ווקומרס. ואם אתם בתחילת הדרך, המדריך לבניית אתרים לעסקים יעזור לכם לתכנן את כל התהליך.
שאלות נפוצות
מה ההבדל בין UX ל-UI?
UX עוסק בשאלה אם קל לגולש להשיג את מה שהוא צריך: מבנה, תוכן, סדר השלבים. UI עוסק באיך זה נראה: צבעים, פונטים, כפתורים. באתר טוב שניהם עובדים יחד, ולכן מדברים על UX/UI לאתרים כתחום אחד.
האם האתר שלי חייב להיות נגיש?
אם הוא מספק שירות או מידע לציבור, ברוב המקרים כן, לפי חוק שוויון זכויות לאנשים עם מוגבלות והתקן הישראלי 5568. יש פטורים מסוימים, ולכן במקרה של ספק כדאי להתייעץ עם יועץ נגישות.
האם תוסף נגישות מספיק?
לא. תוסף כזה נותן כלים לגולש, כמו הגדלת טקסט, אבל לא מתקן בעיות במבנה האתר: תוויות חסרות בטפסים, ניגודיות חלשה או רכיבים שלא עובדים עם מקלדת. את אלה צריך לתקן בבנייה עצמה.
איך בודקים UX בלי תקציב?
מתקינים Microsoft Clarity, צופים בעשר עד עשרים הקלטות של גולשים, ומבקשים משלושה אנשים שלא מכירים את העסק לבצע משימה אחת באתר. זה לוקח כמה שעות ומגלה את רוב הבעיות.
רוצים אתר שנוח להשתמש בו?
אם אתם מרגישים שהאתר שלכם מקבל כניסות אבל לא פניות, השאירו פרטים ואעבור איתכם על חוויית המשתמש: מה מבלבל, מה חסר, ומה כדאי לתקן קודם. דוגמאות לאתרים שבניתי תמצאו בתיק העבודות.