. Szakdolgozat Franka Noémi [308186]

BABEȘ–BOLYAI TUDOMÁNYEGYETEM

Közgazdaság- és Gazdálkodástudományi Kar

Gazdasági informatika szakirány

Szakdolgozat

Végzős hallgató,

FRANKA Noémi

Témavezető,

Dr. KOVÁCS Gyöngyvér Emese egyetemi adjunktus

2019

BABEȘ–BOLYAI TUDOMÁNYEGYETEM

Közgazdaság- és Gazdálkodástudományi Kar

Gazdasági informatika szakirány

Szakdolgozat

Reszponzív web- és UX design egy kávéforgalmazó weboldal esetén

Végzős hallgató,

FRANKA Noémi

Témavezető,

Dr. KOVÁCS Gyöngyvér Emese egyetemi adjunktus

2019

[anonimizat] / disertație

Design responsiv și UX în cazul unui site de distribuție al cafelei

Absolvent: [anonimizat]é[anonimizat]. univ. dr. Gyöngyvér Emese KOVÁCS

2019

Összefoglaló

A dolgozat elkészítésének célja kettős. Első cé[anonimizat] összefoglalja és bemutassa, hogy hogyan épül fel egy napjainkban használt kávéforgalmazó weboldal, milyen igényeknek, feltételeknek, elvárá[anonimizat]émákba ütközhet, amelyekre megoldást igyekszünk találni a valóságban, illetve a dolgozat során, valamint miben lehet jobb a konkurenciánál. A dolgozat erre vonatkozó részét a [anonimizat]é[anonimizat]áció segítségével vizsgáltam. Ugyanakkor a [anonimizat] a szakirodalmi elemzés során feltárt feltevések, miszerint a felhasználók bevonásával és a különböző tesztek elvégzésével megnő a felhasználói élmény, milyen mértékben valósul meg a gyakorlatban. Ezt a következő kutatási módszerrel valósítottam meg: felméréssel és célcsoport kialakításával, akiknek különböző feladataik voltak.

Tartalomjegyzék

Rövidítések iii

Táblázatok és ábrák jegyzéke iv

Bevezetés 1

1. Reszponzív webdesign 3

1.1 A reszponzív design bemutatása 4

1.2 A reszponzív design előnyei/hátrányai 5

1.3 Mobile-First Index 6

1.4 Reszponzivitás megvalósítása 7

1.4.1 Folyékony rácsszerkezet (Fluid grid) 7

1.4.2 Folyékony média (Fluid media) 8

1.4.3 Média lekérdezések (Fluid query) 8

1.5 Viewport 8

2. UX design 9

2.1 UX bemutatása, tervezése 9

2.2 Design jelentése 10

2.3 Felhasználóközpontúság 11

2.4 UX és UI elemek 11

3. Brand bemutatása 14

3.1 A felhasználók és a weboldal kapcsolata 14

3.2 Nehézségek 15

3.3 Más kommunikációs csatorna 16

4. Versenytársak és a konkurencia felmérése Romániában 17

4.1 Kávékultúrák rövid ismertetése 17

4.2 Konkurencia Kolozsváron 18

4.2.1 Konkurencia médiacsatornákon keresztül 18

4.2.2. Konkurencia organikus keresések alapján 21

4.2.3 Konkurencia eddigi látogatások alapján 23

5. Felhasználók szokásainak felmérése 26

5.1 Online perszóna fogalma 26

5.2 User Journey 28

5.3 Customer Journey 29

6. A weboldal technikai felépítése 30

6.1 WordPress bemutatása 30

6.2 Használt technológia 32

6.3. Folyamat tevékenységei 37

6.4 Weboldal elemei 38

Következtetések 41

Irodalomjegyzék 41

Rövidíté[anonimizat], Apache, MariaD, PHP, Perl

Táblázatok és ábrák jegyzéke

Táblázatok:

1. táblázat Konkurencia logójának szemléltetése 22

2. táblázat Konkurencia weboldal látogatás 2019 május-március között asztali gépről 27

3. táblázat Konkurencia weboldal látogatás 2019 március-május között mobil eszközökről 28

4. táblázat További mérőszámok összessítése 28

5. táblázat Kulcsszavakra való találat számokban márciustól májusig 29

6. táblázat Online perszónák meghatározása 31

Ábrák:

1. ábra Konkurencia a mobil eszközök és asztali gépek között 2009 január – 2019 június között 3

2. ábra Reszponzív webdesign bemutatása különböző képernyőkön 4

3. ábra Folyékony rács szemléltetése 7

4. ábra Folyékony média szemléltetése 8

5. ábra UX design kulcsszavai 10

6. ábra Felhasználóközpontúság vizsgálásának folyamata 11

7. ábra 112coffee.com weblap főoldala 12

8. ábra Az oldal jobb felső sarka, konvenció szerint: keresés, felhasználó, kosártartalom 13

9. ábra 112coffee főoldal 14

10. ábra Elért számok a közösségi médiában 16

11. ábra Őröltkávé fogyasztásának növekedése Romániában millió kg-ban 18

12. ábra Marketing kommunikáció 2019 március-május között 20

13. ábra Marketing kommunikáció 28 napot vizsgálva 21

14. ábra Konkurencia elemzés forgalom megosztás alapján 22

15. ábra Kokurencia elemzés átlagos látogatási időtartam alapján 23

16. ábra Konkurencia elemzése oldal/látogatás alapján 24

17. ábra User Journey szemléltetése 29

18. ábra Customer Journey szemléltetése 30

19. ábra WordPress szemléltetése 31

20. ábra WordPress adatbázisa 32

21. ábra Fontosabb HTML tag-ek 33

22. ábra Főoldal CSS beállításának egy része 34

23. ábra SEMrush keresőfelülete 37

24. ábra SimilarWEB kezelőfelülete 38

25. ábra Exizt alapkinézete 39

Bevezetés

A programozás mellett már középiskolában felfigyeltem a weboldalakra és azoknak készítésére. Szabadidőmben – egyetemi tanulmányaim alatt – sokat olvastam és tanulmányoztam az új trendeket ezzel kapcsolatban. Ebből kifolyólag tudtam, hogy a szakdolgozatom témája ezen alapszik majd. Eleinte nem tudtam, hogy én találjak ki teljesen egy új weboldalt, amelyet csak a szakdolgozatomra használjak, vagy, ha már esély adatott, akkor legyek része egy projektcsapatnak, amely egy olyan weboldal kidolgozásának kezdett neki, amely élesben működik. Az Affarit Studio lehetőséget nyújtott, hogy a marosvásárhelyi 112 Coffee & Co. kávézó és kávéforgalmazó weboldalában segítsek és bedolgozzak. Ezt egy komolyabb kihívásnak találtam, mivel sokkal tapasztaltabb webprogramozók dolgoztak már rajta.

Első feladatom az volt, hogy tanulmányozzam a WordPress standard elemeit és felépítését, mivel a weboldal alapja egy WordPress template (váz), amelyet aztán kibővítettek saját, személyre szabott elemekkel.

Kevés kávét forgalmazó cég létezik Románia szinte, de a vizsgált cég mégis különleges, mivel implementálja a forgalmazást. A weboldal nagyon sok funkciót és igényt kielégít, így mindenképp egy újdonságot hozott be a román kávépiacra. Úgy gondolom, hogy az évek során valamilyen szinten kifejlődött a kávé iránti ízfinomságom, ezért, ha kávézok, akkor inkább a minőséget választom és nem az árat. Minden embernek megvan a napban az az időpillanata, amikor a folyamatos rohanásból megáll és élvezi a nyugalmat. Számomra egy habos kávé mellett „áll meg a világ”, ezért éri meg nekem a minőséget ez a pillanat.

Az a tervem, hogy szakdolgozatomban kapott információkat a környezetemnek is elmondjam, és hívjam fel a figyelmet arra, hogy mennyivel jobb a kávézó által – saját – pörkölt kávébabokból készült kávé, mint azok, amelyek boltokban kaphatók, és igenis, tudunk már minőségről beszélni kávék szintjén is.

A legfontosabb követelményeim egyike az a mobil eszközökön való kialakítás. A legtöbb oldal esetében a programozók nem csinálnak egy mobil verziót, hanem ha a weblap érzékeli a mobileszközről való böngészést, akkor átirányítják a felhasználót az erre kifejlesztett verzióra. Ez azonban sok szempontból nem optimális. Erre ki fogok térni.

A másik fontos követelmény az volt, hogy a weboldal egy keresőbarát kialakítással rendelkezzen, mivel minden weboldal sikere azon múlik, hogy meglesz-e a megfelelő számú látogatója. Hogy az internetes keresők találati listájában előkelő helyen szerepeljen, ki kell elégítse a felhasználók igényeit, figyelnie kell a részletekre, főleg, ha felhasználói élményről akarunk beszélni és azt akarjuk skálázni, mérni. A weboldal funkciói közé tartozik az ismeretközlés és az online rendelés a webáruházon keresztül. Ez hasonlít a legtöbb online webáruházéhoz, mivel egy általános célú kiskereskedelmi webáruház.

Dolgozatomban olyan romániai, leszűkítve kolozsvári kávézók weboldalát hasonlítom össze, amelyek saját pörköléssel rendelkeznek, ezáltal konkurenciát jelentenek az 112 Coffee & Co. számára. A témával kapcsolatosan a weboldalakban azt fogom megnézni, hogy mekkora látogatottsággal rendelkeznek, milyen a különböző eszközökről (pl. telefonról, táblagépről, asztaligépről) történő látogatások aránya, illetve a felhasználói élményt milyen tényezők befolyásoltak, mennyire fektettek a készítők erre hangsúlyt.

Azt vettem észre, hogy minél több kávézó reklámjában megjelent a saját pörkölés ténye, és hangsúlyt fektetnek erre, tehát egy felméréssel sok kiaknázatlan piaci részt tudna betölteni az 112 Coffee & Co., amelyre van igény.

A szakdolgozat felépítése a következő: Az 1. fejezetben a reszponzív webdesign ismertetésére kerül sor. Ebben a fejezetben egy általános leírása szerepel a reszponzív web design-nak. Szó lesz az RWD megvalósításának módszereiről, elemeiről és Mobile-First Index-ről. A 2. fejezetben a UX design bevezetésén lesz a hangsúly, amely példázva lesz a weboldalon keresztül. Bemutatásra kerül UX design fogalma. A 3. fejezetben bemutatásra kerül az 112 Coffee & Co. kávézó brand-je, illetve az eddigi nehézségek és elért sikerek. Ezek után a 4. fejezetben következik Románia szinten lévő versenytársak weboldalának elemzése és felmérése. Az 5. fejezet tartalmazza a technikai leírását a WordPress-nek. 6. fejezetben a felhasználók szokásainak felmérésének bemutatására és rövid elemzésre kerül sor. A fejezet alapja a UX design, hiszen pont ez foglalja össze, viszont ebben a fejezetben a kiválasztott kávézó 3 célcsoportjának a felmérésére kerül sor. A szakdolgozatom végén pedig összefoglalom a munkámat, illetve kitérek a weboldalról levont következtetésekre, a folyamatra és a szerzett tapasztalataimra.

1. Reszponzív webdesign

Mára már elhanyagolhatatlan a mobil eszközökről való internetezés, weboldalak vagy alkalmazások elérése. Az ír StatCounter webes forgalomelemzési weboldal statisztikáit használják a webhasználat megosztásának kiszámításához. 2019 májusától a StatCounter az összes weboldal 0.9%-át használja. „2016 októberében a weboldalak 51.3%-a mobilos eszközről keresték fel, a maradék 48.7%-ot pedig asztali gépről vagy laptopról. Az 51.3%-ból 4.6% okostelefonokról történt, 4.7% pedig táblagépes internethasználatot jelent.” A weboldal szerint 2009 januárjától 2019 júniusáig meglévő adatokból a mobil eszközökről való megtekintés nagyon sokszor megelőzte az asztali gépekről való elérést. A jelenlegi helyzet azt sugallja, hogy a mobilról való megtekintés, a 47.5% csupán 1.15%-kal maradt el vetélytársától, a 48.65%-tól. Ez a szám 2018 júliusában 9.84%-ot mutatott a mobil eszközök javára.

