Gidimme SEO Pa Step 5: UX / T'expérience Utilisateur

Yenn ci Step 5 ci Gidimme SEO 13-Step. T'expérience utilisateur mën na la jëfandikoo ci rank — Google muy jëfandikoo ni ñi jàpp ci sa njaxlaf, te reew naa ay sité yu jëfandikoo ci biiri, jàmm ak jëfandikoo yu rafet.

---

Njàngat bi (Step 3) dañu ko taxaw, ndaxte élaboration (Step 4) dafay ànd ak sa ndokke. Waaye bu ñi jàpp ci sa page te ginnaaw bu ñuy jàpp ci yoon bu ndaw, bu amul dëkk, bu mënul gëna am jàmm — bés bu ñu wéy. Google dal na lépp bi ak yenn ci yam ci yalu ni, te yéddoo ci suñu njiit.

Ci weer bu 2021, Google jëndu na Page Experience bu mën a jëfandikoo UX ci rank. Ci 2024, INP (Interaction to Next Paint) moy na FID ci Core Web Vital. Ci 2026, ay sigal yi ngi am ci jafe jafe, jëm ci Google tadalafil luy jëfandikoo yu jóge ci ni u.req ak yeneen.

What UX for SEO Covers

Optimisation UX ci SEO dañu ko dindi ci 6 àdduna:

1. Core Web Vitals — Metrics UX bu wér (LCP, INP, CLS)
2. Mobile Optimization — Design jawriñ, yoon yu jàpp, viewport
3. Accessibility (WCAG) — Jëfandikoo sa sité moon dla am jur
4. Page Experience Signals — HTTPS, bu nuy jàpp interstitials, safe browsing
5. Navigation Patterns — Jàmm ak jàmm bu dunde seetlu
6. Above-the-Fold Optimization — Loolu yi ñi jàpp ci ginnaaw bu jàpp

1. Core Web Vitals (CWV)

Core Web Vitals dañu ko ak metrics UX yu ñuy def. Dinanu jëfandikoo ci Chrome User Experience Report (CrUX) te jëfandikoo ci rank.

Ay metrics njiit:

| Metric | Measures | Good | Needs Improvement | Poor | |--------|----------|------|-------------------|------| | LCP (Largest Contentful Paint) | Jàmm bu wér | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | Responsiveness | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | Jàmm visual | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — Largest Contentful Paint

LCP dañu ko may nañu loolu ci niñu jàpp ci sa page. "Content bu wér" mooy l'image bu màndarga, njaay bi ak l'arit bu réew.

Ay loolu gi am nañu ci LCP ak ay fixes:

| Problem | Impact | Fix | |---------|--------|-----| | L'image bu màndarga amul jàmm | +2-5s | WebP format, njaay bu metti, fetchpriority="high" | | CSS/JS bu blokka | +1-3s | Inline critical CSS, defer non-critical | | Slow server response (TTFB) | +1-4s | CDN, server caching, edge deployment | | Web fonts blocking render | +0.5-2s | font-display: swap, preload critical fonts | | Third-party scripts | +1-3s | Defer analytics/chat widgets, lazy load ads |

Priorité optimisations LCP:

<!-- 1. Preload l'image LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. Inline CSS bu metti (first 14KB) -->
<style>/* Styles bu wergi u mbind mi */</style>

<!-- 3. Defer CSS bu metti -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

<!-- 4. L'image bu màndarga ak dimensions bu metti -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Descriptive alt text">

Quick win: Run PageSpeed Insights ci sa homepage. Jokk ci LCP element bi mu jëfandikoo. Bu amul jàmm, jëfandikoo WebP, set width/height, te jëfandikoo fetchpriority="high". Bi loolu, dinaa jëfandikoo LCP bu metti 1-2 seconds.

INP — Interaction to Next Paint

