blank

Milyen egy jó weboldal manapság?

blank BPeter 2017.02.28. 0

Egy kedves kis összefoglaló arról, hogy milyen egy jó weboldal manapság a moz.com infografikája alapján. Úgy gondoltuk, megér egy posztot. 🙂

Milyen egy jó weboldal - Punch Projects

Egyedi értékekkel rendelkezik

  • Az oldal egyedi, hiteles, egyértelmű plusz értékekkel rendelkezik a weboldal vagy a szerző önreklámozásán túl
  • A tartalom minősége jelentős mértékben kitűnik a tömegből
  • A szövegek, képek és multimédia tartalmak figyelemfelkeltők
  • Az oldal látogatóinak legalább 80%-a találja a weboldalt hasznosnak, jó minőségűnek és egyedinek
  • A keresőkből érkező látogatók nemigen térnek vissza a találati listára, hogy egy másik találatra kattintsanak. (Alacsony a visszafordulási arány.)

Rendkívüli felhasználói élményt biztosít

  • Az oldal felhasználói számára a tartalom- és navigációs elemek könnyen fogyaszthatók / felismerhetők
  • A dizájn esztétikailag letisztult, jó minőségű, és jól illeszkedik a brandhez
  • Az oldal kialakítása könnyen átláthatóvá teszi a tartalmakat, és egyértelműsíti, hogy mely elemek a fontosak
  • Az oldal gyorsan betöltődik (< 0.5 mp az első válasz, és < 4 mp amíg a teljes oldal be nem töltődik)
  • Csak kevés számú böngésző lekérdezés szükséges ahhoz, hogy az oldal teljesen betöltődjön
  • Az oldal böngésző-független és reszponzív (vagy külön-külön optimalizált)

Kulcsszavak szerint célzott

  • Egy adott aloldal egyetlen témára / kifejezésre (és szorosan kapcsolódó kulcsszavakra) koncentrál
  • A legfontosabb, legrelevánsabb kifejezések jelennek meg a title meta tag első szavaiban
  • A legfontosabb, legrelevánsabb kifejezések jelennek meg az aloldal URL-jében
  • A tartalom logikusan és érthetően van felépítve, miközben kapcsolódó kulcsszavakat / kifejezéseket tartalmaznak
  • Releváns kulcsszavak megfelelő módon ki vannak emelve félkövérrel / dőlttel / méretezéssel / stb.
  • A legfontosabb, legrelevánsabb kifejezések jelennek meg az oldal címsorában
  • Releváncs kulcsszavak legalább 2-szer szerepelnek az oldal tartalmi részében (body)
  • Másodlagosan fontos kulcsszavak is szereplhetnek, ha van hely, a címsorokban / title tag-ben / a body részben
  • Az oldalon elhelyezett képek alt tag-je beszédes és kulcsszógazdag
  • Beszédes, kulcsszógazdag horgonyszöveget hasznáunk az adott oldalra mutató linkeknél

Úgy van kialakítva, hogy közösségi hálózatokon meg lehessen osztani

  • Az adott oldal URL-je beszédes, és egyértelműsíti, mi az oldal témája
  • Tartalmaz különböző megosztási lehetőségeket az oldal látogatóinak leginkább megfelelő szociális csatornákra
  • Az adott oldal jó eséllyel számot tart érdemi megosztásra (vagyis akik megosztják, olyan követőkkel rendelkeznek, akik jó eséllyel kedvelni fogják a megosztást, és így további aktivitások valószínűsíthetők)
  • Igény szerint használd a Facebook Open Graph vagy Twitter Cards elemeket!

Alkalmas különböző eszközökön való megjelenítésre

  • Betöltődik minden (népszerű) böngészőben
  • Minden képernyőméreten olvashatóan és szépen jelenik meg
  • Ugyanolyan URL-lel töltödik be az oldal bármilyen eszközön

A keresőmotorok és -robotok által olvasható

  • Az URL statikus (vagyis nem tartalmaz dinamikus paramétereket)
  • Az URL-hez egyedi tartalom tartozik (a duplikált tartalmak is ide mutatnak)
  • A tartalom HTML-ben töltődik be (és nem utólag JS/AJAX/iFrame/stb. technológiákon keresztül)
  • 4 kattintásnál több nem szükséges hogy bármilyen tartalmat bárhonnan elérjünk
  • Régebbi vagy más verziókról való átirányítás 301-eket vagy rel=canonical-t  használ, és nem 302-ket
  • Átirányítások a régebbi vagy más verziókról direkt módon történnek (és nem átirányítási láncolatokon keresztül)
  • Ha az oldal ideiglenesen nem elérhető, akkor a szerver 503-as kóddal szolgálja ki
  • Igény szerint az oldal egy RSS olvasóba tehető. Az RSS URL visszatér az eredetihez
  • Meta robots tagek engedélyezik az oldal bejárását / beindexelését
  • A robots.txt fájl nem blokkolja az oldal bejárást
  • A kiszolgáló szerver nincs tiltólistán
  • Alapvető oldalelemek limitált számú karaktert tartalmaznak:
    • Title tag < 70 karakter
    • URL < 90 karakter
    • Meta leírás < 160
  • A weboldal XML Sitemaps-fájlja tartalmazza az adott URL-t

Szerzők, meta adatok, schema.org és rich snippetek

  • Az oldal tartalma szerzőhöz kapcsolódik adott markup-on, a rel=”author” vagy rel=”publisher” tag-en keresztül
  • A tartalomtól / témától / iparágtól függően az oldal használja a schema.org mikroadat markup tag-eket, hogy struktúráltan legyen a weboldal metaadatolva
  • A tartalomtól / témától / iparágtól függően az oldal használja a Google rich snippet markup tag-eket, hogy a keresőkben a felhasználók további hasznos információkat találjanak
  • Az oldal használja az elsődlegesen és másodlagosan fontos kulcsszavakat a meta leírásban
  • A meta leírás felkelti az érdeklődést és átkattintást eredményez a keresők találati listájában
  • Általában kerüli a meta kulcsszavakat (kivéve ha belső kereséshez kell)
  • Igény szerint az oldal országhoz / nyelvhez használja a hreflang tag-et