Forrás: statcounter.com

A felmérés szerint is az a trend, hogy mobil eszközökről érkeznek a látogatók, tehát minden képernyőméretre gondolni kell, és ezen belül az elérhető funkciók, kényelem, felbontás, megjelenés és olvashatóság fontos szerepet kap.

Egy weboldalnak mobileszközre való kalibrálása kétféleképpen oldható meg. Az egyik módszer az, hogy ugyanaz a weboldalt készítjük el asztali gépnek és mobileszköznek, csak az elrendezés lesz más, mivel az igazodik a képernyő méretéhez. Ennek az az előnye, hogy a tartalom nem változik, a weboldal funkcionalitása megmarad, az elemek funkciói is ugyanazok maradnak, így a felhasználónak nem lesz hiányérzete, hogyha mobiltelefonon keresi fel a weblapot, a felhasználói élményt nem csökken majd le, sőt, inkább megnő, mivel az elrendezés kényelmes lesz a kéz- és ujjmozgásnak. A másik módszer – amely a szakértők által nem ajánlott – az asztali gépre tervezett weboldalnak készítünk egy mobil verziót, így automatikusan erre ugrik majd használatkor az eszköz. E módszer hátránya az, hogy megnehezíti a keresőoptimalizálást, mert más URL címben részesül, illetve ezt a változatot is optimalizálni kell. A másik tény az, hogy kötelesek vagyunk leegyszerűsíteni a weboldalt, hogy az információk kerüljenek fel, így ennek következtében lemondunk bizonyos nem támogatott elemekről és nem elérhető funkciókról.

1.1 A reszponzív design bemutatása

Az RWD a terve a böngésző ablak szélességére reagáló, rugalmasan változó grafikai megjelenésű weblapnak. „A reszponzív webdesign olyan weboldalkészítési technika, mely képes arra optimalizálni az oldalt, hogy megfelelően tudjon működni bármilyen eszközről tekintik azt meg. A RWD egy olyan tervezési megközelítés, amelynek célja egy olyan weboldal fejlesztése, mely a felhasználói élményt pozitívan növeli.” A weboldal tartalma változatlanul érhető el, még akkor is, ha kisebb képernyőn tekintjük meg. „A Responsive Web Design kifejezést Ethan Marcotte 2010-ben alkotta meg az A book apart weboldalán. Minden felhasználó webböngészőjének szélességét célozza meg annak meghatározására, hogy mennyi hely áll rendelkezésére és hogyan kell arányosan megjeleníteni a weboldalt. Így nincs szüksége a tervezőnek több különálló tervre.”

2. ábra: Reszponzív webdesign bemutatása különböző képernyőkön

Forrás: https://medium.com

1.2 A reszponzív design előnyei/hátrányai

Az RWD egyik legfontosabb előnye az, hogy költséghatékony. Egy weboldal méretét megadhatjuk pixelben (adaptív rács) és százalékban (folyékony rács). Pixelben megadott weboldalak fix szélességűek, nem reszponzívak, mivel szigorúan betartják az megadott méretet, és nem alkalmazkodnak a képernyőhöz. Az automatikusan változó szélességű weboldalak esetében a százalékban megadott értékek viszont a képernyőnek a méretéhez viszonyítják az elemméretet, hány százalékát foglalja el a képernyőnek az elem. Tehát, ha több különálló weboldalunk van, amelyek folyamatos karbantartást igényelnek, akkor ez a munkálat minden egyes weblapra energiát, időt és pénzt feltételeznek. Tény, hogy egy reszponzív weboldal fejlesztésének költsége nagyobb, viszont ez hosszú távon kifizetődik.

Ugyanakkor lehetetlen, hogy az összes készülékre készítsünk weboldalt. Ezt azért merem kijelenteni, mivel olyan sokféle mobil eszköz van, amelyek különböző felbontással rendelkezhetnek, illetve mára már azt is megtehetjük, hogy a készülékünkön lekicsinyítsünk egy ablakméretet, hogy egy időben több dologra tudjunk figyelni. Olyan eszközök is léteznek most már, amelyekből nem is tudtuk volna elképzelni, hogy valaha is weboldalt lehet megjeleníteni, mint például az okostévék, de ilyenek a táblagépek, vagy az óriási képernyők, kivetítők, akár okosórák. A reszponzív web design-nak köszönhetően mindegyik eszköz felbontásához megfelelő weboldalkialakítást tudunk létrehozni, anélkül, hogy számoljuk a technológia forradalom bármilyen új eszközével, és ezeknek külön weboldalt készítsünk.

Az RWD másik előnye az, hogy tervezéskor a tartalom és a megjelenítés elkülöníthető, tehát ugyanaz a tartalom kerül implementálásra mindegyik eszközre, csak a megjelenítés változik: pl. formák, oszlopokra való felosztás, menügomb megjelenése, amelyre rákattintva nyílik le a menüsor stb. Egy leegyszerűsített weboldal azt az érzést adhatja a felhasználónak, hogy nem teljes, hiányos, minimális felületet lát, mivel nem jelenik meg az összes funkció, háttérben nyílnak meg oldalak. Ez oda vezethet, hogy csak az asztali verziót használják és egyáltalán nem keresik fel mobilról a weboldalt, vagy rosszabb esetben, megkeresnek egy hasonló weboldalt, ahol ugyanazt megkaphatják, elpártolnak tőlünk a konkurenciához. Mindkét esetben veszteségesek leszünk. Első esetben feleslegesen használtuk fel az anyagi- vagy humánerőforrásainkat. Második esetben, viszont elvesztettünk egy potenciális vagy aktív, fontos ügyfelet.

Előnynek számít a keresőoptimalizálás is. A Google és a Microsoft felvállalta, hogy a keresések találati listáján elsőbbséget élveznek azok a weboldalak, amelyek reszponzívak, tehát egy URL-t használnak, szemben azokkal a weboldalakkal, amelyeknek van külön mobil eszközre URL címe, illetve asztali gépre egy URL cím. Ezt alátámasztja azt is, hogy a Google segédanyagokat nyújtott a reszponzív weboldalak megvalósítása érdekében.

Minden jónak egyszer vége szakad – mondja a közmondás. Az RWD-nek vannak azonban hátrányai is. Az egyik az, hogy nehéz egy teljes ellenőrzést végrehajtani, mivel szinte lehetetlen az, hogy a rengeteg eszköz maximális felhasználói élményt biztosítson. Elcsúszhatnak dolgok, elemek takarásba kerülhetnek.

Ez maga után von egy másik hátrányt, mégpedig a megfelelő szakértelem nélkülözhetetlenségét. Ugyan egyetlen weboldalról van szó, s annak fejlesztése több időt és erőforrást vesz el, ezért a design mellett különböző elemek programozását kóddal kell megoldani, mivel a beépített elemek nem felelnek meg az elvárásainknak, ezért a fejlesztők munkája nehezebb lesz.

Köztudott, hogy a reszponzív weboldalak lassabban töltődnek be, mint a konkrétan mobilkészülékre készült weblap. Ez a nem optimális és nem hatékony kódolásnak a következménye, főleg képek esetében, ha ugyanaz a nagy méretű fájl betöltését várjuk el, mivel a képméret nem változik.

Ugyanakkor a konverzió is lehet hátrány. A konverzió optimalizálás (CRO) fogalma alatt azt értjük, hogy a felhasználó interakcióba lép a weboldalunkkal. Ez nem egy azonnal vásárlást jelent, hanem egy kérdésfeltevés, egy letöltés, egy navigálás, több menü megnyitása, vagy akár a hírlevél-feliratkozás is ebbe a kategóriába sorolható. Ezzel az a célunk, hogy a lead-ek (potenciális vásárlók) minél többször végrehajtsák ugyanazt a cselekvést, amellyel elérjük azt, hogy ügyfeleinké válnak. A konverzió már abban a pillanatban megtörténhet, amikor a felhasználó megnyitja a weboldalt és a landoló oldal (landing page) elé kerül.

1.3 Mobile-First Index

Megemlíteném még a Mobile-First Index-et, amely szintén a SEO-hoz járul hozzá. Ez az index mobilos verzióját méri fel a weboldalaknak, majd ennek függvényében rangsorolja őket. Ezt nemcsak mobilon való keresés esetén méri, hanem asztali gépeken való keresés következtében is. A Google indította el 2015-ban, viszont a bevezetés több fázisban történt azért, hogy a találatok között ne legyen túl nagy kavarodás és különbség. A projektben elsőbbséget élveznek azok a weboldalak, amelyek reszponzívak, szemben a mobil verzió nélküli weboldalakkal.

„A Google mobilbarát jellege azért fontos, mert a mobil jelzési rangsorolási tényező – a mobilkeresés esetében – hozzáadódik az értékelési tényezőkhöz. Ez a sok tényező közül nem a legerősebb. 2014 novemberében már érezhető volt a hatása a mobilkeresésben a mobil weboldalak azt jelzik, hogy barátságosak a mobil számára, ami lényegében az első jel, amit a keresési frissítések jelentettek.”

A vizsgált weboldal esetében ez azért fontos, mert általában az emberek az első három keresési találat között megtalálják azt, amit keresnek. A célunk pedig az, hogy a keresett kulcsszavakra a kávézó benne legyen a top 3 találatban.

1.4 Reszponzivitás megvalósítása

A reszponzív weboldalakat folyékony rácsszerkezettel valósítják meg a képernyőhöz való alkalmazkodást. Minden weboldal reszponzívvá alakítható, erre különböző modulok léteznek:

1.4.1 Folyékony rácsszerkezet (Fluid grid)

Ez a fogalom alatt azt értjük, hogy az oszlopok a képernyő méretétől függően automatikusan elrendeződnek: nagy képernyőn szélesebbek az oszlopok, de egy kis képernyőn ez a három oszlop nem lesz egymás mellett, hanem egymás alá kerülnek. Előnye az, hogy a maximális szélességet beállíthatjuk, és a százalékos számítások miatt továbbra is működik majd a design függetlenük a felbontástól és a mérettől. A rács egy bizonyos oszlopszámra van osztva, hogy az elrendezés tisztán és könnyen kezelhető legyen. Ezután minden egyes elemet arányos szélességgel és magassággal tervezünk meg pixel-ek helyett. „Az egyszerűbb rácsok egy, kettő vagy három oszlopot tartalmaznak, jellemzően egy vízszintes sorba illeszthető tartalmat is. A bonyolultabb rácsok, amelyek 9 vagy annál több oszlopot tartalmaznak, magasabb sorszámlálásokat használnak. […] Egy 12 oszlopos rácsban egy sor mind a 12 oszlopra terjedhet ki, vagy csak 1, 4 és 8 oszlopban lehet, vagy ezek bármely kombinációjában.”

A fent leírtakat a 3. ábrában található illusztráció vizualizálja. A weboldalom esetében is teljesül ez a sávos felosztás, illetve kiemelném, hogy a legfontosabb eset, ahol ezt kötelezően kellett használjam, az a termékek megjelenítésének esetében volt, hiszen minden egyes termék esetében látszódniuk kell a fontos információknak. Ahogy kicsinyül az oldal, úgy kerülnek a termékek egymás alá más oszlopba.

3. ábra: Folyékony rács szemléltetése

Forrás: https://internetingishard.com/html-and-css/responsive-design/

1.4.2 Folyékony média (Fluid media)

A folyékony média a képek és videók reszponzivitására vonatkozik, azáltal, hogy az elem maximális szélességet beállítjuk 100%-ra a CSS fájlban. A kódrészletet a w3schools.com weboldalról vettem át.

4. ábra: Folyékony média szemléltetése

<style>

video {

max-width: 100%;

height: auto;

}

</style>

Forrás: https://1stwebdesigner.com/fluid-grid-layout/

1.4.3 Média lekérdezések (Fluid query)