INP dañu ko may nañu ni sa page mën na jàmm ci ñi am jàmm (click, tap, type). Di jëfandikoo interaction buy am ci ginnaaw bu lëkk mi, te jëfandikoo it.

Ay loolu gi am nañu ci INP ak ay fixes:

| Problem | Impact | Fix | |---------|--------|-----| | Long JavaScript tasks | +200-1000ms | Break into smaller tasks, use requestIdleCallback | | Heavy event handlers | +100-500ms | Debounce, throttle, use requestAnimationFrame | | Layout thrashing | +50-300ms | Batch DOM reads/writes, use will-change | | Third-party scripts | +100-500ms | Defer, load after interaction, use Web Workers | | Synchronous API calls | +200-2000ms | Async/await, loading states, optimistic UI |

Techniques optimisations INP:

// Bopp: Blocks main thread
button.addEventListener('click', () => {
  const data = heavyComputation(); // Blocks for 400ms
  updateDOM(data);
});

// Bop: Yields to main thread
button.addEventListener('click', async () => {
  // Show immediate feedback
  button.textContent = 'Loading...';

  // Break heavy work into chunks
  await scheduler.yield();
  const data = heavyComputation();

  await scheduler.yield();
  updateDOM(data);
});

Quick win: Open Chrome DevTools > Performance tab. Jàpp ci sa sité te gë̀nna jàpp "Long Tasks" (red triangles). Ay loolu yi dañu di blokke main thread. Ay loolu bu amul jàmm bu tar na loolu ak script bu ëllëg — defar ko walla jàpp ko ginnaaw bu jàpp.

CLS — Cumulative Layout Shift

CLS dañu ko may nañu jàmm visual — bu ñuy jël, sa page mën na ñu jàpp ni la mu jàmm ci. Lu mëna jëfandikoo moum bayyi, bu ñuy jàpp ci.

Ay loolu gi am nañu ci CLS ak ay fixes:

| Problem | CLS Impact | Fix | |---------|-----------|-----| | Images without dimensions | 0.1-0.5 | Always set width and height | | Ads loading late | 0.1-0.3 | Reserve space with min-height | | Web fonts causing reflow | 0.05-0.2 | font-display: optional or size-adjusted fallback | | Dynamic content insertion | 0.1-0.4 | Reserve space, use content-visibility | | Cookie banners pushing content | 0.05-0.2 | Overlay design (not push-down) |

Checklist prevention CLS:

<!-- Always specify dimensions for media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Reserve space for dynamic content -->
<div style="min-height: 250px;">
  <!-- Ad will load here without shifting -->
</div>

<!-- Use aspect-ratio for responsive media -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Quick win: Jëfandikoo width ak height attributes fanaan bu ñuy jëfandikoo ci ñi jàpp ci sa top 10 pages. Loolu la fi luy yëng ciy yéen CLS bu mënees — images loading ak pushing content down.

2. Mobile Optimization

Google jëfandikoo mobile-first indexing — sa mobile expérience MOOM, sa rank expérience. Bu sa site amul jàmm ci mobile, du yàgg lu jëm ci sa desktop version.

Mobile optimization checklist:

| Element | Requirement | Common failure | |---------|-------------|----------------| | Viewport meta | width=device-width, initial-scale=1 | Missing entirely | | Touch targets | Minimum 44x44px | Tiny links, cramped buttons | | Font size | Minimum 16px body text | 12px unreadable on mobile | | Content width | No horizontal scrolling | Fixed-width elements | | Tap spacing | 8px minimum between targets | Adjacent links touching | | Responsive images | srcset with appropriate sizes | Desktop-sized images on mobile |

Responsive design patterns:

/* Mobile-first approach */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Touch-friendly targets */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Responsive typography */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }

/* No horizontal overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Mobile SEO signals Google checks:

• Text readable without zooming
• Links/buttons not too close together
• Content fits viewport width (no horizontal scroll)
• No Flash or unsupported technologies
• Interstitials don't block content on entry
• Page loads quickly on 4G/3G connections

Quick win: Jëfandikoo sa sité ci sa téér. Jëfandikoo sa togg la ci ginnaaw. Bu ginnaaw dafa mënul, walla bu ñuy jàpp ci ginnaaw ci sa yoon yi, nan ci ginnaaw — ay loolu la am, loolu jàmm ci.

3. Accessibility (WCAG)

Accessibility duñu ñeex — mooy signal SEO. Google yi am ni dal na ay site yu mën a jëfandikoo ci yéen, ak niñuy jëfandikoo ci screen readers, keyboard-only navigation, walla visual impairments. Njàngat yi ci WCAG (Cédul Sa Twén) dinaa ko jëfandikoo, mooy jëfandikoo ci ranking.

Ay jàmm fanaa mën:

| Element | Requirement | SEO impact | |---------|-------------|------------| | Alt text on images | Descriptive text for all meaningful images | Direct (image SEO + accessibility) | | Heading hierarchy | H1 → H2 → H3 without skipping | Direct (content structure) | | Color contrast | 4.5:1 for normal text, 3:1 for large text | Indirect (usability) | | Keyboard navigation | All interactive elements reachable via Tab | Indirect (usability) | | ARIA labels | Labels for icons, buttons without text | Indirect (screen reader UX) | | Focus indicators | Visible focus ring on keyboard navigation | Indirect (usability) | | Form labels | Every input has an associated | Indirect (usability) | | Link text | Descriptive (not "click here") | Direct (anchor text SEO) |

Accessibility testing process:

1. Automated scan — Run Lighthouse, axe-core, or WAVE (catches ~30-50% of issues)
2. Keyboard test — Jàpp ci sa site ci jëfandikoo sous Tab, Enter, Escape
3. Screen reader test — Jëfandikoo VoiceOver (Mac) walla NVDA (Windows) ci ay pages
4. Color contrast — Jëfandikoo lépp text ci backgrund yeeker (jokk ci DevTools contrast checker)
5. Zoom test — Zoom to 200% — ndax loolu yomb nañu?

Ay loolu gu jàmm:

<!-- Images: descriptive alt text -->
<img src="chart.png" alt="Bar chart showing 40% increase in organic traffic from January to March 2026">

<!-- Buttons: clear labels -->
<button aria-label="Close navigation menu">
  <svg>...</svg> <!-- Icon-only button needs aria-label -->
</button>

<!-- Forms: associated labels -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Links: descriptive text -->
<a href="/guide">Read the complete SEO guide</a>
<!-- NOT: <a href="/guide">Click here</a> -->

<!-- Skip navigation for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>

Quick win: Run Lighthouse ci sa homepage po' funaay. Jëfandikoo lépp doxun "Fails" dafa am mbaa yenn loolu ak alt text, missing form labels, ak low contrast text. Ay loolu baye di ko jëfandikoo 30min ak 20+ points.

4. Page Experience Signals

Doko ci Core Web Vitals, Google jëfandikoo ci yenn pendaay eyu page experience signals bu jëfandikoo ci ranking.

Page experience factors:

| Signal | Requirement | Check | |--------|-------------|-------| | HTTPS | Tèye bu jëfandikoo ci HTTPS | Mixed content breaks it | | No intrusive interstitials | Dëkkul ci content boole | Popups covering >30% on mobile | | Safe browsing | No malware, phishing, deceptive content | Google Safe Browsing status | | Mobile-friendly | Passes mobile-friendly test | Google Mobile-Friendly Test | | No deceptive ads | Ads don't mimic content | Disguised download buttons |

Guidaay interstitials (lu mën a jëfandikoo vs. lu béejay):

| Allowed | Penalized | |---------|-----------| | Age verification (legally required) | Full-screen popup on page entry | | Cookie consent (legally required) | Email signup covering entire content | | Login walls for paywalled content | "Download our app" blocking content | | Small banners using <30% of screen | Countdown timers before content access | | After user scrolls/interacts | Before user sees any content |

HTTPS checklist:

• [ ] SSL certificate valid ak duñuy expired
• [ ] Lépp pages redirect HTTP → HTTPS (301)
• [ ] No mixed content (HTTP resources on HTTPS pages)
• [ ] HSTS header enabled (with includeSubDomains)
• [ ] Links internes jëfandikoo HTTPS (duñuy HTTP)
• [ ] Sitemap jëfandikoo HTTPS URLs
• [ ] Canonical tags jëfandikoo HTTPS

Quick win: Jëfandikoo mixed content — open DevTools Console ci sa pages bu metti. Yenn "Mixed Content" warnings mën nañu jëfandikoo HTTP resources ci page HTTPS. Jëfandikoo yenn URLs ak HTTPS. Loolu mooy loolu bu mëna jëfandikoo ci page experience issues.

5. Navigation Patterns

Loolu jëfandikoo fanaan bopp ak Google. Yennyi mënna jàpp loolu ak jëfandikoo. Google crawlers am nañu loolu ngir jàpp bukku yaakaar ak distribute PageRank ci wergi.

Navigation best practices:

| Pattern | Benefit | Implementation | |---------|---------|----------------| | Flat architecture | Pages within 3 clicks of home | Hub pages, breadcrumbs | | Breadcrumbs | Users know where they are | Schema markup + visible trail | | Logical URL structure | Predictable paths | /category/subcategory/page | | Footer navigation | Secondary pages accessible | Legal, about, contact, sitemap | | Internal search | Users find specific content | Search box with suggestions | | Related content | Reduces bounce, increases depth | "Related articles" sections |

Ideal site architecture:

Homepage (1 click from everything important)
├── /products/ (category hub — links to all products)
│   ├── /products/category-a/
│   │   ├── /products/category-a/product-1
│   │   └── /products/category-a/product-2
│   └── /products/category-b/
├── /blog/ (content hub — links to all posts)
│   ├── /blog/topic-cluster-1/ (pillar page)
│   │   ├── /blog/subtopic-1a
│   │   └── /blog/subtopic-1b
│   └── /blog/topic-cluster-2/
├── /tools/ (utility pages)
└── /about/ (trust pages)

Breadcrumb implementation:

<!-- Visible breadcrumb -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">Gidimme SEO Pa Step 5</li>
  </ol>
</nav>

<!-- Schema markup (BreadcrumbList) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "Gidimme SEO Pa Step 5" }
  ]
}
</script>

Navigation red flags:

• Pages more than 4 clicks from homepage (too deep)
• No breadcrumbs (users and Google lose context)
• JavaScript-only navigation (crawlers may miss links)
• Orphan pages (no internal links pointing to them)
• Mega menus with 200+ links (dilutes per-link value)

Quick win: Jëfandikoo sa pages bu tudd jafe-jafe — nit ki nekk 3 clicks ci sab homepage? Bu mëne na, jëfandikoo loolu ak dai links law. Lexiy jàppe jël an, ak jàmm ak lëmmou.

6. Above-the-Fold Optimization

Loolu yi ñi jàpp ci ginnaaw bu jàpp, dañu ko jëfandikoo bu mëna yay yoon. Loolu yi mën na jëfandikoo di na loolu dox.

Above-the-fold must-haves:

| Element | Why | Common failure | |---------|-----|----------------| | Clear headline (H1) | Confirms relevance to query | Generic or missing | | Value proposition | Why should they stay? | Buried below fold | | Primary CTA | What should they do next? | Hidden or unclear | | Hero image/media | Visual engagement | Slow-loading, causing LCP issues | | Trust signals | Why should they trust you? | No logos, reviews, or credentials |

Above-the-fold layout patterns:

Desktop (1440px viewport):
┌──────────────────────────────────────┐
│ Navigation bar                        │
├──────────────────────────────────────┤
│                                      │
│  H1: Clear headline matching query   │
│  Subtitle: Value proposition         │
│                                      │
│  [Primary CTA Button]               │
│                                      │
│  Trust signals: logos, stats, badges │
│                                      │
├──────────────────────────────────────┤
│ ↓ Content continues below fold       │
└──────────────────────────────────────┘

Mobile (375px viewport):
┌────────────────────┐
│ Nav (hamburger)    │
├────────────────────┤
│                    │
│ H1: Headline       │
│ (shorter on mobile)│
│                    │
│ [CTA Button]       │
│ (full-width, 44px+)│
│                    │
│ Trust badge        │
│                    │
├────────────────────┤
│ ↓ Scroll for more  │
└────────────────────┘

Critical above-the-fold rules:

• H1 must be visible without scrolling (matches search query)
• CTA must be visible without scrolling (reduces bounce)
• No layout shift in above-the-fold content (CLS killer)
• Hero image must load fast (it's usually the LCP element)
• Mobile: reduce above-the-fold content (less viewport space)

Quick win: Jëfandikoo screenshot ci sa homepage ci mobile (375px width). Ndax H1 luy nekk? Ndax CTA button luy nekk? Mën nañu gë́n di na baax. Ndax buñuy nekk "ndax," yoon yi mën nañu jëfandikoo.

The UX Audit Checklist

Run through this for your top pages:

• [ ] LCP under 2.5 seconds (hero image optimized, critical CSS inlined)
• [ ] INP under 200ms (no long JavaScript tasks blocking interaction)
• [ ] CLS under 0.1 (all images have dimensions, no late-loading shifts)
• [ ] Mobile-friendly (44px touch targets, 16px+ text, no horizontal scroll)
• [ ] Accessible (alt text, heading hierarchy, color contrast, keyboard nav)
• [ ] HTTPS everywhere (no mixed content, HSTS enabled)
• [ ] No intrusive interstitials (consent overlays OK, content-blocking popups not)
• [ ] Breadcrumbs present (with BreadcrumbList schema)
• [ ] Navigation depth under 4 clicks to any important page
• [ ] Above-the-fold optimized (H1 visible, CTA visible, fast LCP)

How LANGR Scans Your UX

LANGR's UX-related scan modules include:

• Core Web Vitals module — Measures LCP, INP, CLS from Chrome User Experience Report (real user data)
• PageSpeed module — Full Lighthouse performance audit with mobile and desktop scores
• Mobile module — Viewport configuration, touch target sizing, text readability
• Accessibility module — WCAG compliance checks, ARIA usage, color contrast
• Layout Scan module — AI-powered evaluation of mobile and desktop layouts
• Page Experience module — Interstitial detection, HTTPS status, safe browsing

Ay modules yi di jëfandikoo ci lépp scans, nangu na yaw loolu jëfandikoo, ak loolu mën nañu jëfandikoo ci dobe yu metti.

Common UX Mistakes (Ranked by Impact)

1. Ignoring mobile — 60%+ of searches are mobile; broken mobile = broken rankings
2. Unoptimized images — The #1 cause of slow LCP (and often the easiest fix)
3. No explicit image dimensions — Layout shifts destroy CLS scores
4. Third-party script bloat — Chat widgets, analytics, ads blocking INP
5. Missing accessibility basics — No alt text, no heading hierarchy, no contrast
6. Content-blocking interstitials — Full-screen popups before users see content
7. Deep site architecture — Important pages buried 5+ clicks from homepage
8. No above-the-fold value — Users can't tell what the site does without scrolling

What's Next?

Step 6: Monitoring & Ranking — Duñu mëna jëfandikoo lu yaram mën a jëfandikoo. Bayo positions, score tracking, change reports, ak uptime monitoring.

---

Loolu ginaar mën na ci LANGR's 13-step SEO series. Run a free audit ngir jëfandikoo sa sité ak lépp ci 13 disciplines.