Tippek hiteles weboldal építéséhez – 2. rész: design

Nyitva vagyunk tábla egy bolt ajtaján

Másnak is megmutatnád? Oszd meg!

Úgy gondolod, hogy a weboldalad kinézete nem számít, úgyis csak a tartalom a lényeg? Vagy pont fordítva, azt gondolod, hogy mindenkit leveszel majd a lábáról az oldalról berepülő vicces kis reklámmal vagy a magától elinduló zenei aláfestéssel, úgysem olvas ma már senki?

Amikor meglátogatsz egy ismeretlen weboldalt, mennyire számít az első benyomás, amit ott kapsz? Valószínűleg te is pár másodpercen belül becsukod, ha valami idegesít rajta, nem igazodsz ki, vagy épp olvashatatlanok a betűk. Lehet, hogy ebbe tudatosan nem is gondoltál még bele, de egy weboldal megjelenése nagyon meghatározó abból a szempontból, hogy a látogatók hitelesnek, megbízhatónak gondolják-e a mögötte álló vállalkozást. És ha nem gondolják annak, az végső soron azt jelenti, hogy bevételtől esik el az adott cég.

Természetesen nem csak a weboldal megjelenése befolyásolja a vállalkozás megítélését, ugyanolyan fontos a tartalom is, de odáig el kell hogy jussanak a látogatók. Ebben a cikkben megismerkedhetsz vele, mikre kell figyelned a kinézet szempontjából, ha hiteles weboldalt szeretnél. A hitelességet támogató tartalmi elemekről a sorozat 1. cikkében volt szó.

Szöveg megjelenése

Betűtípus és betűméret

Weben elsődleges szempont az olvashatóság, hiszen az emberek azért nézegetik az oldalad, mert valamilyen információra van szükségük vagy valamilyen problémát szeretnének megoldani. Ha például valamilyen cirkalmas, esetleg kézírást utánzó betűtípust választasz, amit úgy kell kisilabizálni, annak nem fognak örülni. Lehet, hogy végig sem olvassák a szöveget, hiába érdekes és értékes.

Pár soros szöveg, ami nehezebben olvasható betűtípussal van írva.
Ennek a szövegnek az olvasása hosszú távon elég fárasztó tud lenni.

Az sem szerencsés, ha túl sokféle betűtípust alkalmazol, mert az összhatás rendetlen lesz. Maximum 2-3 típus szerepeljen a weboldalon, egy a címeknek, egy a hosszabb szövegeknek és esetleg még egy, ha van valamilyen konkrét, meghatározott célja (pl. gomb felirata vagy címkék). Fontos, hogy a  kiválasztott betűtípusokat következetesen alkalmazd, segítve ezzel a szövegben való eligazodást. Ha nem akarsz összepasszoló betűtípusok válogatásával bajlódni, akár egyféle betűvel is elkészítheted az oldalad, ilyenkor a betűvastagsággal és nagysággal lehet jól variálni.

Biztos te is találkoztál már olyan szöveggel – akár weben, akár nyomtatott anyagon – ahol az ékezetes betűk helyére szemmel láthatóan egy másik betűtípusból került be egy karakter, és ez még a jobbik eset. Van, hogy például egy üres négyzet jelenik meg, vagy egyszerűen csak hiányzik az a betű. Ez azért van, mert sok betűtípus esetében nem készítik el az összes nyelv ékezetes betűit. Érdemes tehát ellenőrizni, hogy megvannak-e a jellegzetes magyar karakterek a kiválasztott betűtípusban.

Egy olyan betűtípussal készült felirat, melyből hiányzik az ő és az ű.

A megfelelő betűméret kiválasztása szintén fontos szempont. A betűknek elég nagynak kell lenniük ahhoz, hogy jól olvashatóak legyenek. A címeknek nagyobbaknak / vastagabbnak kell lenniük, mint a törzsszövegnek, hogy megfelelően átlátható, tagolt legyen a szöveg. Arra is gondolni kell, hogy ami asztali gépen jól mutat, mobilon valószínűleg már túl nagy lesz. A betűméretnél is nagyon fontos a következetesség, tehát pl. az alcímek mindig ugyanakkorák legyenek.