A média lekérdezések használata népszerű technika a személyre szabott stíluslapok használata esetében. „A média lekérdezések a reszponzív webdesign alapjait képezik, lehetővé téve a weboldal megjelenítésének megváltoztatását egy lekérdezés által.” Segítségükkel megadhatjuk, hogy nyomtatás esetében milyen stílust szeretnénk, vagy asztali gép esetében egy másikat, illetve mobil esetén egy harmadik stílust is használhatunk. Ezt az elemet a 6. fejezetben szemléltettem. A dolgozatomhoz az https://internetingishard.com/html-and-css/responsive-design/ használtam fel, ahol alaposan minden kis részletre kitértek.

1.5 Viewport

A viewport a weboldal látható területe a kijelzőkön. Ezt a kódot és a tervezést használják arra, hogy utaljon arra, hogy a kijelzőn levő elrendezés illeszkedik az adott képernyőhöz. Ezt a meta tag-et kell a html fájl fejlécébe illeszteni. Kód a w3schools.com weboldalról van.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> nézetablak-elem a böngésző utasításait adja meg az oldal méreteinek és méretezésének szabályozására. A width=device-width rész beállítja az oldal szélességét az eszköz képernyőszélességének követésére, amely az eszköztől függően változik. Az initial-scale= 1.0 rész beállítja a kezdeti nagyítási szintet, amikor az oldalt először betölti a böngésző.

2. UX design

Steve Jobs híres gondolatával kezdeném ezt a fejezetet: „A design nem csak a kinézetről szól. A design arról szól, hogyan működik a termék.”

A felhasználói élmény (UX) kialakítása olyan termékek vagy szolgáltatások létrehozásának folyamata, amelyek értelmes és releváns tapasztalatokat nyújtanak a felhasználóknak. Ez magába foglalja a termék vagy szolgáltatás megszerzésének és integrálásának teljes folyamatát, beleértve a márkaépítés, a tervezés, a használhatóság és a funkcionalitás szempontjait. Sok hasonló fogalommal keverik az emberek, ilyen például: User Experience Design vagy User Interface Design, és Usability. Szerintem a UX tervező a termék teljes folyamatáért felelős, beleértve a márkaépítést és a tervezést is. Nem hiszem, hogy egy folyamatban levő projekt alatt hirtelen kitalálnánk, hogy akkor ezentúl UX design-nal dolgozzunk, mivel ez nem így működik. Ez a folyamat akkor kezdődik el, amikor legelőször megemlítjük a felhasználó fogalmat, és felhasználóként próbáljuk kitalálni a termékünket.

A fejezet tartalmazza a UX bemutatását, ennek elemeit, fontos kérdésfelvetéseket, amelyeket ajánlott betartani, ha belekezdünk az ilyen tervezésbe.

2.1 UX bemutatása, tervezése

A felhasználói élmény magába foglalja a végfelhasználó kölcsönhatását a vállalattal, a szolgáltatásaival és a termékeivel kapcsolatos valamennyi aspektusát. A példaértékű felhasználói élmény első feltétele, hogy az ügyfél pontos igényeit kielégítsük, anélkül, hogy megzavarnánk. Arra összpontosít e tervezésforma, hogy mélyen megértsük a felhasználókat, mit kell tegyünk, mit értékelnek, milyen képességeik vagy korlátozásaik vannak.

Leginkább gyakorlatban történik ennek az érzésnek a tapasztalása, amikor a weboldal kialakítása elősegíti a felhasználó interakcióminőségének javítását a kiválasztott termékekkel vagy szolgáltatásokkal szemben.

A UI (Felhasználói felület) minden olyan információs eszközbe van tervezve, amellyel egy személy kölcsönhatásba léphet. Ide tartoznak a képernyők, billentyűzetek, egér és maga az asztali gép. Ez az egy megközelítési mód arra, hogy a felhasználó interakcióba lépjen az alkalmazással vagy weboldallal. A UI design a felhasználói felület tervezését jelenti, amely a tervezés vizuális vagy grafikus oldala.

Egyszerűen fogalmazva, a UX azért fontos, mert megpróbálja teljesíteni a felhasználó igényeit. Célja, hogy pozitív élményeket nyújtson a felhasználóknak a termékhez vagy márkához való hűség megőrzéséhez, illetve bizalom elnyeréséhez. Teljesítenie kell a felhasználó igényeit.

Emellett egy értelmes felhasználói élmény lehetővé teszi, hogy meghatározzuk az ügyfelek keresését a webhelyünkön, amelyek az üzleti sikerhez vezetnek.

Olyan weboldalt tervezése ajánlott, amely az ügyfél szemében egyszerű és szórakoztató. Alapjában véve, ezek szerint kijelenthetjük, hogy a UX designer képviseli a termék felhasználóit.

Forrás: https://nimapinfotech.com/blog/ui-ux-strategies-for-mobile-app-design-in-2019/

2.2 Design jelentése

A design nem csak kinézetről szól. Eszköze a termék- vagy szolgáltatástervezés megértésének. „A digitális termékeink általában használati eszközök, célszámok. […] Digitális termékek esetében a design nem más, mint kommunikációs csatorna az ember és a gép között. Akkor jó egy design, ha ez a kommunikáció hatékonyan működik.”

A UX design 3 fogalmat, kérdésfelvetést vesz figyelembe a termék használatával kapcsolatban:

Miért?

Mi?

Hogyan?

A Miért? magába foglalja a felhasználók motivációját egy termék bevezetéséhez, függetlenül attól, hogy egy olyan feladathoz kapcsolódik, amelyet szeretnénk végrehajtani vele, vagy a termék tulajdonjogához és használatával kapcsolatos értékek használatához.

A Mi? foglalkozik azzal, amit az emberek tudnak csinálni egy termékkel, illetve annak milyen funkciói vannak.

A Hogyan? pedig kapcsolódik a funkcionalitás kialakításához egy hozzáférhető és esztétikailag kellemes módon.

Tervezéskor a tervezőknek biztosítaniuk kell, hogy a termék a meglévő eszközökön keresztül jusson el zökkenőmentesen a felhasználóhoz úgy, hogy közben élményt is nyújtson.

A saját gyakorlatomban az elején problémák voltak az oldalak megjelenésével: egyes Android eszközök támogattak bizonyos elemeket, mások pedig fehér képernyőt jelenítettek meg, amikor betöltődött a weboldal.

2.3 Felhasználóközpontúság

Mivel a UX magába foglalja a felhasználó „utazását”, egy designer multidiszciplináris területekhez kell értsen: vizuális tervezés, programozás, pszichológia és kommunikáció. Számos korláttal, akadállyal kell számolni, mint például: színtévesztés, kis szöveg olvasása, színvakság stb. Gyakran maga a designer kell végezzen felhasználókutatást, drótvázak, prototípusok kialakítását, online perszónák létrehozását, valamint tesztelési terveket. Cégek között ezek eltérnek, de mindig a tervezőktől követelik meg, hogy a felhasználók támogatói legyenek, és a tervezési és fejlesztési erőfeszítések középpontjában tartsák a felhasználók igényeit. Azért van, hogy folyamatosan tájékoztatjuk a klienst addig, amíg az összes releváns kérdésre optimális választ kap.

Forrás: https://www.interaction-design.org/literature/topics/ux-design

Ahogy a fenti ábrán látható, a szakirodalom első lépésként említi a kontextus megértését. Ezt azt tükrözi, hogy a megrendelőnek milyen tervei vannak a felhasználóval, milyen célt szeretne elérni azzal, hogy valaki meglátogatja az oldalát, vagy milyen üzenetet továbbítana. Ha minden részlete világos, akkor megértettük a weboldal keretét. Ezután következik a felhasználók igényének megteremtése. Ebben a lépésben felhasználjuk az online perszónákat, amelyekkel tipizáltuk a célcsoportjainkat. Ezzel a módszerrel tudjuk tökéletesíteni a felhasználóismeretünket. Amiután ezzel is megvagyunk, akkor kialakult a weboldalának célja és célközönsége. E fogalmak implementálását próbáljuk megoldani a tervezési megoldások felkeresésében, hiszen a két alappillér egyszerre kell érvényesüljön. A tervezés befejeztével a weboldal „életre kelt”. Ezután derül csak ki, hogy a koncepció sikeres volt vagy sem. A gyorsan változó világ miatt folyamatosan új, jobbnál jobb megoldásokat kell keressünk, illetve mindig szem előtt kell legyen a kontextus és a felhasználó.

A felhasználóközpontú tervezés tehát egy olyan iteratív (ismétlődő végrehajtású) folyamat, amely a felhasználók és a környezetük megértését, mint minden tervezési és fejlesztés kiindulópontját jelenti.

2.4 UX és UI elemek

„A felület megtervezésénél 7 alapszabályra oda kell figyelni. Ezek a következők:

3 kérdés feltevése, amire a képernyőnek válaszolnia kell (Hol vagyunk?, Mit lehet csinálni?, Hogyan tovább?)

A vizuális hierarchia fontosságát nem szem elől téveszteni.

A design-hoz hozzá tartozik a szöveg is.

A konvenciók fontosak és használni kell őket.

A kisebb kijelzőjű képernyőkre is tervezzünk, mint például kézben tartott mobil.

A hasznos és mindig használt területek arányára figyelni kell.

Egyszerűségre és átláthatóságra kell törekedni.”

Vizuális design: Az általános termék esztétikájának megteremtésével és a közönség bevonásával lehet felhasználóközpontúvá tenni a weborientált tervezést. Fő célja, hogy illusztrációkat, képeket, tipográfiát, fehér részeket, elrendezéseket és színt alakítsunk ki. Vizuális tervezésről van szó.

Színek: A projekt számára megfelelő színek kiválasztása nagyon fontos az érzelmek és jelentések mentális összefüggéseinek megállapítására. Fontos, hogy kövesse a márka színeit, és okosan használja őket a létrehozandó tervtől és a megosztani kívánt üzenettől függően. Ahogy a vizsgált vállalat weboldalán is látható, dominálnak a barnás színek, amelyek a kávéra utalnak, viszont a piros és sárga színek felkeltik a figyelmet, és odairányítják a szem fókuszát.

7. ábra: 112coffee.com weblap főoldala

Forrás: www.112coffee.com

Grafikus design: Felelős a képek, a tipográfia vagy a mozgásgrafika együttes kombinációjáért, hogy lenyűgözze a látogatót. Biztosítja, hogy a szövegek és a színek megfeleljenek a márka irányelveinek. Sokan speciális tudományágnak tekintik, mivel szükséges egy bizonyos tipográfia és színelmélet készség, ami ugye a vizualizációhoz szükséges.

Interakciós design: Interfészek viselkedésének kialakítását jól át kell gondolni. A felhasználó számára egyszerű és világos kell legyen. Az interakciók megtörténéséért felelősek azok a funkciók, amelyek lehetővé teszik az emberek és a felhasználói felület, illetve több interfész közötti harmóniát.

Drótvázak és prototípusok: A weblap lényeges elemeinek bemutatása egy prototípusban azért fontos, mert ebben a fázisban a megrendelő még tud változtatni az elemeken, mivel még a tervezés fázisában vagyunk. Az én esetemben a drótváz kialakításakor meghatároztuk a menüsort, weboldal szerkezetét, képek és tartalom elhelyezését egy táblára rajzolva, így bármikor láthattam, hogy mi volt megbeszélve.

Felhasználókutatás: A felhasználói magatartások, igények és motivációk megértése különböző megfigyelési technikákkal, feladatelemzéssel és egyéb visszajelzési módszerek segítségével végezhetjük el. Ez határozza meg a céközönséget, és lényeges betekintést nyújt arra, hogy hogyan lehet legjobban megfigyelni az igényeket. Minőségi felhasználói kutatás biztosítása érdekében a teljes képet ki kell alakítani: Ki fogja használni az alkalmazást/weboldalt?, Mit akarnak elérni?, Honnan jöttek, hova mennek tovább?, Melyek az elsődleges ügyféligények?

Szerkezet: Az általános felhasználói felület architektúrájával foglalkozik, és rávezet arra, hogy mennyire világosak, konzisztensek, felismerhetők a modellek összefüggései. Ez azért fontos, hogy meg tudjuk határozni, hogy hány kattintás alatt találja meg a kívánt weboldalt a felhasználó. Egy rohanó világban, ha túl sokat kell kattintania, akkor inkább abbahagyja.

