התאמת מראה ונגישות

הגדר העדפות ויזואליות ואפשרויות נגישות כדי להתאים אישית את חוויית SupportRetriever.

סקירה

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

גישה להגדרות מראה

1. נווט ל-הגדרות מהסרגל הצדדי
2. גלול לסעיף Appearance
3. התאם כל הגדרה להעדפתך
4. השינויים חלים מיד ונשמרים אוטומטית

הגדרות ערכת נושא

ערכות נושא זמינות

Light Mode

• רקע בהיר בגוון קרם
• טקסט כהה לקריאות מקסימלית
• ממשק יום מסורתי

Dark Mode

• רקעים כהים עם פחות עומס על העיניים
• טקסט בהיר לצפייה נוחה בלילה
• חיסכון בסוללה במסכי OLED

System (מומלץ)

• תואם אוטומטית להגדרות המכשיר
• מעבר בין light/dark לפי שעה
• חוויית מעבר חלקה בין מכשירים

איך להחליף ערכת נושא

1. לחץ על הערכה המועדפת: Light, Dark או System
2. הממשק מתעדכן מיד
3. ההעדפה נשמרת לחשבון
4. מסתנכרן בכל המכשירים

אפשרויות גודל גופן

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

גדלים זמינים

Size	Base Text	Use Case
Small	14px	תצוגה קומפקטית, יותר תוכן
Default	16px	גודל רשת סטנדרטי, מאוזן
Large	20px	קריאה נוחה, קל על העיניים
Extra Large	24px	נגישות מקסימלית, סיוע ראייה

מה מוגדל

בשינוי גודל גופן, הכל מוגדל יחסית:

• כל טקסט הגוף והפסקאות
• כותרות titles
• כפתורים ושדות טופס
• ניווט ותפריטים
• הודעות שיחה
• סטטיסטיקות וגרפים
• תוויות ושדות טופס

איך להתאים גודל גופן

1. לחץ על הגודל המועדף: Small, Default, Large או Extra Large
2. כל הטקסט באפליקציה מוגדל מיד
3. ההגדרה נשמרת אוטומטית
4. עובד בכל הדפים (admin, שיחות, טפסים, סטטיסטיקות)

מצבי ראיית צבע

פלטות צבע מיוחדות למשתמשים עם עיוורון צבעים או העדפות ויזואליות.

מצבים זמינים

Standard Colors

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

Protanopia (Red-blind)

• משפיע על כ-1% מהגברים
• פלטת Blue/Orange/Purple
• נמנע משילובי אדום/ירוק
• הבחנה ברורה בין הצלחה לשגיאות

Deuteranopia (Green-blind)

• משפיע על כ-1% מהגברים
• כמו Protanopia (פלטת Blue/Orange)
• הצורה הנפוצה ביותר של עיוורון צבעים
• מותאם לבטיחות ובהירות

Tritanopia (Blue-blind)

• נדיר מאוד (כ-0.001% מהאנשים)
• פלטת Magenta/Teal
• ניגודיות חם מול קר
• כחול נראה אפור, לכן נמנעים

High Contrast

• קריאות מקסימלית לכל מצב ראייה
• עומד בתקני WCAG AAA
• שחור/לבן טהור עם צבעים חזקים
• מועיל לראייה חלשה או אור שמש חזק
• עובד בערכות light ו-dark

איך הצבעים משתנים

כל מצב מתאים:

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

בחירת מצב צבע

1. לחץ על ה-dropdown Color Vision Mode
2. בחר את המצב המועדף
3. כל הצבעים מתעדכנים מיד
4. נווט לכל דף לראות את השינויים
5. ההגדרה מסתנכרנת בין מכשירים

התאמת גובה שורה

שליטה בריווח בין שורות טקסט לקריאות טובה יותר.

איך זה עובד

• Default: ריווח 1.0x (סטנדרטי)
• טווח: 0.8x (צפוף) עד 1.5x (מרווח יותר)
• תוספות של 0.1 לכוונון עדין

מתי להתאים

הגדלת גובה שורה (1.2x–1.5x) ל:

• דיסלקסיה או קשיי קריאה
• קריאות ארוכות
• פחות עומס על העיניים
• מיקוד טוב יותר בשורות

הקטנת גובה שורה (0.8x–0.9x) ל:

• העדפת תצוגה קומפקטית
• לראות יותר תוכן בבת אחת
• סריקת מידע צפוף

איך להתאים

1. גרור את הסליידר Line Height ימינה או שמאלה
2. ראה שינויים בזמן אמת
3. שחרר לשמירה אוטומטית
4. לחץ Reset לחזרה ל-1.0x

התאמת ריווח אותיות

שליטה בריווח בין תווים לקריאות טובה יותר.

איך זה עובד

• Default: ריווח 1.0x (סטנדרטי)
• טווח: 0.8x (צפוף) עד 1.5x (רחב)
• תוספות של 0.1 לדיוק

מתי להתאים

הגדלת ריווח אותיות (1.2x–1.5x) ל:

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

הקטנת ריווח (0.8x–0.9x) ל:

• העדפת טקסט קומפקטי
• התאמת יותר טקסט למסך
• העדפה ויזואלית אישית

איך להתאים

1. גרור את הסליידר Letter Spacing
2. השינויים חלים מיד
3. שחרר לשמירה אוטומטית
4. לחץ Reset לחזרה לברירת מחדל

