Տեսողական հիերարխիա և գերակայություն

1) Ի՞ նչ է տեսողական հիերարխիան

Տեսողական հիերարխիան ինտերֆեյսում շեշտադրող համակարգ է, որը բաժանում է օգտագործողի ուշադրությունը և ճանապարհ է դարձնում նպատակային գործողությունների համար (signup, դեպոզիտ, խաղի որոնում, ֆիլտրում, եզրակացություն) արագ և անզիջում։ Հիերարխիան կառուցվում է հակադրության, մասշտաբի, դիրքի, գույնի, տեղեկատվության խտության, շարժման և սպիտակ տարածության միջոցով։

Նպատակը 'նվազեցնել «կոգնիտիվ ծախսերը» և բարձրացնել First Meaningful Click-ի մասնաբաժինը անհրաժեշտ տարրերի վրա։

2) Բիզնես էֆեկտը և KPI-ը

Ճիշտ հիերարխիան ուղղակիորեն ազդում է

Փոխարկումը CTA (108, դեպոզիտ, ավելացրեք ընտրված)

Առաջադրանքների ավարտման արագությունը (Time to Value)

Խառնաշփոթի ցուցանիշի նվազումը (Delusion Rate)

Ձախողումների նվազումը (Bounce), ժայռի խորության աճը և պահպանումը

Հիմնական մետրերը

FMC (First Meaningful Click) 'օգտագործողների տոկոսը, ովքեր կլքրեցին CTA-ի հիմնական վայրկյանները բեռնումից հետո։

TTV (Time to Value): ժամանակը մուտքից մինչև հիմնական արժեքը հասնելը (օրինակ, գտնել և սկսել փղը)։

CTR հիմնական CTA էկրանի վրա 'տնային, կատալոգը, խաղի էջը, տոմսերը։

Առաջնային/ստացիոնար կլինիկայի հարաբերությունը (ուշադրության առարկան)։

Scrope Depth-ը մինչև offer/ռոտորի բլոկը։

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) Տիպիկ սցենարներ (iGaming-օրինակ)

Մոսկվան/լոգինը

P1: «Ստեղծել հաշիվ «/» Մուտք »(մեծ կոճակ, ֆիքսված դիրք)։

P2: Սոցն տրամաբանական է, «Ցույց տալ գաղտնաբառը», գաղտնաբառի քաղաքականությունը։

P3: Linki "Մոռացե՞ լ եք գաղտնաբառը։ ", անվտանգության խորհուրդներ։

Կասա (դեպոզիտ/եզրակացություն)

P1: «Համալրեք «/» Բերել »+ ռուսական մեթոդը։

P2։ Գումարը, արագ ճնշումները, կողոպուտները/լիմիտները։

P3: Թաքնված մեթոդի մանրամասն նկարագրությունը, ժամանակը։

Խաղերի կատալոգ

P1: Որոնել + հիմնական ֆիլտրերը (Պրովայդեր, Վոլատիլոստ, RTP, Նոր/Հիթ)։

P2: Սեգենտներ/թեգեր (Megaways, Jackpot, Buy Feature)։

P3: Հիբրիդային տեսակավորում, քարտային բայջեր (նորեկ, հիթ, կիսագնդեր)։

Aleksra/ակցիաներ

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 (ուշադրություն), Live/Success/Warning/Danger (արձաններ)։

Դարկ թեման 'ուժեղացնել սահմանների և տեքստերի հակադրությունները, նվազեցնել հսկայական գունավոր ինքնաթիռների հարստությունը։ խուսափել «ոչ ցավից»։

Տարրերի վիճակը ՝ wwww.ru/hover/focus/action/wwww.abled - տարբեր։

9) Ակցենտներ և կոճակներ

Primary CTA 'մեկը էկրանին, նկատելի գույնը/մասշտաբը, բավարար դաշտերը (min-tap 44-44px)։

Secondary/tertiary: հարթ երանգներ, կոնտակտային ոճեր։

Սպինները հիերարխիա է ասում, որ առաջընթացը հետադարձ կապ է տալիս, բայց չպետք է ընդհատել P1։

10) Ուշադրության մեխանիկները և արագությունը

F-/Z-patterns: Տեղադրեք P1-ը այնտեղ, որտեղ տեսողությունը սպասվում է։

Հիկի օրենքը 'ավելի քիչ ավելի արագ, կրճատեք առաջին քայլի տարբերակները։

Ֆիթսի օրենքը 'ավելի մեծ և ավելի մոտիկից, ավելի հեշտ է կլիկը։ ավելացրեք hit area կարևոր։

Սերիական հուշումներ 'սովորեք քայլերով, ոչ թե «տեքստի պատով»։

11) Տնային էկրանը/լենդինգները

Հերոս բլոկը 'կարճ օֆեր + մեկ P1։

