ვებ-გვერდის წარმატების ფორმულა (WSF)

წარმატებული ვებ-გვერდი არ ნიშნავს მხოლოდ ლამაზ დიზაინს. ეს არის გამოყენებადობის, ხელმისაწვდომობის, წარმადობის, კონტენტის ხარისხის, ნდობისა და SEO-ს ერთობლიობა.

ეს პრაქტიკული სახელმძღვანელო გაგაცნობთ ვებ-გვერდების საერთაშორისო სტანდარტებს — WCAG 2.2, ISO 9241, Nielsen-ის 10 ჰიურისტიკას და Google Core Web Vitals-ს — და მოგცემთ მზა, 50-პუნქტიან აუდიტის ჩექლისტს საიტის გამოქვეყნებამდე შესამოწმებლად.

8 თავი 55 თემა 50+ აუდიტის პუნქტი

1 🚀 შესავალი

რა ხდის ვებ-გვერდს წარმატებულს? რატომ არ არის საკმარისი მხოლოდ ლამაზი დიზაინი და რა შვიდ საყრდენ სვეტს ეფუძნება თანამედროვე ხარისხიანი საიტი.

what-is-success

რა არის წარმატებული ვებ-გვერდი?

გავრცელებული შეცდომაა იმის ფიქრი, რომ წარმატებული ვებ-გვერდი = ლამაზი დიზაინი. ვიზუალი მნიშვნელოვანია, მაგრამ ის მხოლოდ ერთი ნაწილია უფრო დიდი სურათისა.

წარმატებული ვებ-გვერდი ის არის, რომელიც ეფექტურად ასრულებს თავის ამოცანას: მომხმარებელი სწრაფად პოულობს იმას, რასაც ეძებს; გვერდი სწრაფად იტვირთება ნებისმიერ მოწყობილობაზე; მას იყენებენ შეზღუდული შესაძლებლობის მქონე ადამიანებიც; ის ჩანს ძიების სისტემებში და ნდობას იმსახურებს. შედეგად, საიტი ქმნის რეალურ ღირებულებას — ბიზნესისთვის და მომხმარებლისთვის ერთდროულად.

ამ წიგნში წარმატებას განვიხილავთ როგორც გაზომვად, შესამოწმებელ მახასიათებელს — და არა გემოვნების საქმეს.

💡 რჩევა: ლამაზი, მაგრამ ნელი ან გაუგებარი საიტი ჩავარდნილ საიტად ითვლება. დიზაინი ემსახურება მიზანს, და არა პირიქით.

success-pillars

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

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

მნიშვნელობები

მნიშვნელობა	აღწერა
`გამოყენებადობა (Usability)`	რამდენად მარტივად აღწევს მომხმარებელი თავის მიზანს — ნავიგაცია, სტრუქტურა, ლოგიკა.
`ხელმისაწვდომობა (Accessibility)`	შეუძლია თუ არა საიტით სარგებლობა შეზღუდული შესაძლებლობის მქონე ადამიანებსაც (WCAG).
`წარმადობა (Performance)`	რამდენად სწრაფად იტვირთება და რეაგირებს გვერდი (Core Web Vitals).
`კონტენტის ხარისხი`	არის თუ არა ტექსტი სასარგებლო, გასაგები, განახლებული და სანდო.
`SEO`	რამდენად კარგად ხედავენ და ინდექსირებენ საიტს ძიების სისტემები.
`ნდობა (Trust)`	HTTPS, კონტაქტი, გამჭვირვალე ინფორმაცია — გრძნობს თუ არა მომხმარებელი თავს უსაფრთხოდ.
`კონვერსიები (Conversions)`	ასრულებს თუ არა მომხმარებელი სასურველ მოქმედებას: ყიდვა, რეგისტრაცია, კონტაქტი.

🌍 რეალური გამოყენება

წარმოიდგინე ონლაინ-მაღაზია ულამაზესი დიზაინით, რომელიც მობილურზე 8 წამში იტვირთება. მომხმარებელი ვერ ელოდება — ტოვებს გვერდს ყიდვამდე. აქ დიზაინი კარგია, მაგრამ წარმადობა და შედეგად კონვერსია ჩავარდა. სწორედ ამიტომ ვუყურებთ ყველა საყრდენს ერთად.

how-evaluated

როგორ ფასდება თანამედროვე ვებ-გვერდი

თანამედროვე საიტს აღარ აფასებენ მხოლოდ „მომწონს / არ მომწონს" პრინციპით. არსებობს ობიექტური ინსტრუმენტები და საერთაშორისო სტანდარტები, რომლებიც ციფრებში გადმოსცემენ ხარისხს:

WCAG 2.2 — ხელმისაწვდომობის სტანდარტი (W3C).
ISO 9241 — ადამიანზე ორიენტირებული დიზაინისა და გამოყენებადობის სტანდარტი.
Nielsen-ის 10 ჰიურისტიკა — გამოყენებადობის შეფასების ცნობილი პრინციპები.
Google Core Web Vitals — წარმადობისა და გამოცდილების გაზომვადი მეტრიკები.

ამ ინსტრუმენტებს ვიყენებთ ე.წ. აუდიტის დროს — საიტის სისტემურ შემოწმებას გამოქვეყნებამდე (იხ. თავი 7).

💡 რჩევა: რასაც ვერ გაზომავ, ვერ გააუმჯობესებ. სტანდარტები სწორედ გაზომვის საშუალებას გვაძლევენ.

📌 შეჯამება და დასამახსოვრებელი

შეჯამება და დასამახსოვრებელი

მოკლე შეჯამება

წარმატებული ვებ-გვერდი არ არის მხოლოდ ლამაზი დიზაინი — ის სასურველ შედეგს აღწევს გამოყენებადობის, ხელმისაწვდომობის, წარმადობის, კონტენტის, ნდობის, SEO-სა და კონვერსიების ერთობლიობით. ხარისხი დღეს ფასდება ობიექტური სტანდარტებითა და ინსტრუმენტებით, და არა მხოლოდ გემოვნებით.

მთავარი დასამახსოვრებელი საკითხები

დიზაინი ემსახურება მიზანს — და არა პირიქით.
წარმატება = შვიდი საყრდენის ჯამი, და არა ერთი მათგანი.
ხარისხი გაზომვადია: WCAG, ISO 9241, Nielsen, Core Web Vitals.
გამოქვეყნებამდე საიტი უნდა გაიაროს აუდიტი.

2 ♿ WCAG 2.2 — ხელმისაწვდომობა