A szöveg elrendezése, tagolása

Nyomtatásban elterjedt a sorkizárt igazítás, de weben ezt ne használd. Fárasztó a szemnek, ha eltérő a szavak közötti tér nagysága. Helyette a legtöbb esetben a balra igazítás a legjobb választás. Középre és jobbra csak indokolt esetben igazíts, például címeknél, mert szintén nem szerencsés, ha mindegyik sor máshol kezdődik.

Ha megfigyeled, ebben a cikkben is balra igazított a szöveg, sőt, még a címek is.

Mivel a weben általában nem olvasunk el mindent egyben, hanem először átpásztázzuk az oldalt, érdemes címekkel, alcímekkel és képekkel megtörni a hosszabb szövegeket. Bátran használj felsorolásokat is, ezeket könnyebb befogadni, mint egy terjedelmes szöveget. A bekezdéseket is sokkal rövidebbre lehet venni, mint nyomtatott anyagok esetében.

A szöveghasáb ne tartson „faltól falig”, mert nehéz megtalálni a következő sor elejét. Inkább legyen nagyobb a margó vagy legyen több hasáb egymás mellett.

Plusz egy tipp a hiteles weboldalhoz

Inkább olvasd át még egyszer a szöveget, vagy kérj meg valakit, hogy nézze át, de ne legyenek benne helyesírási hibák és elütések.

Linkek kinézete

A linkek alapvetően kétfélék lehetnek: szöveges linkek és gombok. Mindkettő esetében talán a legfontosabb, hogy az olvasó első ránézésre tudja, hogy ezek linkek, azaz kattinthatóak és elvezetnek egy másik tartalomhoz.

Szövegbe ágyazott linkeknél ezt úgy tudod elérni, ha például más színt adsz neki, mint a szövegkörnyezetnek, esetleg aláhúzod vagy bármi egyéb módon kiemeled. A fontosabb linkek gomb formájúak legyenek, ugyanis ezek még jobban odavonzzák a tekintetet és kattintásra ingerelnek.

Továbbfejlesztheted azzal, ha egérrel a link, illetve a gomb fölé állva nyilacskáról „kézre” vált a kurzor, továbbá valami más is megváltozik, például a szöveg színe módosul vagy kicsit megnő a gomb mérete, esetleg árnyékot kap. Főleg a gomb esetében lehet nagyon kreatív megoldásokat kitalálni, de mindig szem előtt kell tartani, hogy az a látogató számára ne legyen idegesítő.

A szöveg többi része, tehát ami nem link, ne tűnjön klikkelhetőnek!

Képek

A weboldalra elhelyezett képek esetében többféle szempontot kell szem előtt tartani:

  • Valamennyi kép legyen jó minőségű, éles, nem pixeles. Ha te magad nem tudsz ilyen fényképeket előállítani, érdemes megbízni egy profi fotóst, mert egy egyébként igényes, rendezett weboldalt nagyon el tudnak rontani a nem megfelelő minőségű fotók.
  • A képeket ne szimplán díszítésnek használd. Mindegyiknek legyen valamilyen célja, tegyen hozzá valamit a szöveges tartalomhoz. Például segítse a szöveg megértését vagy keltsen egy meghatározott érzelmet.
  • Ha nem saját fotókat használsz, ügyelj rá, hogy a felhasznált képek jogtiszta forrásból származzanak.
  • Feltöltés előtt tömörítsd a képeket – például a TinyPNG-vel –, ugyanis a nagy fájlméretű képek nagy mértékben lassítják az oldal betöltődését.
  • Ha szöveg is kerül a képre, fontos, hogy olvasható maradjon, ne olvadjon bele a háttérbe. Erre többféle módszer is létezik.
  • A weboldal adminisztrációs felületén minden egyes képnél töltsd ki a „helyettesítő szöveg”-et. Írd le minél pontosabban a kép tartalmát. Ez a szöveg azoknak fontos, akiknek valamiért nem töltődik be a kép vagy képernyőolvasó programot használnak.