Egyszerűség: A design egyszerű, de közös feladatköröket kell megkönnyítenie, egyértelműen kommunikálni a felhasználó nyelvén. A parancsikonoknak értelemszerűen kapcsolódniuk kell a hosszabb eljárásokhoz, és az ismert konvenciókhoz hasonlítsanak.

8. ábra: Az oldal jobb felső sarka, konvenció szerint: keresés, felhasználó, kosártartalom

Forrás: 112coffee.com

Láthatóság: Nincs felesleges információ és több, szinte azonos alternatíva. A tervezésnek minden szükséges opciót és utat külön kell vizsgálnia. A jó láthatóságért a szakirodalom ajánl szándékosan kihagyott fehér részeket, amelyeken a felhasználó pihentetni tudja a szemét a sok impulzustól.

Feedback: A felhasználókat világos, tömör és közvetlen módon kell tájékoztatni, mivel meg kell érteniük az összes releváns intézkedést bármilyen változás érdekében, legyen az hiba, vagy csak optimalizálás. Ugyanakkor elvárjuk tőlük, hogy az intézkedéseinket megbecsüljék és visszajelzéseket adjanak afelől, hogy minden rendben van-e, milyen gondok akadtak még. Ezek fontosak a cég számára is, hiszen ezekből tudnak tanulni és fejlődni.

Újrafelhasználhatóság: A tervezésnek rugalmasnak kell lennie ahhoz, hogy csökkentse a hibákat és a visszaéléseket, lehetővé téve a visszavonást és az újrafelhasználást. Újra és újra ki kell használni a weboldal elemeit és ezeknek viselkedését, hogy ne a nulláról kezdjük a tervezést és legyünk következetesek. A 6. ábrán is látható volt a visszatérési lépések a kontextushoz, tartalommegoldáshoz vagy felhasználóigényekhez.

3. Brand bemutatása

Az 112 Coffee & Co. története 2012-ben indult. A koncepció onnan indult, hogy mindenki fogyaszt kávét, ezáltal egy elég tág célközönséget határoztak meg. Nem a szolgáltatás eladásán volt a hangsúly, hanem a történet továbbításán. Romániában újdonságnak számított akkor, és most is elég releváns meg trend, hogy farmról szállítják a kávébabokat, saját maguk pörkölik. Kialakítottak egy barista akadémiát, hogy a cég minél több területet érintsenek a vendéglátói iparban. A siker titka mégis az, hogy a felhasználók feedback-jét előtérbe helyezték, így új és innovatív ötletek kerültek napvilágra.

Ebben a fejezetben egy rövid bemutatása következik a vizsgált vállalatról: weboldal, nehézségek és kommunikáció. A fejezetben elengedhetetlen az arculat megemlítése, mivel ez az az elem, amely első benyomást kelt a látogatóban, ebben a pillanatban már kialakult egy vélemény, előítélet.

3.1 A felhasználók és a weboldal kapcsolata

Ha valaki irodában dolgozik, kávézni szeretne, de mégsincs ideje kávézóba menni, akkor ideális lenne egy bérlet. Ezt testesíti meg a 112 bérlet. Ugyanakkor a főoldalon levő képkollázs illusztrálja mindegyik klienskategóriát, nagyság szerint.

Forrás: 112coffee.com, saját szerkesztés

A Bérlet és a Rólunk rész azért a legnagyobbak, mert a bérlet értékesítése a fő cél, illetve fontos, hogy a felhasználók szeme előtt legyenek a cég információi is. Extrák közé tartozik, hogy kávébérletet is lehet készíteni. Eleinte minden meglévő kávéra lehetett bérletet csinálni, válaszolva a következő kérdésekre: Milyen gyakran történjen a rendelés?, Mennyi ideig szeretne rendelni?, Hány kg kávét rendel?, Milyen formában rendeli a kávét?. Újításként behozták azt, hogy más farmról is lehet kávét rendelni.

Az Iroda, Gasztró, Akadémia és Kávéház menüpontok szintén fontosak, mert ezek az alappillérei a cégnek. Irodákba szállítanak kávékat és gépeket, Gasztró részük pedig arra vonatkozik, hogy bárki behoz kávét, ők azt megpörkölik. A kávéház koncepciót a régi kávéházak inspiráltak, amelyek nyugodtak, szocializálási helyszínnek tökéletesek, illetve a kávézó kialakítása is erre utal, ahogy a fenti ábrán látható.

A Pörkölés fogalom lényeges a kávézó koncepciójában, mivel ezt képviselik, viszont a Franchise kategória még nincs kialakítva, mert a terjeszkedés csak elméletben létezik.

A főoldal funkciója egy landing page-hez hasonlít, mivel az oldal egy vásárlás gombbal végződik. Már az első pillanatban próbálja megfogni a felhasználót, hogy ha érdekelt bármelyik kategóriában, akkor azonnal lecsapnak rá, vásároljon terméket. Ugyanakkor informativ és webáruház jellege is van. Az arculat eleinte nem volt letisztulva, mivel túl sok mindent szerettek volna megjeleníteni, minden kategóriát jellemzőkkel. Ezt sikerült letisztítani.

A weboldal struktúrája hasonlít egy pókhálóhoz, mivel minden aloldalon megjelenik a vásárlás, tehát, ha érdekeltek vagyunk egy kategóriában, akkor nem kell külön megkeresni a vásárlás oldalt, hanem „a vásárlás eljön hozzánk”.

3.2 Nehézségek

Az alfejezet azokat a nehézségeket, akadályokat említi meg, amelyekkel találkoztam a felmérések és létrehozás során:

Kevés fogyasztó: Marosvásárhelyen nehéz felmérni a felhasználók preferenciáit, mivel a fogyasztók nem feltétlen jelennek meg interjúkon vagy tesztelésen.

Változó felhasználók: Ezzel a tényezővel pedig nehéz egy trend-et kialakítani. A fiatalság inkább egyetemistákból és iskolásokból áll, akik elutaznak, elköltöznek. Ez ott okoz akadályt, hogy kevés olyan ember marad, aki több verzióját látta a weboldalnak, és a folyamatos módosításokat össze tudná hasonlítani.

Menü és kínálat kialakítása: Legyen minél eltérőbb a konkurenciáétól, hogy csupán egy helyen találják meg a vonzó specialitásokat, viszont ez költséges is alapanyagok beszerzése szempontjából.

Személyzet kiképzése: megfelelő emberek megtalálása igen nehéz úgy, hogy képesek legyenek teljesíteni az elvásárokat és megfelelő képességekkel rendelkezzenek.

Unique Selling Proposition (USP) megfogalmazása: Egy mondat, amelyet a vásárló önállóan megfogalmaz, és amely tartalmazza azt, hogy miben térünk el a versenytársaktól, mi tesz minket egyedivé. A mi esetünkben: „Életbevágóan fontos a kávé és képes megmenteni az életed.”

Marketing: Magába foglalja a márkakép és arculat kitalálását és kidolgozását, egyedivé tevését, legyen az logó, grafika, reklámok vagy bejegyzések.

Bérlet: Sokan helytelenül fogják fel a bérlet fogalmát. Először mindenki a telefon bérletekre gondol, amelyeket egy adott időtartamra kötnek. A kávézó esetében nincs időre kötve, bármikor lemondható.

Más kommunikációs csatorna

Ami manapság a legegyértelműbb csatorna, amelyen szinte bárkit elérünk, az a közösségi média. A jelen esetben ez a Facebook és Instagram. Jelenleg pár ezres követése van a kávézónak, de növekvő tendencia mutatható ki az idő során.

Forrás: www.facebook.com, www.instagram.com, Google, saját szerkesztés

A Google Ads még nem termel annyira látogatásokat, mivel a kiaknázó kategória a mi esetünkben az irodai kávé, illetve a kávé feliratkozás, bérlet. Az „office coffe” és „office subscription” szavakra még egyáltalán nem keresnek, vagy elenyésző számú keresés van, ezért fel kell bontani ezeket a szópárokat úgy, hogy „office”, „coffee”, „subscription”. Jelenleg csak így működik a Google Ads vizsgálata.

Elképzelésük az volt, hogy a létező növekvő kereslet mellett úgy építsék fel az egész vállalkozást, hogy koncepciója: human-to-human, person-to-person, a vásárló a partner, ezért a logó magyarázata: 1 (kávézó) + 1 (vásárló) = 2. Két ember szinergiájának a szimbóluma. Az 112 könnyen megjegyezhető, mert ez a sürgősségi hívásszám. A brand úgy is felfogható, hogy megmenti az életünket, sürgős esetekben felkereshető és mindig rendelkezésre áll.

4. Versenytársak és a konkurencia felmérése Romániában

Ebben a fejezetben felmérem Kolozsvár szinten a főbb versenytársakat, mivel a cég terjeszkedni szeretne egy sokkal dinamikusabb városba. Romániában még nem terjedt el a kávékultúra, mint egyes kávénagyhatalmak esetében. A világon 6 ország kultúráját különböztetjük meg: Olaszország, Mexikó, Szaúd-Arábia, Japán, Törökország és Etiópia.

4.1 Kávékultúrák rövid ismertetése

Az eszpresszó az olaszok találták fel. Kicsi, kerámia csészékben szolgálják fel, az országban nagy koncentráltságú eszpresszót csak a délutáni órákban isznak, mivel hisznek abban, hogy a tej nem egészséges az emésztés számára. Szokás, hogy a csésze szélére citromot tesznek a további ízkombinációk elérésére. Az ízig-vérig olaszok a cappuccino-t csak reggel készítik.

Mexikó a világ egyik legnagyobb kávétermelő országa, mely a világ kávéjának 60%-át termeli. Mexikóban a hagyományos kávét fahéjrudakkal töltött egyedi cserépedényben főzik. A fűszer a tüzes és egészséges életformát szimbolizálja, ami függőséghez vezethet. Bármikor felszolgálnak bármilyen kávét. Az erős kávék hívei, amelyeket alkohollal is ízesítenek.

Mint a legtöbb afrikai és arab országban a kávé komoly etikettet jelent, mint például a csoport legidősebbjét szolgálják ki először, a férfiak csak férfiakkal kávéznak, és ugyanez vonatkozik a nőkre is. Mivel pénzügyi helyzetük nem engedi meg az ízesítést, ezért csak a gazdagok engedhetik meg maguknak. A kávé fekete, keserű és kevés kardamommal ízesített, ezért édességekkel szolgálják fel, hogy tompítsa a keserű ízt.

A japán és az indonéz kávét egy lencsén keresztül szűrik le. Japánban és Indonéziában a kávézók visszafogottak, nem tekintik szociális helynek, csendes és visszafogott légkör jellemzi a helyeket. Kevés időt töltenek az emberek kávézókban, ami a mentalitásból ered. A pörkölés jellemzője, hogy fekete, gazdag, lágy és egyszerű ízlésű. A csepegtető kávék használata népszerű, keverés nélkül keverednek az ízek.

A törökök a kávét feketén, erősen és édesen isszák. Inkább felpezsdítő desszertként kezelik a kávét. Vacsora után egy cukorkával szolgálják fel porcelán csészékben. A hagyományos kávét rézedényben főzik és szokatlanul forrón. Kávé mellett szívesen szocializálnak, olvasnak.

Etiópiában kávéceremóniával tisztelegnek a kávé előtt. A család egyetlen egy házvezetőnője végezheti. A kávét forró szénen és serpenyőben pörkölik, majd több órán keresztül, különleges karafákba főzik, majd fogantyú nélküli csészékbe öntik, anélkül, hogy egy csepp is kifolyjon. A kávét hagyományosan vajjal és sóval ízesítik.

Az alábbi ábrán is évről évre nagyobb a kereslet az őrölt kávé iránt, ami azt sugallja, hogy nem elavul téma, tehát érdemes befektetni.

11. ábra: Őröltkávé fogyasztásának növekedése Romániában millió kg-ban

Forrás:

4.2 Konkurencia Kolozsváron

