UX ჰაიდლინი და ინტერფეისის სტანდარტები

1) პრინციპები

სიცხადე უფრო დიდია, ვიდრე სილამაზე. მნიშვნელობა და მოქმედება აშკარაა 1-2 წამში.
ერთი მიზანი ეკრანზე. ყველაფერი დანარჩენი მეორეხარისხოვანია ან იმალება.
თანმიმდევრობა. იგივე ნიმუშები = იგივე მოლოდინები.
ნაგულისხმევი ხელმისაწვდომობა. კონტრასტი, ფოკუსი, კლავიატურა, ხმა.
კონტექსტურობა. მინიშნებები და ტექსტები ზუსტად იქ, სადაც საჭიროა.
ლოკალიზაცია-პირველი. ხაზების სიგრძე, ფორმატები, კულტურა თავდაპირველად დიზაინშია.
შექცევადობა. ნებისმიერი სარისკო მოქმედება შეიძლება გაუქმდეს/დადასტურდეს.
გაზომვა. თითოეული წესი არის მეტრიკით (ნაბიჯის კონვერტაცია, დრო, შეცდომები).

2) ბადე, უკან დახევა და რიტმი

ქსელი: 4/8-pt ნაბიჯი; სვეტები: 12 (desktop), 6 (tablet), 4 (მობილური).
კომპონენტების შიდა გადინება: მრავლობითი 4; გარე - 8/12/16/24.
ვერტიკალური რიტმი: სათაური - სუბტიტრები - მოქმედების შინაარსი (CTA).
საზღვრები და გამყოფები: ეკონომიკურად; ურჩევნია „ჰაერი“ და სტამბის იერარქია.

3) სტამბა

კეგლის მასშტაბი: 12/14/16/20/24/32/40 (ბოდი 16).
ხაზის სიმაღლე: 1. 4–1. 6 ტექსტისთვის, 1. 2–1. 3 სათაურებისთვის.
სტრიქონის სიგრძე: 45-75 სიმბოლო (desktop), 35-55 (მობილური).
მონიშნვა: ცხიმოვანი სემანტიკური აქცენტებისთვის; ქუდი - მხოლოდ ეტიკეტებში.
ხმამაღლა კითხვა: ტექსტები ბუნებრივად უნდა ჟღერდეს.

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

სემანტიკა: 'success/info/warning/error/neutral'.
კონტრასტი: მინიმალური WCAG 2. 1 AA (ტექსტი/ფონ 4. 5:1; დიდი (3:1).
ფერი ერთადერთი სიგნალია. დაამატეთ ხატი/ტექსტი/ფორმა.
ფოკუსის რგოლი: ყოველთვის ხილული (არ გამორთოთ CSS- ში).

5) ნავიგაცია და ინფორმაციის არქიტექტურა

მომხმარებლის გზა: "სად ვარ? რა არის აქ? რა არის შემდეგი?" - ჟთდსპნჲ.
მენიუს იერარქია: ძირითადი ნავიგაციის 2 დონე.
პურის ნამსხვრევები: ღრმა დანაყოფებისთვის.
ძებნა: გლობალურად ხელმისაწვდომია რთულ კატალოგებზე; ცხელი კლავიატურა '/'.
ნავიგაციის მდგომარეობა: აქტიური ჩანართი/გვერდი განათებულია ნიშნებით.

6) კომპონენტები და ნიმუშები

ჩვენ ვიყენებთ დიზაინის სისტემის კომპონენტებს („ხელნაკეთობების“ გარეშე).
ეკრანზე ერთი primary-CTA; დანარჩენი - საშუალო/ტირაჟი.
სახელმწიფოები: default/hover/focus/active/disabled/loading - სავალდებულოა თითოეული ინტერაქტიული.
ცარიელი სახელმწიფოები: კონტექსტი + ღირებულება + CTA (+ მეორადი ლინკი).
ზოგადი ალერტები: ერთი page-alert ეკრანზე + ადგილობრივი inline მინიშნებები.

7) ფორმები, შესაბამისობა და შეცდომები

ეტიკეტი სავალდებულოა. Placeholder არის ფორმატის მაგალითი და არა ჩანაცვლება.
Inline შესაბამისობა blur, summary შეცდომები summit.
შეცდომის შეტყობინება: რა არის არასწორი + როგორ გამოსწორდეს + შეზღუდვა/ფორმატი.
ავტომობილი და პირველი შეცდომის ფოკუსი; 'aria-invalid', 'aria-describedby'.
ნიღბები და ფორმატები: ისინი ამბობენ, მაგრამ არ არღვევენ შეყვანას (შესაძლებელია პეისტერი).
მონაცემთა უსაფრთხოება: ჩვენ არაფერს ვკარგავთ გადატვირთვის/შეცდომის დროს.