Ha segítségre van szükséged weboldalad értékeléséhez, kérj szakértői segítséget!

blank

Eye tracking 2. rész – Tapasztalataink a szemkamerával

blank BPeter 2017.02.02. 0

Fölösleges hype vagy új szintre emelt usability?

A tavalyi év utolsó hónapjaiban egy nagyon izgalmas projektben vettünk részt: szemkameráztunk! Régóta kacérkodunk a gondolattal, hogy usabililty elemzéseinket egy szemkamerával új szintre emeljük és most meg is tettük a kezdő lépéseket. Az orvosi ló a saját weboldalunk volt: www.punchprojects.com. Ez az oldal csapatunk igazi szerelemgyermeke és éppen emiatt nehezebb észrevenni a hibáit is. Nem mindig egyszerű kettőt hátralépni és teljesen objektíven vizsgálni valamit, amibe az ember ennyire be van vonódva. Azonban muszáj, sőt!

Mire jó a szemkamera?

A szemmozgások nagyon nehezen kontrollálhatók mind a résztvevő, mind a megfigyelő oldaláról. Ezeknek a finommozgásoknak a mérésére nyújt megoldást a szemkamera. Óriási előnye, hogy a vizsgálat maga csupán néhány percet vesz igénybe, a szemmozgások rögzítésének köszönhetően ezt a néhány percet nagyon pontosan vissza lehet követni. Nincsenek laboratóriumi körülmények, módszertől függően nem szól bele a megfigyelő, sokkal jobban megőrizhető a feladat életszerűsége.

Eye tracking - Punch Projects

Előzmények

Weboldalunkat ugyan nem a keresők kritériumainak teljes mértékben alárendelve, ámde keresőoptimalizált alapokon az üzleti céljainkhoz igazítva éptettük fel. Ennek megfelelően célunk, hogy látogatóink megtalálják a csapatunk bemutatkozását, fő szolgáltatásainkat és képet kapjanak, hogy legfőképpen milyen cégekkel dolgozunk együtt. Első nekifutásra úgy éreztük az oldalunk jól sikerült, a megfelelő tartalommal és designnal illeszkedik üzleti elképzeléseinkhez. Ezt a vélekedésünket alátámasztották Ügyfeleink szóbeli visszajelzései, tetszésnyilvánításai is. Tehát a terep adott volt, hogy teszteljük az oldalunkat felhasználói szempontból is a szemkamera segítségével.

Célok – Egy lead generáló oldal usability tesztelése

A vizsgálattal a célunk az volt, hogy jobban megértsük, hogyan navigálnak a felhasználók az oldalunkon, egyértelműek-e a menüelnevezések, hogy mi kattintható és mi nem, mit hiányolnak, keresnek leginkább. Ennek fényében a következő kérdésesekre kerestük a választ:

1. Lenyíló menü eléggé ki van emelve?
Mivel az oldal felépítése alapvetően horizontális, az volt az előfeltételezésünk, hogy nem feltétlenül veszik észre a felhasználók az oldal egyetlen lenyíló menüjét. További érdekes kérdés volt, hogy próbálnak-e másként eljutni az információkhoz.2. Megfelelő az információ mennyisége és milyensége?
3. A navigáció egyértelmű a felhasználóknak?

4. Menük és különböző blokkok elnevezései világosak? 
A vizsgálattól azt vártuk, hogy a fenti kérdésekre egyértelmű választ kapunk, valamint hogy a problémák megoldása is körvonalazódik a két hetes projekt után.

Vizsgálat

 Az eye trackinggel fényt deríthettünk azokra a problémákra, amelyek a hagyományos usability kutatások (pl. megfigyelés) esetén rejtve maradtak volna. A módszer segítségével megmagyarázhattuk és mélyebben megérthettük azokat a problémákat, amiket korábban hagyományos módszerekkel már detektáltunk.

Hogyan vágtunk bele?

A kutatásban kvalitatív szemkamerása tesztet alkalmaztunk. Ennek alapja, hogy a kamera rögzíti a szemmozgásokat, de a vizsgálat szerves részét képezi a résztvevőkkel végzett interjú is. Ennek több módszertana ismert, mi a retrospektív interjú (RVP) mellett döntöttünk, azaz a feladat után a résztvevőkkel átbeszéltük a tapasztalatokat a szemkamerás felvétel során rögzített “mankók” segítségével. Így olyan gondolatok is feleleveníthetők, amik a feladat közben csupán végigcikáztak a résztvevő agyán.
Nálunk a „mankó” magának a felvételnek a visszajátszása volt a szemmozgásokkal együtt. Közben a felhasználók nyugodtan kommentelhették a látottakat, valamint irányított kérdéseket tettünk fel nekik a feladattal, illetve az általunk megfigyelt tétovázásokkal és elbizonytalanodásokkal kapcsolatban. Az RVP segítségével mélyebben megérthettük a problémákat, megtorpanásokat, választ kaptunk a miértekre, valamint további usability nehézségeket is detektáltunk (amelyet nem is feltételeztünk korábban). 
A vizsgálat során a résztvevők előre meghatározott feladatok mentén végignézték az oldalt. Közben nem avatkoztunk be. Egy megfigyelő élőben követte a résztvevők szemmozgását és viselkedését (egy 2. monitoron). A tapasztaltakat és látottakat kérdésekké konvertálta, melyeket a felvételt követő interjú során feltettünk az alanynak, kiegészítve az előre megfogalmazott kérdéseket. Az előre megfogalmazott kérdéseket minden interjú alanynak feltettünk, de a további kérdések a felvétel során tapasztalt bizonytalanságok alapján egyénileg fogalmazódtak meg.
Fontos, hogy nem csak a szemmozgásból, de a résztvevő tartásából, mimikájából is rengeteg olyan információra következtethetünk, amire a vizsgálatot követő interjú során érdemes kitérni.
Eye tracking - Punch Projects

