היררכיה ויזואלית ועדיפות

1) מהי ההיררכיה החזותית

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

המטרה: להפחית ”עלויות קוגניטיביות” ולהגדיל את החלק של First International Click על ידי האלמנטים הדרושים.

2) השפעה עסקית ו ־ KPIs

• המרת יעד CTA (רישום, הפקדה, הוסף לפייבוריטים)
• זמן לערך
• קצב בלבול
• להקפיץ, לגלול עומק ולהחזיק

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

3) עקרונות ההיררכיה החזותית (ליבה)

1. ניגוד וקנה מידה: חשוב יותר - גדול יותר ומנוגד יותר.
2. סדר מיקום וקריאה: למעלה/שמאלה ו ”מסך ראשון” מקבלים עדיפות.
3. מרחב לבן: אוויר = חשיבות. הדוק מדי, העדיפות אבודה.
4. צבע ורוויה: מבטא צבעים - ”מטבע קשב”; להציל אותה.

5. צורה ואיקונוגרפיה: צורת כפתור, סמנים, סמלי מצב

6. תנועה ומיקרואנימציה: נדיר, קצר, מבטא שלם; להימנע מ ”הוגן”.
7. קיבוצים (גשטלט): קרבה, דמיון, סגירה, יישור, אזור משותף.
8. צפיפות מידע: במסלול הקריטי - רק הנכון, השאר הוא בשכבות ”חלשות”.

4) מטריקס עדיפות (P1-P4)

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

חוק: לא יותר מ-P1 אחד על מסך אחד. אם P1s מתחרים, הם כבר לא P1s.

5) שכבות היררכיות

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

6) תרחישים טיפוסיים (התאמת iGaming)

• P1: ”צור חשבון ”/” התחבר ”(כפתור גדול, מיקום קבוע).
• P2: כניסה חברתית, ”הצג סיסמה”, מדיניות סיסמה.
• P3: קישורים ”שכח את הסיסמה שלך? ”, טיפים לאבטחה.

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

• P1: מסנני חיפוש + מפתח (ספק, תנודתיות, RTP, New/Hit).
• P2: קטעים/תגיות (Megaways, Gkpot, Buy Feature).
• P3: מיון משני, תגי קלפים (חדש, להיט, טורנירים).

• P1: הצטרף/פרס פרטים.
• P2: לוח ראשי (5 הראשון), טיימר ספירה לאחור.
• P3: כללים של לחיצה/פנייה מלאה.

7) טיפוגרפיה ורשת

סולם מודולרי: 12-14 (טקסט), 16 (גזע), 20-24 (תת-headings), 28-40 (H1/Hero).
קו בסיס: 4/8px צעדים; קצב אנכי = קריאה.
אורך שורה: 45-75 תווים לטקסט; 20-40 לתיאור קלפים.
קו לקו: 120-150% עבור טקסט, 110-120% עבור כותרים.

8) צבע וניגוד

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

9) מבטא וכפתורים

CTA ראשי: אחד לכל מסך, צבע/קנה מידה בולט, שדות מספיקים (min-stap 44 × 44px).
שני/שלישוני: צלילים חלקים, סגנונות קונטור.
ספינר היררכיה: הקידמה נותנת משוב, אבל לא צריך להפריע P1.

10) מכניקת תשומת לב ומהירות

תבניות F-/Z: מקום P1 שבו המבט צפוי לעבור.
חוק היק: פחות שווה לאפשרויות שלב ראשון קצרות יותר.
חוק פיטס: גדול יותר וקרוב יותר קל יותר לחיצה; להגדיל את אזור הפגיעה חשוב.
מניעים סדרתיים: למד על ־ פי שלבים ולא על ־ פי ”קיר הטקסט”.

11) מסך בית/עמודי נחיתה

בלוק גיבורים: הצעה קצרה + P1 בודד.
”רייקי” ויזואלי: 3-4 חלקים מקסימליים למגילה הראשונה (קטגוריות, פריטים חדשים, טורניר).
הוכחה חברתית: תגים מספקים, ”להיטי השבוע” - P2, לא להפריע P1.

12) לוחות מחוונים ושולחנות