שילוב הגדרות

כל הגדרות הנגישות עובדות יחד להתאמה אישית מקסימלית.

דוגמאות צירופים

לקריאות מקסימלית:

• Font Size: Extra Large
• Line Height: 1.4x
• Letter Spacing: 1.3x
• תוצאה: טקסט מרווח וקל לקריאה

לתמיכה בדיסלקסיה:

• Font Size: Large או Extra Large
• Line Height: 1.3x–1.5x
• Letter Spacing: 1.2x–1.4x
• Color Mode: High Contrast (אופציונלי)

לעיוורון צבעים:

• בחר Color Vision Mode מתאים
• שלב עם העדפות גופן/ריווח
• עובד עם ערכות light ו-dark

לתצוגה קומפקטית:

• Font Size: Small
• Line Height: 0.9x
• Letter Spacing: 0.9x
• יותר תוכן, פחות גלילה

שמירה אוטומטית

כל הגדרות המראה:

• נשמרות אוטומטית בשינוי
• מסתנכרנות בין המכשירים
• נשמרות אחרי logout/login
• חלות לפני טעינת הדף (ללא הבזק)
• עובדות offline (נשמרות מקומית)

סנכרון בין מכשירים

ההעדפות עוקבות אחריך:

• מחשבים שולחניים
• טלפונים
• טאבלטים
• דפדפנים שונים (כשמחוברים)
• מכשירים ציבוריים/משותפים (אחרי התחברות)

תקני נגישות

תכונות הנגישות של SupportRetriever עומדות ב:

• WCAG 2.1 (Web Content Accessibility Guidelines)
• דרישות Section 508
• תקני ADA (Americans with Disabilities Act)

תאימות ספציפית

• הגדלת גופן: עד 150% (דרישת WCAG Level AA)
• ניגודיות גבוהה: יחס טקסט 7:1 (WCAG Level AAA)
• עצמאות צבע: מידע לא מועבר רק בצבע
• נגיש מקלדת: כל הבקרות עובדות בלי עכבר

בדיקת ההגדרות

אחרי שינוי הגדרות, בדוק בדפים שונים:

1. מנהל Dashboard: בדוק קריאות רשימת שיחות
2. שיחות: וודא שטקסט ההודעות נוח
3. סטטיסטיקות: וודא שהגרפים והמספרים ברורים
4. טופסs: בדוק נראות שדות טופס
5. Mobile: בדוק שההגדרות עובדות בטלפון/טאבלט

איפוס לברירת מחדל

לאיפוס כל הגדרות המראה:

1. Theme: בחר System
2. Font Size: בחר Default
3. Color Mode: בחר Standard Colors
4. Line Height: לחץ Reset (מגדיר 1.0x)
5. Letter Spacing: לחץ Reset (מגדיר 1.0x)

השינויים חלים מיד.

פתרון בעיות

ההגדרות לא נשמרות

בעיה: השינויים חוזרים אחרי רענון

פתרונות:

• בדוק שהדפדפן מאפשר localStorage
• כבה מצב פרטי/אינקוגניטו
• נקה מטמון דפדפן
• נסה דפדפן אחר
• פנה לתמיכה אם נמשך

טקסט גדול/קטן מדי

בעיה: לא מוצא גודל נוח

פתרונות:

• נסה Large (20px) כאמצע
• התאם גובה שורה בנפרד
• השתמש בהגדלת דפדפן כתוספת
• שלב עם ריווח אותיות

הצבעים לא משתנים

בעיה: מצב הצבע נראה לא אפקטיבי

פתרונות:

• בדוק ש-dropdown מציג את הבחירה
• נסה להחליף ערכות (light/dark)
• רענן את הדף
• נקה מטמון דפדפן
• ייתכן שחלק מהרכיבים לא משתמשים באינדיקטורי צבע

בעיות ביצועים

בעיה: האפליקציה מרגישה איטית אחרי שינויים

פתרונות:

• גופן Extra Large עשוי להשפיע על רינדור
• נסה Large במקום Extra Large
• הקטן ריווח שורה/אותיות
• הפעל מחדש את הדפדפן
• סגור טאבים שלא בשימוש

שיטות עבודה מומלצות

לשימוש יומי

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

לנגישות

• העדף קריאות על התאמת תוכן
• אל תהסס להשתמש ב-Extra Large אם נדרש
• שלב כמה התאמות לתוצאה טובה
• שתף הגדרות שעובדות עם אחרים עם צרכים דומים

לצוותים

• הגדרות אישיות לא משפיעות על חברי צוות
• לכל משתמש העדפות משלו
• המלץ על הגדרות לחברי צוות
• מנהל לא יכול לדרוס בחירות נגישות של משתמש

נושאים קשורים

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

משאבים נוספים

כלים חיצוניים

• Browser Zoom: השלמה להגדלת גופן באפליקציה
• Screen Readers: עובדים עם כל הגדרות הנגישות
• Color Blindness Simulators: בדיקת איך צבעים נראים
• Operating System Accessibility: שילוב עם תכונות מערכת ההפעלה

לימוד נוסף

• WCAG Guidelines: w3.org/WAI/WCAG21/quickref
• Color Blindness: חקור סוגים והשפעות
• Dyslexia Reמקורs: מחקרי טיפוגרפיה וקריאות
• Web Accessibility: שיטות עבודה מומלצות ותקנים