ვიზუალური იერარქია და პრიორიტეტი

1) რა არის ვიზუალური იერარქია

ვიზუალური იერარქია არის ინტერფეისში აქცენტების განლაგების სისტემა, რომელიც ანაწილებს მომხმარებლის ყურადღებას და გზას უქმნის სამიზნე მოქმედებას (signup, ანაბარი, თამაშის ძებნა, ფილტრი, გამომავალი) სწრაფი და კონფლიქტური. იერარქია აგებულია კონტრასტის, მასშტაბის, პოზიციის, ფერის, ინფორმაციის სიმკვრივის, მოძრაობის და თეთრი სივრცის საშუალებით.

მიზანი: შეამციროს „შემეცნებითი ხარჯები“ და გაზარდოს პირველი Meaningful Click- ის წილი საჭირო ელემენტებზე.

2) ბიზნეს ეფექტი და KPI

• სამიზნე CTA- ს კონვერსია (რეგისტრაცია, ანაბარი, დამატება არჩეულ)
• დავალების დასრულების სიჩქარე
• დაბნეულობა (Confusion Rate)
• Bounce (Bounce) - ის სიღრმის ზრდა და შეკავება

• FMC (First Meaningful Click): მომხმარებელთა%, რომლებიც ჩამოტვირთვის შემდეგ CTA - N წამში მოხვდნენ.
• TTV: დრო შესვლიდან ძირითადი ღირებულების მიღწევამდე (მაგალითად, იპოვნეთ და დაიწყეთ ცრემლი).
• CTR საკვანძო CTA ეკრანებზე: სახლი, კატალოგი, თამაშის გვერდი, სალარო.
• პირველადი/მეორადი დაწკაპუნების თანაფარდობა (ყურადღების დისციპლინა).
• Scroll Depth ბლოკამდე ოფშორული/ტურნირით.

3) ვიზუალური იერარქიის პრინციპები (ბირთვი)

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

4) პრიორიტეტული მატრიცა (P1-P4)

P1 (კრიტიკული პირველადი): 1-2 STA/ელემენტი ეკრანზე. დიდი ზომა, ნათელი კონტრასტი, ფიქსირებული პოზიცია.
P2 (მნიშვნელოვანი დამხმარე): ფილტრები, სწრაფი ჭდეები, მეორადი CTA. საშუალო კონტრასტი, P1- ის გვერდით.
P3 (დახმარება/კონტექსტი): მინიშნებები, რეიტინგები, მინი ბარათები. მშვიდი სტილი, კომპაქტური.
P4 (ფონი/რეფერენდუმი): სერთიფიკატი, ფეხი, იურიდიული ბმულები. მცირე კონტრასტი და ზომა.

წესი: ერთ ეკრანზე არაუმეტეს ერთი P1. თუ P1 კონკურენციას უწევს, ისინი აღარ არიან P1.

5) იერარქიის ფენები

გლობალური: ზედა დონის ნავიგაცია, გლობალური ძებნა, შეტყობინებები.
გვერდი: გმირი-ბლოკი, H1/H2, საკვანძო ბანერები/ოფერები.
კომპონენტი: თამაშების ბარათები, სალაროს ფორმები, პოზიციები.
შიდა კომპონენტი: ველების რიგი, ხელმოწერები, სტატუსები, მიკრო რჩევები.

6) ტიპიური სკრიპტები

• P1: „შექმენით ანგარიში „/“ შესვლა “(დიდი ღილაკი, ფიქსირებული პოზიცია).
• P2: Sotz-logins, „პაროლის ჩვენება“, პაროლის პოლიტიკა.
• P3: ლინკი "დაივიწყე პაროლი? ", უსაფრთხოების მინიშნებები.

• P1: „შევსება „/“ გამომავალი “+ შერჩეული მეთოდი.
• P2: თანხა, სწრაფი პრესეტები, საკომისიო/ლიმიტები იქვე.
• P3: მეთოდის დამალული დეტალური აღწერა, დრო.

• P1: ძებნა + საკვანძო ფილტრები (პროვაიდერი, ცვალებადობა, RTP, New/Hit).
• P2: Segaways/ჭდეები (Megaways, Jackpot, Buy Feature).
• P3: მეორადი დახარისხება, ბარათის სამკერდე ნიშნები (სიახლე, ჰიტები, ტურნირები).

• P1: შეუერთდით/პრიზის დეტალებს.
• P2: ლიდერების ცხრილი (პირველი 5), საპირისპირო დათვლა.
• P3: სრული წესები დაწკაპუნების/შემობრუნების შესახებ.

