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

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

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

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

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

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

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

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

פרסונות

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

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

שילוב מוגבלויות

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

Meryl Evans מ-ID24 נדבר על Deaf Tech: Travel Through Time from Past to Future.

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

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

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

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

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

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

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

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

שיטות ניתוח נתונים (heuristics) לנגישות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

השיקולים הבאים כוללים את ההערות בנושא נגישות:

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