חוויית משתמש באתר נבנית מהרבה פרטים קטנים: עמוד שמופיע מהר, תפריט שנפתח בנגיעה, טקסט שלא קופץ באמצע הקריאה, וכפתורים שאפשר ללחוץ עליהם באצבע. כשעבדתי על האתר הזה תיקנתי כמה בעיות כאלה בעצמי, וכאן אני מפרט מה מצאתי, איך תיקנתי, ומה כדאי לבדוק אצלכם.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
מהירות היא החלק הראשון של החוויה
הגולש לא מבדיל בין אתר איטי לאתר שבור. אם התוכן לא מופיע תוך שתיים או שלוש שניות, חלק מהגולשים עוזבים לפני שראו משהו. לפי web.dev, המדדים של גוגל נבנו בדיוק סביב השאלות שגולש שואל: האם משהו קורה, האם זה שימושי, והאם אפשר להשתמש בזה.
לכן שיפור חוויית משתמש מתחיל במדידה: כמה זמן עד שהתוכן הראשי מופיע, כמה העמוד קופץ, וכמה מהר הוא מגיב ללחיצה. את שלושתם הסברתי במאמר על Core Web Vitals.
מה תיקנתי באתר הזה
טקסט שקפץ
בדף הבית בטלפון, תמונה בראש העמוד הייתה בתוך עמודה בלי רוחב מוגדר. עד שהתמונה נטענה, העמודה הייתה ברוחב אפס, ואז התרחבה והזיזה את כל הטקסט. ציון הקפיצות היה 0.255, פי שניים וחצי מהסף. אחרי שהגדרתי רוחב קבוע, הוא ירד לאפס.
תפריט שלא נפתח
תת התפריטים בהדר לא נפתחו במחשב, כי הגדרת עיצוב חתכה כל מה שחורג מגובה ההדר. באייפון, הפריטים בתת התפריט נעלמו, כי כל רשימה בתפריט קיבלה גובה של מסך מלא. שתי הבעיות לא נראו בבדיקת מהירות, רק בשימוש אמיתי.
כפתור צ'אט מעל התפריט
בטלפון, בועת הצ'אט הצפה ישבה מעל התפריט הפתוח והסתירה את הפריטים האחרונים. עכשיו היא מוסתרת כשהתפריט פתוח, וחוזרת כשהוא נסגר. פרט קטן, אבל גולש שלא מוצא את הקישור שחיפש לא יודע שזו בועה, הוא פשוט עוזב.
נגישות היא חוויית משתמש
תיקוני נגישות משפרים את האתר לכל הגולשים, לא רק לגולשים עם מוגבלות. באתר הזה הוספתי קישור לדילוג ישר לתוכן, תיאור טקסט לכפתורים שיש בהם רק אייקון, ושיניתי את הירוק של המותג לגוון כהה יותר, כי הטקסט הלבן עליו לא היה קריא מספיק. ציון הנגישות בבדיקה עלה מ-97 ל-100.
הקווים המנחים הרשמיים לנגישות נמצאים בתקן WCAG, ורוב הבדיקות הבסיסיות אפשר להריץ בלשונית Lighthouse של Chrome. ניגודיות צבעים, טקסט חלופי לתמונות ותוויות לשדות בטפסים הם המקום להתחיל.
מה לבדוק אצלכם
עוברים על האתר בטלפון אמיתי, לא רק במחשב. פותחים כל תפריט, ממלאים טופס עד הסוף, ולוחצים על כל כפתור בעמודים החשובים. אחר כך גולשים בגלישה בסתר, כדי לראות את האתר כמו גולש חדש בלי שום דבר שמור בדפדפן. כך חוויית משתמש נבדקת כמו שהגולשים חווים אותה.
כדאי גם לבקש ממישהו שלא מכיר את האתר למצוא בו משהו ספציפי, ולשתוק בזמן שהוא מחפש. מה שנראה לכם מובן מאליו, כי בניתם את האתר, לא תמיד ברור למי שנכנס בפעם הראשונה. זו בדיקת חווית גלישה הכי זולה שיש.
שאלות ותשובות על חוויית גלישה
מה ההבדל בין מהירות לחוויית גלישה?
מהירות היא חלק מהחוויה, אבל לא כולה. אתר יכול להיטען מהר ועדיין להיות מתסכל, אם התפריט לא ברור, הטקסט קופץ או הטופס לא עובד בטלפון. המהירות קובעת אם הגולש יישאר, והשאר קובע אם יעשה משהו.
האם חלונות קופצים פוגעים בחוויה?
כשהם מכסים את התוכן מיד בכניסה, כן, וההנחיות של גוגל מזכירות זאת במפורש. חלון שמופיע אחרי שהגולש קרא חלק מהעמוד, או לפני שהוא עוזב, מפריע הרבה פחות.
איך יודעים איפה גולשים נתקעים?
כלי הקלטת גלישה ומפות חום מראים איפה גולשים לוחצים ואיפה הם עוזבים. אבל הם מוסיפים סקריפט כבד בכל עמוד, ולכן כדאי להפעיל אותם לתקופה קצרה, לאסוף מסקנות ולכבות.
מה הגודל המינימלי לטקסט בטלפון?
טקסט רגיל קריא בטלפון מגודל של כ-16 פיקסלים. קטן מזה, הגולשים מתחילים להגדיל את המסך באצבעות, וזה סימן שהעיצוב לא מותאם. כותרות צריכות להיות גדולות בבירור מהטקסט, גם במסך קטן.
הצעד הבא
רוצים לדעת איך גולשים חווים את האתר שלכם בטלפון? שלחו לי את הכתובת. אעבור עליו כמו גולש חדש, אמדוד מהירות וקפיצות, ואגיד לכם מה מפריע לגולשים ומה הכי כדאי לתקן קודם.
