משוב UX במצבים ריקים

1) מהן מדינות ריקות ומדוע הן נחוצות

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

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

מצב ריק טוב = הקשר + תועלת + פעולה.

2) טיפולוגיית מצב ריק

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

3) עקרונות עיצוב

הקשרים: אנחנו מדברים על סיבה ספציפית לריקנות.
ערך כפול פעולה: קודם למה הקטע הזה, ואז מה לעשות.
CTA עיקרי אחד: במידת הצורך - משני (למד יותר/FAQ).
קיצור וספציפיות: 1-2 משפטים + כפתור נקי.
תמיכה חזותית: הסמל/איור תומך במשמעות, אינו מסיח את הדעת.
הימנעות מבוי סתום: תמיד יש דרך קדימה.
עקביות טון: ידידותית ורגועה; אין בדיחה בצעדים קריטיים (תשלומים, ביטחון).
A11y ולוקליזציה: קריאה על ידי קורא המסך, נטייה נכונה, לוקח בחשבון את אורך הקווים.

4) מסגרת מדינה ריקה (תבנית)

כותרת (אופציונלי, קו 1) - ערך תביעה או סיבה.
טקסט (1-2 משפטים) - ”למה הוא ריק” + ”מה הלאה”.
הסי-טי-איי העיקרי הוא פעולת המטרה העיקרית.
ACS/link - עזרה/כללים/תיעוד.
איור קל של 24-96 px, לא עומס יתר.

5) תבניות מתוסרטות

5. 1 עלייה למטוס/אפס ראשון

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

טקסט: ”כדי לראות המלצות מותאמות אישית, מלא פרופיל ובחר כיווני חקירה”. ‏

CTA: Profile/Select Leads.
עצה: הוסף מחוון מיקרו כוח/זמן: ”זה ייקח ~ דקה 1”.

5. 2 חיפוש/פילטרים = אפס תוצאה

מטרה: לעזור להתאים את הבקשה.

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

CTA: ”לאפס מסננים” משני: ”לפתוח ספרייה”.

5. 3 תשלומים/ארנק ריק

מטרה: לעורר חיבור שיטה/חידוש ראשון.
טקסט: ”שמור את שיטת התשלום שלך - מילוי ומשיכות ילך מהר יותר”.
CTA: ”הוסף שיטת תשלום” משנית: ”כללים ותשלומים”.

5. 4 אימות/גישה

תכלית: הסבר שקוף של ההגבלה ותוואי הנסיגה.

טקסט: "סעיף זה זמין לאחר אישור זהות. זה בדרך כלל לוקח עד 2 דקות "

CTA: ”לקבל מאומת” משני: ”למה זה הכרחי?”

5. 5 נתונים במעבר/חלל זמני

המטרה: להפחית את ההמתנה לחרדה.

טקסט: "איסוף הנתונים שלך. זה בדרך כלל לוקח עד 30 שניות. אתה יכול להשאיר דף - אנחנו נודיע לך כשהכל יהיה מוכן"

CTA: ”מובן” משני: ”מה קורה עכשיו?”

5. 6 לאחר ניקוי/הסרה

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

טקסט: "ההיסטוריה נקייה. עסקאות חדשות יופיעו לאחר המילוי הבא"

סי-טי-איי: ”למעלה”.

5. 7 שגיאה/מגש

המטרה: דרך החלמה ברורה.

טקסט: "נכשל בטעינת נתונים. בדוק את הרשת או נסה שוב" ‏

CTA: ”חוזר” משני: ”מצב המערכת”.

6) מיקרוטקסטים: תבניות מוכנות

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

• ”שום דבר לא נמצא עבור” לעדן את הבקשה או לאפס את המסננים. [ לאפס מסננים ]"

• "אין לך שיטות שמורות עדיין. הוסף כרטיס או ארנק כדי להאיץ את התשלומים שלך. [ הוספת שיטה ]"

• "התכונה אינה זמינה ללא אישור גיל. זה ייקח ~ 2 דקות. לאשר גיל למה?"

• "אנחנו סופרים את הסטטיסטיקה ב-24 השעות האחרונות... זה בדרך כלל עד 30 שניות. נראה לכם הודעה כשתסיימו"

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

7) שפה ויזואלית ואיורים

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

8) לוקליזציה וזמינות