Web Content Accessibility Guidelines — ვებ-კონტენტის ხელმისაწვდომობის საერთაშორისო სტანდარტი W3C-სგან. ოფიციალური წყარო: w3.org/TR/WCAG22

wcag-what WCAG 2.2

რა არის WCAG და რატომ არის მნიშვნელოვანი

WCAG (Web Content Accessibility Guidelines) არის W3C-ის (World Wide Web Consortium) მიერ შემუშავებული საერთაშორისო სტანდარტი, რომელიც განსაზღვრავს, როგორ უნდა იყოს აგებული ვებ-კონტენტი, რომ ის ხელმისაწვდომი იყოს შეზღუდული შესაძლებლობის მქონე ადამიანებისთვისაც.

WCAG 2.2 უახლესი სტაბილური ვერსიაა. ის ეხება უსინათლო და მცირემხედველ მომხმარებლებს, სმენის პრობლემის მქონე ადამიანებს, მოტორული შეზღუდვის მქონე და კოგნიტური თავისებურების მქონე მომხმარებლებს.

სად გამოიყენება: საჯარო და კერძო ვებ-გვერდები, ვებ-აპლიკაციები, მობილური აპები; ბევრ ქვეყანაში — სავალდებულოა სახელმწიფო და დიდი კომერციული საიტებისთვის.

რატომ არის მნიშვნელოვანი:

ხელმისაწვდომობა ადამიანის უფლებაა — ინტერნეტი ყველასთვის უნდა იყოს.
ბევრ ქვეყანაში ეს კანონისმიერი მოთხოვნაა (მაგ. ADA, EN 301 549).
ხელმისაწვდომი საიტი ხშირად SEO-ისთვისაც უკეთესია (სემანტიკა, alt, სტრუქტურა).
ის აუმჯობესებს გამოცდილებას ყველა მომხმარებლისთვის, არა მხოლოდ შეზღუდვის მქონესთვის.

🌍 რეალური გამოყენება

ვიდეო წარწერებით (captions) ეხმარება სმენის პრობლემის მქონე ადამიანს, მაგრამ იმავდროულად — ხმაურიან გარემოში მყოფ ნებისმიერ მომხმარებელსაც. ხელმისაწვდომობა ყველას მოგებაა.

wcag-levels

WCAG დონეები: A, AA, AAA

WCAG-ის მოთხოვნები დაყოფილია სამ შესაბამისობის დონედ. ისინი დგას ერთმანეთზე — AA მოიცავს A-ს, AAA კი AA-ს.

მნიშვნელობები

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

💡 რჩევა: პრაქტიკული მიზანი უმეტესი საიტისთვის — WCAG 2.2 დონე AA. ეს არის „ოქროს შუალედი" ხელმისაწვდომობასა და რეალისტურობას შორის.

wcag-principles

WCAG-ის ოთხი პრინციპი (POUR)

WCAG აგებულია ოთხ ფუნდამენტურ პრინციპზე, რომელთა ინიციალები ქმნის სიტყვას POUR:

მნიშვნელობები

მნიშვნელობა	აღწერა
`Perceivable (აღქმადი)`	ინფორმაცია წარმოდგენილი უნდა იყოს ისე, რომ მომხმარებელმა აღიქვას (მაგ. alt ტექსტი სურათებზე).
`Operable (მართვადი)`	ინტერფეისი მართვადი უნდა იყოს სხვადასხვა გზით (მაგ. მხოლოდ კლავიატურით).
`Understandable (გასაგები)`	კონტენტიც და ინტერფეისიც გასაგები უნდა იყოს (ნათელი ენა, წინასწარ განჭვრეტადი ქცევა).
`Robust (მდგრადი)`	კონტენტი სანდოდ უნდა მუშაობდეს სხვადასხვა ტექნოლოგიასთან, მათ შორის დამხმარე ტექნოლოგიებთან.

wcag-alt

ALT ტექსტები

ყველა შინაარსობრივ სურათს უნდა ჰქონდეს alt ატრიბუტი, რომელიც ტექსტურად აღწერს გამოსახულებას. ეკრანის წამკითხველი სწორედ ამ ტექსტს კითხულობს. წმინდა დეკორატიულ სურათს კი ცარიელი alt="" უნდა ჰქონდეს, რომ წამკითხველმა გამოტოვოს.

მაგალითები

შინაარსობრივი vs დეკორატიული სურათი

HTML

<!-- ✓ შინაარსობრივი სურათი — აღწერითი alt -->
<img src="chart.png" alt="გაყიდვების ზრდა 2024 წელს 35%-ით">

<!-- ✓ დეკორატიული სურათი — ცარიელი alt -->
<img src="divider.png" alt="">

<!-- ✗ ცუდი მაგალითი — უაზრო ან გამოტოვებული alt -->
<img src="chart.png">
<img src="chart.png" alt="image123.png">

✓ საუკეთესო პრაქტიკა

alt აღწერდეს დანიშნულებას, და არა ფაილის სახელს.
არ დაიწყო alt სიტყვებით „სურათი..." — წამკითხველი ისედაც აცხადებს, რომ ეს გამოსახულებაა.
დეკორატიული სურათისთვის გამოიყენე alt="" (და არა საერთოდ გამოტოვება).

wcag-keyboard

კლავიატურით ნავიგაცია

მთელი საიტი მართვადი უნდა იყოს მხოლოდ კლავიატურით — თაგვის გარეშე. ეს კრიტიკულია მოტორული შეზღუდვის მქონე და ეკრანის წამკითხველის მომხმარებლებისთვის. ძირითადი ნავიგაცია ხდება Tab, Shift+Tab, Enter და Space კლავიშებით.

მაგალითები

ღილაკი თაგვისთვის და კლავიატურისთვის

HTML

<!-- ✓ ნამდვილი <button> ავტომატურად მართვადია კლავიატურით -->
<button type="button" onclick="openMenu()">მენიუ</button>

<!-- ✗ <div>-ღილაკი მიუწვდომელია კლავიატურით -->
<div onclick="openMenu()">მენიუ</div>

✓ საუკეთესო პრაქტიკა

გამოიყენე სემანტიკური ელემენტები (<button>, <a>) და არა <div> კლიკით.
ფოკუსის თანმიმდევრობა ლოგიკური უნდა იყოს (ზევიდან ქვევით, მარცხნიდან მარჯვნივ).
დაამატე „skip to content" ბმული გრძელი მენიუების გვერდის ავლისთვის.

✗ ხშირი შეცდომები