Milyen eszközt használtunk?

A vizsgálat során a Tobii Pro x2-30-as hordozható kameráját használtuk.  Ez a kamera remekül használható kvalitatív kutatásokhoz. Ekkor az áll a kutatás középpontjában, hogy hova esett a résztvevő tekintete, mi az, amit észrevett és mi az, amit nem. A nézés hosszúsága ebben az esetben kisebb súllyal esik a latba.

Résztvevők

A vizsgálatba 7 alanyt vontunk be. Ők mindannyian a Punch Projects célcsoportjába tartoznak: vállalkozó szellemű kkv-sok, marketing partnerek és multinacionális vállalatok marketing osztályán dolgozó kollégák. Fontos szempont volt a kiválasztás során, hogy ne csak marketing szakemberek legyenek az alanyok között, hanem kkv tulajdonosok is, akik teljesen más szemszögből tekintenek a problémákra, más szemmel néznek egy honlapot, más típusú információkat keresnek.

Eredmények és tapasztalatok

A kutatás végére jobban megértettük, hogyan viselkednek a felhasználók az oldalunkon, miként navigálnak, melyik elemek ragadják meg, vagy éppen vonják el a figyelmüket.
Nézzünk néhány tanulságos eredményt a teljesség igénye nélkül.

Nincs két egyforma felhasználó és olvasási minta

A két képen jól látszik, hogy mennyire másként viszonyult a két résztvevő a szöveges tartalomhoz. Míg egyikük nagyon akkurátusan végigment a szövegen (kék), addig a másik résztvevő ugrált, jobban fókuszált a kiemelésekre, ráadásul a jobb oldali sáv szinte teljesen hidegen hagyta. Ez rávilágít, hogy nincs egy jó megoldás, különböző habitusú felhasználók, különbözőképpen fogják a számukra hasznos információt kinyerni. Az oldalnak mindent meg kell tennie, hogy a különféle igényeket kiszolgálja.
Eye tracking - Punch Projects

Botlások a navigációban

Az egyik feladat során a résztvevőknek meg kellett találniuk az “Eye tracking” menüt. A résztvevők többféleképpen próbálták meg teljesíteni a feladatot:
  • a többség pár pillanat alatt scannelte a nyitóképet, rögtön végigszaladt a menün és megtalálta a szolgáltatások alatt a lenyíló menüben;
  • viszont volt olyan résztvevő, aki a főoldali banneren található “Szolgáltatások” gombra kattintva végigszaladt minden szolgáltatás rövid leírásán és itt megtalálta az eye trackinget is, viszont nem ásott le mélyebbre, megelégedett ennyivel, nem kereste tovább a részletes menüt. Ez annak fényében nagyon érdekes, hogy miközben a menüsoron ment végig, lenyílt neki az “Eye tracking” almenüje is, de teljesen ignorálta, nem vette észre. Ez világossá tette számunkra, hogytovábbi átlinkelések szükségesek.
Másik fontos navigációt érintő probléma, hogy a résztvevők nagy része nem vette észre, hogy az egyik éppen az oldalon való tájékozódást támogató elem manuálisan mozgatható, annak ellenére sem, hogy többen sok időt töltöttek el azzal, hogy a látható elemeket végignézzék.
Eye tracking - Punch Projects

Referenciák? Ez egy beugratós kérdés?

Igen is, meg nem is. Mindenesetre abszolút kiderült, hogya referenciák ebben a formában nem teljesen egyértelműek: 
  • volt, aki számára teljesen magától értetődő volt, hogy a “Partnerek” menü alatt keresse a referenciákat;
  • másokat viszont teljesen félrevezetett az elnevezés, inkább szakmai partnerekre gondoltak itt és nem referenciákra;
  • itt is nagyon szembetűnő volt a kis minta ellenére is, hogy a résztvevők mennyire különböző utakat jártak be, amíg eljutottak a referenciákhoz: voltak, akik rögtön “Partnerek” menüre kattintottak,  mások láblécből vagy éppen a főoldalba beágyazva is keresték;
  • nagyon tanulságos volt, hogy a résztvevők nagy része teljesen más típusú referenciákat keresett (cégszerű felsorolást, neveket és logókat), hiányérzetük maradt, bizonytalanok voltak, hogy valóban megtalálták-e őket vagy sem.

 

Eye tracking - Punch Projects

A résztvevő többször is elolvassa a referenciát, de nem tudatosodik benne, hogy ez valóban az lenne. Néhány perc után visszatér ide és bizonytalanul rákérdez, hogy ez lenne az? Tanulságos.

Tanulságok

Az eredmények rávilágítottak, hogy melyek azok a látszólag apró hibák, amelyek egy éles helyzetben mégis kizökkentik a felhasználót, és adott esetben ezeken múlik, hogy ő konvertál-e vagy sem. Tanulságos volt, hogy olyan tesztalanyt is meghívtunk a tesztelésre, aki előtte pozitívan véleményezte az oldalunkat. Majd a részletes vizsgálat során kiderült, hogy még számára is vannak bizonytalanságok.
Az elején kételkedtünk benne, hogy 6-8 ember elegendő ahhoz, hogy feltárjuk a fő problémákat a weboldalon. A teszt azonban ezt megcáfolta, bár minden résztvevőnek volt 1-1 saját, egyedi problémája is, de az interjúk során mégis kialakult egy közös metszet a hiányosságokat tekintve, amelyet biztosan kezelnünk kell a weboldalon.Összegezve: tökéletesen kikristályosodtak azok a pontok, amiket kijavítva teljesebbé tehetjük a felhasználói élményt.
Innentől kezdve ismét nálunk a labda és javítjuk a hibákat. Reméljük, hogy hamarosan  visszatérünk egy follow-up elemzéssel, és beszámolunk róla, hogyan befolyásolták a változtatások az oldal teljesítményét.