Տեսողական «թռիչքներ» ՝ 3-4 հատվածներ առավելագույնը մինչև առաջին սկրոլլա (կատեգորիաներ, նոր, մրցույթը)։

Սոցիալական ապացույց. Բեյջի պրովայդերներ, «շաբաթվա հիթեր» - P2, չեն ընդհատում P1։

12) Դաշբորդներն ու աղյուսակները

Առաջին էկրանը '1-2 հիմնական KPI մեծ, sparklins + trend-baji։

Տե՛ ս 'հավասարեցնել սյուները, «սառեցնել» հիմնական սյուները, օգտագործել dronity անջատիչը (108/108)։

Դատարկ վիճակներ 'բացատրել հաջորդ քայլը (P1 կոճակ + հուշում)։

13) Բջջային vs Desktop

Altail: Մեկ P1-ը խիստ բարձր է ժայռի գծից, 108-բար 245 կետից, floating CTA-ն թույլ է տալիս տոմսարկղեր/խաղեր։

Desktop 'բեռնարկղի լայնությունը 1200-1440px; սահմանափակեք տողերի երկարությունը։ խուսափեք P1-ի «ձգումից»։

14) Տեղայնացում, թվեր, RTL, RTL

Հաշվի առնել տողերի երկարությունը (գերմանացի/թուրքական), տարբեր արժույթներ և օրինագծեր։

RTL 'հայելու ցանցը և ակցենտների կարգը, բայց պահպանել P1 գերիշխանությունը։

15) A/B և հիերարխիայի մետրերը

Հիպոթեզներ

P1 չափի/հակադրության աճը 12-16 տոկոսով բացատրում է FMC և CTR աճը։

Ֆիլտրերի տեղափոխումը (P2) ավելի մոտ է փնտրել TTV խաղի որոնման նվազումը։

Առաջին տոմսարկղերի տարբերակների կրճատումը ավելի բարձր է, քան ավարտը։

Հետևեք ՝ FMC (N վայրկյան), CTR P1, Scrope Depth-ը մինչև բլոկը, TTV, Disusion Rate (սխալներ/բարձրացում), Rage Clicks։

16) Մրցույթի գործընթացը (չեկի թերթ)

1. Անվանեք P1 յուրաքանչյուր առանցքային էկրանին 'դրանք ճիշտ մեկ։

2. P2 տարրերը աջակցում են P1, չեն վիճում նրա հետ գույնի/հակադրության մասին։

3. Հայացքի ճանապարհը 'P1-ն առաջին 3 ֆոկուսների մեջ է։

4. Տեքստի/STA-ի հակադրությունը բավարար է պայծառ/մութ թեմաներով։

5. Նվազագույն hit areas պահպանվում է։

6. Աղմուկ 'Դուք կարող եք հեռացնել տարրերի 20 տոկոսը առանց փոխակերպման կորստի։

7. Դատարկ վիճակը գործում է։

8. Վիճակը (hover/focus/action) տարբեր է և հասանելի։

9. Altaile P1-ը տեսանելի է առանց ժայռի։

10. Մետրերը միացված են և ընթերցվում են ձագարանում։

17) Anti-patterna

Երկու և ավելի Primary-ը մեկ էկրանին։

«Crychanners», որոնք արգելափակում են 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. Դիտարկման ճանապարհը և Time-to-P1 (տեսահոլովակը 363 վայրկյան)։

7. Rock A/B, դիտեք FMC/TTV/CTR։

20) Միկրոկոպիա և տեքստեր

H1 վերնագրերը կարճ են, բայը/արժեքը ՝ «Սկսեք խաղալ 10 վայրկյանում»։

CTA-ն գործողություն և արդյունք է '«Մեկ րոպեում համալրել», «Հիմա խաղալ»։

Հուշումները 'գործի մեջ, առավելագույնը մեկ տող, առանց ժարգոնի։

21) Acceptics Criteria-ը հիերարխիայի խնդիրների համար

Էկրանին տեղադրված է միակ P1; տեսնում ենք առանց սկրոլի (www.il/desktop)։

P1-ի հակադրությունը համապատասխանում է դլայններին։ չափսերը hit area 44px են։

P2 տեսողական ավելի թույլ է, քան P1 (հակադրության/մեծության 1-2 աստիճաններում)։

Տարրերի վիճակը տարբեր է. ստեղնաշար կա։

Իրադարձությունները կապված են FMC/TTV/CTR/Scrope Depth-ի համար։

22) Կարճ ռեզյումե (TL; DR)

Հիերարխիան ուշադրության առարկան է։ Մեկ ակնհայտ P1 էկրանի վրա, P2-ի միջոցով աջակցություն, ավելի քիչ աղմուկ, բավարար հակադրություն և ընթերցված տպագրություն։ Ստուգեք ինքներդ ձեզ, չափեք FMC/TTV/CTR-ը և ապացուցեք A/B թեստերի վարկածները։