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

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

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

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

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

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

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

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

פרסונות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כדאי להוסיף היוריסטיקה לתהליך העבודה כשיוצרים את הפרופילים ואת העיצובים. היוריסטיקות הן כללים לעיצוב אינטראקציות, שהוצגו בשנת 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.
• רכיבים אינטראקטיביים: זיהוי אלמנטים קליקביליים, אפקטים של ריחוף, אזור המיקוד.
• מקלדת: צריך לזהות איפה המיקוד צריך להתחיל (עצירה אלפביתית) ואת סדר הלשוניות הבא.
• טפסים: הוספה של תוויות שדות, טקסט עזרה, הודעות שגיאה והודעות הצלחה.
• תוויות נגישות: מגדירות איך טכנולוגיה מסייעת צריכה לזהות את הרכיב.