შინაარსის იერარქია UI- ში

1) რატომ არის საჭირო იერარქია?

• პასუხობს სამ კითხვას 3-5 წამში: რა არის ეს? - რა არის მნიშვნელოვანი? - რა უნდა გააკეთოს?;
• ინტერფეისის პროგნოზირება და ადვილად სკანირება;
• ამცირებს შეცდომებს და ზრდის კონვერტაციას.

პრინციპები: სიგნალები> ხმაური, თანმიმდევრობა> მრავალფეროვნება, კონტექსტი> აბსოლუტური წესები.

2) მნიშვნელობისა და სტრუქტურის დონე

1. სანავიგაციო კონტექსტი (ბრენდი, განყოფილება, პატარა ნაჭრები/პურის ნამსხვრევები).

2. H1 არის ეკრანის მიზანი (ყველაზე მოკლე, ზმნა, საჭიროების შემთხვევაში).

3. Lead/ქვეტექსტი (მოგების ან სტატუსის ერთი სტრიქონი).

4. Primary actions (1-2 ძირითადი CTA).

5. პრიმარული მონაცემები (ძირითადი KPI, ბარათები „პირველი ხაზი“).

6. საშუალო მონაცემები (ნაწილები, ფილტრები, დამხმარე ცხრილები).

7. Meta/Help (მინიშნებები, შენიშვნები, იურიდიული ტექსტი).

წესი: ერთ ეკრანზე - ერთი H1, არა უმეტეს ორი პრიმიტიული CTA.

3) სტამბა და რიტმი

შრიფტის მასშტაბები: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (px/pt ეკვივალენტი ვებ - გვერდზე).
შუალედური ინტერვალები: 1. 3–1. 5 ბოდვისთვის, 1. 2–1. 3 სათაურებისთვის.
უკან დახევის რიტმი: მრავალჯერადი ძირითადი ერთეული (4/8 px). სათაური - ბლოკი: 16-24; აბზაცები: 8-12.
კონტრასტი: მინიმალური WCAG AA; სათაური ყოველთვის კონტრასტულია ვიდრე ხელმოწერები/meta.
ფერი vs წონა: ფერი არის აქცენტი, არა „მუწუკები“ ზომის/ცხიმის ნაცვლად.

4) ბადე და განლაგება

12 სვეტის (desktop )/4-6 (მობილური) ქსელი ფიქსირებული გატერით.
Visually first = პირველი DOM: ეხმარება ეკრანის ეკრანებს და SEO.
კითხვის ღერძი: მარცხნიდან მარჯვნივ (LTR) ან მარჯვნივ მარცხნივ (RTL) - მოათავსეთ სიგნალის რიგი.
„ყურადღების სფეროები“: ზედა მარცხენა/ცენტრი - სათაური და ლედი; „მოქმედების ზოლი“ - მის გარშემო/მის ქვეშ.

5) ვიზუალური პრიორიტეტული სიგნალები

ზომა და წონა (სტამბა) პირველადი სიგნალია.
პოზიცია (ზემოთ/მარცხნივ = უფრო მნიშვნელოვანია LTR- ზე).
ფერი (აქცენტი CTA- სთვის, სტატუსები - ფიქსირებული პალიტრით).
იკონოგრაფია (მხოლოდ როგორც ტექსტის მხარდაჭერა).
უკან დახევა/ჩარჩოები (ბარათი დიდი „ჰაერით“ აღიქმება უფრო მნიშვნელოვანი).
დინამიკა (ანიმაცია 200 ms, რათა ყურადღება მიიპყრო გაღიზიანების გარეშე).

6) პროგრესული გამჟღავნება

• Above the fold მხოლოდ კონტექსტია, მიზანი და პირველადი მოქმედება.
• აკორდეონის სექციები/ტაბები - მეორადი მონაცემები.
• დეტალიზაცია დაწკაპუნებით: ბარათი - პანელი - მოდალი.
• ინლაინ რჩევები გადატვირთული „ჰელპების“ ნაცვლად.
• ჩონჩხი/პლეიშოლდერები ინარჩუნებენ სტრუქტურას დატვირთვის დროს.

7) იერარქია ტიპურ ეკრანებში

7. 1 დაშბორდი

ზემოთ H1 + დროის ფილტრი.
KPI ზოლები (3-5 ბარათი) პირველი ხაზია.
გრაფიკა/ცხრილი - მეორე ხაზი, დახარისხება/ფილტრები იქვე.
ანომალიები/ალერტები - ცალკეული სვეტი/ფირზე, არ აურიოთ KPI- სთან.

7. 2 კატალოგი/ლობი

H1 + სწრაფი ფილტრები/ჩიპები.
დახარისხება უფრო ახლოს არის სათაურთან, CTA „თამაში/ყიდვა“ ბარათში.
ეტიკეტები (ახალი/ტოპ/ჯეკპოტი) ვიზუალურად მეორეხარისხოვანია სახელთან შედარებით.

7. 3 არსების ბარათი (თამაში/საქონელი)

