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

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

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

עיצוב כוללני

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

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

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

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

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

פרסונות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מארק ריקובונו, נשיא הפדרציה הלאומית של העיוורים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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