מסך ראשון: 1-2 מפתח KPIs גדול, נצנצים + תגים מגמה.
טבלה: ליישר עמודות לפי חשיבות, ”להקפיא” עמודות מפתח, להשתמש במתג הצפיפות (compact/standard).
מצבי ריק: הסבר את השלב הבא (כפתור P1 + prempt).

13) מובייל נגד שולחן העבודה

Mobile: P1 אחד נמצא אך ורק מעל קו הגלילה, סרגל החשבון מצביע על 5 נקודות, CTA צף מקובל לקופה/משחק.
שולחן עבודה: רוחב מכולה 1200-1440px; הגבל את אורך השורות להימנע מ ”מתיחת” P1.

14) לוקליזציה, מספרים, RTL

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

15) A/B ומדדים היררכיים

• עלייה של 12-16% בגודל P1/ניגוד = עלייה ב ־ FMC וב ־ CTR.
• מסננים נעים (P2) קרוב יותר לחיפוש _ הפחתת חיפוש משחק TTV.
• צמצום האפשרויות בשלב הראשון של הקופה = השלמת הקופה לעיל.

רצועה: FMC (N שניות), CTR P1, Scroll Eight to target block, TTV, Consolution Rate (שגיאות/חזרה), Rage Clicks.

16) נוהל ביקורת (רשימה)

1. שם P1 על כל מסך מפתח - האם יש בדיוק אחד?
2. יסודות P2 תומכים ב ־ P1, אין להתווכח איתו בצבע/ניגוד?
3. נתיב הראייה: P1 פוגע 3 הראשון מתמקד?
4. האם ניגוד טקסט/ACTA מספק בנושאים בהירים/אפלים?
5. אזורי פגיעה מינימליים נפגשו?
6. רעש: האם אתה יכול להסיר 20% מהיסודות מבלי לאבד את ההמרה?
7. מדינות ריקות מובילות לפעולה?
8. האם ניתן להבחין בין המדינות (ריחוף/מיקוד/פעילות)?
9. האם ה ־ P1 נראה לעין ללא גלילה בנייד?
10. האם המדדים מחוברים וקוראים במשפך?

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

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

18) מערכת עיצוב: מפרט סדר עדיפויות

אסימונים: "צבע. ראשי ”,” צבע. מבטא ',' הגבהה. פי-1, רדיוס. lg ',' מרחב. 8/12/16`.
תפקידי מימד: 'btn. p1. lg ',' btn. p2. md', 'טקסט. h1/h2/גוף ',' תג. סטטוס ".
שכבות/מדד Z: P1 מעל מודולי תוכן, אבל מתחת למודלים של המערכת.
מצבי: שולחן מצב עם דוגמאות (מדריך מסך).

19) אלגוריתם עדיפות (פסאודו)

1. הגדר את מטרת המסך (משפט אחד).
2. הקצאת P1 (אלמנט אחד), העיצוב הכי בולט.
3. צור P2 (2-5 יסודות) ליד/אחרי P1.
4. להסתיר/למוטט את P3-P4.
5. להשלים את רשימת האפשרויות והניידות.
6. בדוק את הנתיב ואת time-to-P1 (לחץ על 3 שניות).
7. הפעל A/B, התבונן ב ־ FMC/TTV/CTR.

20) מיקרוסקופים וטקסטים

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

21) קריטריון קבלה למשימות היררכיות

P1 יחיד מוגדר על המסך; ראה ללא גלילה (נייד/שולחן עבודה).
ניגודיות P1 מתאימה לקווים מנחים; ממדים פגעו באזור 44 × 44px.
P2 חלש בצורה ויזואלית מ-P1 (על ידי 1-2 שלבי ניגוד/קנה מידה).
ניתן להבחין בין מצבי היסודות; יש סגנונות מיקוד מקלדת.
אירועי אנליטיקה מחוברים לעומק FMC/TTV/CTR/Scroll.

22) תקציר קצר (TL; DR)

היררכיה היא המשמעת של תשומת לב. P1 מפורש אחד לכל מסך, תמיכה דרך P2, פחות רעש, ניגוד מספיק וטיפוגרפיה קריאה. בדוק את עצמך עם רשימת בדיקות, מדד FMC/TTV/CTR, ואשר השערות בעזרת בדיקות A/B.