Helyettesítő szöveg helye a WordPress admin felületén
A Médiatárban megnyitva a képet itt találod a helyettesítő szöveg helyét (WordPress-ben)

Színek

Ha már vannak arculati színeid, célszerű a weboldalon is ezeket használnod, hogy a látogatóid minél könnyebben azonosítsanak. Ha még nincsenek, akkor semmiképp se a saját ízlésedből indulj ki, hanem próbáld magad beleképzelni a célközönséged fejébe. Ők milyen színvilágot „várnak el”?

Egészséggel kapcsolatos weboldalak
A keresőbe “health website” kulcsszót beírva az alábbi képtalálatokat kaptam. Látszik, hogy az egészséggel kapcsolatos weboldalak kékes-zöldes színeket használnak.
Kávé témájú weboldalak
“Coffee website” keresésre már egész más színvilágú oldalak kerültek elő.

Nem csak a képek, grafikai elemek tekintetében érdemes odafigyelni a színekre, hanem a szöveg színe is fontos. Ha világos háttéren van a szöveg, a betűk színe sötét legyen, de ne teljesen fekete, inkább sötétszürke. Sötét háttérre pedig világos színű betűk kerüljenek. A kontraszt kellően nagy legyen a háttér és a betűk között, hogy jól lehessen olvasni, ne fárassza a szemet.

Összkép

A fentieken kívül van pár általános, az egész weboldalra vonatkozó szempont, amiknek a figyelembevételével segítheted látogatóidat, hogy mindent megtaláljanak és közben ne idegesítse fel őket semmi.

  • Az összes oldal szerkezete legyen rendezett. A tartalmilag összetartozó elemek vizuálisan is tartozzanak össze, viszont ne legyen zsúfolt hatású a tartalom. Az elemek közötti „üres tér” legyen kellően nagy.
  • Minden legyen könnyen megtalálható, például ne rakd a menüt szokatlan helyre vagy ne kelljen fél óráig bogarászni az elrejtett kapcsolati infók után.
  • A fontos dolgok legyenek feltűnőbbek. Ezt akár úgy is ellenőrizheted, hogy egy vékonyabb üres lapot tartasz a monitor elé és amit azon keresztül is látsz, azok a leghangsúlyosabb elemek.
  • A videók vagy a hangfájlok ne induljanak el maguktól. Olyan elemek se legyenek, amik maguktól mozognak és a látogató nem tudja őket kontrollálni. Kerüld a felugró (pop-up) ablakokat. Ezek különösen idegesítőek tudnak lenni.

Reszponzív megjelenés

A hiteles weboldalhoz a reszponzív megjelenés is hozzátartozik. De mit jelent ez? Azt, hogy a weboldal rugalmasan, automatikusan igazodik ahhoz, hogy milyen méretű kijelzőn tekintik meg. Máshogy néz ki például mobiltelefonon, mint asztali gépen. Ehhez az kell, hogy az oldal alkotóelemei átrendeződjenek és átméretezzék magukat attól függően, hogy hol jelennek meg. Előfordulhat olyan is, hogy egy elem asztali gépen megjelenik, de mobilon nem. Természetesen ezt nem magától fogja tudni a weboldal, hanem neked kell beállítani a különböző töréspontokat és elrendezéseket a sablonban.

Ha velünk dolgozol, biztos lehetsz benne, hogy hiteles megjelenést építünk fel vállalkozásodnak!

Ellenőrzőlista hiteles weboldal építéséhez

Iratkozz fel hírlevelünkre, hogy rendszeresen vagy rendszertelenül, de tippekkel lássunk el a honlapod még jobbá tételéhez! Cserébe letölthetsz egy ellenőrzőlistát, ami alapján tételesen végig tudod venni a cikkben említetteket és javítani tudod weboldalad hitelességét.

Másnak is megmutatnád? Oszd meg!

* * * * * * * *

Legyen még jobb a weboldalad! Hasonló bejegyzéseket a Blogban találsz!