הנגשת תוכן שמתעדכן בצורה דינמית ללא רענון

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

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

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

גלילה אינסופית וטעינת תוכן נוסף

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

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

ומה באשר לכפתור 'טען עוד'?

אין הבדל, זה אותו הדבר בדיוק.

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

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

הוספת מוצרים לעגלת הקניות

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

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

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

רק כך המשתמש יוכל לקבל את אותה חוויית שימוש שיש לכל גולש אח באתר.

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

לא להציף, כן להנגיש

האתגר הגדול בהנגשת תוכן דינמי הוא האיזון.

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

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

סדר לוגי בקוד האתר

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

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

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

בשורה התחתונה

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

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

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

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