תוכן עניינים פתח
בחלק הקודם של המדריך התמקדנו בטעויות עיצוב שפוגעות בביצועי האתר בין אם זה במהירות הטעינה או התאמה למובייל. גם כשהכול עובד חלק, עיצוב מבלבל ומציף במקום להכווין עלולה לגרום לנטישה מהירה. בחלק זה נדבר על טעויות בעיצוב גרפי וטיפוגרפי – הפרטים הקטנים שאמורים להרגיש טבעיים, אבל בפועל יוצרים התנגדות בלתי נראית.
7. עומס אלמנטים ובלגן ויזואלי
הטעות: הרצון להציג את כל מה שיש לאתר להציע בבת אחת מוביל לא פעם לעיצוב עמוס מדי – גיבוב של אלמנטים, באנרים, מודעות, סרטונים, חלונות קופצים, וטקסט בכל פינה. בעוד שכל רכיב כשלעצמו עשוי להיות חשוב, כשזה הרבה רכיבים ללא היררכיה ברורה נוצר "רעש" ויזואלי. גורם נוסף הוא היעדר שימוש ב-"מרווח לבן" (white space) להשגת איזון וניקיון בעיצוב.
המחיר: עיצוב מבולגן מבלבל ומציף את המשתמש. כאשר עמוד הבית, למשל, מלא בהסחות – שלל קישורים, אנימציות ומדיה – הגולש לא יודע היכן להתמקד. התוצאה היא תחושת הצפה שיכולה לגרום לנטישה מהירה. משתמש שהולך לאיבוד בין האלמנטים יתקשה גם למצוא את הקריאה לפעולה החשובה, וכך יורד שיעור ההמרה.
כמו שכבר אמרנו הנטישה פוגעת במאמצי הקידום SEO. עמוד מבולגן עלול לסבול מבעיות כגון ירידה בזמן השהייה (בשל תוכן לא קריא ולא ממוקד) ופחות מעברי דפים. יחס טקסט-HTML נמוך בגלל עודף גרפיקה וקוד על פני תוכן טקסטואלי עלול לפגוע בקידום.
דוגמה קיצונית היא אתרים כמו LingsCars.com שהפכו לשם דבר בזכות העומס והכאוס הוויזואלי שלהם – אנימציות מכל עבר, צבעים זרחניים וטקסט מתגלגל. עיצוב כזה אולי מושך תשומת לב כגימיק, אך רוב המשתמשים בורחים מיד בשל חוסר יכולת לעבד את המידע בצורה נוחה.
צעדים מעשיים לפתרון:
o היררכיית מידע וסדר עדיפויות: החליטו מהם 2-3 הדברים החשובים ביותר בכל עמוד (למשל: הצגת מוצר מוביל, הסבר תמציתי, וקריאה לפעולה מרכזית) והתמקדו בהם. הבליטו את האלמנטים החשובים והניחו את האלמנטים המשניים באופן פחות דומיננטי.
o שימוש מושכל במרווחים (White Space): "אוויר" בעיצוב אינו שטח מבוזבז – הוא כלי קריטי להדגשת תוכן. השאירו רווחים סביב תמונה או בלוק טקסט לעזור לעין האנושית לעבד אותו. אתר נקי ומרווח משדר מקצועיות.
o צמצום אלמנטים ותוספות: בחנו כל רכיב בעמוד ותשאלו "האם הוא תורם לקידום המטרות של המשתמש בעמוד הזה?". פריטים לא חיוניים אפשר להסיר או להעביר לעמוד פנימי.
o טעינה הדרגתית: אם יש הרבה תוכן להצגה, אפשרו חשיפה הדרגתית באמצעות טאבים, אקורדיונים או גלילה אינסופית, במקום להעמיס הכל בפעם אחת.
o עיצוב עקבי ומסגרת עיצובית: הגדירו קו עיצובי מנחה לפריסת עמוד (layout). לדוגמה, Hero בראש, אחריו תקציר בטקסט, ואז גריד של פריטים. עקביות יוצרת אצל המשתמש הבנה למה לצפות בכל חלק.
o בדיקות משתמשים: ערכו מבחני עיצוב (כגון מבחן Five Second Test) בהם מראים למשתמש את העמוד לכמה שניות ושואלים מה זכור לו. אם המשתמש לא קלט את המרכיב המרכזי במבט חטוף, סימן שהעמוד עמוס מדי.
o אזורי מיקוד: חלקו את העמוד לאזורים ברורים, כאשר לכל אזור מטרה ספציפית. השתמשו בגבולות, רקעים או כותרות ברורות כדי ליצור הפרדה ויזואלית בין האזורים.
8. בלוקים של טקסט בלתי-קריא
הטעות: דמיינו את המאמר הזה ללא כותרות וכותרות משנה, האם הייתם קוראים אותו? תוכן איכותי יכול להיכשל אם הוא מוצג באופן לא קריא. טעות נפוצה היא עמודי תוכן עם פסקאות ארוכות מאוד ומבנה טקסט רציף ללא כותרות משנה, רשימות או הדגשות – מה שנראה כמו "קיר טקסט" אחיד. הדבר נובע לעיתים מחוסר תשומת לב לנוחות הקריאה הדיגיטלית, או מחשש לפגוע ברצף הסיפורי. במקרים אחרים זו פשוט העתקה של טקסט ממקור אחר (למשל קובץ PDF) לתוך האתר בלי עיצוב מותאם.
המחיר: הגולשים לא באמת "קוראים" את כל הטקסט – הם סורקים את הדף לאיתור מידע רלוונטי. בלוקים עצומים של טקסט מרתיעים את הגולש, שנמנע מלהתחיל לקרוא בכלל. כאשר מידע חשוב קבור בתוך פסקה עבה, ייתכן שהמשתמש יפספס אותו או יוותר מראש.
טקסט לא מחולק לכותרות מקשה גם על מנועי החיפוש להבין את מבנה התוכן. היעדר כותרות משנה ותגיות מתאימות עלול לפגוע בדירוג כי גוגל מסתמך גם על מבנה היררכי של כותרות (H1, H2 וכו'). בנוסף, אם המשתמשים נוטשים מהר מבלי לצרוך את התוכן, זה ישתקף במדדי חוויית משתמש שיכולים להשפיע לרעה על הדירוג.
צעדים מעשיים לפתרון:
o שבירת טקסט לכותרות ותת-כותרות – חלקו את התוכן למקטעים עם כותרות משנה (H2, H3) שמתמצתות את הנושא הבא. זה הופך את הדף לנוח לסריקה – העין יכולה לדלג לכותרת שמעניינת את המשתמש. בנוסף, כותרות כאלה משפרות SEO כי הן מסמנות למנוע החיפוש את הנושאים המרכזיים.
o פסקאות קצרות ותמציתיות – במקום 8-10 שורות בפסקה, עדיף 2-4 משפטים לפסקה. פסקאות קצרות נראות ידידותיות יותר, במיוחד בנייד. פסקה מקוונת אידאלית היא 50-100 מילים, כך שהמשתמש מקבל "פסק זמן" ויזואלי והמוח לא מתעייף.
o שימוש ברשימות ובולטות – נקודות או מספרים (Bullet points / Numbered lists) הם דרך מצוינת לפרק מידע לרצף נקודתי. קוראים נוטים להתמקד בנקודות ברשימה, מה שמבליט יתרונות, צעדים או מאפיינים עיקריים.
o הדגשות וציטוטים – הדגשת מילות מפתח או משפטים חשובים בתוך הפסקאות (ב-bold או בכתב נטוי) יוצרת עוגנים לעיניים. גם ציטוט מודגש (Callout), משפט חשוב המוצג בקופסה או בפונט גדול יותר, יכול לשבור את הטקסט ולהוסיף עניין.
o שילוב אלמנטים ויזואליים – תמונות, אינפוגרפיקה או אפילו טבלאות סיכום קצרים יכולים לתת מנוחה מטקסט רציף ולעזור להסביר נקודות מורכבות. הם גם מגבירים את המעורבות – תמונה מתאימה לצד פסקה ארוכה יכולה למשוך את הקורא להמשיך לקרוא את ההסבר שמתחתיה.
o ריווח ויישור טקסט – הקפידו על רווח שורות (Leading) נוח, לא צפוף מדי, כדי שהטקסט יהיה קריא ולא דחוס. בנוסף, עדיף לרוב ליישר טקסט בעברית לימין ולא במרכז או מיושר דו-צדדי.
o בדיקת קריאות – עקרונות פשוטים כמו קריאה בקול רם יכולים לעזור להעריך נוחות קריאה. בקש מאדם אחר לקרוא את התוכן – אם הוא הלך לאיבוד או התעייף באמצע, ערוך אותו מחדש.
9. בחירת צבעים וניגודיות לקויה
הטעות: צבע הוא כלי עוצמתי בעיצוב, אך שימוש לא נכון בו עלול להרוס את חוויית המשתמש. טעויות נפוצות כוללות יותר מדי צבעים שונים ללא פלטת צבעים מוגדרת, בחירת צבעי טקסט ורקע עם ניגודיות חלשה (למשל טקסט אפור על רקע אפור-בהיר), או שימוש בצבעים צעקניים שמסיחים את הדעת.
לעיתים הטעות נובעת מחוסר ידע בעקרונות תורת הצבע (Color Theory) – המעצב אולי בוחר צבעים שהוא אוהב אישית, אך שלא מתאימים יחד. במקרים אחרים, רצון להתבלט מוביל ללוח צבעים "צעקני" מדי. גם העדר עקביות – שימוש בפלטת צבעים שונה בכל עמוד – יוצר בלבול וחוסר זהות מותגית.
המחיר: צבע משפיע ישירות על הרגש והקריאות. עודף צבעים ללא היררכיה עלול להקשות על המשתמש לדעת מהם האזורים החשובים בעמוד – הכל מתחרה על תשומת ליבו. למשל, אם גם כפתור הפעולה, גם כותרת צדדית וגם פריט פחות חשוב כולם בצבעים בולטים שונים, העין מתפזרת.
ניגודיות נמוכה (כמו טקסט בהיר על רקע בהיר) גורמת לטקסט להיות לא קריא – במיוחד עבור משתמשים עם לקויות ראייה או במסך שמש. אם המשתמש צריך להתאמץ לקרוא, חווייתו נפגמת והוא עשוי לנטוש.
מבחינת המרות, צבעי כפתורים משפיעים: כפתור CTA שאינו בולט מספיק (למשל כפתור אפור על רקע אפור) לא ימשוך הקלקות. ולהיפך, כפתור עם צבע מנוגד בולט יקבל יותר תשומת לב.
צעדים מעשיים לפתרון:
o הגדרת פלטת צבעים מוגבלת: בחרו 3-4 צבעים עיקריים לאתר כולו – לרוב צבע בסיס למותג, אחד או שניים צבעי הדגשה, וצבע ניטרלי לטקסט (לבן/שחור/אפור כהה). הגבלת הצבעים יוצרת מראה אלגנטי ומקצועי יותר.
o בדיקת ניגודיות טקסט-רקע: ודאו שכל טקסט קריא על הרקע שלו. כלל אצבע: טקסט כהה על רקע בהיר, או להפך. השתמשו בכלים לבדיקת ניגודיות לפי תקני WCAG כדי לוודא שאתם עומדים בדרישות (יחס ניגודיות מומלץ של לפחות 4.5:1 לטקסט רגיל).
o שימוש בצבע להעברת משמעות (בעקביות): אם החלטתם, למשל, שצבע הכפתורים הראשיים יהיה ירוק – השתמשו בירוק הזה באופן עקבי לכל כפתור "הירשם" או "קנה עכשיו". קישורים טקסטואליים בדרך כלל בכחול (תבנית מוכרת), הודעות שגיאה באדום וכו'.
o התאמת צבעים למותג וקהל היעד: צבעים מעבירים תחושה – כחול משדר אמינות, ירוק בריאות או טבע, אדום דחיפות או אזהרה. חשבו אילו רגשות המותג שלכם רוצה לעורר ובחרו צבע בהתאם.
o עיצוב בשחור-לבן תחילה: טכניקה מומלצת היא לתכנן תחילה את העמוד בגרסה נטולת צבע (גווני אפור), כך שמבנה ההיררכיה והניגודיות בין חלקים ברורים. רק לאחר מכן הוסיפו את צבעי המותג במקומות הנכונים.
o בדיקת צבעים בתצוגות שונות: זכרו שצבעים נראים שונה במסכים שונים. בדקו את האתר במספר מכשירים כדי לוודא שהניגודיות נשמרת גם במסכים בהירים או כהים יותר.
10. טיפוגרפיה לא נוחה לקריאה
הטעות: טיפוגרפיה מתייחסת לבחירת הגופנים, גודל וסגנון הטקסט. טעויות טיפוגרפיות נפוצות באתרי אינטרנט כוללות: גופן קטן מדי או גדול מדי לגוף הטקסט, שימוש בגופן דקורטיבי/פונט לא-קריא לטקסט רץ, שימוש ביותר מדי סוגי פונטים בעמוד אחד, וריווח שורות או אותיות לא מתאים.
לעיתים זה נובע מרצון "להתבלט" עם פונטים מיוחדים, או מחוסר מודעות לכך שמה שנראה יפה בכותרת לא מתאים לפסקאות שלמות. גם הגבלת נגישות כמו גודל פונט קבוע (ללא אפשרות להגדלה) היא טעות נפוצה.
המחיר: טקסט הוא אמצעי התקשורת העיקרי ברוב האתרים, ואם הוא לא קריא – המשתמש לא יוכל לצרוך את התוכן או יבזבז מאמץ רב. גופן קטן מדי (למשל 12px) עלול להיות בלתי קריא בכלל עבור משתמשים רבים, במיוחד במסכים קטנים. גם גופן "פנסי" (כתב יד, קומיקס, או גופן מקושט) נראה לא מקצועי ולא רציני אם משתמשים בו לטקסט גוף.
יותר מדי סוגי גופנים וצבעים לטקסט יוצרים מראה לא אחיד ומבלבל, ופוגמים בזהות העיצובית. אם המידע על המוצר או ההצעה לא נקרא בקלות, המשתמש לא יבין את הערך ולא יבצע פעולה.
צעדים מעשיים לפתרון:
o בחירת 2-3 גופנים לכל היותר: כלל אצבע בעיצוב אתרים הוא להשתמש לכל האתר במשפחת פונטים מצומצמת – בדרך כלל גופן אחד לכותרות ואחד לטקסט גוף. יותר מזה מתחיל להיראות לא מקצועי ומבלבל.
o גודל פונט קריא: שמרו על גודל גופן קריא כבררת מחדל. 16px (או 1em) לפחות לטקסט הפשוט, וגדול יותר לכותרות בהתאם להיררכיה. עדיף להשתמש ביחידות יחסיות (em/%), כדי לאפשר לדפדפן להגדיל לטובת מי שצריך.
o בדיקת נראות על מגוון מסכים: ודאו שהטקסט קריא גם במסך מחשב וגם בנייד. גופן שנראה בסדר בדסקטופ עלול להיות קטן מדי בנייד אם לא הוגדר כראוי.
o היצמדות לסגנון אחיד: הגדירו סטיילים לכותרת (H1, H2 וכו'), לפסקה, לציטוט וכדומה, ושמרו עליהם. אל תשנו גודל פונט או משפחה באופן שרירותי מפרק לפסקה.
o הימנעות מפונטים נדירים לטקסט רץ: אפשר להיות יצירתי בכותרת לוגו או סלוגן, אבל לתוכן העיקרי בחרו גופן סטנדרטי שנבדק בקריאות מסך. פונטים Sans-Serif נוטים להיות קריאים יותר על מסכים קטנים.
o ריווח נכון: כווננו את Line-height (רווח בין שורות) ל-1.5 בערך עבור טקסט פסקה – זה בדרך כלל נוח. ריווח קטן מדי מצופף וקשה לעקוב משורה לשורה; ריווח גדול מדי מפזר ומקשה על קישור חזותי בין השורות.
o תמיכה בנגישות טקסט: ודאו שהאתר לא חוסם אפשרות של המשתמש להגדיל טקסט (למשל במובייל – pinch to zoom, או שינוי גודל גופן במחשב). אפשר גם להציע כפתור "A+ / A-" להגדלת גופן באתר עצמו אם קהל היעד מבוגר או בעל לקויות ראייה.
אם הגעתם עד כאן, אתם כבר יודעים: עיצוב זה לא “יפה”. זה פונקציונלי, מכוון, חד וברור. ועכשיו, אחרי שפירקנו את הסוגיות של ניווט, ביצועים ועיצוב – נשאר עוד חלק אחד לסגור את המעגל: אמון. גם אם הכל עובד ונראה מעולה, גולש שלא סומך – לא יקנה, לא יירשם, ולא יחזור. בחלק הרביעי והאחרון של המדריך נסקור את כל הטעויות שמונעות מהאתר שלכם להרגיש מקום שאפשר באמת להאמין בו.
…To Be Continued
אלון שניידרמן
מומחה באפיון UI/UX, ניתוח דפוסי התנהגות ופיתוח אסטרטגיות שיווק.המשך קריאה - מאמרים נוספים