Ismerve a különböző kultúrákat, ebben a fejezetben következik a versenytársak felmérése Románia szinten – leszűkítve Kolozsvárra – illetve statisztikai adatokkal felmérni és megállapítani, hogy az 112 Coffee & Co. hányadik helyen található a piacon. Az 1. táblázatban összessítettem a 4 kolozsvári versenytársat. Ebben a táblázatban megtalálható a név és a kávézó logó-ja. Azért csak a kolozsvári versenytársakat említem meg, mivel ők a konkrét konkurencia, hiszem a vásárhelyi kávézó Kolozsvárra szeretne terjeszkedni.

Az 112 abban tűnik ki, hogy indonéz kávét csak náluk lehet kapni, a többi kávézóban csak mexikói, arab és etióp kávé kapható. Kolozsvár révén, nagyon sok turista fordul meg nap mint nap, ezért szükséges minden kultúrát ismerni, és aszerint felszolgálni a kávékat.

1. táblázat: Konkurencia logójának szemléltetése

Forrás: saját szerkesztés

4.2.1 Konkurencia médiacsatornákon keresztül

A 21. században elengedhetetlenek a közösségi média felületek, ezért az online jelenlét elengedhetetlen a garantált siker érdekében. A SimilarWEB platform segítségével hasonlítottam össze a kávézók online kommunikációs eszközeit: direkt marketing, e-mail, ajánlások, referencia marketing, organikus keresések, fizetett keresések és reklámok, hirdetések, melyek asztali gépről történtek.

Direkt marketing

„A direkt marketing olyan interaktív marketingrendszer, melynek célja, hogy egy vagy több reklámeszköz felhasználásával bárhol mérhető reakciót és/vagy üzletkötést eredményezzen.”

E-mail marketing

E-mail marketing során az üzenetek e-mail-en keresztül kerülnek el a felhasználóhoz regisztráció után, rendelés esetén vagy hírlevél feliratkozás során. Kiküszöböljük a várakozást, hogy a felhasználónkhoz jusson el minél hamarabb a reklám, vagy hirdetés. Hátrányuk lehet a levélszemét (spam) és a rossz időzítés.

Referencia marketing (Refferals)

„Ez a típusú marketing a vállalkozások termékeinek és szolgáltatásainak spontán elterjesztéséről szól, illetve a fogyasztók részt vesznek a promoválásban azáltal, hogy szájról szájra terjesztik ezt.”

Közösségi média

„A közösségi média a felhasználók által létrehozott tartalom, olyan széles körben hozzáférhető technológiák segítségével, amelyek megkönnyítik a kommunikációt, befolyásolják a csoporttagokkal és a szélesebb közönséggel folytatott interakciót, tipikusan az interneten, vagy a mobil kommunikációs hálózaton keresztül.”

Organikus találat

Az a weblista, amelyek relevancia alapján leginkább megfelelnek a felhasználó keresésének. Másnéven természetes, ingyenes keresési eredmények, amelyeket a SEO befolyásol.

Fizetett találat

Alapvetően hirdetések, amelyeket a weboldal tulajdonosok megfizettek azért, hogy a weblapjuk bizonyos kulcsszavakra előrébb jelenjenek meg, mint az ingyenes találatok. Ezeket a találatokat a Google egy szürke háttérbe teszi, illetve más vizuális elemekkel jelzi, hogy más féle hirdetés, mint a többi.

Reklámozás

Egy olyan hirdetési forma, amely a reklámot vizuálisan közvetíti szöveg, logók, animációk, videók, fényképek vagy más grafikák segítségével. A hirdetések hatásának növelése érdekében a megjelenő hirdetők gyakran célzott felhasználókat szólítanak meg.

Forrás: https://pro.similarweb.com, saját szerkesztés

A 12. ábrán látható számok 2019 március és május között:

Direkt marketing-ben a Narcoffee volt a legerősebb 76.47%-kal, az 112coffee a harmadik helyen volt.

Egyik kávézó sem folytat e-mail-es kommunikációt reklámként.

Ajánlások terén magasan az első a Hot Pipes, viszont ez egy fejlődési lehetőség a cég számára.

Az 112coffee-nak a közösségi kommunikációja magas volt, szám szerint 23.66%, ami azt jelenti, hogy sikeresen lefedi a legtöbb kommunikációs csatornát: Facebook és Instagram.

Ahol szintén lehetne még fejlődni az az organikus/természetes keresés. Negyedik helyen szerepel a konkurensek között, ez azt jelenti, hogy annak ellenére, hogy a Google számol a weboldallal, jobban meg kell válogatni a kulcsszavakat, mivel a többi weboldalt hamarabb megtalálja, így az oldal aljára kerül a hirdetés.

Egyik weboldal sem fizet a hirdetések jobb elhelyezkedéséért.

A SimilarWEB szerint szintén nincs költekezés Display Ads kategóriában.

A marketing csatornákat vizsgálva a következő, 13. ábra bemutatja, hogy ezek a számok hogyan változnak a legutóbbi 28 napot vizsgáljuk úgy, hogy utolsó nap június 10.

13. ábra: Marketing kommunikáció 28 napot vizsgálva

Forrás: https://pro.similarweb.com,, saját szerkesztés

Az előző ábrával ellentétben az Olivo Caffee 100%-ban kihasználta ezt a reklámozási formát az előző 21.55%-hoz képest, az 112 Coffehouse a 4. helyre csúszott 40.49%-ról 12.72 %-ra.

Szintén egyik kávézó sem folytat e-mail-es kommunikációt reklámként.

A referenciákra alapuló marketinget csupán a Yume Coffee esetében lehet meghatározni, viszont az is egy elég alacsony szám, ami változatlan a 3 hónapos felméréshez viszonyítva.

Az 112 kávézó az utóbbi 28 napban nagyon kevésszer használta ki a közösségi médiában rejlő erősségeket, mivel egy reklámkampány kidolgozásán volt a hangsúly.

Erős ingyenes keresésekkel és találatokkal büszkélkedhet a kávézó, vetélytársa, a Yume Coffee feleannyi keresést mondhat magáénak.

Az utóbbi 28 napban sem fizettek a cégek a fizetett találatok szolgáltatásáért.

A SimilarWEB szerint szintén nincs költekezés Display Ads kategóriában.

4.2.2. Konkurencia organikus keresések alapján

A fentiekben tisztáztam az organikus keresés fogalmát. Az alábbi ábrák és alfejezeteket ezt a témakört vizsgálják, különböző szempontok alapján, amelyeket fontos megemlíteni. Ezek a felhasználók visszajelzései, amelyek sikerességhez vezetnek. A felhasználók mindenképp értékelik a számukra kedvező módosításokat.

Forgalom megosztás

A forgalom megosztás nem más, mint a webhelyre küldött forgalom százalékos aránya. Azokra vonatkozik, akik meglátogatják a weboldalt. Látogatásban mérik, amelyeket általában „session”-nak említ a szakirodalom. Megbecsüli, hogy egy online üzlet mennyire hatékony és mennyi vonzó a külvilág számára. Az alábbi ábrán látható, hogy a 3 hónapos ciklusban mikor és mennyit változtak a részesedések. Az 112 Coffee & Co. esetében csökkenést veszünk észre, ami annak tudható be, nem hoztak be új termékeket, illetve a weboldal funkcióiban is módosítások voltak, ezért nem lehetett két hétig elérni. A 3 hónap alatt a Yume Coffee folyamatosan az első helyen végzett, ezért ez egy ok, amiért ők a legnagyobb vetélytársak Kolozsvár szempontjából.

Forrás: https://pro.similarweb.com,, saját szerkesztés

Átlagos látogatási időtartam

Egy másik mutató, amely a visszajelzést tükrözi, az az átlagos látogatási idő. Ez megmutatja, hogy a látogatók átlagosan mennyi időt töltenek egy weboldalon egy munkamenet alatt, tehát az az eltelt idő, amíg nem zárja be a felhasználó a böngészőablakot. Ezt az időtartamot a látogatás első és utolsó megtekintésétől eltelt idő alapján számolják ki. A látogatások 30 perc inaktivitás után zárva vannak.

15. ábra: Kokurencia elemzés átlagos látogatási időtartam alapján

Forrás: https://pro.similarweb.com,, saját szerkesztés

Ez az érték ideális esetben 2-3 perc között van. Ez – bár nem tűnik soknak – de ennyi idő alatt a látogató képes elolvasni a számára fontos tartalmat és egy minimális interakciót létrehozzon a weboldal felületével.

A létező és vizsgált adatok alapján az 112 Coffee & Co. esetében 28 másodperc volt ez az időtartam, ami annak tudható be, hogy áprilisban különböző változtatások és optimalizálások történtek a weboldalon, mint például: képek cseréje, nem működő funkciók javítása, felhasználók észrevételeinek implementálása, ezért pár menüpont nem volt elérhető.

Ez kifizetődött, hiszem májusban volt a legnagyobb látogatási átlagérték (1 perc, 57 másodperc), viszont még mindig lemarad az ideális értéktől. Ugyanakkor ez lehet pozitív is, mivel a felhasználók gyorsan megtalálják a keresett tartalmakat, a tranzakció (vásárlás) nem okoz gondot. A Yume Coffee weboldalán ugyanakkor több időt töltenek el a látogatók, amely lehet pozitív (nagy választék, nehéz döntés a hasonló termékek között) vagy negatív (nem találják meg a vásárlás gombot, nehezen találják meg a tartalmakat, nem látják át rendesen a weboldal struktúráját stb.)

Megnyitott oldal 1 keresés alatt

A látogatásonkénti oldalszám meghatározza, hogy egy felhasználó mennyi tartalmat (lapot) néz meg a weboldalon. Ezt az átlagot úgy számolják ki, hogy az oldalmegtekintések számát elosztják a látogatók számával. Arra alkalmas, hogy megadja egy felhasználó esetében, milyen könnyen találja meg a weboldalt, mennyire jó a menükialakítás, mennyire navigáló a weboldal.

16. ábra: Konkurencia elemzése oldal/látogatás alapján

Forrás: https://pro.similarweb.com,, saját szerkesztés

A 16. ábra azt sugallja, hogy a vizsgált kávézó esetében márciusban 1 látogatás alatt szinte 2 weboldalt nyitottak meg, áprilisban ez a szám kisebb, májusban viszont keveset nőtt (1.16%-ra). Ez szintén lehet pozitív és negatív: gyorsan megtalálják a keresett tartalmat, vagy első benyomásra nem fogta meg őket a weboldal kinézete. A fő konkurens (Yume) esetében a legkiemelkedőbb érték az szinte 31 weboldal egy látogatás alatt. Ez egy igen magas szám, melynek kettős oldala van, ahogy már említettem. Az 112 Coffee & Co. esetében a növekedés az új termékek bevezetésének, eddigi hibák korrigálásának és az intenzív reklámozásba való befektetésnek köszönhető.

4.2.3 Konkurencia eddigi látogatások alapján

A következő táblázatok a 3 havi látogatásokat foglalja össze, külön asztali gépek és mobil eszközök esetén. Az 112 esetében az áprilisi értékek a legmagasabbak, mivel akkor sikerült bizonyos újításokat hozni termékek terén, és nagy hatással volt a kialakított reklám stratégia.

Asztali gépek esetében

A 2. táblázatban megtalálhatók a látogatások száma 2019 március és május között. Amint kiderül és most kezd nyilvánvalóvá válni, hogy ha egy kolozsvári terjeszkedésbe kezd a vizsgált kávézó, akkor a Yume termékeit és szolgáltatásait kell a leginkább megvizsgálja, felmérje, hiszen ezt a kávézót keresték fel a legtöbben a vizsgáltak közül.

2. táblázat: Konkurencia weboldal látogatás 2019 május-március között asztali gépről

Forrás: https://www.semrush.com/info, saját szerkesztés

Mobil eszközök esetében

A SimilarWEB által szolgáltatott értékek nem annyira komplexek, mint az előző esetben, viszont ez a webfelépítés és kódolásban kereshető a nem szinkronizáció hibája. 112 Coffee esetében a nagy növekedés március és április között egy 1 hónapos reklámkampánynak tudható be. A Yume ezt a kategóriát is magasan vezeti, illetve ki lehet jelenti, hogy most már a mobil eszközök az új irányadók és viszonyítási alapként is jobban szolgálnak, illetve a felhasználók is jobban preferálják ezt a technológiát.

