10 טעויות העיצוב המעצבנות של אתרי אינטרנט

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

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

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

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

יצא לי להיות בכמה קורסים והרצאות שבהם דנו על שימושיות. יש ב ynet טור לא רע בכלל על שימושיות וגם לא מעט חומר על הנושא. למרות זאת מדובר בתחום מעט כאוטי שלא חסרים בו שרלטנים וחאפרים, גם כאלו שמפורסמים ומקבלים כסף רב על שירותיהם. מי שעמד מול מומחה שימושיות אמיתי, שמתשתמש בנתונים, במספרים וב-Hard Facts יודע היטב שהוא עומד מול מומחה אמיתי. מי שעמד מול חאפר שבלבל את המוח בכל מיני מונחים סבוכים שהוא המציא ועשה סתם רוח, יצא מבולבל ובטח חשב שהתחום הוא "חרטה ברטה".

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

מנוע חיפוש לא אפקטיבי

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

קבצי PDF לקריאה

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

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

חוסר שינוי בצבעי הקישורים

משתמשים אוהבים קישורים באתרי אינטרנט ואוהבים ללחוץ עליהם. משתמשים אוהבים גם לדעת על מה הם לחצו באתר האינטרנט שלך. אם התמזל מזלכם והמשתמשים ביקרו באתר שלכם, תנו להם במידת האפשר את האינדקציה לדעת על מה הם לחצו – הראו את הקישורים שהם ביקרו (Visited links) בצבע מעט שונה.

שימוש בבלוק של טקסט

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

  • כותרות משנה
  • רשימות
  • דגשים
  • פסקאות קצרות
  • כתיבה בהירה ומובנת

גודל טקסט לא משתנה

גודל הטקסט באתר אינטרנט ניתן לקביעה באמצעות מספר שיטות. ניתן לקבוע לו גודל קבוע בפיקסלים, נקודות או סנטימטרים וניתן לקבוע לו גודל יחסי. היתרון הגדול של קביעת גודל יחסי היא האפשרות לשינוי גודל הטקסט על ידי המשתמש באמצעות הדפדפן. לא מעט משתמשים מעל גיל 40 נוטים להגדיל את הפונט במחשב, גם אבא שלי עושה את זה וסביר להניח שבעוד כמה שנים אני גם אעשה את זה. במידת האפשר השתמשו בגודל יחסי (em או large\small על נגזרותיהם).

כותרות עמודים לא מובנות

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

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

כל דבר שנראה כמו פרסומת

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

שימוש בעיצוב לא מקובל

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

פתיחת חלונות חדשים

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

לא לתת לגולשים את מה שהם רוצים

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

עבודה בהיי טק

איך מראיינים סניורים?

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

גלילה לראש העמוד