עיצוב וחוויית משתמש

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

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

עיצוב נגיש לכולם

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

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

יש שבעה עקרונות עיצוב כוללים שמתמקדים בנגישות:

1. לספק חוויה דומה: חשוב לוודא שהממשק מספק חוויה שווה לכולם, כדי שאנשים יוכלו לבצע משימות באופן שמתאים לצרכים שלהם בלי לפגוע באיכות התוכן.
2. התחשבות במצב: חשוב לוודא שהממשק מספק חוויה בעלת ערך לאנשים, בלי קשר לנסיבות שלהם.
3. עקביות: כדאי להשתמש במוסכמות מוכרות וליישם אותן באופן הגיוני.
4. מתן שליטה: מוודאים שאנשים יכולים לגשת לתוכן ולבצע בו פעולות בדרך המועדפת עליהם.
5. להציע אפשרויות: כדאי לספק לאנשים דרכים שונות להשלמת משימות, במיוחד משימות מורכבות או לא סטנדרטיות.
6. תעדוף תוכן: כדי לעזור למשתמשים להתמקד במשימות, בתכונות ובמידע העיקריים, כדאי לסדר את הרכיבים האלה בסדר המועדף בתוכן ובפריסה.
7. הוספת ערך: חשוב לחשוב על המטרה והמשמעות של התכונות ועל האופן שבו הן משפרות את חוויית המשתמשים השונים.

פרסונות

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

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

שילוב של אנשים עם מוגבלויות

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

מריל אוונס מההרצאה ID24 Deaf Tech: Travel Through Time from Past to Future.

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

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

סימולטורים של מוגבלויות

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

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

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

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

מארק ריקובונו (Mark Riccobono), נשיא הפדרציה הלאומית לעיוורים.

היוריסטיקה של הנגישות

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

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

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

1. שיטות וסוגי אינטראקציה: משתמשים יכולים לקיים אינטראקציה יעילה עם המערכת באמצעות שיטת הקלט שהם בוחרים (למשל, עכבר, מקלדת, מסך מגע וכו').
2. ניווט והתמצאות: המשתמשים יכולים לנווט, למצוא תוכן ולקבוע את המיקום שלהם במערכת בכל רגע.
3. מבנה וסמנטיקה: המשתמשים יכולים להבין את מבנה התוכן בכל דף ולהבין איך להשתמש במערכת.
4. מניעת שגיאות ומצבים: לפקדים אינטראקטיביים יש הוראות קבועות ומשמעותיות שעוזרות למנוע טעויות, והם מספקים למשתמשים מצבי שגיאה ברורים שמציינים מה הבעיות ואיך לפתור אותן בכל פעם שמוחזרות שגיאות.
5. ניגודיות וקריאות: המשתמשים יכולים להבחין בקלות בין הטקסט לבין מידע משמעותי אחר ולקרוא אותו.
6. שפה ונוחות קריאה: המשתמשים יכולים לקרוא ולהבין את התוכן בקלות.
7. צפיות ועקביות: המשתמשים יכולים לצפות את המטרה של כל רכיב. ברור איך כל רכיב קשור למערכת כולה.
8. תזמון ושימור: המשתמשים מקבלים מספיק זמן להשלמת המשימות שלהם, והמידע לא אובד אם הזמן שלהם (כלומר, סשן) נגמר.
9. תנועה והבהוב: משתמשים יכולים לעצור רכיבים בדף שזזים, מהבהבים או מונפשים. אסור שהאלמנטים האלה יסיחו את דעתם של המשתמשים או יפגעו בהם בדרך אחרת.
10. חלופות חזותיות ושמיעתיות: משתמשים יכולים לגשת לחלופות מבוססות-טקסט לכל תוכן חזותי או שמיעתי שמעביר מידע.

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

דוגמה לביקורת היוריסטית בנושא נגישות לנקודת הבדיקה של ניווט והתמצאות:

נקודות ביניים לניווט ולמציאת דרך	מצטיין (+2 נקודות)	כרטיסים (+ נקודה אחת)	נכשל (-1 נקודה)	לא רלוונטי (0 נקודות)
האם מוגדר אינדיקטור ברור וגלוי בכל הרכיבים הפעילים כשהם מקבלים פוקוס?	check
האם בדף יש טקסט כותרת בעל משמעות, עם מידע ספציפי לדף בתחילת הכותרת?			check
האם רכיב כותרת הדף והתג H1 זהים או דומים?		check
האם יש כותרות משמעותיות לכל קטע מרכזי?		check
האם מטרת הקישורים מוגדרת רק מטקסט הקישור או מההקשר המיידי שלו?				check
האם קישור לדילוג מסופק בחלק העליון של הדף והאם הוא נחשף כשממקדים בו את תשומת הלב?			check
האם הארגון של רכיבי הניווט מקל על ההתמצאות באתר?	check

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

הערות בנושא נגישות

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

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

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

הדוגמאות הבאות של איורים לעיצוב לקוחות מתוך ערכת ההערות בנושא נגישות של Indeed.com ל-Figma.

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

דוגמאות לתחומים שבהם כדאי להוסיף הערות בנושא נגישות:

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