Visszajelzések

Mi a véleményed az eye tracking vizsgálatról, most hogy láttad, hogyan működik? 

“Pricing függő, de szerintem elegedhetetlen felhasználó teszteléshez.”
“Szerintem nagyon hasznos módszer lehet arra, hogy összegyűjtsük a felhasználói véleményeket a vizsgálni kívánt honlapról. Megnézhetjük, hogy gondolkodnak mások, és segíthet egy logikus, mindenki számára érthető és informatív, jól kezelhető site kialakításában.”
“Nagyon fontos lépésnek tartom, hogy a vizsgálat után végigvettük, hogy mi történt – így ki lehet térni azokra a gondolatokra is, amik esetleg átcikáznak az emberek fején, pl. miért azt csinálta, amit; miért állt meg; miért ment tovább; mit gondolt az adott felületről, stb. Ez szépen kiegészítheti a felvett anyagot és plusz információkat ad a megbízónak a fejlesztendő területekről.”

Hova tovább?

Igyekszünk folyamatosan új dolgokat bevonni az elemzéseinkbe, egy-egy problémát minél szélesebb spektrumban vizsgálni, hogy a teljes képet lássuk, ne csak egy részletet. A Google Analytics segítségével eljuthatunk addig, hogy detektáljuk a problémát a weboldalon (pl. egy oldal, amin magas a kilépők aránya), de egy webanalitikai elemzés nem fog fényt deríteni a miértekre. A hőtérképes elemzés ugyan közelebb visz a látogatók viselkedéséhez, de még mindig nem tudjuk adott helyzetben megkérdezni az alanyokat, hogy mi történt, mikor itt és itt megtorpant.Ezen a ponton a szemkamera új színt visz a képbe!Pontosan azonosíthatóak a problémás pontok az oldalon belül és mélyinterjúval kiegészítve a miértekre is választ kapunk, sőt, akár rögtön megszületik a megoldás is! Megfigyelőként a monitor másik oldalára kerül az ember, két lépést hátralép és a célcsoport szemén keresztül vizsgálhatja a helyzetet. Új dimenzió!

Kinek ajánljuk az eye trackinget?

Mindenkinek, aki bele akar látni a látogatói, célcsoportja, ügyfelei fejébe, és hiteles forrásból szeretné tudni, mi történik a weboldalán, azért, hogy a tökéletességig csiszolja az oldalát felhasználói szempontból. Azért, hogy maximalizálja a honlap üzleti teljesítményét!

További információ a szemkamerás weboldalelemzésről

blank

Eye tracking – 1. rész: Interjú Vezekényi Nóra Laurával, a Tobii Pro Area Managerével

blank BPeter 2016.11.17. 0

Két hétre irodánkban landolt egy szemkamera, egyenesen Svédországból! Nem nézhettük tétlenül, rögtön összeállítottunk egy pilot projektet, aminek a keretében teszteltük, hogy mit is tud ez az okos kis eszköz.
Szerettük volna látni, hogyan tudjuk felhasználni a szemkamerás vizsgálatot a weboldalak felhasználói élményének javítására a KKV-k körében. Kíváncsiak voltunk, hogy miben tud mást vagy újat nyújtani számunkra ez a vizsgálati módszer, mint egy Analytics elemzés, egy hőtérképes vizsgálat, vagy egy mélyinterjús célcsoport kutatás. Manapság már annyi lehetőség kínálkozik a weboldalak terjesítményének növelésére. Miért pont a szemkamera kellene nekünk mindehhez?
Cikksorozatunkban beszámolunk Nektek a módszerrel és az eszközzel kapcsolatos személyes tapasztalatainkról és élményeinkről, de most az első részben Vezekényi Nóra Laura, a szemkamerát biztosító Tobii Pro Area Managere vezet be Titeket az eye tracking rejtelmeibe.
 
Punch Projects:Tudtommal ezt a vizsgálati módszert jellemzően a nagyvállalatok használják kampányaik tesztelésére, illetve weboldaluk fejlesztésére.  Mit tud kezdeni egy KKV egy szemkamerás vizsgálattal? 
Nóra: Valóban, a szemkamerás módszert régebben inkább csak nagyvállalatok tudták megfizetni, ma azonban ez gyorsan változik; egyrészt olcsóbb lett maga a technológia is, de ami fontosabb, hogy jobban kiépült körülötte a módszertan, a szakma tudása. Többféle kutatásra, többen használják, ami sokkal elérhetőbbé teszi.Úgy gondolom a KKV-knek számára épp úgy fontos az új vevők bevonzása, a meglévők elégedettése és visszatérése, mint a nagyvállalatok számára.Ennek egyik fontos alapja a felhasználói élmény, aminek fejlesztésére sokszor nagyon jól használható a szemkamera.
Punch Projects: Mi az, amit megtudhatunk egy ilyen vizsgálat segítségével? 
Nóra: A szemkamera legnagyobb előnye, hogya tudatalatti folyamatokba, döntésekbe, vizuális feldolgozásba enged bepillantást.Azt hogy valami működik, vagy sem, sok más módszerrel lehet mérni, de azthogy miért, és hogy hogyan változtassunk rajta, hogy jobban működjön, azt már nehezebb kutatni. A szemkamera azáltal, hogy a felhasználó sokszor nem tudatos viselkedéséről ad mély információt, a miértekben segít.
Eye tracking - Punch Projects

Szemünk pillanatok alatt járja be ezt a rengeteg lépést, amit a fenti gaze ploton látunk

