Ինտերֆեյսի նավիգացիոն ճարտարապետությունը

1) Ի՞ նչ է նավիգացիոն ճարտարապետությունը, և ինչո՞ ւ է այն անհրաժեշտ։

Նավիգացիոն ճարտարապետությունը (NA) սննդի մեջ օգտագործողի կողմնորոշման համակարգային միջոց է. Նա հասկանում է, թե որտեղ է գտնվում, որտեղ կարող է անցնել և ինչպես վերադառնալ։ Լավ NA

Այն կապում է օգտագործողի նպատակները բովանդակության/ֆիչի կառուցվածքի հետ։

Նվազեցնում է կոգնիտիվ բեռը կանխատեսելի փամփուշտների պատճառով։

Արագացնում է արդյունքի հասնելը (ավելի քիչ կտորներ/ցատկ)։

Այն մեծանում է, երբ ապրանքը մեծանում է։

Սկզբունքներ ՝ հաջորդականություն> կրեատիվ, ակնհայտ ուղեցույցներ> թաքնված ժեստեր, ճանապարհը 3-4 գործողությունից ավելի կարճ է, մինչև հիմնական նպատակը։

2) Նավիգացիայի շերտերը (IA մակարդակները)

1. Գլոբալ մակարդակը ապրանքի հատվածներն են (օրինակ ՝ Լոբբի, Մոսկվա, Բաժնետոմսեր, Կոշելեկ, Պրոֆիլ)։

2. Բաժին/կատեգորիա - հաշվարկներ և հիմնական գործառույթներ (կոդեր, հաշվետվություններ, խմբագրություններ)։

3. Էջը/տեսակը հատուկ էակներ են (խաղը, զեկույցը, ձևը)։

4. Տեղական/կոնտեքստային 'ծխախոտ, խարիսխ, «ցույց տալ», պագինացիա։

5. Պատմությունը և հետադարձ ճանապարհը հացն են, back, «վերջին»։

Կանոն 'յուրաքանչյուր մակարդակում պետք է լինի «որտե՞ ղ եմ»։ (ակտիվ կետ, N1/նապաստակ) և «ի՞ նչ է հաջորդը»։ (STA/հղում/առաջարկություններ)։

3) Նավիգացիայի մոդելները և երբ ընտրել դրանք

Վերին ընտրացանկը (top-nav) 'բարձր մակարդակի 5-7 հատվածներ։ Լավ է սպառողական ինտերֆեյսների և ալթայլի համար (վերածվում է ստորին տաբերի)։

Ստորին տաբերը (mobile) 'մինչև 5 կետ, ֆիքսված, iconka + պիտակը։ Հիմնական գործողությունները միշտ մեծ մատի տակ են։

Ձախ Սայդբարը '2-3 մակարդակի խորությունը, աշխատում է ապրանքներում և ադամանդներում։ Կոլապս/պիններ հաճախակի կետերի համար։

Մեգա-ընտրացանկը 'մեծ ապրանքներ և (խանութներ, բովանդակություն)։ Այն խմբավորում է ուղղություններով, ավելացնում է հուշումներ և արագ հղումներ։

Հացը 'խորը ճանապարհների և SEO բովանդակության համար։ չեն փոխարինում H1-ը և լավագույն նավարկությունը։

Համատեքստային ռոտացիան 'ծխախոտ, չիպ ֆիլտրեր, «related», գլխավորում (TOC) լոնգրիդներում։

Թիմային պալիտրա/Global search (www.K) 'արագ անցումներ էակների և գործողությունների անուններով։

Շորտկատներն ու ժեստերը ՝ 71-users (տաք կղզիներ, սվայպեր), բայց միշտ UI-ի համարժեքով։

Ընտրությունը կախված է բաժինների թվից, խորությունից, օգտագործման հաճախականությունից և սարքերից։

4) Ռոուտինգը և URL ռազմավարությունը

Կարդացվող URL: '/games/slot/[ slug] «, »/reports/ngr? period=Q3`.

Տե՛ ս. Մի փոխեք URL-ը առանց ռեդիրիտների։ պահպանեք հակառակը։

Երթուղիները աշխատանքային վիճակից 'ֆիլտրեր/տեսակավորում - query; ID - ճանապարհին։

Տեսակների պահպանումը '«Փնտրել հղումը ներկա ֆիլտրի/խարիսխի վրա»։