8) სახელმწიფოები და ფიტბეკი

წარმატება: სადღეგრძელო 2-4 წმ, ნეიტრალური პოზიტიური ტონი, CTA „რა შემდეგ“.
ინფო/notice: რბილი ბანერი/ტულტიპი, არ ბლოკავს ნაკადს.
Warning/Error/Critical: იერარქია ვიზუალურად/სემანტიკურად; კრიტიკული - მოდალური/ბანერი აშკარა მოქმედებით.
ჩატვირთვა: skeleton> spinner; ლოდინის დროს დროის შეფასება> 3.

9) შინაარსი და მიკროკოპი

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

10) წვდომა (A11y)

სრული ნავიგაცია კლავიატურიდან; ტაბების ლოგიკური წესრიგი.
როლები და 'aria' ინტერაქტიული, ლაივ რეგიონებისთვის სადღესასწაულო/სტატუსებისთვის.
კონტრასტები, ფოკუს რგოლები, ინტერაქტივების ზომები - 44 × 44 px.
ხატების/სურათების ტექსტური ალტერნატივები; ცხრილი 'th '/' scope'.
შემოწმებები: ავტომატური (ლინტერი/სკანერი) + სკრინრინის სახელმძღვანელო სცენარები.

11) ლოკალიზაცია და ინტერნაციონალიზაცია

ყველა სტრიქონი არის i18n გასაღებებში კონტექსტით.
„გრძელი ენების“ ტესტი (DE/TR), RTL რეჟიმები.
რიცხვები/ვალუტები/დრო - ფორმატის გამოყენება.
Tone-map: ფორმალობის/ემოციების ხარისხი სცენარების მიხედვით (ონბორინგი/გადახდა/უსაფრთხოება).

12) პატივისცემა და ადაპტირება

ბრეიკპოინტი: 360/768/1024/1280 +.
მობილური პირველი: კრიტიკული ბილიკი ხელმისაწვდომია ერთი ხელით, CTA თითის ზონაში.
გესტები და კლავიატურა: ჟესტები დუბლირებულია ღილაკებით; desktop- ზე - სურვილები.
სიმკვრივე: desktop- ზე - „ჰაერი“, მობილური - ვერტიკალური დაზოგვა კლიკაბელურობის გარეშე.

13) ბნელი თემა

WCAG- სთვის კონტრასტი რჩება; თავიდან აიცილოთ ფონის „სუფთა შავი“ (მუქი ნაცრისფერი).
განათება/ჩრდილები - დასუსტებული; ფოკუსის ბეჭედი კონტრასტულია.
ილუსტრაციები და ლოგოები - ინვერსიული ვერსიებით.
გადასვლის პოლიტიკა: შეინარჩუნეთ მომხმარებლის არჩევანი (სისტემა/შუქი/წვიმა).

14) ანიმაციები და მოძრაობა

ხანგრძლივობა: 120-200 ms (მცირე), 200-300 ms (გადასვლები).
აჩქარების ფუნქციები ბუნებრივია (cubic-bezier მსუბუქი შენელებით).
ანიმაციებმა არ უნდა დაბლოკოს ნაკადი და გააუარესოს კითხვა.
პატივისცემა 'prefers-reduced-motion'.

15) შესრულება

LCP ≤ 2. 5 გვ, TTI/TBT მწვანე ზონაში; copliting; ზარმაცი მედიის დატვირთვა.
გრძელი სიების ვირტუალიზაცია; მონაცემთა კაშხალი.
სკელეტონი სიჩქარის აღქმისთვის; „ჯანკის“ განლაგების მინიმუმამდე შემცირება.

16) უსაფრთხოება და კონფიდენციალურობა UI- ში

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

17) UX ხარისხის მეტრიკა

ნაბიჯის კონვერტაცია და დრო დასრულებამდე.
Error rate მინდვრებში/ნაბიჯებში და Time-to-Fix.
CTR CTA და სცენარების განმეორება.
Drop-off შეცდომის შემდეგ/დატვირთვის შემდეგ> N წამი.
მხარდაჭერის განცხადებები თემებზე (ცვლილებების დაწყებამდე).
განთავისუფლების A11y დეფექტები (მიზანი - 0 კრიტიკული).