7) სტამბა და ქსელი

მოდულური მასშტაბი: 12-14 (ტექსტი), 16 (საფუძველი), 20-24 (ქვესადგურები), 28-40 (H1/Hero).
საბაზო ხაზი: 4/8px ნაბიჯები; ვერტიკალური რიტმი = კითხვა.
სტრიქონის სიგრძე: 45-75 სიმბოლო ტექსტისთვის; 20-40 ბარათების აღწერისთვის.
სტრიქონი: 120-150% ტექსტისთვის, 110-120% სათაურებისთვის.

8) ფერი და კონტრასტი

ტექსტის კონტრასტი: საკვანძო გზაზე ტექსტებისთვის AA დონის მითითებები არ არის დაბალი.
ფერის როლები: Primary (CTA), Accent (ყურადღება), Info/Success/Warning/Danger (სტატუსები).
Dark თემა: საზღვრებისა და ტექსტების კონტრასტების გაძლიერება, უზარმაზარი ფერადი თვითმფრინავების გაჯერების შემცირება; თავიდან აიცილოთ ნეონის ტკივილი.
ელემენტების მდგომარეობა: default/hover/focus/active/disabled - განასხვავებს.

9) აქცენტები და ღილაკები

Primary CTA: ერთი ეკრანზე, შესამჩნევი ფერი/მასშტაბები, საკმარისი ველები (min-tap 44 × 44px).
საშუალო/საშუალო: გლუვი ტონები, კონტურული სტილი.
Spinner არის იერარქია: პროგრესი იძლევა უკუკავშირს, მაგრამ P1- ს არ უნდა შეუშალოს ხელი.

10) ყურადღების მექანიკა და სიჩქარე

F-/Z- ნიმუშები: განათავსეთ P1 იქ, სადაც ხედვა სავარაუდოდ გადის.
ჰიკის კანონი: უფრო სწრაფად უფრო სწრაფად - შეამცირეთ პირველი ნაბიჯის ვარიანტები.
ფიტსის კანონი: უფრო დიდი და უფრო ახლოს - ადვილია დაწკაპუნება; გაზარდეთ hit area მნიშვნელოვანი.
სერიული მითითებები: ასწავლეთ ნაბიჯები და არა „ტექსტის კედელი“.

11) სახლის ეკრანი/ლენდინგი

გმირი ბლოკი: მოკლე ოფერი + ერთი P1.
ვიზუალური „რელსები“: 3-4 განყოფილება მაქსიმუმ პირველ სკრიპამდე (კატეგორიები, სიახლეები, ტურნირი).
სოციალური მტკიცებულება: პროვაიდერების ბეიჯი, „კვირის ჰიტები“ - P2, არ წყვეტს P1- ს.

12) დაშბორდი და ცხრილი

პირველი ეკრანი: 1-2 ძირითადი KPI დიდი, sparklines + ტენდენცია.
ცხრილი: გაათანაბრეთ სვეტები მნიშვნელობით, „გაყინეთ“ საკვანძო სვეტები, გამოიყენეთ density შეცვლა (CD/სტანდარტი).
ცარიელი სახელმწიფოები: შემდეგი ნაბიჯის ახსნა (P1 ღილაკი + მინიშნება).

13) მობილური vs Desktop

Mobile: ერთი P1 მკაცრად მაღალია, ვიდრე scroll ხაზი, PP- ბარი - 5 ქულა, floating CTA დასაშვებია სალარო/თამაშისთვის.
დესკტოპი: კონტეინერის სიგანე 1200-1440px; შეზღუდეთ ხაზების სიგრძე; მოერიდეთ P1- ის „გაჭიმვას“.

14) ლოკალიზაცია, რიცხვები, RTL

გაითვალისწინეთ ხაზების სიგრძე (გერმანული/თურქული), სხვადასხვა ვალუტა და გამონადენი.
RTL: ქსელის სარკე და აქცენტის შეკვეთა, მაგრამ შეინახეთ P1 დომინირება.

15) A/B და იერარქიის მეტრიკა

• P1- ის ზომის/კონტრასტის ზრდა 12-16% -ით არის FMC და CTR ზრდა.
• ფილტრების გადაცემა (P2) უფრო ახლოს არის ძებნასთან - თამაშის ძიების TTV შემცირება.
• სალაროს პირველი ეტაპის ვარიანტების შემცირება უფრო მაღალია, ვიდრე დასრულება.

თვალყურის დევნება: FMC (N წამი), CTR P1, Scroll Depth სამიზნე ბლოკამდე, TTV, Confusion Rate (შეცდომები/გადასახადები), Rage Clicks.