Խորը հղումները (deep links) 'փամփուշտներից/փոստից, ուղղակի նպատակին, անվտանգ հեղինակային իրավունքի հետ։

Օֆլինը և վերականգնումը 'վերադառնալիս, վերականգնեք դիրքը/ֆիլտրերը։

5) Տեղեկատվական ուղեցույցները և ստանդարտները

Ակտիվ վիճակը (գույնը/շերտը, իկոնկան)։

H1 և lead - ասում են էջի համատեքստը։

Lokator-ը նապաստակներ է, sidbard-ի գծապատկերներ, տաբատի լուսավորություն։

Դատարկ վիճակները ասում են, թե ուր գնալ (CTA, օգնության հղում)։

Կայուն բառարանը բոլոր տեղերում տարրերի նույն անուններն են։

6) Փնտրել և թիմային պալիտրա

Global search 'էակների ինդեքսը (խաղեր, պրովայդերներ, հաշվետվություններ) + արագ գործողություններ («/deposit », «/kyc»)։

Ավտոմատացումը 'վերջին և հայտնի հարցումները, նեղ պատասխանները։

Սեմանտիկան 'արդյունքների առանձին «տեսակներ» (իրականում, հավաստագրման էջեր, 108)։

Թիմային պալիտրա (NO) 'անունների և հոքեյի միկրոակտիվացում, ռուսական/անգլերեն/հոմանիմների աջակցություն։

7) Վիճակը, դերը և հասանելիությունը

RBAC 'ցույց տվեք միայն հասանելի հատվածներ։ մոխրագույն «կողպեքները» տնտեսապես և բացատրությամբ։

Հյուրերի ռեժիմը 'սահմանափակված ընտրացանկային կետերը, CTA-ն տանում է գրանցման/լոգինի։

Տենանտերությունը 'բրենդների/օպերատորների տարածությունները համաշխարհային բուծման մեջ են։

Իրավունքների էսկալացիա. KYC/2FA-ից հետո նոր երթուղիներ են բացվում։

8) Բջջային հատկություններ

Ներքևի ռոտացիան (555) 'Լոբբի, Մոսկվա, Ակցիա, Կոշելեկ, Պրոֆիլ։

Թնդանոթների դիպլինները, որոնք տանում են ճիշտ տերմինալ/108/խարիսխ; 2019-ը նախկին վիճակում է։

Ժեստերը, չեն բախվում սվայպ-կարուսելների հետ (առանցքային ճառագայթներ)։

Sticky-տարրերը 'մինի նվագարկիչ/ներկա խաղը, «Դեպոզիտը» լողացող CTA-ն է։

9) Հասանելիությունը և տեղայնացումը

Ֆոկուս կարգը համապատասխանում է տեսողական հիերարխիային։

ARIA ատրիբուտները ընտրացանկի/նապաստակների/տաբերի համար։ Սրբապատկերների ստորագրությունները պարտադիր են։

Ստեղնաշարային ռոտացիա 'սլաքներ/Tab/Enter; տեսանելի ֆոկուս։

RTL/լեզուները 'ցողացրեք ցանցը և կետերի կարգը, տեղայնացրեք միկրո-կոպիրայթ։

Հակադրություն և չափսեր ՝ WCAG AA նվազագույն; tap-targets no. 44px։

10) Արտադրողականություն և կայունություն

Նավիգացիայի առաջադիմական բեռնումը 'կմախքներ սայդբարի/ընտրացանկի համար։

Ընտրացանկը/բառարանը, ավելի քիչ հաճախ ցանցը, ակնթարթային ռոտացիան։

Մոտակա երթուղիների բեռնումը 'hover/focus; խելացի բյուջեներ։

Տե՛ ս 'մի փոխեք բեռնումը (ֆիքսված չափսերը)։

Պաշտպանություն 404/403: ընկերական էջեր և արագ «ետ»։

11) Թելեմետրիա և մետրեր

Իրադարձությունները

«nav _ click» (աղբյուրը, կետը, դիրքը), «rope _ change», «search _ query/www.ru»,

`breadcrumb_click`, `deeplink_open`, `back_used`, `not_found_view`.

