עיצוב צורות UX

1) עקרונות

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

2) ארכיטקטורת מידע צורה

מטרה = שלבים = = שדות. התחל עם התוצאה (לדוגמה, ”פיזור”) ובחר את קבוצת השדות המינימלית.
מקבץ במשמעות: ”נתונים אישיים”, ”תשלום”, ”אישור”. "כל קבוצה מנתה 6 שדות.
גילוי פרוגרסיבי: הצג תחומים נוספים לפי תנאי (toggle/country selection).
סדר השדות הוא כמו בראש של המשתמש: מן הידוע היטב לקומפלקס.

3) פריסה ורשת

עמודה אחת לנייד ורוב המשימות מהירות יותר במבט ובלוח.
שני טורים מתאימים לשדות מחוברים קצרים (תאריך/זמן, שם/שם משפחה).
גובה הקו הוא 40-48 px, המרחק בין השדות הוא 8-12 px (קשור )/16-24 px (קבוצות).
יישור התווית בחלק העליון של השדה; מימין - אל תשתמש בצורות צרות.

4) תוויות, בעלי מקומות, עוזרים

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

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) צעדים והתקדמות

צורות מולטי-צעדים (ASC/Payouts): 3-5 צעדים, התקדמות ברורה ”צעד 2 מתוך 4”.
שמור צעדים הושלמו; אפשר לחזור ללא איבוד נתונים.
כפתורי ניווט: ”חזרה”, ”הבא”, ”אישור” הסופי - תמיד במקום אחד.

6) בקרת כניסה

מקלדות ותכונות: 'סוג', 'inputmode', 'השלמה אוטומטית' עבור סוג הנתונים.
השתמש במסכות קלט ברכות (טלפון, IBAN, PAN, תאריך), לאחסן ערכים מנורמלים.
אל תשבור את ההשלמה האוטומטית: indict' autocomplete =” שם נתון” | ”cc-number” | ”חד-פעמי” וכו'.
כמות מקדימה/קיצורי דרך: ”+ 50/+ 100/All” ליד שדה הכמות.

7) אימות ושגיאות

אסטרטגיה: לפני הכניסה (העוזר), במהלך (הפקה רכה), לאחר (בטשטוש/הגשה).
בדיקות אסינכרוניות (ייחודיות של ההתחברות, גבולות, סיכון) עם חיוב של 250-400 מ "מ.
שגיאה בטקסט: cause lough how to recovery.
לוח סיכום מעל הטופס למספר שגיאות + מיקוד לשגיאה הראשונה.
Idempotency-Key לפעולות קריטיות (הצעה/תשלום) ומגשים מאובטחים.

8) כפתורים וכניעה

CTA ראשי מודגש בצבע/גודל, זמין על ידי Enter.

המדינה העמוסה והלחץ על בלוק החזרה; בעיכוב> 3-5 s - ”מחכה לאישור...”

לאחר ההצלחה - סטטוס מפורש (טוסט/מסך מוכן) + מה קורה הלאה.

9) זמינות (A11y)

קישורים נכונים 'תווית = קלט', שגיאות באמצעות 'אריה-מתאר', תפקיד קריטי = ”התראה”.
גלוי לעין: פוקוס-גלוי ", סדר לשונית מתאים לראייה.
טקסט/איקונין ניגוד בין AA; משמעות היא לא רק צבע.
'מעדיף-מופחת-תנועה תמיכה: אנימציות מינימום.
עבור קבוצות כפתור רדיו - 'fieldset/legend', עבור premats -' תפקיד = ”status”.

10) לוקליזציה ופורמטים בינלאומיים

תאריכים/מטבעות/מספרים - מקומיים בכניסה, אחסון - יחידות ISO/מינוריות.
אפשר אלפביתים שונים בשמות/כתובות; אין להגביל מקפים/אפוסטרופים.
שמור את הטלפון E.164; מדינה שנבחרה במפורש או מ '+ CC' על החדרה.

11) ביצועים ויציבות

התגובה החזותית הראשונה מצורפת 100 ms; בדיקות אסינכרוניות - לא לנעול את המסך.
שלד במקום ספינר ”תלוי”, לתקן גבהים, למנוע CLS.
רשימות ארוכות וירטואליות (למשל: מדינות/בנקים).
האנימציה רק ”שינוי צורה/אפיון”, אין טשטוש/צללים בכמויות גדולות.

12) ביטחון ופרטיות

אל תרשום PAN/CVC/Psport; אל תשלח לרום/קונסולה.
מסכה שדות רגישים, לא לשמור אותם באוטוסייב.
אל תגלה אם החשבון קיים: ”אם הדוא” ל רשום, נשלח דוא ”ל”.
אחסון - מינימום נדרש; הצג מדוע נדרש קיק.

13) דפוסי תרחיש טיפוסיים

13. 1 תשלום/הפקדה

שדה כמות עם קדם, מטבע צוין במפורש.
פאן עם מסכה רכה, צ 'ק לון; CVC מוסתר; תאריך 'מ/י' עם אוטומטי '/".
טקסט על עמלות/מועדים בקרבת מקום, לא בכלים.

13. 2 נסיגה

שלבים כמות * * שיטה # אישור

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

13. 3 KYC

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

13. 4 מגבלות ומשחק אחראי

יחידות ברורות (יום/שבוע/חודש), הגדרות מראש, אישור של שינויים, ”ייכנס לתוקף...”

14) תרופות אנטי ־ פטריות

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

15) קטעי יישום

סיכום שגיאות + התמקד בגיליון הראשון

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

כפתור עם מייד עסוק ואימפוטנציה

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

מסגרת HTML של קבוצת כפתורי הרדיו הזמינים

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) מערכת עיצוב אסימונים (דוגמה)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

CSS pressets

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

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

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

18) רשימת QA

משמעות וזרימה

[ ] השדות מתאימים למטרה; אין תוספת.

[ קבוצות ] הגיוניות; מקסימום 6 שדות לכל קבוצה.

קלט

[ ] תקן 'סוג/inputmode/autocomlete'.

[ ] המסכות רכות, הכנס לא נשבר, הדאגה צפויה.

אימות

[ ] עזר לפני הקלט; טעויות בטשטוש/הגשה; דבון 250-400 מ "ר.

[ ] לוח סיכומים למספר שגיאות; להתמקד בראשון.

זמינות

[ תוויות ] מקושרות; ניגוד איי-איי; מיקוד גלוי לעין.

[ ] ניווט מקלדת; קבוצות רדיו עם 'שדה/אגדה'.

ביצועים

[ תגובה ראשונה ] 100 ms; בלי ”תלייה” ספינרים.

[ ] No CLS; רשימות ארוכות הן סגולות.

אבטחה

[ ] אין יומני שדה רגישים; PAN/CVC הוא לא באוטוסייב.

[ ] אידמפוטנטיות ונסיגות בטוחות כלולות.

19) הפרטים של iGaming

הימורים: כמות שדה + טרום, מיד 'עסוק', אישור אופטימי עם האפשרות לבטל (אם התקנות מאפשרות).

תשלומים/משיכות: עמלות מפורשות ומועדים קרובים לשדות, לא רק בטיפים; בדוק גבולות וסטטוס KYC

טורנירים: צורת רישום עם מינימום של נתונים, כללים ותיבות צ 'ק מוסכמות ללא ”דפוסים אפלים”.
משחק אחראי: צורות של הצבת גבולות בראיונות ברורים והקדמת התוצאה (”המגבלה היומית שלך תהיה 2,000 ₴ ממחר”).

תקציר

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