18) ჩეკის ფურცლები

ეკრანი გამოშვებამდე

• ერთი მთავარი მიზანი და ერთი primary-CTA.

აშკარაა ნავიგაცია და სტატუსი „სადაც მე ვარ“.

• შინაარსი მოკლეა: 1-2 წინადადება ბლოკზე.
• სახელმწიფოები: loading/empty/error/success დაფარულია.
• A11y: AA- ს კონტრასტი, ფოკუსი ჩანს, 'aria-' ინტერაქტივებზე.
• ლოკალიზაცია: სტრიქონის სიგრძე/ფორმატები/RTL შემოწმებულია.
• შესრულება: საჭიროების გარეშე არ არსებობს „მძიმე“ ბლოკები.

ფორმა გამოსვლამდე

• ეტიკეტები და ფორმატის მაგალითები არსებობს.
• ინლაინ მონიტორინგი + წყალქვეშა ნავმისადგომი.
• პირველი შეცდომა, ველი ხრიკი.
• შეტყობინებები: რა/როგორ/რატომ; მომხმარებლისთვის 500/400 კოდების გარეშე.
• მონაცემები არ იკარგება შეცდომების/გადატვირთვის დროს.

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

„OK“, როგორც CTA, სემანტიკური ნაბიჯებით.
პლეიშოლდერი ეტიკეტის ნაცვლად.
ფერი, როგორც ერთადერთი სტატუსის სიგნალი.
სპინერები დროის შეფასების გარეშე და ალტერნატივის გარეშე.
მოდური ფანჯრები ფოკუსის ბილიკის და ESC დახურვის გარეშე.
სტილის/ხატების შერევა, კომპონენტების დუბლირება დიზაინის სისტემის გარეთ.
იუმორი/ემოჯი კრიტიკულ სცენარებში (გადახდა/უსაფრთხოება).

20) მაგალითები „დაწყებამდე“

ფორმის შეცდომა

ადრე: „შეცდომა 400“

შემდეგ: "თარიღის არასწორი ფორმატი. გამოიყენეთ DD. მმ. GGG"

ცარიელი მდგომარეობა

ადრე: „აქ ცარიელია“

შემდეგ: "პირველი შევსების შემდეგ აქ გამოჩნდება ოპერაციების ისტორია. [ანგარიში შეავსეთ]"

წარმატების შეტყობინება

წინ: „მზად“

შემდეგ: "გადახდა მიიღება. ბალანსი განახლებულია. [იხილე ამბავი]"

ნავიგაცია

Do: გაურკვეველია სად არის მომხმარებელი

შემდეგ: აქტიური ჩანართი + პურის ნამსხვრევები + გვერდის აშკარა სათაური

21) დიზაინის რევიზიის შაბლონები

ეკრანის ჩარჩო

სათაური - მოკლე აღწერა - შინაარსი/სია/ფიტბეკი/სტატუსები და მოქმედებები.

ფორმის ჩარჩო

სათაური - მინიშნება - ველი (ეტიკეტი + helper + შეცდომა) - CTA - მეორადი მოქმედებები (საკომისიო/ვადები).

მიკროკოპის შაბლონი

სათაური (ოპერა)

1-2 წინადადება: კონტექსტი + შემდეგი ნაბიჯი

CTA: მოქმედება + ობიექტი

მეორადი საბრძოლო: დახმარება/წესები

22) სტანდარტების პროცესები და შენარჩუნება

Definition of Done (UX): განლაგება + ტექსტები + სახელმწიფო + A11y + i18n + მეტრიკა.
UX-review PR- ში: ჩეკის სია სექციებიდან 18-21.
დოკუმენტაცია: თითოეული ფიგურა დასძენს/განაახლებს ჰაიდს wiki/Storybook.
აუდიტი კვარტალში ერთხელ: შინაარსი, A11y, სპექტაკლი, თანმიმდევრულობა.

საბოლოო ყალბი ფურცელი

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

შემიძლია დავამატო ეს ჰაიდი მზა შაბლონებით თქვენი საკვანძო სცენარებისთვის (რეგისტრაცია/KUS, ანაბარი/გამომავალი, პრემია/ტურნირები) და შეაგროვოთ ჩეკების სიები თქვენი შურისძიების პროცესისთვის.