Punch Projects: Biztosan van olyan helyzet, amikor nem ajánlott a szemkamerás vizsgálat. Mit nem fogunk megtudni egy ilyen vizsgálat során?
Nóra: Azt szoktam mondani, hogy a szemkamera csak azért, mert drágább mint mondjuk a papír és toll a kérdőívhez, önmagában nem csodafegyver. Ez egy eszköz, amely a megfelelő módszertan mellett teljesül ki, csak akkor hordoz valós értékeket egy kutatáshoz és azon keresztül a megrendelő részére. Azt például, hogy egy mobil alkalmazás jó-e, a szemkamera sem mondja meg önmagában. Ezt a kérdést nem is lehet megválaszolni, hiszen mi az, hogy jó? A szemkamerás adatok is csak akkor szolgálnak értékkel, ha megfelelő kutatási kérdéssel rendelkezünk és a kérdésünk megválaszolásához a vizuális figyelemről kapott adatok hasznosak.

Punch Projects: Mitől tud többet, vagy mást az eye tracking, mint egy heatmap vagy mélyinterjús elemzés önmagában? 
Nóra: A látásunk a legfontosabb érzékelésünk, a legtöbb információt a külvilágból a látásunkon keresztül dolgozzuk fel. Az, hogy mit hogyan nézünk meg, mennyi ideig, milyen sorrendben figyelünk egy-egy részletre akár egy honlapon, akár egy bolti környezetben, az nagyon sokat elárul a figyelmünkről, kognitív terheltségről, érdeklődésünkről, stb. Ez legtöbbször több információ, mint amit egy interjú alatt bárki fel tud idézni, meg tud osztani. Ezért mondható el, hogy az eye tracking a tudatalatti folyamatokról ad információt. Ha az AIDA (attention, interest, desire, action) modellre gondolunk, akkor a megfigyelés, interjú és más, hagyományosnak tekinthető módszerek a Desire és Action lépésekről adnak információt, míg az eye tracking az Attention és Interest aspektusairól.

Punch Projects: Hány emberre van szükség a tapasztalatok alapján egy eye tracking kutatáshoz, hogy megbízható eredménye legyen?
Nóra: Ez is attól függ, mi a kutatás kérdése. A usability problémák feltárására és megértésére számos kutatás és a tapasztalati példák is azt támasztják alá, hogy egy adott célcsoportból 5-6 ember mérése elegendő. Ha viszont például a honlapunk egy adott funkcióját szeretnénk összehasonlítania a versenytárs honlapok hasonló részével, akkor a szakirodalom 30-50 fő mérését javasolja egy célcsoportra.
Összeségében tehát elmondhatjuk, hogy mielőtt belevágunk egy szemkamerás vizsgálatba, mindenképpen pontosan meg kell határoznunk azokat a kérdéseket, amelyekre a kutatás során választ akarunk kapni. A kérdések alapján választjuk ki a módszert és állítjuk össze a projektet egy adott weboldalhoz, vagy kreatív teszteléséhez. Így jó eséllyel fény derül olyan apró, de fontos probléma pontokra, amelyekre más módszerrel nem tudunk ilyen egyszerűen rávilágítani. A mi teszt projektünk során is volt számos AHA élmény, pedig a saját weboldalunkat teszteltük. 🙂
Nórával és a Tobii Pro-val nagyon élveztük a közös munkát! Örülünk, hogy belevágtunk ebbe a kalandba és megismerkedhettünk ezzel az új módszerrel. Rengeteg új dolgot tanultunk meg és már megvannak a kapcsolódási pontok, ahova be tudjuk majd illeszteni az eye trackinget, hogy még többet hozhassunk ki a usability elemzéseinkből. Hiszen nem is kérdés, hogy szeretnénk a jövőben is szemkamerával dolgozni!
Ha kíváncsi vagy, hogy milyen személyes tapasztalataink voltak a kamerával a két hetes tesztidőszak alatt, akkor ne mulaszd el cikksorozatunk második részét sem. Addig is maradjatok velünk,  kövessetek minket Facebookon is!

blank

AMP, azaz Gyorsított Mobil Oldalak: az átlagos betöltődési idő annyi, mint 2 pislogás

blank BPeter 2016.10.16. 0

Olyan világban élünk, ahol a technológia segít gyorsabbá és egyszerűbbé tenni mindennapjainkat. Egy friss Google tanulmány szerint az emberek 53%-a elhagyja a mobil oldalt, ha az nem töltődik be legalább 3 mp-en belül. Ez meglehetősen nagy nyomás ahhoz, hogy a lényegi informatív tartalmakat minél gyorsabban elérhetővé tegyük a felhasználók számára. Annak érdekében, hogy javítsa a mobil oldalak betöltődési sebességét a Google életre hívta az AMP project-et.

AMP, azaz Gyorsított Mobil Oldalak - Punch Projects

A Google szeptember közepén bejelentette, hogy az Accelerated Mobile Pages (AMP), vagyis a gyorsított mobil oldalak globálisan megjelennek minden mobil keresésnél.

Mi az AMP?

Szabadon fogalmazva az AMP egy új minimalista művészet a mobil oldalak megjelenítésében. Amikor minden ismét végtelenül leegyszerűsödik. Azért nézzük ezt meg kicsit más megközelítésben is.

Az Accelerated Mobile Pages (AMP) – gyorsított mobil oldalak – egy olyan mindenki számára hozzáférhető, ingyenes, új technológia, amely egyszerű és elegáns megoldást nyújt a weboldal tartalmának mobil eszközökön való rendkívül gyors megjelenítésére.

AMP, azaz Gyorsított Mobil Oldalak - Punch Projects

 