3. táblázat: Konkurencia weboldal látogatás 2019 március-május között mobil eszközökről

Forrás: https://www.semrush.com/info, saját szerkesztés

4.2.4 További konkurenciával kapcsolatos információk

Az alábbi táblázat is azt sugallja, hogy a legnagyobb vetélytárs, amely a befolyásolhatja a sikerességet, az a Yume, hiszen a világon a legjobban helyezkednek el a többihez képest, nekik van a legnagyobb forgalomrészesedésük, összlátogatás arányuk, eszközarányuk és márkázott tartalmuk.

4. táblázat: További mérőszámok összessítése

Forrás: https://www.semrush.com/info, https://pro.similarweb.com saját szerkesztés

4.2.5 Google Alanytics weboldalról átvett kulcsszavakra való keresés

A belső Google Analytics kimutatások alapján az alábbi top 10 szavakra kerestek rá a legtöbben az utóbbi 3 hónapban, márciustól májusig. Vannak konkrét márkára való keresések, de az általános kávégép, eszpresszógép is szerepelnek a listában. A kulcsszavakat a SEO optimalizálására tudjuk majd használni. Ahogy fent említettem tényleg nem keresnek rá olyan szópárosokra, hogy office coffee vagy coffee subscription.

5. táblázat: Kulcsszavakra való találat számokban márciustól májusig

Forrás: https://pro.similarweb.com/#/website/competitors keywords/112coffee.com,hotpipes.ro,narcoffee.ro,olivocaffe.com,yumecoffee.ro/*/999/28d?selectedTab=organic&selectedSite=112coffee.comhttps://analytics.google.com/analytics/web/provision/?authuser=0#/provision

5. Felhasználók szokásainak felmérése

Ahhoz, hogy felismerjük, hogy milyen jellemzőik és elvárásaik vannak a felhasználóinknak, tudnunk kell, hogy kik ők és mit szeretnének elérni. „Egy jó feltérképezéshez 7 tényezőt kell megvizsgálnunk: pszichológia (tudatalatti, szubjektív szemlélete a weboldalnak), használhatóság (tudatos, minél kevesebb felhasználói input), design (márkareprezentáns, célt kommunikáló), copywriting (megfelel a cég imázsának), analitika (weboldal leggyengébb pontja), saját szemszög (mit akarunk mi vs. mire van szüksége a felhasználónknak).” Ezeknek felismerésére segíthetnek olyan kérdések, mint:

„Nem, kor, lakóhely

Végzettség és szakma

Mit tud a termékről? Mit tud a világról?

Mi a hobbija?

Egyedülálló vagy családos?

Milyenek az anyagi körülményei?

Milyenek a médiafogyasztási szokásai?

Milyen eszközöket használ?

Milyen környezetben használja a termékünket? (Mikor és hol?)

Mennyi időt tölt online?

Mennyire trendkövető?

Mik a motiváció? Miért, milyen céllal használja termékünket?”

Ha ezeket sorrendbe szeretnénk tenni, akkor a motiváció lenne a legfontosabb, mivel az indít el minden folyamatot. A legjobb módszer erre az online perszónák kialakítása.

5.1 Online perszóna fogalma

Az online perszóna egy kitalált karakter, amelyet a célközönség egy adott csoportjának alapvető tulajdonságainak jellemzésére fejlesztettek ki. Ez magába foglalja a motivációjukat, igényeiket, technikai készségeiket és más tényezőket is, amelyek hatással lesznek arra, hogyan hat rájuk a digitális marketingünk. Az a célja, hogy a digitális csoportok bármelyikét szem előtt tartsuk, és fiktív személyeket használjunk, hogy segítsük a felhasználói utazás optimalizálását minden szakaszban, amely által felhasználóközpontú lesz a fejlesztési folyamatunk. A kávézó esetében 3 célcsoportot határozhatunk meg: irodákat, felnőtteket és hallgatókat.

6. táblázat: Online perszónák meghatározása

Forrás: saját szerkesztés

Később ezeket a perszónákat folyamatosan frissítjük, ha ezt igényli a projekt. A tervezési folyamatban először meghatározzuk az alkalmazásban található folyamatokat. Ezek fogják meghatározni, hogy min megyünk keresztül az alkalmazáshasználat alatt. A folyamattervezésnek két módszere van: user journey (felhasználó útvonal) és costumer journey (ügyfélút).

5.2 User Journey

Egy lépéssorozatot határoz meg, amely olyan forgatókönyvet jelent, amelyben a felhasználó kölcsönhatásba léphet a tervezett dolgokkal. Olyan események vagy tapasztalatok sorozatát jelenti, amelyeket a felhasználó egy termék vagy szolgáltatás használata során szerezhez. Ez leképezhető vagy tervezhető úgy, hogy megmutassa interakcióként bemutatott választásokat, valamint eredményeket úgy, hogy dokumentáljuk a felhasználó döntéseit. A projektcsapatnak segít a feladat összetettségének megértésében, amelyek befolyásolják a felhasználói élményt.

Általában a folyamat úgy kezdődik, hogy felrajzolunk egy drótvázat, amely tartalmazza az összes oldalt, és vonalak kötik össze a lehetséges útvonalakat, ahol mozoghat a látogató. Ugyanakkor, hogy az ábra sikeres legyen, csak a célokhoz vezető folyamatokat kell jól megtervezni, vagyis célokat, ahova szeretnénk, hogy a felhasználó eljusson. A felhasználó lépései azok lesznek, amelyeket külön cselekedetként fogalmazunk meg, ha megkérdeznénk, hogy mi történt vele.

A tervezés korai szakaszában csináltam, így ezek még a kísérletező fázis részei voltak, amelyek több verzióból álltak össze. Tervezés esetén az aktuális lépés könnyen átlátható és megléphető kell legyen annak érdekében, hogy a felhasználó élményén és lelkesedésén ne rontsunk.

Forrás: https://uxstudioteam.com/ux-blog/user-journey-design-flows/

5.3 Customer Journey

Az ügyfelek utazási feltérképezése segít abban, hogy a marketingszakemberek jobban megértsék a vásárlói tapasztalatokat az ügyfél szemszögéből, hogy a vásárló gyenge pontjait összekapcsolják a konkrét igényekkel. A vásárló először hall a termékünkről. Érintőpontokat határozunk meg, amelyek a követett utat jelentik a vásárlás meghozatala előtt. Itt kölcsönhatásba lépett a látogató a márkával, termékkel vagy szolgáltatással. Eláltal látható az ügyfél utazásának térképe.

Ezen pontok megértésének fejlesztése azt jelenti, hogy jobb felhasználói élményeket tervezünk. Ez a megértés felhasználható a térképek javítására. Előnye az ügyfelek vásárlási élményének vizualizálása ügyfélszempontból. Olyan ügyfelek térképét kell nyújtani, akik elkötelezettek az örök kapcsolat kiépítésére és hajlandók hűségesek lenni.

18. ábra: Customer Journey szemléltetése

Forrás: https://uxstudioteam.com/ux-blog/customer-journey-mapping-example/

6. A weboldal technikai felépítése

A 6. fejezet tartalmazza az elkészítés technológiáit, leírásait és felépítését.

A WordPress egy PHP-alapú tartalomkezelő és blogrendszer, mely adattárolásra MySQL adatbázis kezelő rendszert használ, illetve nyílt forráskóddal rendelkezik. Azért választottam a WordPress-t, mert az a célja, hogy egy weboldal SEO-barát legyen, mivel letölthető maga az alkalmazás annak érdekében, hogy sor kerüljön funkciók javítására és domain optimalizálására. A WordPress használatával a weboldal vonzóvá válik, mivel sok újszerű és látványos elemet tartalmaz, illetve a keresőmotorok is támogatják a weboldalakat. A támogatás oka az, hogy a platform könnyen érthető és átlátható kódot tartalmaz. Több felmérést is találtam, ahol az abszolút használatban és százalékos piaci részesedésben is a WordPress volt az első.

6.1 WordPress bemutatása

Eleinte a WordPress egy blogkezelőnek indult, és kevés elemmel rendelkezett. Alapelemek között voltak a bejegyzések, menüpontok kezelése stb. Majd az idők során lehetővé tették a különböző bővítmények hozzáadását, sablonrendszer használatát, adminisztrációs felület fejlesztését, kép- és videófeltöltését, helyesírásellenőrzőt, majd az automatikus mentést. A template-ek folyamatosan bővülnek, beépítették a tag-eket. Követni lehet a bejegyzéseket és az oldalakat, képeket a felületen is lehet szerkeszteni.

Ez a sok elem megnehezítette a felület kezelését, ezért leegyszerűsítésre és a sebességkorlátozások átírására, admin felület felhasználóbarátabbá tevésére, jelszavak kezelésére, illetve mobil előnézet a témák beállítására került sor azért, hogy ennyire egyszerű kezelést érjen el bárki.

Forrás: www.pcmag.com

6.1.1 WordPress felépítés

A fájlok egy jól struktúrált könyvtárban találhatók meg, amely funkciót szerint választja a fájlokat.

wp-admin: adminisztrációért felelős rendszerfájlok és függvényleírások találhatók

wp-content: felhasználó mappája, amire írási jogot kell adni

plugins

themes

uploads

wp-include: oldal működéséhez szükséges függvénydefiníciók helye

Forrás: saját szerkesztés

A WordPress adatbázis-kezelő rendszere a MySQL, amely adatbázisok létrehozására, adatok tárolására és adatgyűjtésre használt szoftver. Nyílt forráskódú, mint a WordPress. Szerver oldalon a phpMyAdmin van használva, melynek beállításait a wp-config-sample.php fájlban szerkeszthetünk. Megemlítek pár MySQL beállítást:

define('DB_NAME', ''); // Adatbázis neve

define('DB_USER', ''); // MySQL felhasználónév

define('DB_PASSWORD', ''); // …és jelszó

define('DB_HOST', ''); // A weboldal host-ja

6.2 Használt technológia

Komplexitásának köszönhetően a WordPress több technológiát használ fel arra, hogy minél tágabb és széleskörűbb szolgáltatásokat nyújtson a felhasználói számára. Én a következőket használtam azok közül. Ugyanakkor a megemlített módszerek között nem csak kizárólag WordPress-re vonatkozókat említettem meg.

HTML5 (Hypertext Markup Language)

Fájl kiterjesztése: .html. A HTML minden weboldal alapját képezi, mivel ezzel írjuk le egy weboldal struktúráját. Tag-ekből áll: <html>, </html>, <head>, <body>, amelyek hierarchikus szerkezetet építenek fel, segítségükkel alakítjuk ki a weboldalunk elemeinek kinézetét, illetve részeket dolgozhatunk fel. „A HTML állomány egyszerű szövegállomány, amely rövid jelölő tagokat tartalmaz. A jelölő tagok alapján tudja a böngésző, hogyan kell megjelenítenie az oldalt. A HTML állományt egyszerű szöveges (editor) programokkal (pl. Jegyzettömb) is létrehozhatunk.” Ezeket a szegmenseket nyitja meg a böngészőnk és ismeri fel a struktúrát.

Forrás: https://blog.rsquaredacademy.com

A HTML5 újításnak köszönhetően <video> és <audio> elemek beágyazása is lehetséges. Lehetőségünk van arra is, hogy megfogjunk egy elemet és áthelyezzük a „Drag & Drop” segítségével. Elemek személyre szabása és módosítása CSS3-mal történik. A következőkben ennek bemutatására kerül sor.

CSS3 (Cascading Style Sheets)

Fájl kiterjesztése: .ccs. A CSS programozási nyelv felel a lekódolt HTML oldal megjelenítéséért. Ez a fájl szigorúan csak elemek beállításait tartalmazza, semmilyen más hozzászólást, specifikációt. Mivel minden böngészőnek egyedi beállításai vannak, ezért arra kell törekedni, hogy minél általánosabb konfigurációkat használjunk, legyen az betűtípus, színek árnyalata. Lehetőségünk van arra, hogy betű -méretet, -típust, -színt, -elhelyezkedést, változó háttér és szöveg effektek beállítására. CSS-en belül fontos megemlíteni a – RWD-n – belül a Media Query-k támogatását, mivel ez teszi lehetővé, hogy megadjuk a különböző képernyőfelbontások esetében milyen formázás érvényesüljön.