გმირი-ზონა: სახელი (H1), საკვანძო ფაქტები (RTP/ცვალებადობა/რეიტინგი), primary CTA.
დეტალები: ჩანართები „აღწერა/მახასიათებლები/მიმოხილვები“.
მეტამონაცემები: ეტიკეტები და იურიდიული ტექსტი - ქვემოთ.

7. 4 ფორმები/ოსტატები

ნაბიჯის სათაური + მოკლე lead („2 წუთი, ბარათი არ არის დაწერილი“).
ველების შეკვეთა სიხშირით/ვალდებულებით.
CTA მარჯვნივ/ქვემოდან, დამხმარე მოქმედებები - ბმულები ქვემოთ/მარცხნივ.
შეცდომები - ველის გვერდით, მოკლედ და საქმეში.

8) სახელმწიფო პრიორიტეტიზაცია

• ნორმა: "წარმატება/ცარიელი შეცდომა.
• დატვირთვისას - შეინახეთ ჩარჩო (ჩონჩხი), CTA არ არის ნახტომი.
• შეცდომით - H1 იცვლება „რა მოხდა“, CTA - „განმეორება/კონტაქტი“.

9) შინაარსის ნიშნები და დიზაინის სისტემა

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• ტექსტის როლები: 'ტექსტი. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• ფერის როლები: 'accent/neutral/success/warn/danger' + „დონე“ (100-900).
• კომპონენტები: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) გაზომვა და ხარისხი

• Scan Time (შუამავალი პირველი მნიშვნელოვანი კლიკის/მოქმედების წინ).
• Focus Order Errors (რამდენჯერ „გამოტოვა“ მომხმარებელი თვალით).
• CTA Visibility% (როგორც დაინახა CTA vs).
• INP/CLS (იერარქია არ უნდა „გადახტეს“ დატვირთვის დროს).
• A/B: უფრო დიდი ვიდრე H1 vs უფრო ძლიერია ვიდრე კონტრასტის; ჩიპის ფილტრები ზემოდან გვერდითი პანელში.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) iGaming- ის პრაქტიკა (მაგალითი)

კაზინოს ლობი: H1 „ლობი“, ჩიპები „ახალი/ცოცხალი/ჯეკპოტები/საყვარელი“, შემდეგ ფილები. თითოეულ ბარათში - სახელი, პროვაიდერის ხატი, CTA „თამაში“; ეტიკეტები „ახალი/ჯეკპოტი“ მეორეხარისხოვანია.
ოპერატორის დაშბორდი: პირველი სტრიქონი - NGR/GGR/DAU/CR, მეორე - ტენდენციები და ანომალიები, მესამე - ცხრილი.
გადახდის ნაბიჯი: H1 „შევსება“, ლედი „საკომისიოს გარეშე, მყისიერად“, კონვერტაციის მეთოდების ჩამონათვალი, ზემოდან მინიმალური მეტატექსტი.

12) ანტიპატერები

ეკრანზე ათი იდენტური აქცენტი („ვიზუალური ტირილი“).
სათაურები, როგორიცაა სურათები/ხატები ტექსტის გარეშე (არღვევს წვდომას და ძიებას).
„შედეგები მცირე ბეჭდვით“ და შეტყობინებები გიგანტური ბანერების მიერ.
დამხმარე ბმულები primary CTA- ს გვერდით იგივე ვიზუალური წონით.
არაკოორდინირებული ბრძანება: დღეს „ფილტრები ზემოდან“, ხვალ „მარცხნივ“.

13) განხორციელების შემოწმების სია

1. განსაზღვრეთ ეკრანის მიზანი (H1 + 1-2 პირველადი მოქმედება).
2. დაანგარიშეთ დონე: პრიმერა/საშუალო/მეტა; დაფიქსირდა DS ტოკენებში.
3. შეაგროვეთ ტიპოგრაფიის მასშტაბები და განდგომილების ძირითადი რიტმი.
4. გამართეთ მდგომარეობა (დატვირთვა/ცარიელი/შეცდომა) STA/სათაურების გარეშე.
5. ჩაატარეთ 5-წუთიანი „სკანის ტესტი“ 3-5 ადამიანთან: რაც შეამჩნია, სად დაარტყა.
6. დაუკავშირდით ტელემეტრიას (ექსპოზიცია CTA, სკან დრო, focus წესრიგი).
7. დაადგინეთ ნიმუში ჰაიდლაინში, მაგალითებით „სანამ/შემდეგ“.

14) შედეგი

შინაარსის იერარქია არ არის „მთავარი შრიფტი“, არამედ გადაწყვეტილების სისტემა: სტამბა, ქსელი, ფერი, განთავისუფლების რიტმი, DOM წესრიგი და ქცევა სხვადასხვა მდგომარეობაში. როდესაც თითოეულ დონეს აქვს თავისი როლი და წონა - ინტერფეისი ხდება გასაგები, სწრაფი და პროგნოზირებადი, ხოლო მომხმარებლები დარწმუნებულნი არიან თავიანთ ქმედებებში.