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

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

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

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

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

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

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

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

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

פרסונות

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

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

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

מוגבלויות יכולות להיות קבועות, זמניות או תלויות-הקשר. הנכויות האלה יכולות להשפיע על המגע, הראייה, השמיעה והדיבור.
The Persona Spectrum מתוך Microsoft's Inclusive 101 Toolkit.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

איור עיצוב של שינויים חזותיים שנעשה בהם שימוש במצבים שונים אפשריים של לחצן.
עיצוב לחצן הפעולה משתנה בהתאם למצב: ברירת מחדל, מיקוד, מעבר עם העכבר, פעיל ומושבת.
איור עיצוב של שלושה סמלים שונים שנעשה בהם שימוש בכרטיס של פרסום משרה.
שלושה סמלים עם טקסט חלופי מודגשים. הסמלים 'שמירה של משרה' ו'לא מעניין' פועלים כלחצנים, ולכן טקסט ה-alt חיוני להבנת הפעולה. הסמל שלצד 'Apply with your IndeedResume' (החלת קורות החיים) הוא רק לקישוט ולכן אין צורך בטקסט חלופי.
איור של הקשר בין תוויות הטופס לבין הקלטות הקשורות של החודש והשנה.
אפשר לשייך כמה תוויות קלט לכל קלט, כדי לעזור למשתמשים להבין את ההקשר.

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

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

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