היררכיית תוכן ב UI

1) מדוע יש צורך בהיררכיה

• משיב על שלוש שאלות ב-3-5 שניות: מהו הדבר החשוב?
• עושה את הממשק צפוי וקל לסריקה
• מפחית שגיאות ומגדיל את ההמרה.

עקרונות: אותות> רעש, רצף> גיוון, הקשר> כללים מוחלטים.

2) רמות חשיבות ומבנה

1. הקשר ניווט (מותג, סעיף, פירורים/פירורי לחם).

2. יעד מסך H1 (קצר ככל האפשר, פועל במקרה הצורך).

3. עופרת/כתוביות (קו אחד של תועלת או מעמד).

4. פעולות עיקריות (1-2 מפתחות CTAs).

5. נתונים ראשוניים (ראשי תיבות של KPIs, כרטיסים מהשורה הראשונה).

6. נתונים משניים (חלקים, מסננים, טבלאות עזר).

7. מטא/עזרה (רמזים, הערות, טקסט משפטי).

כלל: על מסך אחד - H1 אחד, לא יותר משני סי-טי-איי עיקריים.

3) טיפוגרפיה וקצב

סולם גופן: H1 28-32, H2 22-24, H3 18-20, גוף 14-16, מיקרו 12 (px/pt שווה ערך ברשת).
מרווח שורות: 1. 3–1. 5 עבור גוף, 1. 2–1. 3 עבור תארים.
קצב הזחה: מרובה של יחידת הבסיס (4/8 px). Zagolovok↔blok: 16-24; סעיפים: 8-12.
ניגוד: מינימום WCAG AA; הכותרת תמיד מנוגדת יותר מהכיתובים/מטה.
צבע נגד משקל: מבטא צבע, לא ”קביים” במקום גודל/שומן.

4) רשת ופריסה

עמודות רשת 12 (שולחן עבודה )/4-6 (נייד) עם שערים קבועים.
ראשית ויזואלית = ראשון ב-DOM: עוזר לקוראי מסך ו-SEOS.
ציר קריאה: משמאל לימין (LTR) או מימין לשמאל (RTL) - מראה את סדר האותות.
”אזורי תשומת לב”: שמאל/מרכז עליון - כותרת ועופרת; ”בר פעולה” - קרוב/מתחתיו.

5) אותות בעדיפות ויזואלית

גודל ומשקל (טיפוגרפיה) הוא האות העיקרי.
מיקום (מעל/משמאל) חשוב יותר ב- LTR.
צבע (מבטא CTA, סטטוסים - לפי לוח קבוע).
איקונוגרפיה (כתמיכה בטקסט בלבד).
Indents/prames (כרטיס עם הרבה ”אוויר” חשוב יותר).
Dynamics (אנימציית 200 ms כדי למשוך תשומת לב ללא גירוי).

6) גילוי מתקדם

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

7) היררכיה במסכים טיפוסיים

7. לוח מחוונים 1

מסנן זמן H1 + למעלה.
בר KPI (3-5 כרטיסים) - שורה ראשונה.
גרפים/טבלאות - שורה שנייה, מיון/מסננים זה לצד זה.
אנומליות/התראות - עמודה/סרט נפרדים, אל תערבבו עם KPI.

7. 2 קטלוג/לובי

מסננים/שבבים H1 + מהירים.
מיון קרוב יותר לכותרת, CTA ”Play/Buy” בקלף.
תגיות (זכייה חדשה/עליונה/) - משנית ויזואלית לשם.

7. 3 כרטיס ישות (משחק/פריט)

אזור הגיבורים: שם (H1), עובדות מפתח (RTP/תנודתיות/דירוג), CTA ראשוני.
פרטים: תיאור/מאפיינים/לשוניות משוב.
תוויות וטקסט משפטי בתחתית.

7. 4 צורות/קוסמים

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

8) עדיפות המדינה

• Norm # Load # הצלחה/שגיאה ריקה.
• בטעינה - שמור על המסגרת (שלדים), CTA אינו קופץ.
• טעות - H1 משתנה ל ”מה שקרה”, CTA - ”חזרה/מגע”.

9) אסימוני תוכן ומערכת עיצוב

• 'גופן. כותרת. xl', 'גופן. גוף. md', 'מרחב. רדיוס של 200. md', 'הגבהה. sm'.
• תפקידי טקסט: 'טקסט. כותרת, 'טקסט. עופרת ”, טקסט”. משנית, טקסט. מטה ',' טקסט. העוזר '.
• תפקידי צבע: ”מבטא/ניטראלי/הצלחה/אזהרה/סכנה” + ”רמות” (100-900).
• מרכיבים: "KPI. כרטיס/מדור. כותרת/אינליין. עזרה/מטה. קו ".

10) מדידה ואיכות

• סרוק זמן (חציוני ללחיצה/פעולה משמעותית ראשונה).
• מיקוד שגיאות סדר (כמה פעמים המשתמש ”מפספס” את המראה).
• ראות CTA% (כמה ראו CTA נגד לחיצה).
• INP/CLS (היררכיה לא צריכה ”לקפוץ” בעת טעינה).
• A/B: H1 גדול יותר נגד ניגוד חזק יותר; מסנני שבבים למעלה נגד בלוח הצדדי.

• 'first _ פוקוס _ היעד', 'primary _ cta _ חשוף/licked', 'section _ crust _ toggle', 'help _ ship'.

11) אימונים עבור iGaming (דוגמה)

לובי קזינו: H1 ”לובי”, ”New/Live/Jackpots/Favorite” צ 'יפס, ואז אריחים. כל קלף מכיל שם, סמל ספק, CTA ”Play”; תגיות חדשות/כל הקופה - משניות.
לוח המחוונים של המפעיל: השורה הראשונה - NGR/GGR/DAU/CR, השנייה - מגמות וסטיות, השלישית - טבלאות.
צעד תשלום: H1 ”חידוש”, להוביל ”אין עמלה, באופן מיידי” רשימה של שיטות המרה, מינימום אמתלה על גבי.

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

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

13) רשימת מימושים

1. הגדר את יעד המסך (H1 + 1-2 פעולות עיקריות).
2. סמן את הרמות: ראשי/משני/מטא; להצמיד אסימונים DS.
3. אסוף את קנה המידה של הטיפוגרפיה ואת קצב ההזחה הבסיסי.
4. מצבי Debug (אתחול/שגיאה ריקה) ללא קפיצות STA/header.
5. ערוך 5 דקות ”בדיקת סריקה” עם 3-5 אנשים: מה שמת לב, איפה אתה לחיצה.
6. חיבור טלמטריה (חשיפה CTA, זמן סריקה, סדר מיקוד).
7. תיקון התבנית במדריכים עם דוגמאות לפני/אחרי.

14) השורה התחתונה

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