SEO Gida 9. Pauso: Diseinu Optimizazioa — Elementuak Non Jarri Pentsatu Duzuena baino Garrantzitsuagoa da
SEO Gida 9. Pauso: Diseinu Optimizazioa
Hau da 13 Pauso SEO Gidaren 9. pausa. Diseinu optimizazioa SEO eta konbertsioa batzen dituen lekuan dago — bisitariak ekintza bat ez badute egiten, sailkapena ez da ezer.
Zure webgunea #1 izan dezakezu, meta etiketa perfektuak, karga denborak azkarrak, eta atxikitze autoritarioak — eta hala ere porrot egin dezakezu. Zergatik? Zure diseinuak bisitariak nahi dituzun ekintzara ez gidatzen ditu.
Diseinu optimizazioa SEO eta CRO (Konbertsio Tasaren Optimizazioa) artean dago. Googlek erabiltzaileen konexio sinboloak neurtzen ditu — irteera tasa, egonaldiko denbora, pogo-sticking-a. Diseinu konfusa hiru horiek eragiten ditu. Diseinu argi eta estrategiko batek hiru horiek hobetzen ditu.
Datuak argiak dira: diseinatzaile optimizatuak dituzten orriak %30-80ko konbertsio-tasa handiagoa izaten dute, trafiko gehigarririk gabe. Hori da bisitariekiko doako irabazia.
Diseinu Optimizazioak Zehazten Dituen 8 Arlo
Diseinu optimizazioak hurrengo 8 arlo zabaltzen ditu:
- Scroll-a Egin Gabeko Edukia — Erabiltzaileek ikusten duten lehenengo irudia
- Hierarkia Bisuala — Begirada garrantzitsuenetara gidatzea
- F-Patroia eta Z-Patroia — Erabiltzaileek nola irakurtzen duten orriak
- CTA Kokapena — Non txertatzen diren hobekien botoiak eta estekak
- Espazio Zuria eta Irakurtzeko Erraztasunak — Ulermena hobetzen duen arnasketa lekua
- Mugikorreko Diseinu Patroiak — Belarritako zonak eta bertikalaren fluxua
- Termografia Analisia — Datuetan oinarritutako diseinu erabakiak
- Konbertsioari Zuzendutako Diseinua — Negozio emaitzak bultzatzen duen diseinua
1. Scroll-a Egin Gabeko Edukia
"Scroll-a egin gabe" erabiltzailiek ikusten duten lehenengo irudia da. Mahaigainean, gehienez 600-800px ingurukoa izaten da. Mugikorrean, 500-700px ingurukoa. Hori da zure ondasun baliotsuena.
Scroll-a egin gabe agertu behar dutenak:
- "Zer da orri hau?" galdeteari erantzuten dion titulua
- Zure balio proposamen nagusia edo mezurik garrantzitsuena
- Gutxienez CTA bat edo hurrengo ekintza argia
- Irudizko froga bat kredibilitatearen alde (logoak, iritziak, fidagarritasun ikurrak)
Scroll-a egin gabe saihestu beharrekoak:
- Testurik gabeko irudi erraldoiak (leku bat xahutzen dute)
- Edukia bultzatzen duten nabigazio-menuak
- Ikuspegi guztia estaltzen duten cookie-banner-ak
- Edukiaren bistaratzea atzeratzen duen automatikoki abiarazteko bideoa
5 segundo probala: Eman orria pertsona bati 5 segundoz. Esan diezazukete orri hau zer den eta zer egin behar duten hurrengoan? Ez bada, zure scroll egoneko edukia porrot egin du.
Irabazi azkarra: Begiratu zure 5 lurreratze orri nagusiak mugikorrean. Lehenengo CTAk scroll-a beharko badu, igo irudia. Scroll eginda ikusgai dauden CTAk batez besteko %17ko hobeak bihurtzen dute.
2. Hierarkia Bisuala
Hierarkia bisualak erabiltzaileek zure orrian informa zioa prozesatzeko ordena ezartzen du. Tamaina, kolorea, kontrastea, tartea eta kokapena kontrolatzen ditu.
Hierarkia piramidea (goiko aldea = arreta gehiena):
| Maila | Helburua | Adibideak | |-------|---------|----------| | Primario | Erabiltzaileek egin behar duten gauza bakarra | CTA nagusiaren botoia, hero titulua | | Bigarren maila | Segurtasuna ematen duen informazioa | Azpititulak, onura garrantzitsuak, froga soziala | | Hirugarren maila | Kontrastea eta xehetasunak erabiltzaile konprometituentzat | Testu nagusia, ezaugarri zerrendak, zehaztapenak | | Laugarren maila | Nabigazioa eta erabilgarritasuna | Azpiko estekak, breadcrumbs, meta informazioa |
Hierarkia eraginkorraren arauak:
- Batez ere, PERTSO BAKAR bat ikusi behar da viewport bakoitzean
- Elementu nagusiak bigarren mailakoak baino 2-3 aldiz handiagoak izan behar dira
- Kontrastea (kolorea, pisua, tamaina) erabili maila argiak sortzeko
- Elementu inguruan dagoen espazio zuria bere garrantziaren iritzia handitzen du
- Irudi-patroi bat hautsi batek berehalako arreta sortzen du
SEO eragina: Hierarkia bisual sendoak egonaldiko denbora hobetzen du (erabiltzaileek behar duten aurkitzen dute azkarrago) eta pogo-sticking-a murrizten du (erabiltzaileek ez dute bilaketa emaitzetara itzultzen).
Irabazi azkarra: Zure orria itxura lausotzen den arte hurbildu. Hirutan ikusi al dituzu garrantzi desberdineko mailak? Denek antza badute, zure hierarkia lau da eta erabiltzaileek desorientatuta daude.
3. F-Patroi eta Z-Patroi Diseinuak
Begirada jarraitzearen ikerketa (Nielsen Norman Group, Hotjar) etengabe erakusten du erabiltzaileek orriak irakurtzen dituztela patroi egonkorretan. Zure diseinua horiekin bat etortzeak garrantzitsua den edukiari ikusgarritasuna ematen dio.
F-Patroia (Edukiz Betetako Orriak)
Erabiltzaileek testu-puzgarri duten orrien F-modulua irakurtzen dute (blog postak, artikuluak, produktu zerrendak):
- Goranzko irakurketa goiko aldetik (titulua)
- Jaitsi, beste lerro irakurtzen (azpititulua)
- Ezkerretik behera (gako-hitzak bilatuz irakurtzea)
Implikazioak:
- Zure garrantzitsuenak diren gako-hitzak eta mezuak 2-3 lerro lehenengoan jarri
- Paragrafoak garrantzitsuena den informazioarekin abiatu (lehenengo erabilera)
- Azpititulak erabiliz 2-3 paragrafo bakoitzean "irakurtzeko anker" gisa
- Eduki garrantzitsuak ezkerraldera ezarri (gorputz testua zentroan jarri gabe)
- Puntuzko zerrendak eta lodia irakurtzeko patroiak erabiliz
Z-Patroia (Testu Gutxiko Orriak)
Erabiltzaileek testu gutxiko orrietan Z-modulua irakurtzen dituzte (lurreratze orriak, etxeko orriak):
- Goi ezkerretik goi eskuinera (logoa → nabigazioa/CTA)
- Diagonal behera ezkerretik (gorputza irakurtzen)
- Behe ezkerretik behe eskuinera (CTA batean amaitzen)
Implikazioak:
- Zure logoa eta nabigazioa goi ezkerrean eta goi eskuinean jarri
- Zure mezu nagusia erdian kokatu
- Zure CTA nagusia patroirako behe eskuinean jarri
- Eduki blokeak diagonalaren aldera egituratu
Irabazi azkarra: Mapa ezazu zure orriaren diseinua F edo Z patroira. Zure CTA nagusia begirada naturalki irakurtzen den eremuan al dago?
4. CTA Kokapena
CTA (Ekintza-Deia) kokapenak zuzenean eragiten du konbertsio-tasetan. ContentVerve, Unbounce eta gure datuetatik milaka auditatutako orrien inguruan ikerketek irizpide argiak erakusten dituzte.
Konbertsio handiko CTA kokapenak:
| Kokapena | Hobekuntza | Zergatik Funtzionatzen du | |----------|------------|--------------------------| | Tituluaren azpian | Lurreratze orri laburrak | Erabiltzaileak berehala prest daude | | Lehen onura blokean | Ezaugarriak orriak | Konfiantza eraikitzen da eskaera egin aurretik | | Froga sozialaren ondoren | Zerbitzu orriak | Fidagarritasunak frikzioa murrizten du | | Edukien azpian | Blog postak, gidak | Konprometitutako irakurleak amaiera iristen dira | | Float/intzak (mugikorrean) | Mugikor orri guztietan | Beti eskuragarri |
CTA arauak:
- Egin ekintza aditzak: "Hasierako doako azterketa" ez "Bidali"
- CTA orrian kontraste handiena duen elementua izan behar da
- Viewport bakoitzean CTA primario bat baino ez
- Mikrokonpromisoa idatzita: "Ez da kreditu-txartelik behar" edo "30 segundo behar ditu"
- CTA botoia gutxienez 44x44px izan behar da mugikorrean (Apple HIG estandarra)
Gaizki amaitzen den arazoa: Zure orriak CTA aurretik amaitzen dela iruditu badu, erabiltzaileek ez dute scroll-a egiten. Ikusizko irizpideak erabili (edukia partzialki ikusgai, scroll adierazleak, edukitik kanpo erakusketak) hurrengo edukia datorrela adierazteko.
Irabazi azkarra: Gehitu bigarren CTA bat zure ondoen funtzionatzen duten orrien behealdean. Behealdean iragarleak iristeari utziko diete — eman aukera bat konbertitzeko, scroll-a egin gabe.
5. Espazio Zuria eta Irakurtzeko Erraztasunak
Espazio zuria (espazioa negatiboa) ez da hutsik dagoen espazioa — diseinu tresna da. Espazio zuria gehiago duten orriak ia neur litzatekeen moduan ondo funtzionatzen dute.
Ikasketek erakusten dutena:
- Testuaren inguruko espazio zuriak ulermena %20 handitzen du (Wichita State University)
- Lerro-tartearen handitzeak irakurketa-abiadura hobetzen du
- CTA inguruan dauden marjinak klik-tasa handitzen ditu
- Esku behetako diseinuak irteera tasa handiagoa dute
SEOrentzako irakurtze arauak:
- Lerroen luzera: 50-75 karaktere lerro bakoitzean (begi nekea saihestu)
- Lerro altuera: 1.5-1.8 gorputz testuarentzat (lerroak ondo neurririk gabe estutu gabe)
- Paragrafoen luzera: gehienez 2-4 esaldi (testu blokeak haustea)
- Atal tarteak: 2-3 aldiz lerro altuera ataletara
- CTA arnasteko lekua: Gutxienez 24pxko padding inguruan
Weberako letra tamaina:
- Gorputza: 16-18px gutxienez (mugikorrean: 16px oinarria)
- Tituluak: erabili modulu eskala (1.25x edo 1.333x ratio)
- Ez erabili orri bakoitzean 3 letra tamaina baino gehiago
- Gutxienezko kontraste ratioa: 4.5:1 (WCAG AA)
Irabazi azkarra: Handitu zure CTA nagusiaren inguruko paddinga %50. Askotan, garrantzitsuenak diren elementua beste eduki batzuekin bilduta dagoela ikusten da, eta zailagoa da nabaritzen eta mugikorrean ukitzea.
6. Mugikorreko Diseinu Patroiak
Mugikorrak web trafikoaren %60+ arduratzen du. Mugikorreko diseinua mahaigainekoarekin aurkakoa da — ez da soilik txikiagoa, baizik eta egitura desberdinarekin.
Hatz-zona: Mugikorreko erabiltzaileek telefonua esku batean eusten dute. Hatza iristeko leku naturalak hiru zona sortzen ditu:
- Erraza zona (azpiko erdian): CTA nagusiak hemen jarri
- Oso ondo zona (erdian): Bigarren mailako ekintzak eta edukia nagusia
- Zaila zona (goiko ertzak): Nabigazioa, ezarpenak, gutxi erabiltzen diren elementuak
Mugikorreko patroiak:
[Hamburguesa Menua] [Ekintza]
┌────────────────────────────────────────┐
│ H1: Titulu argia │
│ Azpititulu: Herri lineako azalpena │
│ │
│ ┌────────────────────────────────┐ │
│ │ CTA NAGUSIA (zabal osoko) │ │
│ └────────────────────────────────┘ │
│ │
│ Eduki blokea 1 │
│ ──────────────────────────────── │
│ Eduki blokea 2 │
│ ──────────────────────────────── │
│ Eduki blokea 3 │
│ │
│ ┌────────────────────────────────┐ │
│ │ BIGARREN CTA (zabal osoko) │ │
│ └────────────────────────────────┘ │
│ │
│ [─────── BEHE NABIGAZIOA ───────] │
└────────────────────────────────────────┘Mugikorreko diseinu arauak:
- Denak bertikalki pilatu (ez alda elkarrekin 360px azpitik)
- CTAk zabal osoko botoiak izan behar dute (44px+ altuera)
- Sticky goiburuak gutxitan erabiliz (viewport espazioa irensten dute)
- App-itxurako esperientzietarako beheko nabigazioa kontuan hartu
- Kartoiak 16pxko paddingarekin eta 12pxko hutsuneekin
- Hover efektuak desaktibatu (ukitzen ez direlako)
Irabazi azkarra: Probatu zure mugikorreko orriak telefonoa naturalki esku batekin eusten duzunean. Zure hatzarekin lehenengo CTAra iristeko zaildu gabe iritsi al zara? Horrela ez bada, mugitu behealdean.
7. Termografia Analisia
Termografiek erabiltzaileek zehazki zer begiratzen duten, klik egiten duten eta scroll-a egiten duten orrietan erakusten dute. Diseinu erabakiak iragarkiak datuen bidez optimizatu egiten dira.
Termografi motak:
| Mota | Zer Erakusten Du | Zer Bilatu | |------|------------------|------------| | Klik termografia | Non klik egiten duten | Hutsak klik-ak, ignored CTAs, klik forma ezohikoak | | Scroll termografia | Non iritsi diren erabiltzaileek | Jaitsi-puntuak, "fold-lerroa", 50% azpitik edukia | | Mugitze termografia | Sagu mugitzen (mahaigainean) | Arreta patroiak, irakurtze fluxua, zalantza eremuak | | Arreta termografia | Ikusten igarotako denbora | Balio handiko eremuak, ignored edukia |
Termografia datuen nola erabili:
- Irun termografia tracking-a 2-4 astez (1000+ saio behar dira)
- "Hutsune mortuak" bilatu, inork ez klik egin — kendu edo posizionatea
- "Haserre klikak" bilatu (elementu klik egin ezin den gainean azkar klik egitea) — egin elementu funtzionalak edo kendu
- Scroll sakonera egiaztatu: erabiltzaileen %70ek inoiz ez badute CTA iristen, mugitu irudi
- Mugikorreko eta mahaigaineko patroiak konparatu — askotan oso desberdinak izan daitezke
Termografia analisi tresnak:
- Microsoft Clarity (doakoa, traffiko mugagabekoa, saio grabazioak)
- Hotjar (doako maila: 35 saio/egunean)
- FullStory (enpresa, saio oso guztiak errepikatzeko)
SEO konexioa: LANGR-ren diseinu-skan moduluak CTA kokapenak, scroll-a egin gabe edukien dentsitatea eta mugikorreko ukimen helburuak analizatzen ditu. Diseinu arazoak identifikatzen ditu konexio-sinboloak gutxitzen dituztenak — Google sailkapenerako erabiltzen dituen sinboloak.
Irabazi azkarra: Instalatu Microsoft Clarity (doakoa, 5 minutu). Itxaron astebete. Begiratu zure lurrarizko orri bisitatuenean scroll termografia. Erabiltzaileen gehienek CTA iristen ez badute, diseinu arazo bat duzu.
8. Konbertsioari Zuzendutako Diseinua
Diseinu erabaki bakoitzak konbertsio helburua zerbitzatu behar du. Hona hemen orriak intentzio mota desberdinentzat nola antolatu:
Informazio orriak (blog postak, gidak):
- Edukia lehen, CTAk erabaki naturaletan
- Edukian CTAk onura handien ondoren (interrupzioa egin gabe)
- "Edukia lotua" widget-ak saio sakonera handitzeko
- Email atera 50% eta 100% scroll sakoneran
Transakzionalak orriak (produktua, prezioak, izena ematea):
- Hero balio proposamena + CTA scroll-a egin gabe
- Froga sozialak scroll-a egin gabe azpian (iriburgak, logoak, estatistikak)
- Ezaugarri/Onura blokeak CTArako eraikitzen
- Mugikorreko sticky CTA barra hero atzean irristatu ondoren
- FAQek ezinak al diren kexen gainean CTAn
Nabigazio orriak (kategoria, hub orriak):
- Agiri ibiltari edo aukera errazak eta irudi bidezko bereizketa laguntzen dutenak
- Filtratu/ordonatze mekanismoak kognitiboa arinduko dutenak
- Eduki lehentasuna den elementu nabarmenak
- Breadcrumbs orientatzen
Edukien eta CTAren ratio araua: Eduki 3 atala bakoitzeko, 1 CTA aukera jarri. Ez pop-up agresiboak — lotutako estekak, inline CTAs edo sticky barra.
Diseinu Optimizazioko Checklist-a
Gauza hau egin behar duzu orri garrantzitsu bakoitzean:
- [ ] Mezua eta CTA ikusgai scroll-a egin gabe (scroll-ean beharrik gabe)
- [ ] 3+ maila desberdinekin hierarkia argi
- [ ] Diseinuak F-patroia (edukia) edo Z-patroia (lurreratze orria) du
- [ ] CTA primarioak orriaren elementu kontraste gehiena
- [ ] Espazio zuria: 50-75 karaktere lerro bakoitzean, 1.5+ lerro altuera
- [ ] Mugikor: primario CTA hatz-zonan, 44px+ ukitzeko helburuak
- [ ] Scroll termografiako erabiltzaileen %50+ iristen da CTA nagusira
- [ ] Hutsik klikak ez daude interaktibo ez diren elementuetan
- [ ] Orriak ez du iruditzeko "amaitzen" (gaizki amai)
- [ ] Letra kontraste ratioa 4.5:1+ (WCAG AA konformitatea)
Nola LANGR Diseinu Arazoak Deteitzatzen Ditu
LANGR-ren diseinu-skan modulua AI erabiltzen du zure orriaren diseinua hiru viewportetan (mugikor, tablet, mahaigainean) aztertzeko. Hona hemen egiaztatzen dituenak:
- CTA ikustekoa: CTAak ikusgai daude scroll-a egin gabe gailu bakoitzean?
- Edukien dentsitate: Lehen viewportan nahikoa edukirik dago?
- Ukimen helburuak: Mugikorreko elementuek 44x44px gutxieneko neurria betetzen dute?
- Hierarkia bisuala: Ikusgarritasuna argi dago viewport bakoitzean?
- Gaizki amaitzen: Orriak aurretik amaitzea iruditu al du?
- Espazioak konsistenteak: Marjinak eta paddingak uniformak al dira?
Hau LANGR-ren 13 SEO diziplinetako bat da. Auditoretza bakoitzak automatikoki zure diseinua aztertzen du eta bisitariak non gelditu ote diren zehazki identifikatzen du.
Diseinu Oinarritutako Akatsen Erreka (Eraginaren Arabera Sailkatuta)
- Ez dago CTA scroll-a egin gabe — Erabiltzaileen % gehienak inoiz ez dira lehendabiziko pantaila pasa
- Hierarkia bisual laua — Denak antzeko garrantzia dutenak = ezer ez da garrantzitsua
- Edukien bloke densuak — Testu blokeek irteera ateratzeko sekundean eragiten dute
- Mahaigaineko diseinua mugikorrean — Elkarrekin elementuak irakurtze zailtzen direnak
- CTA edukien atzean enterratzen — Soil-soilik konprometitutako erabiltzaileak (murriztua) ikusten du
- Ukitzeko helburu txikiak — 30px botoiek haserre-desatzeak eta saio abandonatuak eragiten dituzte
- Gaizki amaitzen al du? — Diseinuak orriak amaitzean iruditzearen ekiditetasuna sortzen du
- CTAk lehiatzen — Interes handiko botoi parekatua erabaki-paralisia eragiten dute
Zein da Hurrengoa?
10. Pauso: Eduki-Multi-Hizkuntza SEO — Hreflang, itzulpen kalitatea, lokalismoa eta nazioarteko helburuak lortzea sailkapena xahutu gabe.
Gida hau LANGR-ren 13-pauso SEO seriearen parte da. Doako azterketa bat egin zure webgunea 13 diziplinetan non dagoen ikusteko.