22. ábra: Főoldal CSS beállításának egy része

body{

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

font-size: 14px;

line-height: 1.42857143;

color: #333;

background-color: #fff;

}

Forrás: saját szerkesztés

A Media Query-k segítségével a paraméterként megadott változókat tudjuk formázni; általában a szélesség (width) és a hosszúság (height) kerül megadásra, ami a rendelkezésre álló weblapmegjelenítése terület méreteit jelenti. A device-width/height a teljes képernyőfelbontást jelöli. Ezen értékek minimumát és maximumát adjuk meg, tehát egy intervallumot, ahol mozoghat az egyéni formázásunk.

@media screen and (min-device-width: 500px) and (max-devie-width: 900px) {

.menu {

width: 300px;

}

}

A kód során a .menu osztályba tartozó elem 300 pixel széles lesz, amennyiben legalább 900 pixel és legfeljebb 900 pixel a szélessége. A screen az asztali képernyőméretet jelenti.

A formázásokat kétféleképpen adhatjuk meg. Egyik módszer az, hogy ugyanabban az egy CSS fájlban megadjuk az összes eszköztípust és azoknak megfelelő formázásokat. Ebben az esetben 1 CSS fájlt adunk meg a HTML fájlban.

<link rel="stylesheet" type="text/css" href="coffee.css">

PHP

„A PHP-t általában kiszolgálóoldali szkriptnyelvként használják; különösen alkalmas a dinamikus weboldalak kialakítására. Integrált támogatással rendelkezik az olyan adatbázisokkal való kapcsolódáshoz, mint a MySQL.” Összerakja és legenerálja a HTML weboldalakat, felhasználók által beírt adatokat, majd továbbítja őket a szerver felé, valamint adatbázis-kapcsolatot létesít és fenntart, SQL utasításokat képes lefuttatni, illetve felhasználók viselkedés és tevékenység információit tárolja.

„A PHP-t tipikusan Apache webszerver moduljaként szokták telepíteni. Ebben az esetben az Apache webszerver kezeli a HTTP kommunikációt. Ha egy .php kiterjesztésű állomány kiszolgálására érkezik kérés, akkor a szerver kikeresi a fájlrendszerből az állományt, majd ahelyett, hogy azonnal leküldené a forráskódot, átadja a PHP értelmezőnek, ami lefuttatja a programot. A program az eredményét a szabványos kimenetére írja, amit figyel a webszerver, és az oda érkező tartalmat pedig HTTP válaszként továbbítja a böngésző felé.”

JS (JavaScript)

A statikus CSS-sel ellentétben, a JS-sel képesek vagyunk dinamikusan kezelni egy weboldal megjelenését és tartalmát, például: naptár használata, animáció beszúrása, felugró ablak (pup-up) idő beállítása. Ezekre a feladatokra vannak kész függvények, amelyeket a jQuery könyvtárban találhatunk. Meghívásra a $.függvénynév struktúrát használjuk. A könyvtárat nem kell implementálni, hanem automatikusan megtalálható, ha a fájlban szereplő head részben meghívjuk a wp_enqueue_script(„jquery”) PHP függvényt. A felhasznált plugin-ok JavaScript-ben íródtak. „A jQuery egy JavaScript könyvtár, amely segít megtalálni és manipulálni a Dokumentumobjektum modell elemeit, feldolgozza a böngésző eseményeit, és kezelni tudja a böngésző inkompatibilitásait.”

MySQL

A MySQL egy szabadon elérhető nyílt forráskódú relációs adatbázis-kezelő rendszer, amely strukturált lekérdezés nyelvet használ. Az SQL a legnépszerűbb lekérdezőnyelv, amely relációs adatbázisokat támogat. A vásárlók minden adata itt rögzül, ha pedig valami változik, akkor itt kereshetünk rá. Ugyanakkor szerverrel való kapcsolat kialakítását is szolgálja. „A MySQL-szerver üzembe helyezése nem jelent semmiféle nehézséget, hiszen a XAMPP alkalmazáscsomag tartalmazza az adatbázis-kezelő rendszert. A szerver elindítását a XAMP Control Panel-jén egyetlen kattintással elvégezhetjük.”

Google Ads

A Google Ads, régi nevén a Google Adwords a Google online hirdetési rendszere, amely PPC (Pay-Per-Click) alapon méri fel egy weboldal látogatottságát, ami azt jelenti, hogy a fizetés akkor történik, amikor valaki rákattint a hirdetésre. A Google találati listáján első sorban a fizetett hirdetések jelennek meg, majd utánuk következnek az organikus – ingyenes – találatok, amelyek megjelenését az Ads rendszer jeleníti meg. Ezen a hirdetések megjelenítése a Google oldalán vagy partneroldalakon, ahol van hirdetés modul. Ezt a sorrendet (AdRank) egy általunk előzetesen megadott összeg, amely meghatározza, hogy maximálisan mennyit költenénk egy hirdetésre és egy minőségi mutató (QS) szorzata jelképezi. Ezt a minőségi mutató egy eszköz, amely a honlapunk minőségét, a kiválasztott kulcsszavak, valamint a hirdetések minőségét méri, tehát több tényező befolyásolja, mint például a releváns kulcsszavak, URL vagy a Mobile-First Index.

Google Analytics

A Google ingyenes szolgáltatása, ami egy weboldal látogatóiról készít részletes statisztikát. Főleg reklámkampányok optimalizálásában segít azáltal, hogy megmutatja, hogy honnan érkezett a látogató, milyen oldalakat látogatott meg, mennyi időt töltött ott, onnan hova ment tovább, illetve olyan adatokat is szolgáltat, hogy hol tartózkodott, milyen eszközről nyitotta meg a weboldalt, mit írt be a keresőbe, hogy megkapja azt a weboldalt, milyen keresőmotort használt stb. Az Analytics 3 fő részből áll: felhasználó fiók, Analytics fiókban létrehozott Property, ami maga a weboldal, illetve a különböző nézetek. A nézetekben viszont oda kell figyelni arra, hogy ha elrontunk egy nézetet, akkor az tovább nem módosítható. Megtalálhatók ugyanakkor jelentések (riportok) is, amelyek minden lényeges adatot tartalmaznak a felhasználóról: életkor, érdeklődési kör, tartózkodási hely, beszélt nyelvek, végzettség stb. 3 féle jelentést említenék meg.

Akvizíciós riport: arról tartalmaz információt, hogy hogyan találtok rá a weboldalunkra, milyen kategóriákra bontható (pl. Channels, Source)

Viselkedési riport: oldal tartalmáról ad információt: megtudhatjuk, hogy mennyire népszerű az oldalunk, hol hagyták el a látogatók a weboldalt, milyen gyorsan töltődött be az eszközükön a weboldal, vagy a tartalom, illetve javítási tanácsok is megjelenhetnek

Konverziós riport: megadja, hogy hány lépésből valósult meg a célom, hányan továbbították a linket, hányan váltak törzsvásárlókká, hányan nyomták meg a „Vásárlás” gombot. A konverzió az az időpillanat, amikor a vásárló képernyőjén megjelenik az az üzenet, hogy „Köszönjük a vásárlást!”

Google AdSense

Egy olyan online hirdetésközvetítő szolgáltatás, amely értékesíti az internetes reklámfelületeket. A weboldal kezelőnek annyi a tennivalója, hogy engedélyezi a weboldalon a kép, videó vagy szöveg formátumú hirdetések megjelenését, amelyek személyre szabhatók az adminisztráció felület által. Ezek a hirdetések szintén benne vannak a Google rendszerébe. A megjelenített hirdetések összefüggésben vannak a weblap tartalmával, így könnyebb integrálni a hirdetést a tartalom közé, nem ellentétes a weboldal mondanivalójával, a látogatónak sem furcsa, illetve nem ront a felhasználói élményen a hirdetés. Két fizetési típussal számolnak: CPC (Cost Per Click), amely kattintás után fizet, és CPM (Cost Per Mile), amely megjelenés alapú, tehát megjelenítés után fizet.

SEMrush

A SEMrush weboldal segít a keresőoptimalizálásban. Lehetőségünk van felmérni a konkurenciát, kulcsszavakra rákeresni, organikus találatokat megvizsgálni, webforgalomértéket becsülni. Megtudhatjuk, hogy milyen országból mit kerestek fel, a backlink-ek számát, domain hivatkozásokat, illetve, hogy hány hivatkozó IP cím van. Ezt én arra használtam fel, hogy kialakítsak egy képet a vállalatról, illetve a konkurenciáról.

A konkrét adatokat az 112 Coffee & Co.-ról a 3. fejezetben írtam.

Forrás: https://www.semrush.com

SimilarWEB

Elemzési szolgáltatásokat nyújtanak hasonló weboldalú vállalatok számára. A felhasználók információkat kapnak a weboldal forgalmáról, hivatkozás forrásokat, kulcsszavak elemzését.

Forrás: https://www.similarweb.com/

Böngészőbővítmény is letölthető, amely segít a felhasználóknak, hogy találják meg a keresett oldal fontos információit. Meg kell adnunk a saját weboldalunkat, illetve azon weboldalakat, amelyekhez hasonlítani szeretnénk a sajátunkat. Az 112 Coffee & Co.-ra vonatkozó információk szintén a 3. fejezetben említettem meg.

6.3. Folyamat tevékenységei

Specifikáció

A szoftverkövetelmények specifikációja (SRS) egy olyan funkcionális és nem funkcionális követelményekkel bíró szoftverrendszer részletes leírása. Az SRS az ügyfél és a vállalkozók közötti megállapodás alapján alakul ki. A szoftverrendszer kifejlesztéséhez egyértelműen meg kell határozni és érteni mindkét fél által a nézeteltérések elkerülése végett.

Tervezés és implementáció

A tervezés és implementáció a tervek stratégiai célok és egyéb célok elérése érdekében történő cselekvésekké való átalakulás. A stratégiai terv végrehajtása fontosabb, mint maga a stratégia. A stratégiai terv a szervezet és projektkezdeményezés irányítása érdekében. Az implementáció a terv gyakorlatba ültetését jelenti.

Validáció

A szoftver értékelésének folyamata a fejlesztési folyamat során vagy annak a végén, annak meghatározása érdekében, hogy megfelel-e a meghatározott üzleti követelményeknek. Azt biztosítja, hogy a termék valóban megfeleljen a felhasználó igényeinek, illetve a specifikációk mindenekelőtt helyesek. Más szavakkal, annak biztosítása, hogy a termék a tervezett környezetben és a tervezett felhasználásra készül.

Verifikáció

A munkafolyamatok (nem végső termék esetében) értékelésének folyamata és annak meghatározása, hogy megfelelnek-e az adott fázisra vonatkozó követelményeknek. Azt biztosítja, hogy a terméket a követelményeknek és előírásoknak megfelelően hozták létre. Más szóval, a munkálatban levő termék a leírtak alapján készüljön, kizárólag csak azok alapján.

Evolúció és karbantartás

A szoftverfejlesztés a szoftvergyártásban, és kifejezetten ebben az iparágban használt kifejezés, amely a szoftverfejlesztés kezdeti folyamatára utal, amelyeket különböző okokból folyamatosan frissítenek. A karbantartás a már meglévő szoftverek fejlesztésére érthető, amelyeket már vásárlásra szántak. Javítást jelent, mivel a jelenleg használt vagy futó szoftvernek egy rész meghibásodott és korrekciót igényel.

6.4 Weboldal elemei

Mint említettem, a WordPress létező sablonokra építi fel a weboldalakat, megkönnyítve ezáltal a programozók és webfejlesztők dolgát. Az általam használt és megvásárolt template az Exizt. Azért választottam ezt a témát, mert megtetszett a képek elhelyezése, a fenti kialakított menüsor

Forrás: wordpress.com

A weboldal funkcionalitásáért és az elemek működéséért a beépített plugin-ok felelősek. A WordPress plugin egy kis kód, amely beágyazódik a saját weboldalunkba, és olyan új funkciókat biztosít a weboldalnak, amelyek már nem kell nekünk megírni, illetve képes arra, hogy kiterjessze a már meglévő funkciókat. Több tízezer bővítményt tudunk webhelyünkhöz adni.

