Honlaptanácsadó blog

Miért nem veszik észre a gorillát honlapodon?

Szabadulj meg a 10 leggyakoribb figyelemelterelő honlapelemtől

Írta: Varga Klára

Tudod, mi az egyik legnagyobb tévedés, amit egy honlaptulajdonos elkövethet? Hogy azt mondja, a jó design nem fontos.

 

A jó design pedig nem azért fontos, hogy menőnek tűnjél (bár ez sem hátrány), hanem hogy a honlaplátogatód figyelmét a konverzióra terelje.

 

Meg fogsz lepődni, milyen sok, apróságnak tűnő honlapelem tereli el a látogatód figyelmét weboldalad lényegéről, és csökkenti ezzel profitodat.

honlap-gorilla.jpg

 

Van egy kedves ügyfelünk, aki kiborulva mesélte, hogy már nem tudja, hogyan tüntesse fel a webáruházában, hogy a termékei nagy része megtekinthető 3d-ben is, mivel van rendes, offline boltja. Kirakattal, ajtóval, eladóval.

 

Már minden létező dolgot megtett, hogy észre vegyék, hogy a webáruház mellett üzlete is van:

 

  • A fejlécben az üzlet portálfotója látható.
  • Felette felirat: X bolt és webáruház.
  • Oldalt a nyitva tartási idő.
  • A fejléckép mellett ott a bolt címe.
  • Kitett egy “parkolás” menüpontot.
  • Hatalmas gomb hirdeti, hogy a megnyomást követően az üzletben is megnézhető termékeket fogja látni a látogató.

 

Mégsem sikerül átadnia a látogatóknak, hogy ha bizonytalanok, bemehetnek a boltba, egy csomó terméket megfogdoshatnak. Plusz személyre szóló tanácsot kaphatnának a képzett eladótól.

 

A honlaplátogatók mindezt nem és nem veszik észre, és nem látogatják a boltot.

 

Megértem a kiborulást és - lehet, hogy elsőre furcsa - megértem a honlaplátogatókat is.

 

A láthatatlan gorilla

Még a 90-es évek végén végeztek egy azóta híressé vált kísérletet a Harvardon. Emberek egy csoportját megkérték, hogy nézzenek meg egy videót, és számolják meg, hogy a fehéret viselő játékosok hányszor passzolják a labdát.

 

A vicc az volt, hogy a felvételen többször átvonul egy mellkasát döngető, gorillának öltözött ember. Nos, ezt a gorillát a fehér ruhások passzaira koncentráló nézők FELE nem vette észre! Mintha ott se volna.

 

 

Hihetetlen, ugye? Pedig kevés feltűnőbb dolog lehetne egy teremben békésen labdázó emberek között, mint egy gorillaimitátor.

 

Miért nem vették észre a gorillát?

Az emberi figyelem véges. Amikor nagyon koncentrálsz valamire, csökken a képességed, hogy más dolgokat észre vegyél.

 

Mondhatnám most, hogy a konzekvencia, amit le kell vonnunk, hogy vezetés közben ne telefonálj. De ez a blog a honlapkonverzióról és honlapkészítésről szól, úgyhogy más következtetéseket fogunk levonni.

 

Amikor a látogatóid megérkeznek a weboldaladra, azzal vannak elfoglalva, hogy megértsék, hogyan tudják a leggyorsabban megtalálni azt az információt (terméket, szolgáltatást, adatot, leírást, stb.), amire szükségük van.

 

Ehhez meg kell érteniük a látványt, azaz a grafikus kezelőfelületet:

 

  • Hogy néznek ki nálad a kattintható felületek?
  • Milyen rendszerben tálalod a tartalmat, azaz hogyan érdemes navigálni az oldalon belül?
  • Milyen hierarchiába rendszerezted az információkat?
  • Plusz meg kell érteniük weboldalad nyelvezetét. Amit te függesztéknek hívsz, a vevőd lehet, hogy csillárnak vagy simán lámpának nevez.

 

Elvesztett figyelem = elvesztett profit