Az AMP oldalak egy fél évvel ezelőtt kezdtek el megjelenni a mobil találati listán a “Top stories” szekcióban. A gyors betöltődés élménye folytán, a felhasználók lelkesedésének köszönhetően a technológiát a híroldalakon túl a többi tartalomszolgáltató, mint például az utazási oldalak, e-kereskedők, szórakoztató oldalak, recept oldalak is elkezdték használni. Az AMP rohamosan terjed. Mára a kereső már több mint 150 millió AMP dokumentumot indexelt és hetente több, mint 4 millió -val növekszik az AMP felhasználók száma.

Nem is csoda, hiszen míg egy átlag weboldal mobil betöltődési sebessége 20 mp körül kullog, addig egy AMP oldal átlagosan 0,7 mp alatt tölt be, ami annyi idő, mint két pislogás.

 

A Google magasabb értékelést ad azoknak a tartalomszolgáltatóknak, akik eleget tesznek az AMP követelményeknek, mert ezzel növelik a mobil felhasználói élményt. Csökken a weboldalak betöltődési ideje, jobban kiszolgálja a tartalmakat az oldal és elégedettebbek lesznek a felhasználók.
Az AMP elvárásoknak megfelelő oldalak hírei és blogcikkei megjelennek a keresési lista tetején is a karusszel blokkban, ahol a kattintható beágyazott cikkek futnak. Ez egy csábító előny lehet, amellyel könnyebb látogatókat szerezni a keresőből.

A mobil találati rangsorolás mindemellett nem változott, a sebesség eddig is fontos szempont volt a találati lista sorrendjének meghatározásában, csupán az új technológiának köszönhetően az AMP oldalak jelentősen megnövelik a versenyelőnyüket a többi oldalhoz képest.

Hogy néz ki mindez? Milyen előnyei vannak?

AMP, azaz Gyorsított Mobil Oldalak - Punch Projects

AMP egy nyílt forráskódú keretrendszer, amely segít a fejlesztőknek abban, hogy gyorsan betöltődő oldalakat hozzanak létre statikus tartalmakkal.

Vagyis a Google indexelés számára egy “könnyített” verziót hozzanak létre a mobil eszközökön való megjelenítéshez. Ezzel ugyan leszűkíti a megjelenített elemek számát és bizonyos funkcionalitásokat (űrlap mezők, képek, fölösleges css, vagy JavaScript kódok), de a lényegi tartalmakat villámgyorsan kiszolgálja a felhasználóknak. E mellett meg lehet tartani a teljes funkcionalitással rendelkező oldalt is. A gyorsasághoz hozzájárul, hogy az AMP alkalmazása révén nem kapcsolódik a weboldal szerveréhez, hanem saját szerverein keresztül szolgálja ki a tartalmakat, így érve el a villámgyors megjelenítést.

Az AMP oldalakat külön ikon jelzi a találati listában, ami szintén egy iránymutatás a felhasználóknak.

“Az AMP formátumot számos különböző platform támogatja, köztük a Google Keresés is. Ha egy, a Google keresési találatai között megtalálható weboldalnak van érvényes AMP-verziója, a Keresés a gyorsítótárazott AMP-oldalra irányíthatja át a mobilfelhasználókat.” – Forrás: Search Console súgó

Google AMP Cache

Proxy alapú tartalomkiszolgáló hálózat, amely a hiteles AMP dokumentumokat elérhetővé teszi a weben. Összegyűjti AMP HTML oldalakat, gyorsítótárazza őket, ezzel automatikusan javítva az oldalak teljesítményét. A Google AMP Cache használatával az összes dokumentum, kép és JS file egy helyről kerül kiszolgálásra HTTP 2.0 használatával a maximális hatékonyság érdekében. E mellett tartalmaz egy automatikus ellenőrzést is, amellyel azt biztosítja a rendszer, hogy a kiszolgált tartalom az AMP HTML specifikációnak eleget tesz, nem függ külső forrástól és nem tartalmaz hibákat, vagyis garantáltan működik.

Összefoglalva az előnyöket elmondhatjuk, hogy AMP oldallal:

  • megjelenhetsz aktuális cikkeiddel híreiddel a találati lista tetején a karusszelben, amellyel több látogatót szerezhetsz az oldaladnak.
  • Előre léphetsz a rangsorban a találati listán a gyors oldalbetöltődés miatt.
  • Az AMP ikon (ami a találat mellett jelenik meg) segít abban, hogy nagyobb átkattintási arányt és jobb felhasználói élményt érj el, mely összességében szintén nagy pozitívum SEO szempontból.
  • Érdemes megjegyezni, ha keresőben hirdetsz, akkor az oldal betöltődési sebessége és a visszafordulási arány befolyásolják a kattintási költségeket is!

“AMPing up” – Google keresési irányelvei az AMP oldalakra vonatkozóan

AMP, azaz Gyorsított Mobil Oldalak - Punch Projects

Kell ez nekem?

