טעויות עיצוב

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

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

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

1. תמונות במקום טקסט חי

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

2. פופ אפים

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

3. ניווט לא ידידותי

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

4. שימוש לא נכון בתגיות H

תגיות H1-H6, כחלק מקוד HTML בסיסי, מאפשרות לנו לסמן חלק מהתוכן בעמוד ככותרת משונה, ולחלק את הכותרות על פי היררכיה מסוימת, בדרך כלל לפי מידת החשיבות. לתגיות אלו יש גם חשיבות בצד של ה-SEO ושימוש לא נכון או מוגזם בתגיות אלו יכולות "לבלבל" את גוגל וחבריו. להלן כמה כללי אצבע לשימוש נכון בתגיות:

  • מומלץ כי תגית H1 תופיע רק פעם אחת בעמוד, בדרך כלל בתור הכותרת הראשית
  • תגית H2 בדרך כלל נועדה על מנת לסמן כותרות משנה בין הפסקות
  • תגיות H3 יכולות לשמש ככותרת עבור תת-פסקה או עבור אלמנטים שונים בעמוד כמו כותרות של תקצירי מאמרים ועוד.
  • בתגיות מסוג H4-H6 בדרך כלל פחות נעשה שימוש ואין להן חשיבות מיוחדת בצד ה-SEO אם כי אין בעיה לשלב אותן אם רואים לנכון.

5. מהירות טעינה

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

אלמנטים כבדים של עיצוב או הטמעה לא נכונה שלהם, שימוש בסקריפטים בצורה חובבנית ודברים נוספים הקשורים לעיצוב וה- Look & Feel של האתר, עשויים להשפיע באופן משמעותי על מהירות הטעינה, ולכן תמיד יהיה זה רעיון טוב לבצע בדיקת מהירות לאתר בטרם ההשקה (אך אפשר גם להאחר מכן), לזהות את צווארי הבקבוק ולשפר את המצב עד כמה שניתן.

כמה כלים פופולאריים בעזרתם ניתן לבדוק מהירות של אתרים:

  • Google PageSpeed Insights
  • Pingdom
  • GTMetrix

6. תמונות כבדות מדי

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

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

7. שימוש בפלאש

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

כיום קיימות אלטרנטיבות הרבה יותר ידידותיות למנועי חיפוש כגון אלמנטים שונים של HTML5, וכן שימוש בסקריפטים כמו Javascript, Jquery ואחרים. הנ"ל נסרקים היטב על ידי גוגל (כל עוד לא חוסמים אותם) והיום הם הסטנדרט המומלץ לשילוב אפקטים ויזואלים שונים באתרי אינטרנט.

בהצלחה!

Share

קצת על המחבר:

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

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




    What is 8 + 6 ?

    אשמח לשלוח לך פרטים!

    אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
    ;