tabindex-ის დადებითი მნიშვნელობების გამოყენება — არღვევს ბუნებრივ თანმიმდევრობას.
ფოკუსის „ხაფანგი" მოდალურ ფანჯრებში, საიდანაც კლავიატურით გასვლა შეუძლებელია.

wcag-contrast

ფერების კონტრასტი

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

ჩვეულებრივი ტექსტი — მინიმუმ 4.5:1 კონტრასტი;
დიდი ტექსტი (18px+ ან 14px+ მუქი) — მინიმუმ 3:1.

მაგალითები

საკმარისი vs არასაკმარისი კონტრასტი

CSS

/* ✓ კარგი — მუქი ტექსტი ღია ფონზე (კონტრასტი ~12:1) */
.text { color: #1a1a1a; background: #ffffff; }

/* ✗ ცუდი — ღია ნაცრისფერი თეთრ ფონზე (კონტრასტი ~1.6:1) */
.text-bad { color: #cccccc; background: #ffffff; }

💡 რჩევა: შეამოწმე კონტრასტი ინსტრუმენტით — WebAIM Contrast Checker ან ბრაუზერის DevTools.

wcag-screenreaders

ეკრანის წამკითხველები (Screen Readers)

ეკრანის წამკითხველი (NVDA, JAWS, VoiceOver) ხმოვანად წარმოთქვამს გვერდის შინაარსს უსინათლო მომხმარებლისთვის. ის ეყრდნობა სემანტიკურ HTML-ს და, საჭიროებისას, ARIA ატრიბუტებს.

მაგალითები

სემანტიკური სტრუქტურა + ARIA

HTML

<!-- ✓ სემანტიკური ნიშნულები — წამკითხველი ხვდება სტრუქტურას -->
<header>...</header>
<nav aria-label="მთავარი ნავიგაცია">...</nav>
<main>
  <h1>გვერდის სათაური</h1>
  <article>...</article>
</main>
<footer>...</footer>

<!-- ✓ ხატულა-ღილაკს უნდა ჰქონდეს ხელმისაწვდომი სახელი -->
<button aria-label="ძიება">🔍</button>

✓ საუკეთესო პრაქტიკა

პირველ რიგში გამოიყენე სემანტიკური HTML; ARIA მხოლოდ მაშინ, როცა სხვა გზა არ არის.
სათაურები (h1–h6) გამოიყენე იერარქიულად — წამკითხველი მათით ნავიგირებს.
ხატულა-ღილაკებს მიეცი aria-label ან ვიზუალურად დამალული ტექსტი.

wcag-forms

ხელმისაწვდომი ფორმები

ფორმები ხშირად ყველაზე კრიტიკული ადგილია — სწორედ აქ ხდება რეგისტრაცია, ყიდვა, კონტაქტი. ყველა ველს უნდა ჰქონდეს დაკავშირებული <label>, ხოლო შეცდომები ნათლად და ტექსტურად უნდა იყოს აღწერილი.

მაგალითები

სწორად მონიშნული ფორმის ველი

HTML

<!-- ✓ label დაკავშირებულია ველთან for/id-ით -->
<label for="email">ელფოსტა</label>
<input type="email" id="email" name="email"
       required aria-describedby="email-hint">
<p id="email-hint">მაგ.: name@example.com</p>

<!-- ✗ placeholder არ ცვლის label-ს -->
<input type="email" placeholder="ელფოსტა">

✓ საუკეთესო პრაქტიკა

ყველა ველს — ხილული label (placeholder არ არის label-ის შემცვლელი).
შეცდომა აღწერე ტექსტურად, არა მხოლოდ წითელი ფერით.
სავალდებულო ველი მონიშნე ნათლად და დააკავშირე aria-describedby-ით.

📌 შეჯამება და დასამახსოვრებელი

შეჯამება და დასამახსოვრებელი

მოკლე შეჯამება

WCAG 2.2 არის W3C-ის ხელმისაწვდომობის სტანდარტი, რომელიც აგებულია ოთხ პრინციპზე (POUR) და დაყოფილია სამ დონედ (A, AA, AAA). პრაქტიკული სამიზნე უმეტესი საიტისთვის — დონე AA. ხელმისაწვდომობის ბირთვი: alt ტექსტები, კლავიატურით ნავიგაცია, ფერთა კონტრასტი, ეკრანის წამკითხველებთან თავსებადობა და ხელმისაწვდომი ფორმები.

მთავარი დასამახსოვრებელი საკითხები

სამიზნე დონე: WCAG 2.2 AA.
POUR: Perceivable, Operable, Understandable, Robust.
სემანტიკური HTML — ხელმისაწვდომობის საფუძველი; ARIA მხოლოდ საჭიროებისას.
ტექსტის კონტრასტი ≥ 4.5:1; ყველა ველს — ხილული label.
საიტი სრულად მართვადი უნდა იყოს კლავიატურით.

ოფიციალური წყარო: https://www.w3.org/TR/WCAG22/

3 🧭 ISO 9241 — ადამიანზე ორიენტირებული დიზაინი

ადამიანზე ორიენტირებული დიზაინისა (Human-Centred Design) და გამოყენებადობის (Usability) საერთაშორისო სტანდარტი. წყარო: iso9241.org

iso-what

რა არის ISO 9241

ISO 9241 არის სტანდარტების ოჯახი ადამიანსა და სისტემას შორის ურთიერთქმედების (Human–System Interaction) შესახებ. ის განსაზღვრავს, როგორ უნდა დაიგეგმოს და შეფასდეს პროდუქტი — მათ შორის ვებ-გვერდი — ისე, რომ მაქსიმალურად მოერგოს რეალურ მომხმარებელს და მის ამოცანებს.

სტანდარტის ცენტრალური ცნებებია Human-Centred Design (ადამიანზე ორიენტირებული დიზაინი) და Usability (გამოყენებადობა).

iso-hcd

Human-Centred Design — ადამიანზე ორიენტირებული დიზაინი

ადამიანზე ორიენტირებული დიზაინი ნიშნავს, რომ პროდუქტი იქმნება მომხმარებლის საჭიროებიდან გამომდინარე — და არა დიზაინერის ან ბიზნესის ვარაუდებიდან. ეს იტერაციული პროცესია:

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

💡 რჩევა: მთავარი პრინციპი: ტესტირება რეალურ მომხმარებლებთან, და არა საკუთარ ვარაუდებზე დაყრდნობით.

🌍 რეალური გამოყენება

გუნდმა ჩათვალა, რომ „ყიდვის" ღილაკი გასაგებია. მომხმარებლის ტესტირებამ აჩვენა, რომ ხალხი მას ვერ პოულობს. ერთი იტერაცია — და კონვერსია გაიზარდა. ეს HCD-ის არსია.

iso-usability

Usability-ის სამი განზომილება

ISO 9241 გამოყენებადობას განმარტავს სამი გაზომვადი მახასიათებლით. სწორედ ეს სამეული გვეხმარება ობიექტურად შევაფასოთ, რამდენად „გამოსაყენებელია" საიტი.

მნიშვნელობები

მნიშვნელობა	აღწერა
`ეფექტურობა (Effectiveness)`	შეძლო თუ არა მომხმარებელმა ამოცანის დასრულება — და რამდენად სრულად/სწორად. მაგ.: შეუკვეთა თუ არა პროდუქტი წარმატებით.
`ეფექტიანობა (Efficiency)`	რა რესურსით (დრო, ნაბიჯები, ძალისხმევა) მიაღწია მიზანს. მაგ.: 2 კლიკი 7-ის ნაცვლად.
`კმაყოფილება (Satisfaction)`	რამდენად სასიამოვნო და კომფორტული იყო პროცესი მომხმარებლისთვის. სუბიექტური, მაგრამ გაზომვადი (მაგ. SUS კითხვარი).

მაგალითები

სამი განზომილების პრაქტიკული წაკითხვა

მაგალითი

ამოცანა: „იპოვე და შეუკვეთე წითელი ფეხსაცმელი 42 ზომის"

Effectiveness : 9 მომხმარებლიდან 9-მა დაასრულა შეკვეთა  -> 100%
Efficiency    : საშუალოდ 1 წუთი 20 წამი, 4 კლიკი        -> კარგი
Satisfaction  : საშუალო შეფასება 4.6 / 5                -> მაღალი

📌 შეჯამება და დასამახსოვრებელი

შეჯამება და დასამახსოვრებელი

მოკლე შეჯამება

ISO 9241 არის ადამიანსა და სისტემას შორის ურთიერთქმედების სტანდარტი. მისი ბირთვია ადამიანზე ორიენტირებული დიზაინი — იტერაციული პროცესი, სადაც პროდუქტი იქმნება და მოწმდება რეალური მომხმარებლების საჭიროებებზე დაყრდნობით. გამოყენებადობა იზომება სამი განზომილებით: ეფექტურობა, ეფექტიანობა და კმაყოფილება.

მთავარი დასამახსოვრებელი საკითხები

დიზაინი იწყება მომხმარებლით, და არა ვარაუდით.
HCD იტერაციულია: გაიგე → განსაზღვრე → შექმენი → შეაფასე.
Usability = ეფექტურობა + ეფექტიანობა + კმაყოფილება.
ტესტირება რეალურ მომხმარებლებთან აუცილებელია.

წყარო: https://iso9241.org/

4 🔟 Nielsen-ის 10 ჰიურისტიკა

გამოყენებადობის ყველაზე ცნობილი პრინციპები Jakob Nielsen-ისგან. წყარო: nngroup.com

heuristics-intro

რა არის ჰიურისტიკები

1994 წელს Jakob Nielsen-მა ჩამოაყალიბა გამოყენებადობის 10 ზოგადი პრინციპი (heuristics). მათ „ჰიურისტიკები" ჰქვია, რადგან ეს მკაცრი წესები კი არ არის, არამედ ფართო, ზოგადი ორიენტირები ინტერფეისის შესაფასებლად. დღემდე ისინი UX-ის ერთ-ერთი ყველაზე ხშირად გამოყენებული ინსტრუმენტია სწრაფი „ჰიურისტიკული შეფასებისთვის".

💡 რჩევა: ჰიურისტიკული შეფასება იაფი და სწრაფია: 3–5 ექსპერტი ცალ-ცალკე ამოწმებს ინტერფეისს ამ 10 პრინციპით და აერთიანებს შედეგებს.

h1-visibility

1. სისტემის სტატუსის ხილვადობა

სისტემამ ყოველთვის უნდა აცნობოს მომხმარებელს, რა ხდება — გონივრულ დროში, ნათელი უკუკავშირით.

🌍 რეალური გამოყენება

მაგალითი: ფაილის ატვირთვისას ჩანს პროგრესის ზოლი „65% • დარჩა ~10 წმ". ღილაკზე დაჭერის შემდეგ ჩანს „იტვირთება..." მდგომარეობა. მომხმარებელი არ რჩება გაურკვევლობაში.

h2-match

2. შესაბამისობა რეალურ სამყაროსთან

სისტემა უნდა საუბრობდეს მომხმარებლის ენაზე — ნაცნობი სიტყვებითა და ცნებებით, და არა ტექნიკური ჟარგონით. ინფორმაცია ბუნებრივი, ლოგიკური თანმიმდევრობით.

🌍 რეალური გამოყენება

მაგალითი: „თქვენი კალათა" და არა „ობიექტების ბუფერი". წაშლის ხატულად — ნაგვის ურნა. თარიღი ადგილობრივ ფორმატში. ხატულები რეალური სამყაროდან.

h3-control

3. მომხმარებლის კონტროლი და თავისუფლება

მომხმარებლები ხშირად ცდებიან. მათ სჭირდებათ ნათელი „გადახდენისა" (Undo) და „თავიდან გაკეთების" (Redo) გამოსავალი — „გადაუდებელი გასასვლელი" არასასურველი მდგომარეობიდან.

🌍 რეალური გამოყენება

მაგალითი: წაშლილი წერილი Gmail-ში — „Undo" ღილაკი რამდენიმე წამით. მოდალურ ფანჯარაში ყოველთვის ჩანს „გაუქმება" / „დახურვა".

h4-consistency

4. თანმიმდევრულობა და სტანდარტები

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

🌍 რეალური გამოყენება

მაგალითი: ძირითადი ღილაკი ყველგან ერთი ფერისაა; ნავიგაცია ერთ ადგილზე დგას; ლოგოზე დაჭერა ყოველთვის მთავარ გვერდზე აბრუნებს.

h5-prevention

5. შეცდომების პრევენცია

კარგი შეცდომის შეტყობინებაზე უკეთესია თავად შეცდომის თავიდან აცილება. დააპროექტე ისე, რომ შეცდომა გაჭირდეს.

🌍 რეალური გამოყენება

მაგალითი: სავალდებულო ველის ვალიდაცია აკრეფისთანავე; საშიში მოქმედების (მაგ. წაშლა) დადასტურების მოთხოვნა; თარიღის ასარჩევად კალენდარი ხელით აკრეფის ნაცვლად.

h6-recognition

6. ამოცნობა და არა დამახსოვრება

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

🌍 რეალური გამოყენება

მაგალითი: ძიების ველი გვთავაზობს ბოლო მოთხოვნებს; checkout გვიჩვენებს შეკვეთის შემაჯამებელ ბარათს გვერდით; ფორმა ინახავს უკვე შეყვანილ მონაცემებს.

h7-flexibility

7. მოქნილობა და ეფექტიანობა

ინტერფეისი უნდა ემსახურებოდეს დამწყებსაც და გამოცდილსაც. გამოცდილ მომხმარებელს მიეცი დაჩქარების საშუალება (აქსელერატორები), დამწყები კი არ უნდა დააბნიო.

🌍 რეალური გამოყენება

მაგალითი: კლავიატურის მალსახმობები (Ctrl+S); „რჩეულებში" შენახვა; ხშირი მოქმედებების სწრაფი ღილაკები პროფესიონალებისთვის.

h8-minimal

8. ესთეტიკური და მინიმალისტური დიზაინი

ინტერფეისმა არ უნდა შეიცავდეს ზედმეტ ინფორმაციას. ყოველი დამატებითი ელემენტი ასუსტებს მთავარის ხილვადობას. აჩვენე ის, რაც ნამდვილად საჭიროა.

🌍 რეალური გამოყენება

მაგალითი: მთავარ გვერდზე ერთი ნათელი მთავარი მესიჯი და CTA, და არა ათეული ბანერი ერთდროულად. „ნაკლები მეტია".

h9-errors

9. შეცდომების ამოცნობა, დიაგნოსტიკა და გამოსწორება

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

მაგალითები

ცუდი vs კარგი შეცდომის ტექსტი

მაგალითი

[X] ცუდი:  "Error 400: Invalid input"
[OK] კარგი: "ელფოსტა არასწორ ფორმატშია.
           მაგ.: name@example.com"

h10-help

10. დახმარება და დოკუმენტაცია

იდეალურ შემთხვევაში სისტემა გასაგებია დახმარების გარეშეც, მაგრამ დახმარება მაინც ხელმისაწვდომი უნდა იყოს — ადვილად მოსაძებნი, კონკრეტული და კონტექსტზე მორგებული.

🌍 რეალური გამოყენება

მაგალითი: ძიებადი FAQ; კონტექსტური მინიშნებები (tooltip) რთულ ველებთან; ნაბიჯ-ნაბიჯ ინსტრუქცია იქ, სადაც მომხმარებელი გაჭედვას ეცდება.

📌 შეჯამება და დასამახსოვრებელი

შეჯამება და დასამახსოვრებელი

მოკლე შეჯამება

Nielsen-ის 10 ჰიურისტიკა გამოყენებადობის ზოგადი პრინციპებია, რომლებიც სწრაფი „ჰიურისტიკული შეფასების" საფუძველს ქმნის. ისინი მოიცავს სტატუსის ხილვადობას, რეალურ სამყაროსთან შესაბამისობას, მომხმარებლის კონტროლს, თანმიმდევრულობას, შეცდომების პრევენციას, ამოცნობას დამახსოვრების ნაცვლად, მოქნილობას, მინიმალიზმს, შეცდომების გამოსწორებასა და დახმარებას.

მთავარი დასამახსოვრებელი საკითხები

ჰიურისტიკები ორიენტირებია, არა მკაცრი წესები.
ყოველთვის მიეცი მომხმარებელს უკუკავშირი და „გადახდენის" საშუალება.
თანმიმდევრულობა და მინიმალიზმი ამცირებს ცდომილებას.
შეცდომა ჯობს თავიდან აიცილო, ვიდრე შემდეგ ახსნა.

წყარო: nngroup.com

5 ⚡ Google Core Web Vitals

ვებ-გვერდის სიჩქარისა და გამოცდილების თანამედროვე, გაზომვადი მეტრიკები. წყარო: web.dev/vitals

cwv-intro

რა არის Core Web Vitals

Core Web Vitals არის Google-ის მიერ განსაზღვრული სამი ძირითადი მეტრიკა, რომლებიც ზომავენ რეალური მომხმარებლის გამოცდილებას სიჩქარის, ინტერაქტიულობისა და ვიზუალური სტაბილურობის თვალსაზრისით. ისინი SEO რანჟირების ფაქტორებია და იზომება „ველის" (Field) რეალურ მონაცემებზე დაყრდნობით.

მნიშვნელობები

მნიშვნელობა	აღწერა
`LCP`	Largest Contentful Paint — ჩატვირთვის სიჩქარე.
`INP`	Interaction to Next Paint — ინტერაქტიულობა / რეაგირება.
`CLS`	Cumulative Layout Shift — ვიზუალური სტაბილურობა.

💡 რჩევა: გაზომე ორი გზით: ლაბორატორიულად (Lighthouse) და ველში (Search Console → Core Web Vitals რეპორტი).

cwv-lcp

LCP — Largest Contentful Paint

LCP ზომავს, რა დროში ჩნდება ეკრანზე ყველაზე დიდი შინაარსობრივი ელემენტი (ჩვეულებრივ — მთავარი სურათი ან სათაური). ეს არის მომხმარებლის აღქმული ჩატვირთვის სიჩქარე.

მნიშვნელობები

მნიშვნელობა	აღწერა
`≤ 2.5 წმ`	🟢 კარგი
`2.5–4.0 წმ`	🟠 გასაუმჯობესებელია
`> 4.0 წმ`	🔴 ცუდი

✓ საუკეთესო პრაქტიკა

მთავარი სურათი ოპტიმიზებული ფორმატით (WebP/AVIF) და სწორი ზომით.
კრიტიკული რესურსების preload; ზედმეტი render-blocking CSS/JS-ის შემცირება.
სერვერის სწრაფი პასუხი (TTFB) და CDN-ის გამოყენება.

cwv-inp შეცვალა FID 2024

INP — Interaction to Next Paint

INP ზომავს, რამდენად სწრაფად რეაგირებს გვერდი მომხმარებლის ქმედებებზე (დაჭერა, ტაპი, კლავიში) მთელი ვიზიტის განმავლობაში. 2024 წელს მან ჩაანაცვლა ძველი FID მეტრიკა. დაბალი INP ნიშნავს, რომ ინტერფეისი „ცოცხალი" და მოქნილია.

მნიშვნელობები

მნიშვნელობა	აღწერა
`≤ 200 მწმ`	🟢 კარგი
`200–500 მწმ`	🟠 გასაუმჯობესებელია
`> 500 მწმ`	🔴 ცუდი

✓ საუკეთესო პრაქტიკა

მძიმე JavaScript დაამუშავე ნაწილებად; გაანთავისუფლე მთავარი thread.
მოვლენების დამმუშავებლები გახადე მსუბუქი; ზედმეტი re-render-ი მოაშორე.
გადადე არა-კრიტიკული სკრიპტები (defer / dynamic import).

cwv-cls

CLS — Cumulative Layout Shift

CLS ზომავს გვერდის ელემენტების მოულოდნელ „გადახტომას" ჩატვირთვისას. მაღალი CLS აღიზიანებს მომხმარებელს — მაგ. ის აპირებს ღილაკზე დაჭერას, მაგრამ ბანერი ჩაიტვირთა და ღილაკი გადაინაცვლა.

მნიშვნელობები

მნიშვნელობა	აღწერა
`≤ 0.1`	🟢 კარგი
`0.1–0.25`	🟠 გასაუმჯობესებელია
`> 0.25`	🔴 ცუდი

მაგალითები

CLS-ის თავიდან აცილება სურათისთვის

HTML

<!-- ✓ width/height მითითებულია — ბრაუზერი ადგილს წინასწარ ტოვებს -->
<img src="hero.webp" width="1200" height="600" alt="...">

<!-- ✗ ზომის გარეშე — სურათის ჩატვირთვისას layout გადახტება -->
<img src="hero.webp" alt="...">

✓ საუკეთესო პრაქტიკა

სურათებსა და ვიდეოებს მიუთითე width/height ან aspect-ratio.
რეკლამისა და embed-ისთვის წინასწარ დაარეზერვე ადგილი.
შრიფტები ჩატვირთე font-display: swap-ით, რომ ტექსტი არ „გადახტეს".

cwv-impact

გავლენა: SEO, გამოცდილება და ბიზნესი

Core Web Vitals მხოლოდ ტექნიკური ციფრები არ არის — მათ რეალური შედეგი მოაქვთ:

SEO-ზე: CWV Google-ის რანჟირების ფაქტორია — სუსტი მაჩვენებლები აქვეითებს პოზიციას ძიების შედეგებში.
მომხმარებლის გამოცდილებაზე: ნელი ან „მხტომარე" საიტი აღიზიანებს და ზრდის მიტოვების მაჩვენებელს (bounce rate).
ბიზნეს შედეგებზე: სიჩქარის ყოველი წამი პირდაპირ აისახება კონვერსიაზე — სწრაფი საიტი ყიდის მეტს და ინარჩუნებს მომხმარებელს.

🌍 რეალური გამოყენება

მაგალითი: ცნობილია არაერთი ქეისი, სადაც ჩატვირთვის 1 წამით შემცირებამ კონვერსია ათობით პროცენტით გაზარდა. სიჩქარე = შემოსავალი.

📌 შეჯამება და დასამახსოვრებელი

შეჯამება და დასამახსოვრებელი

მოკლე შეჯამება

Core Web Vitals არის სამი გაზომვადი მეტრიკა მომხმარებლის რეალური გამოცდილებისთვის: LCP (ჩატვირთვა, ≤2.5წმ), INP (რეაგირება, ≤200მწმ) და CLS (ვიზუალური სტაბილურობა, ≤0.1). ისინი SEO რანჟირების ფაქტორებია და პირდაპირ აისახება გამოცდილებასა და ბიზნეს შედეგებზე.

მთავარი დასამახსოვრებელი საკითხები

LCP ≤ 2.5წმ • INP ≤ 200მწმ • CLS ≤ 0.1 — სამი „მწვანე" სამიზნე.
INP-მა FID ჩაანაცვლა 2024 წელს.
სურათებს ყოველთვის მიუთითე ზომა — CLS-ის წინააღმდეგ.
სიჩქარე გავლენას ახდენს SEO-ზე და კონვერსიაზე.

წყარო: https://web.dev/vitals/

6 🧮 ვებ-გვერდის წარმატების ფორმულა

მარტივი მოდელი, რომელიც წინა თავებს ერთ სურათად კრავს: წარმატება = შვიდი კომპონენტის ჯამი.

🧮 წარმატების ფორმულა

ფორმულა: წარმატება როგორც ჯამი

ყველა წინა თავი ერთ მარტივ მოდელად შეგვიძლია წარმოვადგინოთ. წარმატებული ვებ-გვერდი არ არის რომელიმე ერთი მახასიათებელი — ის შვიდი კომპონენტის ერთობლიობაა:

სინტაქსი

Syntax

წარმატებული ვებ-გვერდი =
      გამოყენებადობა
    + ხელმისაწვდომობა
    + სიჩქარე
    + კონტენტი
    + ნდობა
    + SEO
    + განვითარება

💡 რჩევა: ეს ჯამია და არა „რომელიმე ერთი". თუ ერთი კომპონენტი ნულია (მაგ. საიტი მიუწვდომელია ან ძალიან ნელია), მთლიანი შედეგი მკვეთრად ეცემა.

comp-usability

კომპონენტი 1 — გამოყენებადობა

რამდენად მარტივად აღწევს მომხმარებელი მიზანს. ეფუძნება ISO 9241-სა და Nielsen-ის ჰიურისტიკებს: ნათელი ნავიგაცია, ლოგიკური სტრუქტურა, გასაგები ღილაკები, მინიმუმი ნაბიჯი.

comp-accessibility

კომპონენტი 2 — ხელმისაწვდომობა

საიტით სარგებლობა ყველასთვის, შესაძლებლობის მიუხედავად. ეფუძნება WCAG 2.2-ს: alt ტექსტები, კლავიატურით ნავიგაცია, კონტრასტი, სემანტიკა, ხელმისაწვდომი ფორმები.

comp-speed

კომპონენტი 3 — სიჩქარე

რამდენად სწრაფად იტვირთება და რეაგირებს გვერდი. იზომება Core Web Vitals-ით (LCP, INP, CLS). სიჩქარე გავლენას ახდენს როგორც გამოცდილებაზე, ისე SEO-ზე.

comp-content

კომპონენტი 4 — კონტენტი

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

comp-trust

კომპონენტი 5 — ნდობა

გრძნობს თუ არა მომხმარებელი თავს უსაფრთხოდ: HTTPS, ხილული კონტაქტი, „ჩვენ შესახებ", კონფიდენციალურობის პოლიტიკა, ავტორის ინფორმაცია. ნდობის გარეშე კონვერსია არ ხდება.

comp-seo

კომპონენტი 6 — SEO

რამდენად კარგად პოულობენ და ინდექსირებენ საიტს ძიების სისტემები: უნიკალური title, meta description, სწორი სათაურები, sitemap, robots.txt, canonical, structured data.

comp-growth

კომპონენტი 7 — განვითარება

წარმატება ერთჯერადი მოვლენა არ არის. საჭიროა მუდმივი გაზომვა და გაუმჯობესება: ანალიტიკა (Google Analytics, Search Console), კონვერსიების ტრეკინგი და შეცდომების მონიტორინგი. მონაცემები გვეუბნება, რა გავაუმჯობესოთ შემდეგ.

📌 შეჯამება და დასამახსოვრებელი

შეჯამება და დასამახსოვრებელი

მოკლე შეჯამება

წარმატებული ვებ-გვერდი = გამოყენებადობა + ხელმისაწვდომობა + სიჩქარე + კონტენტი + ნდობა + SEO + განვითარება. ეს ჯამია — და არა ერთი დომინანტი ფაქტორი. სუსტი ერთი კომპონენტი მთელ შედეგს აქვეითებს.

მთავარი დასამახსოვრებელი საკითხები

წარმატება — სისტემაა, და არა ერთი მახასიათებელი.
ყველაზე სუსტი რგოლი განსაზღვრავს საერთო ხარისხს.
„განვითარება" ნიშნავს მუდმივ გაზომვასა და გაუმჯობესებას.
ფორმულა აერთიანებს ყველა წინა თავს — შემდეგი ნაბიჯი მისი შემოწმებაა (აუდიტი).

7 ✅ 50-პუნქტიანი აუდიტის ჩექლისტი

პრაქტიკული, შვიდ ჯგუფად დაყოფილი ჩექლისტი (50+ პუნქტი) საიტის გამოქვეყნებამდე შესამოწმებლად. გაიარე თითო პუნქტი და დარწმუნდი, რომ შესრულებულია.

audit-intro

როგორ ჩავატაროთ აუდიტი

აუდიტი არის საიტის სისტემური შემოწმება გამოქვეყნებამდე (ან რეგულარულად, უკვე გაშვებულზე). იარე ჯგუფ-ჯგუფ, თითო პუნქტი მონიშნე როგორც შესრულებული ან გამოსასწორებელი. გამოიყენე ინსტრუმენტები: Lighthouse (წარმადობა/SEO/ ხელმისაწვდომობა), WAVE (ხელმისაწვდომობა), Search Console (ინდექსირება/CWV).

ქვემოთ მოცემული ჩექლისტი დაყოფილია შვიდ ჯგუფად: UX, Accessibility, Performance, SEO, Content, Trust და Analytics — სულ 50+ პუნქტი.

💡 რჩევა: შეინახე ეს ჩექლისტი როგორც გამოშვების წინაპირობა (release checklist). არცერთი საიტი არ უნდა გამოქვეყნდეს შემოწმების გარეშე.

cl-ux

UX — გამოყენებადობა (10 პუნქტი)

☐ მთავარი მესიჯი მთავარ გვერდზე მყისვე გასაგებია.
☐ ნავიგაცია მარტივი და თანმიმდევრულია ყველა გვერდზე.
☐ მობილური ვერსია სრულად გამართულია (responsive).
☐ ტექსტი ადვილად იკითხება (ზომა, ხაზებს შორის მანძილი, კონტრასტი).
☐ ძებნა საიტზე მუშაობს და სასარგებლო შედეგებს აბრუნებს.
☐ Breadcrumb ნავიგაცია არსებობს ღრმა გვერდებზე.
☐ CTA (მოქმედებისკენ მოწოდების) ღილაკები ნათლად ჩანს.
☐ დიზაინი თანმიმდევრულია (ფერები, ღილაკები, შრიფტები).
☐ არსებობს მოსახერხებელი 404 (ვერ მოიძებნა) გვერდი ნავიგაციით.
☐ მოქმედებებს აქვს ხილული უკუკავშირი (loading, hover, active).

cl-acc

Accessibility — ხელმისაწვდომობა (6 პუნქტი)

☐ ყველა შინაარსობრივ სურათს აქვს აღწერითი ALT ტექსტი.
☐ მთელი საიტი მართვადია მხოლოდ კლავიატურით.
☐ ტექსტისა და ფონის კონტრასტი აკმაყოფილებს WCAG AA-ს (≥ 4.5:1).
☐ ფოკუსის მდგომარეობები (focus state) ხილულია ყველა ინტერაქტიულ ელემენტზე.
☐ გამოყენებულია სემანტიკური HTML (header, nav, main, footer, h1–h6).
☐ ფორმის ყველა ველს აქვს ხილული label და ხელმისაწვდომი შეცდომის ტექსტი.

cl-perf

Performance — წარმადობა (8 პუნქტი)

☐ სურათები ოპტიმიზებულია (WebP/AVIF, სწორი ზომა, შეკუმშვა).
☐ ჩართულია Lazy Loading არა-კრიტიკული სურათებისთვის.
☐ კონფიგურირებულია ბრაუზერისა და სერვერის Cache.
☐ CSS ოპტიმიზებული და მინიფიცირებულია; ზედმეტი წაშლილია.
☐ JavaScript ოპტიმიზებულია (defer/async, code splitting).
☐ შრიფტები ოპტიმიზებულია (font-display: swap, ქვესიმრავლე).
☐ სტატიკური რესურსები მიეწოდება CDN-ით (სადაც შესაძლებელია).
☐ Core Web Vitals ნორმაშია (LCP ≤ 2.5წმ, INP ≤ 200მწმ, CLS ≤ 0.1).

cl-seo

SEO (9 პუნქტი)

☐ თითო გვერდს აქვს უნიკალური, აღწერითი Title.
☐ თითო გვერდს აქვს Meta Description.
☐ თითო გვერდზე ერთი, ნათელი H1.
☐ არსებობს და გაგზავნილია XML Sitemap.
☐ Robots.txt სწორად კონფიგურირებულია.
☐ მითითებულია Canonical URL დუბლიკატების თავიდან ასაცილებლად.
☐ დამატებულია Structured Data (Schema.org / JSON-LD).
☐ კონფიგურირებულია სოციალური მეტა-მონაცემები (Open Graph / Twitter Card).
☐ შიდა ბმულები (internal links) ლოგიკურად აკავშირებს გვერდებს.

cl-content

Content — კონტენტი (6 პუნქტი)

☐ კონტენტი სასარგებლო და მომხმარებლის მიზანზე ორიენტირებულია.
☐ ინფორმაცია განახლებული და ზუსტია.
☐ სათაურები (Heading) იერარქიულად სწორია (h1 → h2 → h3).
☐ არსებობს FAQ ბლოკები ხშირი კითხვებისთვის.
☐ არ არის დუბლირებული კონტენტი საიტზე ან საიტებს შორის.
☐ ტექსტი სკანირებადია (აბზაცები, სიები, ქვესათაურები).

cl-trust

Trust — ნდობა (7 პუნქტი)

☐ საიტი მუშაობს HTTPS-ზე მოქმედი სერტიფიკატით.
☐ არ არის „mixed content" (HTTP რესურსები HTTPS გვერდზე).
☐ ხილულია საკონტაქტო ინფორმაცია.
☐ არსებობს „ჩვენ შესახებ" გვერდი.
☐ გამოქვეყნებულია კონფიდენციალურობის პოლიტიკა (Privacy Policy).
☐ გამოქვეყნებულია გამოყენების პირობები (Terms of Use).
☐ მითითებულია ავტორის/ორგანიზაციის ინფორმაცია.

cl-analytics

Analytics — ანალიტიკა (4 პუნქტი)

☐ ჩართულია Google Analytics (ან ალტერნატივა).
☐ დადასტურებულია საიტი Google Search Console-ში.
☐ კონფიგურირებულია კონვერსიების ტრეკინგი (Conversion Tracking).
☐ ჩართულია შეცდომების მონიტორინგი (Error Monitoring).

💡 რჩევა: სულ: UX 10 + Accessibility 6 + Performance 8 + SEO 9 + Content 6 + Trust 7 + Analytics 4 = 50 პუნქტი.

📌 შეჯამება და დასამახსოვრებელი

შეჯამება და დასამახსოვრებელი

მოკლე შეჯამება

აუდიტი არის გამოქვეყნებამდე საიტის სისტემური შემოწმება შვიდი ჯგუფის (UX, Accessibility, Performance, SEO, Content, Trust, Analytics) მიხედვით — სულ 50 პუნქტი. შემოწმება ეყრდნობა ინსტრუმენტებს: Lighthouse, WAVE, Search Console.

მთავარი დასამახსოვრებელი საკითხები

აუდიტი = გამოშვების წინაპირობა, არა არჩევითი ნაბიჯი.
50 პუნქტი ფარავს წარმატების შვიდივე კომპონენტს.
გამოიყენე ავტომატური ინსტრუმენტები ხელით შემოწმებასთან ერთად.
აუდიტი გაიმეორე რეგულარულად, არა მხოლოდ ერთხელ.

8 📚 სასარგებლო რესურსები

ოფიციალური წყაროები და ინსტრუმენტები ღრმად შესასწავლად და საიტის შესამოწმებლად.

res-standards

სტანდარტები

WCAG 2.2 — ხელმისაწვდომობის სტანდარტი (W3C):
https://www.w3.org/TR/WCAG22/
ISO 9241 — ადამიანზე ორიენტირებული დიზაინი:
https://iso9241.org/
Nielsen Norman Group — UX კვლევა და ჰიურისტიკები:
https://www.nngroup.com/
Google Web Vitals — წარმადობის მეტრიკები:
https://web.dev/vitals/

res-tools

ინსტრუმენტები

Google Lighthouse — წარმადობის, SEO-სა და ხელმისაწვდომობის აუდიტი:
https://developer.chrome.com/docs/lighthouse/
Google Search Console — ინდექსირება, CWV რეპორტი, ძიების ანალიტიკა:
https://search.google.com/search-console/
Google Analytics — ვიზიტებისა და ქცევის ანალიტიკა:
https://analytics.google.com/

💡 რჩევა: დაიწყე Lighthouse-ით — ის ერთ ანგარიშში გაჩვენებს წარმადობის, ხელმისაწვდომობის, SEO-სა და best practices-ის ქულებს.

ვებ-გვერდის წარმატების ფორმულა (WSF)

1 🚀 შესავალი

🔗 დაკავშირებული თემები:

მნიშვნელობები

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

🔗 დაკავშირებული თემები:

მოკლე შეჯამება

მთავარი დასამახსოვრებელი საკითხები

2 ♿ WCAG 2.2 — ხელმისაწვდომობა

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

მნიშვნელობები

🔗 დაკავშირებული თემები:

მნიშვნელობები

🔗 დაკავშირებული თემები:

მაგალითები

შინაარსობრივი vs დეკორატიული სურათი

✓ საუკეთესო პრაქტიკა

🔗 დაკავშირებული თემები:

მაგალითები

ღილაკი თაგვისთვის და კლავიატურისთვის

✓ საუკეთესო პრაქტიკა

✗ ხშირი შეცდომები

🔗 დაკავშირებული თემები:

მაგალითები

საკმარისი vs არასაკმარისი კონტრასტი

🔗 დაკავშირებული თემები:

მაგალითები

სემანტიკური სტრუქტურა + ARIA

✓ საუკეთესო პრაქტიკა

🔗 დაკავშირებული თემები:

მაგალითები

სწორად მონიშნული ფორმის ველი

✓ საუკეთესო პრაქტიკა

🔗 დაკავშირებული თემები:

მოკლე შეჯამება

მთავარი დასამახსოვრებელი საკითხები

3 🧭 ISO 9241 — ადამიანზე ორიენტირებული დიზაინი

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

მნიშვნელობები

მაგალითები

სამი განზომილების პრაქტიკული წაკითხვა

🔗 დაკავშირებული თემები:

მოკლე შეჯამება

მთავარი დასამახსოვრებელი საკითხები

4 🔟 Nielsen-ის 10 ჰიურისტიკა

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

მაგალითები

ცუდი vs კარგი შეცდომის ტექსტი

🔗 დაკავშირებული თემები:

🌍 რეალური გამოყენება

🔗 დაკავშირებული თემები:

მოკლე შეჯამება

მთავარი დასამახსოვრებელი საკითხები

5 ⚡ Google Core Web Vitals

მნიშვნელობები

🔗 დაკავშირებული თემები:

მნიშვნელობები

✓ საუკეთესო პრაქტიკა

🔗 დაკავშირებული თემები:

მნიშვნელობები