Jó kérdés. Elég valószínű, hogy annak érdekében mindenképp lépned kell, hogy felgyorsítsd a mobil oldalad, amennyiben az oldalbetöltődési sebessége 3 mp alatt van. A rangsorolási tényezők nem változtak, vagyis az AMP oldal nem azért kerül előre a keresőben (jelenleg), mert AMP technológiát használ, hanem azért, mert gyors és magasabb felhasználói élményt nyújt. Tehát ezeket a szempontokat figyelembe véve fejleszd az oldalad AMP-vel vagy a nélkül. 
Azt is tartsd szem előtt, hogy milyen iparágban mozogsz. Az üzleti, konverziógyanús tartalmaidnak mennyire vannak AMP-s versenytársai? További kérdés, hogy mekkora lesz a funkcióvesztés az oldaladon. Nincs túl sok értelme lebutítani, ha e miatt használhatatlanná válik. Valamit valamiért. Egy biztos, hogy a tartalomszolgáltatóknak, híroldalaknak, blogoknak megéri használni, ők biztosan le fognak körözni sok-sok kifejezésre, ha nem elég gyors és könnyen kezelhető az oldalad mobil eszközökön.
Az AMP oldal készítése esetén két lehetőséged is van, az egyik, amikor már eleve a technológia használatával készíted el az egész oldalad. Van azonban arra is mód, hogy csak részleges tartalomnak készíts AMP verziót, ha a kereső érzékeli, hogy adott tartalomnak van AMP verziója, azt fogja kiszolgálni mobilon. Amennyiben a webmestered technikailag kezeli a kérdést, ez nem jelent duplikált tartalmat, vagyis SEO szempontból nem lesz probléma, csupán a több tartalom verzió miatt kell majd jobban odafigyelni a frissítéseknél.
Tehát,
  • nézd meg az oldalad sebességét,
  • nézd meg a konkurenseidet és a találati listát is,
  • vizsgáld meg, mekkora a mobilos forgalma a weboldaladnak és milyen mutatókkal bírnak a mobilos látogatók,
  • javítsd ki az oldalad hibáit függetlenül attól, hogy későbbiekben használsz-e AMP oldalt, vagy sem,
  • vizsgáld meg a tartalmaidat, hol lehet fontos ez a típusú egyszerűsített megjelenés a gyors információ eljuttatás miatt,
  • egyeztess webfejlesztőddel az oldal funkcionalitásával kapcsolatban (nem minden sablonnal alkalmazható ez a megoldás),
  • beszélj egy online szakértővel is,
  • hozd meg a döntést.
Végül pár link a teszteléshez és a további kérdések tisztázására:
demo kereső (csak mobilon próbáld): g.co/ampdemo
Kíváncsian várjuk, mit hoz az év vége AMP fronton.

blank

A mobil felhasználói élmény

blank BPeter 2016.10.15. 0

Manapság, amikor már szinte mindenki rendelkezik 24/7 mobilinternet eléréssel, a felhasználók elvárják a sebességet és a felhasználóbarát, kezelhető felületeket. Gyors és hatékony megoldásokat akarnak. Mindenre.

Bontsuk ketté a fenti problémát a látogató szerzésre és a látogató megtartásra.

  • A látogató szerzéshez kapcsolódik az oldalbetöltődés sebessége. Több látogató, alacsonyabb visszafordulási arány.
  • A látogató megtartáshoz tartozik a design és funkcionalitás, vagyis a weboldalon töltött idő és a konverziók számának (bevétel) növekedése.

Gyorsabban, magasabbra…

A gyorsaság azt jelenti, hogy a weboldal betöltődési ideje 3 mp alatt van.
Te hogy állsz ezzel? – Google PageSpeed Insights teszt
Ezzel a gyors ellenőrzéssel megkapod a javaslatokat is az oldalad sebességének növeléséhez.

Nézzük a legfontosabb javaslatokat a DoubleClick szeptemberi tanulmánya alapján az oldalad sebességének növeléséhez:

  • Optimális méretű és formátumú képeket használj, és ügyelj a képek tömörítésére.
  • Ügyelj rá, hogy lefaragd a Java Script fájlméreteket.
  • Dolgozz minél kevesebb betűtípussal.
  • A hajtás feletti elemek kiszolgálását/betöltődését helyezd előtérbe.
  • A szervered kiszolgálási sebességétől is függ az oldalad sebessége.

A mobil oldalak folyamatos fejlesztése és karbantartása fontos a sebesség szempontjából. És egy erős ajánlással is találkozhatunk az Accelerated Mobile Pages (AMP) nyílt forráskódú megoldás használatára vonatkozóan.

Az Accelerated Mobile Pages (AMP) idén ősszel Hot Topic, így ennek a témának egy külön cikket szentelünk.

A mobil felhasználói élmény - Punch Projects

Amikor a gyors mobiloldalra megérkezik a látogató, ne legyünk olyan lúzerek, hogy azonnal elveszítjük. (Mobile-friendly test)
Sajnos a Reszponzív design önmagában nem minden. A design kialakítása az elemek sorrendje és a navigáció nagyon sokat számít a mobilos felhasználás tekintetében. 

Nézzük, hogyan tudod javítani a felhasználói élményt: 

  • Figyelj rá, hogy a mobil oldalon a megfelelő sorrendben töltődjön be a tartalom. A reszponzív designok esetében gyakori, hogy először oldalelemeket, vagy képeket tölt be a lényegi tartalom helyett.
  • Optimalizáld mobilra a nyitólapot.
  • Ne kényszerítsd nagyításra a felhasználót mobilon!
  • A menü legyen rövid és érthető.
  • Mindenhol tedd könnyen elérhetővé a nyitólapot.
  • A Call-to-action üzeneteket tartsd szem előtt, középen.
  • Felejtsd el a Popup-ot (mellesleg ezt mindenhol felejtsd el ne csak mobilon. Sokakat zavar, a Google-t is.)
  • Legyen egyértelmű, hogy mi az, ami kattintható és egy “pöccintéssel” könnyen lehessen használni a linkeket, menüket.
  • Az oldalon belüli keresőt láthatóan helyezd el, és figyelj rá, hogy releváns találatokat adjon. A mobilon könyörtelenebbek lesznek a látogatók az irreleváns találatok miatt.
  • A felhasználóknak engedd meg, hogy vendégként vásároljanak, ne kelljen regisztrálni. Vagy legyen egyszerű a regisztráció pl. Google, vagy Facebook belépéssel.
  • Tedd lehetővé, hogy a vásárlást más eszközön fejezzék be.
  • Tedd lehetővé, hogy telefonszámra kattintva hívással azonnal felvegyék veled a kapcsolatot.
  • Az űrlapok esetén érd el, hogy minél kevesebbet kelljen gépelni és minél egyszerűbb legyen kitölteni. Minimalizáld a hibalehetőségeket.
  • Engedd meg a felhasználóknak, hogy asztali nézetre váltsanak, többnyire az oldal alján elhelyezve.
  • Ne dőlj hátra, ha a saját mobilodon már jól jelenik meg az oldalad, teszteld más mobil eszközökön is különböző böngészőkben.
  • Végül ellenőrizd, hogy a mobil hirdetéseid a mobil oldaladra érkeznek-e, (amennyiben van külön érkezési oldal mobil hirdetéskhez).