הצב מניה לאורך הקווים (DE/TR ארוך יותר).
תרגם פורמטים מספריים, מטבע, תאריכים מקומיים.
עבור קוראי מסך: תפקיד = ”status”, aria-live = ”מנומס/אסרטיבי” עבור דינמיקה.
אל תכניס משמעות רק לתמונה: שכפול עם טקסט.
בדוק יכולת קריאה של 320 px וניגוד WCAG.

9) מדידות וניסויים

• CTR על CTA הריק הראשי;
• המרה ל ”הצלחה הראשונה” (אירוע הפעלה);
• זמן לפעולה ראשונה
• תדירות החזרה למסך ללא התקדמות;
• אחוז אפס תוצאות חיפוש
• קורא לתמיכה בתרחיש.

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

10) אנטי דפוסים

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

שקרן פסיבי: "יש להוסיף. "כתוב באופן פעיל: "הוסף.."

סעיפים ארוכים: 1-2 משפטים מקסימליים.
ממלא מקום במקום תווית בטפסים - מחמיר A11y והבנה.
אילוצים נסתרים (”מיידית”, למרות שהעיכוב אפשרי).

11) רשימת בדיקות טרום שחרור

[ ] ברור מדוע הוא ריק?

[ ] האם יש ערך לסעיף במשפט אחד? ‏

[ ] האם יש סי-טי-איי ראשי אחד, ואם יש צורך, אחד משני?

[ ] האם הטקסט קצר (140 תווים) וספציפי? ‏

[ ] תוספת זמן/מאמץ אומדן אם מתאים? ‏

[ ] טון מתאים לתסריט (רגוע/תומך)?

[ ] לוקליזציה A11y בדקו (תכונות אריה, ניגוד)?

[ תמונת ] אינה שולטת בסי-טי-איי?

12) לפני/אחרי דוגמאות

קטלוג משחקים (אפס ראשון)

לפני: ”אין כאן כלום עדיין”

אחרי: "לאסוף את הקלטת שלך. בחר 3 ז 'אנרים מועדפים - בואו נתחיל להמליץ. [ בחר ז' אנרים ]"

אפס חיפוש

לפני: ”שום דבר לא נמצא”

אחרי: "על ידי "רולטה בגבולות גבוהים" אין תוצאות. הסר את מסנן ”גבול גבוה” או נסה ”רולטה”. ”[ לאפס מסננים ]”

תשלומים

לפני: ”אין שיטות תשלום”

לאחר מכן: "שמרו את הכרטיס או הארנק שלכם ומשיכת הכסף תהיינה מהירות יותר. [ להוסיף שיטה ] [ עמלות ומונחים ]"

אימות

לפני: ”אין גישה”

לאחר מכן: "החלק זמין לאחר אישור זהות. זה לוקח ~ 2 דקות. לאמת למה זה משנה"

13) הטמעה במערכת עיצוב

• 'title' (מחרוזת, אופציונלי)
• 'גוף' (טקסט קצר 1-2 משפטים)
• 'Primmage Action ~ Label, On Click'
• ”פעולת second [תווית, href/onlick]”
• ”אייקון/איור” (אופציונלי)

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

14) קונסטרוקטור מהיר (העתק ושימוש)

• כותרת ראשית: ”התחל בצעד הראשון” ‏
• טקסט: ”יהיו כאן המלצות ברגע שתבחר תחומי עניין”.
• CTA: ”בחר כיווני חקירה”
• משני: ”איך זה עובד?”

• טקסט: ”שום דבר לא נמצא על ידי” לאפס את המסננים או לזקק את השאילתה"
• CTA: ”לאפס פילטרים”
• משני: ”קטלוג”

• טקסט: "תכונה זמינה לאחר אישור הגיל. זה בדרך כלל עד 2 דקות "
• CTA: "לאשר גיל &fost
• משנית: ”למה זה הכרחי?”

• טקסט: "אנחנו אוספים נתונים להיום. זה בדרך כלל עד 30 שניות. אנחנו ניתן לך לדעת מתי זה נעשה"
• CTA: ”טוב”

גיליון רמאות סופי

הקשר + ערך + פעולה - באחד ”ערימה”.
סי-טי-איי ראשי אחד ללא תחרות במשקל חזותי.
קצר וספציפי: 1-2 משפטים.
תמיד הדרך החוצה מהמבוי סתום, בלי מסכים ללא מוצא.
לוקליזציה A11y הם ברמת הרכיב.