Azért választottam már kész plugin-okat, mert időtakarékosabb, kevesebb hibát tartalmaznak, a rendszer ajánl frissítéseket, illetve a legkisebb elemtől kezdve tudunk változtatni. Instagram összeköttetést is ezzel tudtam megvalósítani

A következő plugin-okat használja a www.112coffee.com weboldal:

Adminize: A weboldal adminisztrációjáért felelős, illetve az admin weboldalon lehetséges meta-box-ba bevezetett változások implementációját szolgálja. Lehetőségünk van jogosultságokat kiosztani a projekten dolgozók között, tehát meghatározzuk, hogy ki mihez férhet hozzá, például a Sale-es csak a megrendelésekhez fér hozzá.

Classic Editor: Egy leegyszerűsített változata az Editor-nak, amely kevesebb elemmel rendelkezik, viszont könnyebben kezelik a programozáshoz annyira nem értő emberek.

Contact Form: A weboldalon létezik egy ilyen űrlap, amely üzenetek vagy visszajelzés küldésére szolgál.

Costum Sidebars: A termékoldalon található Selector-ok működését garantálja, ami azt jelenti, hogy ha csak egy bizonyos termékmárkából szeretnénk választani, akkor megtehetjük, hogy leszűrjük csupán azokat.

Disable Comments: A weboldalon nem engedélyezett a tartalmakhoz való hozzászólás. Erre van az űrlap.

Duplicate Post: E plugin-nal lehetséges az elemek másolása, azért, hogy a specifikus beállításokat ne kelljen többször elvégezni, hanem csak egy képet kicserélni, és máris készen van az új termék behelyezése a többi közé.

Exizt Theme Helpers: A sablon által ajánlott funkciók felhasználását garantálja.

Fan Curier: Egy saját fejlesztésű plugin, amely arra szolgál a jövőben, hogy a megrendelések után a kiszállító cégnek automatikusan küldje el a megrendeléssel kapcsolatos információkat.

Favicon: A használt icon-ok létezését biztosítja, mint pl: keresés icon, felhasználó icon stb.

GDPR Cookie Consent: GDPR szabályokkal kapcsolatos engedélyek beállítása, a felhasználó elfogadja, hogy adatait felhasználják.

Google Analytics for WordPress: Ezáltal a Google szinkronizálja és összesíti a weboldalról érkező, felhasználókról érkező adatokat

Loginizer: Ha egy szerkesztő eléri a maximális rossz jelszó beírásának számát, akkor a plugin kitiltja, ezáltal csökkentve a feltörés valószínűségét és növelve a biztonságot.

Netopia mobilPay Payment Gateway: Kártyás fizetések esetén ez használatos, hogy a tranzakciók helyesen fussanak le, az összeg feleljen meg a valóságnak, illetve történjen meg maga a számláról való levonás és szinkronizálódjanak az adatok a bankok adataival.

Post Views Counter: Enélkül nem lenne a felületen a bejegyzések megtekintésének száma, ami fontos szám annak érdekében, hogy a felhasználók azt kapják, amit szeretnek.

Re-add text underline and justify: Lehetővé teszi a szöveget formázását.

Slider Revolution: a menüpontok kiválasztása során az egér irányát egy vonal szemlélteti. Kódrészlet:

<script type=”text/javascript” src=”https://112coffee.com/wp-content/plugins/woocommerce-switcher/js/slider_33.js”></script>

Meghívásra kerül a woocommerce-switcher és js könyvtárakan levő slider_33.js plugin.

Smart Bill Cloud, WooCommerce, Shipping Methods: a rendeléstől a fizetésig követik és mentik a lépéseket, illetve lehetővé teszik a fizetést, szállítást esetében automatikusan kiszámolják, hogy teljesült az ingyenes szállításért szükséges mennyiség.

WooCommerce Multilingual, WPML String Translation: a gyakorlatba nem épített többnyelvűségért felel, mivel tervben van az, hogy a weboldal angol és magyar nyelven is megtekinthető legyen.

WP Mail Logging: Az e-mail-ek elküldéséért és érkezéséért felel.

Yoast SEO: a SEO-val kapcsolatos adatokért felelős.

Főmenü kialakítása:

<body class="page-template page-template -page-templates page-template-fullwidth page-template-page-templatesfullwidt php page page-id-3410 woocommerce-js woocommerce-active wpb- js-composer js-comp-ver-5.4.5 vc_responsive currency-ron">

<header class="header header–1" data-sticky="true">

<nav class="navigation">

<div class="ps-container-fluid">

<div class="left">

<a class-"ps-logo" href="https://112coffee.com/"> <img src-"https://112coffee.com/wp-content/ uploads/2019/01/112 LOGO RGB B-1.png alt </a> </div> <div class="center">

<ul id-main class="main-menu menu menu- mobile">

<li id- "menu-item-2678" class="menu – item menu- item-type-post type menu-item-object-page menu- item-2678"> <a href "https://112coffee.com/magazin/">Magazin </a> </li>

<li id-"menu -item-3437" class="menu – item menu- item-type-post type menu-item- object-page menu-item-3437"> <a href-"https://112coffee.com/abonament/"> Abonament Cafea</a> </li>

<li id="menu-item-2700" class= "menu-item menu- item-type-post_type menu-item-object-page menu- item-2700"> <a href "https://112coffee.com/office-coffee/"> Office Coffee</a> </li>

<li id-"menu-item-3457" class="menu-item menu- item-type-post_type menu-item-object-page menu- item-3457" <a href="https://112coffee.com/gastronomie/"> Gastronomie</a> </li>

<li id -"menu – item-3456" class="menu-item menu item-type-post_type menu-item-object-page menu- item-3456> <a href "https://112coffee.com/prajitorie/"> Prajitorie</a </li>

<li id=" menu-item-2785" class- item-type-post_type menu-item-object-page menu- menu-item menu- item-2785"> <a href-"https://112coffee.com/contact/>Contact </ax </li>

</ul> </div> div class-"right>../div></div>: :after

A menü egy menu osztályban található. Listán belül a menüpontok számozás nélküli listával vannak létrehozva, amelyre, ha rákattintunk, akkor elvezet a a href-ben megadott linkre.

Következtetések

Szakdolgozatomban bemutattam az általam elvégezett feladatokat: menükialakítás, témaválasztás, felhasznált plugin-ok, űrlap készítése, UX kialakítás, versenytársak felmérése, feladat, amit egyáltalán nem bántam meg, mivel szakmailag nagyon sokat fejlődtem a programozási nyelveket illetően. Teljes mértékben felhasználtam az eddigi tudásaimat, viszont nehézégeim akadtak a plugin-ok megértésében és a WordPress adminisztrációs felületének megszokásában. Több esetben egy plugin elindítása teljesen átrendezte a weboldalt, ezért újra kellett azt írni, növelne a biztonságot. Ugyanakkor az ingyenes összehasonlítási weboldalak információi néhány esetben hiányosak voltak. Sikerült megvalósítanom a listából való kiválasztás, űrlap, képek, menürendszer és váz reszponzívvá tételét. Érdekesnek tartottam, hogy a funkciókat más is kipróbálja rajtam kívül és pozitív visszajelzései vannak.

Úgy gondolom, hogy a 21. században egy weboldal csak akkor lehet sikeres, ha az hatékonyan elérhető mobil eszközről is, nemcsak asztali gépről. A reszponzivitás aktualitása nem is kérdéss vagy vitatható, hanem azt a kérdést kell feltennünk, hogy mennyit vagyunk hajlandók befektetni egy minőségi weboldal kialakítására. Egy vállalat működése csak akkor lesz profitábilis, ha az üzenetük több csatornán jut el és több típusú eszközről elérhető.

A dolgozat során ismertettem a reszponzivitás és az UX hatását a felhasználókra, amelyek potenciális vásárlókból átalakulhatnak törzsvásálókká. Egy impulzus elég arra, hogy megragadjuk a figyelmét, legyen azok a színek kombinációja, elemek elhelyezése a weboldalon, amelyek jó érzést, harmóniát és élményt okoznak a látogatónak. Mindezekre a választ a visszajelzés. Ezeket a visszajelzéseket vizsgáltam a konkurencia összehasonlításával, hiszem a vélemény számszerűsítése.

A kávéfogyasztás és kávézókba való járás növekedése sem meglepő tény. A 11. ábrán ezt igazoltam is. Ez annak is tudható be, hogy influencerek szeretnénk lenni, megmutatni azt, hogy jobban vagyunk másoknál. A kutatásom bebizonyítására kvantitatív módszereket használtam, amelyek elősegítették a döntési javaslatok közül kiválasztani a legmegfelelőbbet, mivel számszerűsített adatokkal tudtam összehasonlítani a versenytársakat több szempont szerint, kávéfogyasztást. Kvalitatív módszereket használtam a probléma okainak megértésére, amelyet a néhány alanyon elvégzett feladatmegoldáson végeztem. Ez azt feltételezte, hogy meg kellett keressenek bizonyos weboldalt vagy terméket, és azt megvásároljanak úgy, hogy nem látták eddig a weboldalt. A dolgozat nem tartalmazza azt a részt, mivel helyben javítva lettek a hibák, amelyek többször megjelentek.

A versenytársakat azért volt szükséges felmérni, mivel újítást kell behozni, hogy minket válasszanak a fogyasztók, és ne a régebbi, megszokott helyüket. Ugyanakkor a kínálatot frissítésére szükség van, hogy újdonságokkal szolgáljuk ki a vásárlókat. A weboldal vizsgálat

során láttam, hogy melyek azok az elemek, amelyek kötelezők, illetve, hogy a versenytársak weboldala a szakirodalom szerint miért nem megfelelő, ezt pedig alátámasztotta a látogatások számának alacsony értéke. Ugyanakkor, egy weboldal sikerére a konvenciók betartása is hatással van, mivel, ha a felhasználó tudja, hogy hol keresse meg a dolgokat, akkor egyesen odakattint, én nem kell keresgéljen a weboldalon. A weboldal alkalmazkodik a szakirodalmi követelményekhez: betartja a UX és UI szabványokat, reszponzivitás előírásokat és a WordPress plugin-ok is működnek.

Ugyanakkor, a weboldalon lehetne fejleszteni. Az egyik javaslat az, hogy legyen egy olyan modul, amely csak a készleten levő kávék megrendelését teszi lehetővé úgy, hogy a vásárló egy dropdown listából választja ki ezeket, amelyet jQuery segítségével lehetne dinamikusan kezelni. Ez megkönnyíteni a folyamatot abban, hogy a vásárló nem kellene utánakeressen a terméknek és aztán kapjon üzenetet, hogy nem létezik a termék, hanem ezt automatikusan látná a weboldalon.

Egy másik lehetőség lenne a konverzió optimalizálása, amelyet hőtérképpel lehetne megvalósítani. Arra adna választ, hogy melyek azok az elemeket, amelyekre nagyon rákeresnek, illetve melyek a fölöslegesek. Erre léteznek korlátozott ingyenes szolgáltatások, de bővebb analitikára fizetni kellene.

Egy tervben levő fejlesztés az a többnyelvűség, lehetséges legyen a weboldal angol és magyar nyelven való meglátogatása, amely tervezett növekedéshez vezetne, hiszen a nyelvet nem értők nem lépnének ki a főoldal megtekintése után, hanem megnéznék a további tartalmakat is. Ez egy export lehetőséget is tartalmazna külföldi rendelések megvalósításával, viszont ez jogi utánanézést is feltételez.

Nagyon élveztem a projekt megvalósítását, mivel rájöttem, hogy nem is különbözik annyira, mint az egyetemi órák alatt végzettek, csupán időre és kreativitásra van szükség. Megbizonyosodott bennem, hogy ezt szeretném a jövőben is csinálni, illetve mennyire fontos az a tény, hogy felhasználóként na csak „tartalom fogyasztók” legyünk, hanem kokreáció által részesei legyünk a termék fejlesztésében, amely által növeljük a felhasználó élményt.