Amennyiben nem igazán sikerül eldöntened saját oldaladról, hogy mennyire felel meg a kor kihívásainak, javasoljuk, hogy kérj szakértői segítséget. Nálunk például itt találsz egy SEO és egy Usabilty auditot, valamint szakértői tanácsadást.

blank

Mi van már ezekkel a mobil oldalakkal?

blank BPeter 2016.10.14. 0

Sokszor hallott statisztikák suhannak el az ember füle mellett arról, hogy nő a mobil felhasználók száma, nő a mobilinternet előfizetések száma, nő a mobilról bonyolított keresések száma, nő a mobil vásárlások száma. Jó, hát persze. Mi ebben a különleges? A mobil aktivitás rohamos fejlődését azonban már nem csak statisztikákban tapasztaljuk. Egyszerűen nem lehet nem észrevenni az elmúlt évek mobil használatának hatalmas növekedését saját mindennapjaink szintjén is.

blank

Egyre többen, egyre gyakrabban nyúlunk telefonunk után, ha valamilyen információra van szükségünk, vagy valamit szeretnénk elintézni. Ma már szinte minden megoldható egy internet előfizetéses mobil segítségével. Vagy mégsem?

Saját példámból is ismerem az bosszantó várakozást, amíg betölt egy mobil weboldal. Amikor keresek valamit, gyorsan akarom az infót. A keresett oldal azonban nem tölt be. Hát ez remek. Vagy lassú, ki bírja kivárni azt a laza 20 mp-et? Vagy nem reszponzív (mobilbarát). Ó, ne mááár, most tényleg ennyit kell görgetni, nagyítgatni, eltalálni a menüket??? Idegtépő tud lenni néha…

A probléma mégis akkor szúrt szemet, mikor a minap a kampány riportokat nézegettem, illetve a következtetéseket, javaslatokat. A mobilos felhasználók töredék időt töltenek az oldalon… Magas a visszafordulási arányuk… Egyre nagyobb számban jönnek… A silány konverziós arányuk látványa elviselhetetlen egy riportban… Ne hirdessünk nekik… Tegyük külön kampányba… Szabaduljunk meg tőlük, úgyis kicsi a büdzsénk!

Hajrá! Licitáljuk alá, vagy zárjuk ki az AdWordsben a mobil megjelenéseket. Facebookon is zárjuk ki. Ja, hogy esetenként ezzel elvesztjük a potenciális érdeklődők 80%-át. Ugyan, mit nekünk! Ja és ne felejtsünk el szólni valakinek, hogy kis “negeatív SEO-t” dobjon a mobil oldalunkra, hogy ne jöjjön már annyi mobilos a nem fizetett keresésből sem. Tudod, mit? Egyszerűen dobjuk ki a reszponzív oldalt a fenébe… Álljunk csak meg! Lehet mégsem ez a jó irány?

Valamit mégiscsak kezdeni kéne velük, nem lehet üldözést indítani a mobilos látogatók ellen! És nem lehet figyelmen kívül hagyni a technikai fejlődést sem.

blank

Mit is mondhatunk az elmúlt évek tapasztalatairól?

  • 2015 áprilisában volt már egy előrejelzés, figyelmeztetés a Google részéről, amikor is a mobil keresési algoritmus változásával a mobilra optimalizált, a reszponzív oldalak jobb pozíciókra számíthattak a mobil keresési találatok listáján. Mindezt azzal érhették el, hogy a reszponzív (minden eszközhöz igazodó, mobilbarát) módon készült weboldalakat könnyebb kezelni, jobb felhasználói élményt nyújtanak. Habár akkor még egy átlagos magyar üzleti weboldal látogatóinak csupán 5-15%-a érkezett mobilról. Így senki nem kapkodta el az átállást. Az elmúlt másfél év azonban már sokaknak elegendő idő volt a weboldal reszponzívvá (mobil baráttá) alakításához.
  • A mobilon folytatott kereskedelem rohamosan növekszik (Tavaly 40%-ot nőtt!). Ezt nem lehet figyelmen kívül hagyni.
  • Az asztali gépekről érkező látogatók aránya csökken. A mobil folyamatosan nől. Átlagosan 5-10%-ról 30-40%-ra emelkedett az elmúlt 2 évben. De van olyan ügyfelünk, akinél az asztali gépről érkező nem fizetett keresési forgalom 50%-ot sem éri el ma már. Ebben az esetben nem biztos, hogy a legjobb ötlet vaskalaposan kizárni a mobil kampányokat.

A probléma gyökere tehát az, hogy a mobilról érkező látogatókat nem tudjuk megfelelően kiszolgálni. Ezen kell dolgozni a jövőben. A mobil felhasználói élménynek két kiemelt összetevője van. Az egyik a weboldal használhatósága, a másik a weboldal sebessége.

Az utóbbi időben a legfontosabb a weboldal sebesség lett. Rossz hírem van. Ezt a Google is tudja. Olyannyira tudja, hogy a rangsorolási tényezők között igen előkelő helyre került ez a faktor.

Vagyis a gyorsabb nyer, a reszponzív (mobilbarát) design önmagában már nem elég. Következő cikkünkben ezt a két problémát járjuk körbe, hogy miként tudod javítani a mobil oldalad betöltődési sebességét, illetve a látogatóknak nyújtott felhasználói élményt.

Addig ellenőrizd az oldalad, hogy mennyire mobilbarát.