עיצוב אתר שמביא המרות: 15 עקרונות UX/UI לבעלי עסקים ומשווקים

עיצוב אתר נמדד במה שהגולשים עושים בו, לא רק במה שהם רואים. אתר יכול להיראות מצוין ועדיין לאבד פניות בטופס ארוך, בכפתור שקשה למצוא או בעמוד שנטען לאט בנייד. חוויית המשתמש (UX) והממשק (UI) נוגעים גם בקידום אורגני: גוגל מתייחס לחוויית הדף כחלק מההערכה שלו, ומודד חלק ממנה דרך מדדי Core Web Vitals. במאמר הזה ריכזנו 15 עקרונות UX/UI שמשפיעים ישירות על המרות, איך בודקים אותם, ומתי נכון לשקול בניית אתרים לעסקים מחדש במקום עוד תיקון נקודתי.

הפסיכולוגיה שמאחורי הקליק

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

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

15 עקרונות לעיצוב שממיר

עקרונות 1 עד 3: מה הגולש רואה

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

עקרונות 4 עד 15: איך האתר מתנהג

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

4. כפתור ראשי אחד לכל מסך: שתי קריאות לפעולה באותה עוצמה מבטלות זו את זו. אחת ראשית, כל השאר משניות.
5. ערך לפני בקשה: אל תבקשו פרטים לפני שהמבקר הבין מה הוא מקבל. הטופס נמצא במקום הנכון רק אחרי שהשאלה שלו נענתה.
6. ניגודיות שעומדת בתקן: טקסט אפור בהיר על רקע כהה נראה מעוצב ולא נקרא. תקן הנגישות WCAG דורש יחס ניגודיות של 4.5 ל-1 לפחות לטקסט רגיל, וזה מינימום ולא שאיפה.
7. שטח נשימה: מרווח סביב אלמנט הוא מה שמסמן שהוא חשוב. בעמוד דחוס העין לא יודעת לאן להסתכל.
8. מהירות כחלק מהעיצוב: אנימציה שמעכבת את התוכן ברבע שנייה נראית יפה בהדגמה ומעצבנת בשימוש יומיומי. תמונות גדולות מדי וגופנים כבדים הם החלטות עיצוב לא פחות מצבע.
9. מצבי ביניים: מה רואים בזמן טעינה, מה רואים כשאין תוצאות, ומה רואים אחרי שגיאה. רוב האתרים מעצבים רק את המצב המושלם.
10. אזור מגע נדיב: בנייד כפתור קטן מ-44 פיקסלים הוא מקור לתסכול, במיוחד תוך כדי גלילה.
11. עקביות במקום הפתעה: אותו אלמנט צריך להתנהג אותו דבר בכל עמוד. יצירתיות בניווט עולה בהמרות.
12. הוכחה חברתית ליד ההחלטה: ביקורת שמופיעה בתחתית העמוד לא עוזרת לגולש שמתלבט ליד הכפתור. היא צריכה להיות שם, לידו.
13. שקיפות לפני התחייבות: מחיר, זמן אספקה ותנאי ביטול שמוסתרים עד השלב האחרון הם מהסיבות הנפוצות לנטישת עגלה ולטפסים שלא נשלחים.
14. כותרות שמספרות את הסיפור לבד: רוב המבקרים לא קוראים, הם גוללים. מי שקורא רק את הכותרות צריך להבין מה מוצע ולמי.
15. נגישות כברירת מחדל: ניווט במקלדת, טקסט חלופי לתמונות וסימון פוקוס ברור. בישראל זו גם חובה לפי החוק, והיא משפרת את החוויה לכל המשתמשים.

Mobile First מול Mobile Friendly

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

טפסים שלא מבריחים לקוחות

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

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

איך בודקים שהעיצוב באמת ממיר

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

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

שאלות נפוצות

כמה שדות צריך להיות בטופס יצירת קשר?

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

האם עיצוב כהה ממיר טוב יותר?

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

כמה זמן לוקח לשפר יחס המרה?

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

האם צריך עיצוב שונה למובייל?

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

מה כדאי לעשות עכשיו

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