Minél nagyobb figyelmet köt le a honlapod megértése, annál kevesebb lényeges üzenetet tudsz eljuttatni a honlaplátogatódhoz. Annyira leterheli a látogató processzorát a túléléshez (=megértéshez) feltétlen szükséges adatok feldolgozása, hogy extra információk feldolgozására nem marad kapacitás.

 

Pedig a profit nem a kezelőfelületben van. A profit az üzenetben van, amit csak akkor tudsz átjuttatni a vevő processzorába, ha jut rá figyelem.

 

Ha jó a kezelőfelületed, azaz okos és logikus a weboldalad, sok lényeges információt tudsz átadni. Észre fogják venni azt is, hogy mi az az egyedi érték, amiért nálad érdemes vásárolni.

 

Ha fenti ügyfelünknek átlátható és kellemes felhasználóélményt nyújtó weboldala lett volna, észre vették volna, hogy van egy boltja is. (Mondjuk akkor nem is keresett volna meg minket, hiszen egy jól konvertáló weboldalt nem érdemes redesignnal megbolygatni.)

 

Mi a 10 leggyakoribb figyelemelterelő honlapelem?

1. Linkverseny

hoterkep-fejlec.jpg


Hőtérképes elemzés: a sok linknek “köszönhetően” szétaprózódik a figyelem

 

Ha túl sok a link, elsikkad a lényeg. Gyakori hiba, hogy a menüsor és a call-to-action gombok, vagy webáruházakban rengeteg termék versenyeznek egymással a figyelemért.

 

Nemrég végeztünk adatvezérelt elemzést a fenti weboldalon, ahol egyértelműen látszik, hogy a menüsor linkjei elterelik a figyelmet a weboldal céljáról, a regisztrációról. Ezt láthatod a fenti illusztráción.

 

2. Szervezetlen weboldalhierarchia

szervezetlen-weboldalhierarchia.jpg 

Teljes zűrzavar a hierarchiában

 

Nézd csak a képet: vajon miért kerültek a kattinthatatlan, nagyméretű képek az oldal kiemelt pontjára, a termékek pedig a hajtás alá? És miért a Facebook doboz tűnik ki elsőre, míg a call-to-actionök belesimulnak a designba?

 

Amikor weboldallátogatód rád talál, azonnal tudni akarja, érdemes-e nálad időznie, vagy menjen inkább tovább. Hogy segíts neki tájékozódni, fontos, hogy az oldalelemeket hierarchikusan rendezd el.

 

Ami fontos, legyen nagyobb, szerepeljen feljebb. Ami kevésbé fontos, legyen kisebb, és elég, ha az oldalad hajtás alatti részén kap helyt.

 

Ez vonatkozik mind a képekre, videókra, ikonokra és gombokra, mind pedig a tipográfiára.

 

3. Háttérminták, háttérgrafikák

hatterminta-honlapon.jpg

 

Ugye milyen jópofa háttérminták? Kár, hogy a konverziót csúnyán rontják.

 

Értem én, hogy szép tud lenni egy háttérminta, a honlapkészítőd meg büszke esztétikai érzékére.

 

De mi a célod? Hogy megdicsérjék honlapod designját, vagy hogy a figyelmet az ajánlatodra irányítsd?

 

4. Oldalsáv 

honlap-oldalsav.jpg


A korábbi oldalsávunk khm…. a kutyát sem érdekelte

 

Ez az oldal, ahol most jársz korábban máshogy nézett ki. Az oldalsávban felül egy e-book letöltés link szerepelt, alatta a 10 utolsó cikk, majd lejjebb a címkefelhő.

 

Emellett a cikkekbe beszúrtunk egy-egy ajánlatot, majd a cikk végén fel lehetett iratkozni a blogértesítőre.

 

Sokáig büszkén gondoltam, kimaxoltuk a konverziós lehetőségeket. Mígnem a hőtérképes audit megmutatta, hogy az oldalsávban szereplő elemek kattintási aránya a nulla felé konvergál. A konverziók mind a cikk végén születtek.

 

