A te weboldalad csak névjegykártyaként funkcionál, vagy valóban képes vásárlókká konvertálni a látogatókat?
Te tudod, hogy mi szükséges ahhoz, hogy a weboldalad látogatóiból tényleges vásárlók legyenek? Valójában számtalan tényező függvénye.
Most a webdesign oldaláról fogjuk megközelíteni a témát és azt fogjuk megnézni, hogy melyek azok a minimum követelmények, amelyek segítenek a weboldalad látogatóiból vásárlókat konvertálni.
Ha inkább a videót részesíted előnyben a szöveg helyett, akkor íme:
Miért fontos a jó webdesign?
Nem azért, hogy nekünk, vagy neked, a weboldal tulajdonosnak szép és tetszetős legyen, vagy gyönyörködjünk benne. Nem is azért, hogy az ismerőseink megdicsérjék, hogy milyen szép weboldalunk van.
Bármit csinálsz a vállalkozásodban, annak kell, hogy legyen valami végcélja, amiért az egészet csinálod.
Így van ez a weboldallal is. A weboldalnál a végcél a vásárlás, vagy az, hogy nálad foglaljanak egy időpontot, tőled kérjenek árajánlatot.
Alapvetően egy szép webdesign ezt még nem teszi lehetővé.
Olyan webdesignnal kell rendelkezned, ami a konverziót szolgálja, vezeti a tekintetet.
Nézzük, hogy melyek a jó webdesign ismérvei:
- harmonikus
- egyszerű, letisztult és egységes
- vezeti a tekintetet
- átláthatóvá teszi az egész oldalt és könnyen és gyorsan értelmezhetővé varázsolja azt a látogató számára.
És akkor nézzük a konkrétumokat.
A jó webdesign színeiben és stílusában megfelel a célközönségnek, illetve az üzenetnek, amelyet közvetíteni szeretnél
Ha lazább témád van, mondjuk gyerekekkel foglalkozol, sütiket árulsz, fodrászatod van vagy hasonló egyszerűbb, hétköznapibb témákkal foglalkozol, akkor jó lehet egy lazább, világosabb színeket használó, különféle formákat alkalmazó design. Ha az oldalad kifejezetten gyerekeknek szól, akkor nyugodtan lehet kicsit színesebb is.
Amennyiben viszont valami komolyabb, üzleties a weboldalad témája, idősebbek a célközönség, vagy exkluzív, prémium szolgáltatást vagy terméket nyújtasz, akkor a legjobb, ha csak feketével, fehérrel, illetve ezek árnyalataival dolgozol.
Prémium, exkluzív termékek esetén a konverziók tekintetében a feketén és a fehéren kívül jól működik a sötétkék és az arany is.
Fontos, hogy minimalista legyen az oldalad.
Minél kevesebb színnel, formával dolgozz, és az egész megjelenés tekintetében is célszerű minimalista designban gondolkodnod.
Formák fontossága a webdesignban
Ha lazább stílusú a weboldalad, egyszerűbb, hétköznapibb, szórakoztatóbb, fiatalos a téma, fiatal a célközönség, – akár gyerekek, akár tinédzserek, akár fiatal felnőttek- használj nyugodtan kerek, geometrikus formákat. Kreatív oldalaknál használhatsz ornamentikus formákat is.
Komolyabb, üzleties téma, idősebbeknek szóló tartalom esetén a stabilitást és komolyságot képviselő formákat érdemes alkalmaznod. Ilyenek a négyzetek és a sarkos formák.
Betűtípusok fontossága a webdesignban
Alapvetően a talpas és a talpatlan betűtípust különböztetjük meg. A talpas betűtípusnak van egy kis talpacskája. Talpas betűtípus például a közismert Times New Roman. Ez a betűtípus azokhoz a témákhoz alkalmas, amelyek komolyabb, üzletiesebb hangvételűek, a stabilitást próbálják sugallni.
A talpatlan betűtípusok, mint például az Ariel, a Calibri, a Sans Serif fiatalosabb, lazább, közvetlenebb, barátibb vonalat képviselnek, és ilyen stílust is közvetítenek a látogatók felé.
Gyakran találkozhatsz a weboldalakon írott betűtípussal is, ami kézzel írott hatást kelt (pl. Vladimir Script). Ez a kreativitást, a szabadságot és a személyességet hivatott megjeleníteni, ha valami nagyon személyes témáról van szó.
Törekedj minimalizmusra!
Minden elemre és az egész oldalra igaz, hogy lehetőség szerint törekedj minimalizmusra.
Színekben maximum kettőt, esetleg hármat használj a feketén és a fehéren kívül!
Ennek köszönhetően átlátható, egységes és letisztult marad a designod. Kivétel lehet ez alól, hogyha tipikusan gyerekekkel kapcsolatos gyerektéma, és nagyon szeretnéd, hogy színes legyen. De itt is inkább a képekben jelenítsd meg a színességet, az ikonoknál, háttereknél, betűszíneknél maradj meg két-három színnél.
Betűtípusból is maximum kettőt vagy hármat használj!
Én a kettőt javaslom. Az egyik betűtípust használd a címekre és az alcímekre, a másik betűtípust pedig magára a folyószövegre – hosszabb szövegekre, felsorolásokra.
Ha a gombokra nagyon szeretnél más betűtípust, az lehet egy harmadik fajta, de szebb és átláthatóbb lesz két betűtípussal.
A képernyőn belül lehetőség szerint minél kevesebb elem jelenjen meg!
Ne zsúfold túl, ne legyen ott az összes információ egyetlen egy képernyőn, mert az teljesen átláthatatlanná teszi az egészet. A látogatód azt sem fogja tudni, hogy hova nézzen, mit olvasson, mi számára a fontos információ. Káosz lesz a fejében és gyorsan bezárja az oldalad.
Egy képernyőn elegendő, hogyha egyetlen egy konkrét témához kapcsolódó elemek vannak megjelenítve.
Mondjuk egy kép, egy cím, esetleg egy alcím, meg a hozzá tartozó szöveg, és a következő téma az lényegében már egy teljes képernyővel alatta helyezkedik el.
Ez fogja segíteni igazából azt, hogy könnyed, átlátható, könnyen feldolgozható legyen az oldalad.
Legyen tagolt a teljes oldalad!
Az oldalad álljon úgynevezett blokkokból, szekciókból és egy-egy blokk, egy-egy szekció egy témát fejtsen ki.
Külön blokk lehet a „rólunk”, egy másik a szolgáltatásod blokkja, a következő a blog oldal, az alján mondjuk még egy kapcsolati űrlap. Ezek mind különálló tartalmak, mind különálló témák. Szépen különüljenek el egymástól.
Lehet ezeknél külön hátteret, háttérképet is alkalmazni vagy eltérő háttérszínt. Lehet az is, hogy alapvetően nagyon világos az egész oldalad, de mondjuk nem az egész tiszta fehér és ezeknél a blokkoknál a fehér és a nagyon-nagyon-nagyon világos szürke (már-már majdnem fehér) blokkok váltják egymást. Észre fogja venni a szem, hogy ez egy kicsikét elkülönül.
De lehet az egész oldal teljesen fehér, ekkor különösen fontos az, hogy kellően nagy távolság legyen az előző blokk tartalmának a legvége, és a következő blokk első tartalma között.
A blokkokon, szekciókon belül tagold tovább a tartalmi elemeket!
Legyen címed mindenféleképpen. Nem kötelező, de lehet alcímet is hozzáadni, és utána jön a kenyérszöveg (ez maga a folyószöveg), és ezt még tovább díszítheted képekkel.
Bár a képek elsődleges szerepe nem a díszítés, hanem az, hogy segítsék a megértést és akár szövegelolvasás nélkül is tudja az ember, hogy miről van ott szó.
A szekción belül tovább tudod tagolni a szöveget különféle listákkal, „bulett point”-os vagy akár ikonos listákkal. Az ikonok segíthetnek abban, hogy még jobban tudja értelmezni az ember a szöveget – akár olvasás nélkül is.
Bónusz tipp:
Célszerű a kenyérszövegeket is úgy összerakni, hogy kettő-három, de maximum öt mondat legyen egy-egy blokkban. Ha ennél hosszabb lenne a szöveg, akkor egy külön blokkot érdemes csinálni rá. Hosszabb szövegeknél pedig feltétlen javaslom, hogy emelj ki a kenyérszövegen belül egy-egy nagyon lényeges kifejezést, egy-egy fontos szót.
Ne egy teljes mondatot vagy ne egy fél mondatot, mert az nem lesz már kiemelés, az már igazából olyan, mintha ki se lenne emelve.
Nézzük, mi a helyzet a képekkel, kicsit részleteiben.
A képek és az ábrák célja, hogy megkönnyítsék a szöveg megértését vagy akár a szöveg nélkül is tudjuk azt, hogy miről szól az az adott rész.
Akkor a legmegfelelőbbek ezek a képek és ikonok, hogyha nem lenne ott a szöveg, vagy letakarnánk és csak a képet néznénk, akkor is pontosan tudnánk, hogy miről van szó. Ezért nagyon fontos, hogy a képek, illetve az ikonok minősége tökéletes legyen. Ne legyen pixeles.
Alapvetően azt mondanám, hogy a kiváló minőség lenne a legjobb, viszont ez általában igen nagy fájlméretet eredményez, ami pedig a weboldal betöltési sebességét rontja. Úgyhogy itt egy kicsit lavíroznunk kell a minőség és a sebesség között. Azt szoktam javasolni, hogy a képet olyan méretben kell elmenteni, amekkorában használva lesz a weboldalon és csak addig legyen tömörítve, ameddig még szabad szemmel különösebb minőségromlás nem észrevehető rajta, viszont a lehető legkisebb méretet próbáljuk keresni. Ezzel tudod elérni azt, hogy minőségi, szép képeid legyenek, de ne legyen lassú a weboldalad.
Ahhoz, hogy ne legyen lassabb az oldalad még sok más tényező is szükségeltetik.
Ha érdekel a weboldalad sebességének optimalizálása, akkor nézd meg az erről szóló videót, vagy olvasd el ezt a blogbejegyzést.
Manapság rengeteg információ ömlik az emberre minden irányból. Nagyon nehéz szelektálnunk köztük, ezért autodidakta módon az emberek megtanulták azt, hogy úgy olvassák a weboldalakat, hogy gyorsan végig görgetik, és amit elsőre, egy szempillantás alatt fel tudnak dolgozni infót, azt feldolgozzák. Ha ez alapján felkeltettük az érdeklődésüket, akkor egy kicsit jobban belemélyednek a szövegbe.
Térjünk rá egy kicsit a gombokra.
A gomboknak igen nagy szerepük van egy weboldal sikerességében
Ezek a gombok azok, amelyekkel el tudunk navigálni egyik oldalról a másikra, egyik szekcióról a másikra, el tudunk küldeni egy kapcsolatfelvételi űrlapot vagy akár egy konkrét megrendelő lapot.
Nagyon fontos, hogy a gombok mind megjelenésükben, mind üzenet szempontjából teljesen egyértelműek legyenek.
Nézzük meg, hogy mit jelent ez pontosan!
Egyrészt megjelenésében úgy, hogy elkülönül a környezettől.
Jellemzően olyan színt használj, ami sehol máshol nem fordul elő a weboldalon, vagy maximum nagyon-nagyon pici mennyiségben fordul elő máshol. Lehet például nagyobb a betűmérete, mint a kenyérszöveg. Nem kell, hogy akkora legyen, mint a cím, de legyen nagyobb, mint a sima kenyérszöveg. Lehet akár teljesen nagybetűs is vagy a gombon lévő betűk között lehet kicsit nagyobb a betűtávolság, így látványosabbá és feltűnőbbé válik.
Lehet rárakni akár egy szolid animációt, akár akkor, amikor megjelenik, akár utána valami kis finom színátmenetet. Illetve lehet azt, hogy egész egyszerűen nyilak mutatnak ár, akár két oldalról, akár csak egyik oldalról, hogy itt van, ide kattints, hogyha ide kattintasz, jó lesz neked. Lehet szöveges nyilat is, tehát a nyíl mellé valami szöveget rakni, de lehet csak szimplán nyilazni is.
A gombok is legyenek konzekvensek, azaz ahogyan kinéz az egyik gomb, ugyanúgy nézzen ki a másik gomb is. Tehát, hogyha kék gombot használsz, akkor használj végig kék gombot. Ne legyen a másik sárga. Ha esetleg keretet vagy árnyékot használsz a gomboknál, akkor legyen egységes kerete vagy árnyéka minden gombnak. Ha az egyik gombod nagybetűs, akkor mind legyen az.
Ez teszi lehetővé azt, hogy egyértelmű lesz a weboldal látogató számára, hogy ez egy gomb, ide tudok kattintani, és emögött van valami, ami engem esetleg érdekelhet is akár.
Hogyha mindegyik gomb más, vagy akár csak kétféle stílust is alkalmazol, akkor sok esetben egész egyszerűen átmegy ezeken a gombokon a látogató és nem veszi észre.
Számítógépen jól működik (telefonon, tableteken nem – csak ott, ahol az egérrel navigálunk), hogy amikor a gomb fölé húzod az egered, akkor változzon meg valami. Növekedjen meg a gomb vagy legyen egy picikét más a háttérszíne, húzódjanak széjjelebb a betűk, kerüljön rá egy nyilacska a gombra, vagy bármi hasonló, ami mutatja, ami megerősíti az embert, hogy igen, itt történni fog valami, ez egy kattintható elem. Ez még inkább ösztönzi őt arra, hogy rákattintson arra a gombra.
Bár most a webdesignról van szó, de egy picit beszéljünk a szövegről is.
Ha nincsenek meg legalább az alapvető szövegírási szabályok, akkor abból még a legprofibb webdesigner sem fog tudni neked igazán jól konvertáló webdesign-t létrehozni.
Alapvető szövegírási szabályok webdesign szempontból
- címsorok, főcímek maximum 8-10 szavasak legyenek (ennél ne használj hosszabb címeket)
- az alcímek maximum 1 mondat hosszúak legyenek
- legyenek blokkok, szekciók
- a kenyérszöveg maximum 5-7 mondat hosszú legyen (ha ennél hosszabb lenne, csinálj belőle több blokkot vagy szekciót)
- használj 1-2 mondatos bekezdéseket
- szövegdobozok esetében 3-4-es elosztású szövegdobozokat használj
- szövegdobozokban (mivel lényegesen kisebb a hely) 3-5, maximum 6 szavas címekben gondolkodj csak, a kenyérszöveg pedig maximum 3-5 mondat legyen.
Mindezek alapvetőek a jó webdesign-hoz. A jó webdesign pedig terelni fogja az weboldalad látogatójának figyelmét, segíteni fogja, hogy tovább olvasson és tovább görgesse a weboldaladat, és ennek köszönhetően minél több információ jusson el hozzá, és minél több lehetőséged legyen arra, hogy meg tudd győzni őt arról, hogy nálad vásároljon, tőled rendeljen vagy téged kérjen fel egy szolgáltatásra.
És ami nagyon-nagyon fontos webdesign esetében:
Mobilon tökéletesen nézzen ki a weboldalad
Azaz, ne lógjanak ki a képek, ne lógjanak ki a szövegek, ne lógjanak ki a gombok. Ne foglalja el a cím a teljes vagy a fél képernyőt. Legyen megfelelő a betűméret, ne legyen túl nagy, nyilván túl kicsi se. Ezekre kiemelt figyelmet fordíts!
Miért?
Azért, mert manapság már 50-80%-ban van azoknak a weboldallátogatóknak az aránya, akik mobilon böngészik a weboldaladat.
Ha nem megfelelően jeleníted meg az ő számukra, nem könnyedén feldolgozható, akkor hiába van az egész, be fogja zárni nagyon hamar és aztán el fog felejteni. A hirdetési költséged pedig mehet a kukába.
Éppen ezért rendkívül fontos, hogy mobilon nagyon jó legyen az oldalad és tényleg nézd meg, hogy minden rendben van-e.
És nézzük akkor, hogy most, hogy mindezt már tudod, hogy mi kell ahhoz, hogy megfelelő webdesignod legyen, olyan webdesign, ami valóban jól tud konvertálni neked a weboldaladon.
Szívesen olvasnál még hasonlókról? Rendszeresen megjelenő hírleveleimben ilyen és egyéb, vállalkozással, online marketinggel, web-/landing oldal készítéssel kapcsolatos fontos tudnivalókat osztok meg. Ha szeretnéd kimaxolni a vállalkozásodban lévő potenciált, akkor iratkozz fel ezekre a hasznos levelekre!
Hogyan tovább?
Nézzük, hogy mik legyenek a következő lépéseid ahhoz, hogy ne csak egy hasznos cikk legyen ez számodra, amiből aztán sose valósítasz meg semmit, hanem ténylegesen értéket teremtsen a vállalkozásod életében!
Menj végig az alábbi lépéseken!
- Először is menj végig még egyszer ezen a listán, méghozzá úgy, hogy előveszed a weboldaladat és végigveszed a listát újra meg újra minden egyes aloldalad esetében külön-külön.
- Nézd meg, hogy mi van megvalósítva, ezeket pipáld ki.
- Nézd meg, hogy mi nincs megvalósítva, ezeket jelöld be feltétlenül.
- Rendelj hozzájuk megvalósítási időt, egyesével.
- Írd be a naptáradba azt az időpontot és azt az időintervallumot, amikor ezt véghez fogod vinni, vagy ha nem te magad, akkor pedig a webesed.
- Amikor elérkezett az az időpont, amikorra beírtad, akkor pedig tényleg csináld meg és ne mással foglalkozz.
Ha mindezeket megcsinálod, akkor biztos vagyok benne, hogy sokkal magasabb konverzióra számíthatsz majd a weboldaladon. Feltéve, hogy nem voltak már eddig is ezek a tényezők vagy nem felelt meg eddig is ezeknek a tényezőknek.
Amennyiben érdekel a téma, lépj be a ProduktON! közösség Facebook csoportjába, ahol bővebben tudsz erről beszélgetni hozzád hasonló magyar kisvállalkozókkal.
Ha szakértői segítségre lenne szükséged weboldalad / landing oldalad megjelenésének tökélyre fejlesztésében, akkor vedd fel velem a kapcsolatot, és megbeszéljük a részleteket személyesen, hogy pontosan hogyan tudnálak támogatni téged ebben a folyamatban:
Nagyon sikeres és nagyon produktív vállalkozást kívánok neked!