• Time-to-Target (մինչև էկրանի/գործողության լուծումը)։
• Nav Error Rate (404/403/իրավունքների սխալներ)։
• Return Rate (որքա՞ ն վերադարձավ back անմիջապես 'ակնհայտ ճանապարհի նշանը)։
• Search Success% (արդյունքը 242 կլիկի համար)։
• Adoption-ը պարունակում է պալիտրա և տաք ստեղներ։

• Սայդբար վս մեգա-մանգա; vs chip ֆիլտրերի վերևում գտնվող տաբերը; «Որոնումը միշտ տեսանելի է»։

12) iGaming (օրինակներ)

Վիրահատական վեբ կազինո (B2C)

Գլոբալորեն 'Լոբբի/Իսպանիա/Ակցիա/Altra/Կոշելեկ/Պրոֆիլ։

Լոբբիի ներսում 'չիպ ֆիլտրեր (Նոր, Ջեքպոտներ, Պրովայդերներ, Buy-Bonus), որոնում։

Նապաստակները 'պրովայդերների էջերում/հոդվածներ, ոչ թե լոբբիում։

B2B-admink պրովայդերի

Սայդբար 'Դաշբորդներ/Բովանդակություն/Գործընկերներ/Հաշվետվություններ/Compliance/Lenta.ru։

Բաժինների ներսում 'տաբա (Ցուցակը/Alta/Սերտիֆիկացիա)։

Թիմային պալիտրա '«Բացել խաղը ID-ով», «Ստեղծել ռելիզը», «Զեկույցի էքսպորտը»։

13) Անտիպատերնի

Ընտրացանկը 20 + կետով առանց խմբի (տեսողական աղմուկ)։

Տարբեր անուններ նույն անուններն են տարբեր վայրերում։

Թաքնված կրիտիկական ռոտացիան միայն բուրգեր-ընտրացանկում (դիսկոպում)։

Տաբերի փոխպատվաստումը որպես ֆիլտրեր (տարբեր իմաստներ 'մեկ տեսակ)։

Անցումները, որոնք կոտրում են վիճակը (ֆիլտրերի նետումը «ետ»)։

«Լիպկի» վահանակները, որոնք ծածկում են բովանդակությունը և CTA-ն։

14) Ներդրման թուղթ (սպրինտով)

Sprint 1-ը Քարտեզն է 'բաժանությունների բուլարիզացիա, ճանապարհների շարժիչ (top-tasks), տերմինների բառարան։

Սպրինտ 2-IA 'խումբ, մակարդակներ, մոդելի ընտրություն (top-nav/side/mega/tast)։ Նախատիպը։

Սպրինտ 3-ը Ռոուտինգ/URL-ն է, կարդացվող ճանապարհները, ֆիլտրերի պահպանումը, դիպլինները, 404/403։

Սպրինտ 4 - Որոնում/www.K 'էակների ինդեքսը, ավտոմատացումը, արագ գործողությունները։

Սպրինտ 5 - հասանելիություն/ստեղնաշար, ARIA, RTL, հակադրություն։

Sprint 6-ը Telemetria/A-B: Time-to-Target, Search Success, back-bounces; մոդելների թեստ։

Sprint 7 - Արտադրողականություն ՝ բառարանի/ընտրացանկը, հարևան երթուղիների fetch, կմախքներ։

15) Գլոսարիա

IA (Information Architecture) - բաժինների/բովանդակության տրամաբանական կառուցվածքը։

Top-nav/Side-nav/Tast/Mega-mox - նավիգացիայի մոդելներ։

Breadcrum.ru-ը խորը հիերարխիայի համար «հացի նապաստակներ» է։

Deep link-ը խորը հղում է կոնկրետ վիճակում/բաժին։

Command Palette-ը գլոբալ որոնում/գործողություններ է։

Time-to-Target-ն ժամանակն է մինչև ռուսական էկրանի/գործողության հասնելը։

16) Արդյունքը

Նավիգացիոն ճարտարապետությունը ապրանքի քարտեզն է, որը օգտագործողի ճանապարհը կարճ և կանխատեսելի է դարձնում։ Հաջողությունը տալիս է

1. պարզ բազմաշերտ IA,

2. կայուն ընթերցված URL-ը և պետության պահպանումը,

3. համակցված նավիգացիոն մոդելներ (ընտրացանկ + տաբա + որոնում/www.K),

4. հասանելիություն և տեղայնացում,

5. մետրերը և A/B անընդհատ փայլելու համար։

Այսպիսով, ինտերֆեյսը մնում է հասկանալի և արագ, նույնիսկ երբ ֆունկցիոնալությունը աճում է։