Ahogy látod, azóta kipucoltuk az oldalsávot és legfeljebb egyetlen ajánlatot teszünk a cikkekbe. Az oldalszerkezet és az ajánlatok átalakításával a konverziónk 47%-kal nőtt.


5. Animációk

animaciok-honlapon.jpg

 

Menő a mozgás, de a figyelmet eltereli a lényegről

 

Tudom, hogy menőn néznek ki az innen-onnan beúszó weboldalelemek, ráadásul most trendiek is. Ám ami ma menő, holnap könnyen parkolópályára kerül, gondolj csak a Flash-re.

 

Amikor a vevőd információt keres, a fókuszt folyamatosan elterelő mozgás piszkosul zavaró tud lenni.


6. Kevés whitespace

zsufolt-honlapdesign.jpg 

Zsúfolt honlapdesign - azt sem tudom, hova kapjam a fejem

 

El tudsz képzelni egy zeneművet szünetek nélkül? Csak trombitálnak, trombitálnak és trombitálnak, te meg 30 perc után rohansz ki a Zeneakadémiáról.

 

Tévedés, hogy az üres felület elpazarolt tér. A whitespace - ha jól bánnak vele - a figyelmet oda tereli, ahová a konverzió szempontjából szükséges.

 

7. Rendezetlenség

rendezetlenseg-weboldalon.png

 

Nehéz lett volna egyvonalba rendezni a két mezőt?

 

Magam is sokat harcolok honlapkészítés közben a programozóinkkal, hogy ne vegyék félvállról a látványterven behúzott segédvonalakat: nem a webdesigner kényszerbetegsége miatt fontosak ezek, hanem azért, mert vezetik a szemet.

 

Ha ugyanis akár egyetlen elem kilóg a sorból, az odavonzza a látogató figyelmét, pedig lehet, hogy csak huszadrangú fontossággal bíró elemről van szó.


8. Erőszakos újítások

eroszakos-ujitasok.jpg


Ezen a weboldalon 4 layer nyílik egymásra, míg a termékleíráshoz jutsz.

 

Számos dolog van, amit nem szabad megújítani. Megszoktuk, hogy a weboldalakon a logó a bal felső sarokban, esetleg fent, középen van. A kereső a jobb felső sarokban van, hasonlóan a kosár gombhoz. Ha aláhúzol bármit, a látogatód megpróbál majd kattintani rá, hiszen linknek véli.

 

A jól bevált modelleken ne változtass, feleslegesen terheled a látogató agyát!

 

9. Túl sok reklám

sok-reklam.jpg

 

Ezek az ajánlatok egy szakmai blog egyetlen oldalán szerepeltek

 

Biztos hallottál már a bannervakságról. A honlaplátogató ösztönös önvédelmei reakciója ez. Ha elfogadjuk, hogy figyelmünk véges, érthető, hogy minden, az oldal tartalmához nem szervesen kapcsolódó elem ignorálásra kerül.

 

A túl sok választási lehetőség ráadásul megterhelő, ezért kontraproduktív.

 

10. Következetlen interface

kovetkezetlen-interface.jpg

 Egyszer kék, egyszer narancs a call-to-action.

 

Ha a fő call-to-action színe a fejlécképben piros volt, akkor az oldalon ismétlődő többi gomb is legyen piros. Viszont ne legyen semmilyen más elem piros! Ha a linkeket lilával és félkövérrel kezdted írni, a százhuszonhatodik aloldalon is legyenek lilák és félkövérek. Sorolhatnám még…

 

Továbbá ne terheld a honlaplátogatót minden oldalon új elrendezéssel, váratlan design truvájokkal, pláne ne slendriánságból elkövetett kuszasággal.

 

A látogatók használat közben tanulják meg kezelni az interface-t. Ha a weboldal nem ragaszkodik konzekvensen az arculati konvenciókhoz, a látogató összezavarodik.


Csak honlapot szeretnél vagy vevőket is?

mercus-honlapcsomagok-s-l-xl
Mások honlapokat gyártanak.
Mi új vevőket neked.

 
 

Jobb weboldalt, több vevőt szeretnék!

 

 

 

Facebook