16) აუდიტის პროცედურა (შემოწმების სია)

1. დაასახელეთ P1 თითოეულ საკვანძო ეკრანზე - მხოლოდ ერთია?
2. P2 ელემენტები მხარს უჭერენ P1- ს, არ კამათობენ მას ფერით/კონტრასტით?
3. ხედვის გზა: P1 მოხვდება პირველ 3 ხრიკში?
4. ტექსტის/STA კონტრასტი საკმარისია მსუბუქი/ბნელ თემებში?
5. შეინიშნება მინიმალური hit areas?
6. ხმაური: თქვენ შეგიძლიათ ამოიღოთ ელემენტების 20% კონვერტაციის დაკარგვის გარეშე?
7. ცარიელი მდგომარეობა მოქმედებს?
8. სახელმწიფოები (hover/focus/აქტივი) განასხვავებენ და ხელმისაწვდომია?
9. Mobile P1- ზე შეგიძლიათ ნახოთ გადახურვის გარეშე?
10. მრიცხველები დაკავშირებულია და იკითხება ძაბრში?

17) ანტი შაბლონები

ორი ან მეტი პრიმარი ერთ ეკრანზე.
„ყვირილი“ ბანერები, რომლებიც გადაფარავს P1- ს.
ნაცრისფერი ნაცრისფერზე (არასაკმარისი კონტრასტი).
ხატები კრიტიკულ გზაზე ტექსტის გარეშე.
გადატვირთული ბარათები: 6 + ბეიჯი, აღწერილობის 4 სტრიქონი.
ანიმაციები მიზნის გარეშე (მოციმციმე/გაუთავებელი).

18) დიზაინის სისტემა: პრიორიტეტების დაზუსტება

ნიშნები: 'color. primary`, `color. accent`, `elevation. p1`, `radius. lg`, `space. 8/12/16`.
განზომილებიანი როლები: 'btn. p1. lg`, `btn. p2. md`, `text. h1/h2/body`, `badge. status`.
ფენები/Z-index: P1 შინაარსის მოდულების თავზე, მაგრამ სისტემის მოდულების ქვემოთ.
სახელმწიფოები: სახელმწიფოების ცხრილი მაგალითებით (სკრინ-ჰაიდი).

19) პრიორიტეტული ალგორითმი (ფსევდო)

1. ეკრანის მიზანი განსაზღვრეთ (ერთი შეთავაზება).
2. დანიშნეთ P1 (ერთი ელემენტი), შეიმუშავეთ როგორც ყველაზე შესამჩნევი.
3. ჩამოაყალიბეთ P2 (2-5 ელემენტი) ახლოს/P1- ის შემდეგ.
4. დამალეთ/წაშალეთ P3-P4.
5. გაიარეთ წვდომის ჩამონათვალი და მობილურობა.
6. შეამოწმეთ მზერა და დრო-P1 (დაწკაპუნება 3 წამი).
7. დანამატი A/B, დააკვირდით FMC/TTV/CTR.

20) მიკროკოპია და ტექსტები

სათაურები H1 - მოკლე, ზმნა/მნიშვნელობა: „დაიწყეთ თამაში 10 წამში“.
CTA - მოქმედება და შედეგი: „წუთში შევსება“, „ახლა თამაში“.
მინიშნებები - საქმეში, მაქსიმუმ ერთი სტრიქონი, ჟარგონის გარეშე.

21) Acceptance Criteria იერარქიის ამოცანებისთვის

ეკრანზე განისაზღვრება ერთადერთი P1; ჩვენ ვხედავთ გარეშე (მობილური/დესკტოპი).
P1 კონტრასტი შეესაბამება ჰაიდლინებს; ზომები hit area-44 × 44px.
P2 ვიზუალურად სუსტია ვიდრე P1 (კონტრასტის/მასშტაბის 1-2 ეტაპზე).
ელემენტების მდგომარეობა განასხვავებს; არსებობს კლავიატურის ფოკუსის სტილი.
ანალიტიკოსების მოვლენები დაკავშირებულია FMC/TTV/CTR/Scroll Dept- ისთვის.

22) მოკლე რეზიუმე (TL; DR)

იერარქია ყურადღების დისციპლინაა. ეკრანზე ერთი აშკარა P1, მხარდაჭერა P2- ის საშუალებით, ნაკლები ხმაური, საკმარისი კონტრასტი და წაკითხული სტამბა. შეამოწმეთ საკუთარი თავი ჩეკის ფურცლით, გაზომეთ FMC/TTV/CTR და დაადასტუროთ A/B ტესტების ჰიპოთეზები.