Szolgáltatások
Hirdetéskezelés
Content & SEO
Rólunk
Hasznos
Marketing alapok
Online marketing
Ajánlatkérés
A UI & UX kifejezések az utóbbi évtizedben váltak megkerülhetetlenné a webdesign területén. Tény és való, hogy e szemléletmódok alkalmazása nélkül ma már nem igazán lehet kiváló honlapot tervezni. Cikkünk segítségével Te is többet megtudhatsz róluk, a szemléletmód alkalmazásával pedig jelentősen javíthatod honlapod eredményeit.
UI jelentése: az angol User Interface kifejezés rövidítése, magyarul felhasználói felületet jelent és a képernyőn megjelenő vizuális elemek egészét értjük alatta. Nem csupán website kinézetét jelölheti, hanem ugyanúgy pl. egy okostelefon alkalmazás vagy akár operációs rendszer összképét is. Minden interaktív felület vizuális kialakítása a UI területéhez kapcsolódik.
UX jelentése: szintén egy angol kifejezés, a User Experience rövidítése. Magyarul a felhasználói élményt értjük alatta. Ez nem egy szemmel látható dolog, emiatt ezen a területen elsősorban mérésekre, tesztekre, tapasztalatokra lehet támaszkodni. Szorosan kapcsolódik egymáshoz a UI és a UX, mivel utóbbi segítségével módosíthatjuk a vizuális megjelenést jobb eredmények eléréséhez, tehát így tehetjük elégedettebbé a felhasználókat. Ezen területről részletesebben is olvashatsz blogunk egyik vendégbejegyzésében.
A UI és a UX viszonylag rövid múltra tekint vissza, így ezeken a területeken többségében nem kőbevésett, örökérvényű szabályok jellemzők. Blogcikkünkben ezért pár „aranyszabályon” kívül nagyrészt érvekkel, szempontokkal találkozhatsz. A célunk az, hogy egy különleges szemléletmódot adjunk át olvasóinknak.
Bízunk benne, hogy a cikk végén Te is be fogod látni, hogy a User Interface és a User Experience milyen nagymértékben képes hozzájárulni egy-egy vállalkozás sikeréhez, valamint képes leszel a saját projekted hasznára fordítani a megismert szempontokat.
Hamarosan 2020-at írunk, több mint egy évtizede, hogy velünk vannak az okoseszközök. Ebből adódóan manapság már tényleg az egyik legfontosabb szempont weblaptervezés során a reszponzív megjelenés. Ez az alap, enélkül nem beszélhetünk korszerű honlapról. Világviszonylatban már több internetes lekérdezés érkezik mobilról, mint asztali gépről. Magyarországon egyelőre még utóbbi vezet, de várhatóan a következő években nálunk is átveszi a vezető pozíciót a mobil eszközkategória. Az aktuális Desktop vs Mobile vs Tablet arány itt tekinthető meg: https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/
Reszponzív design tervezése során nem elég arra ügyelni, hogy a különböző képernyő méreteken megfelelően nézzen ki a honlap, hanem azt is ellenőrizni kell, hogy minden funkció helyesen működik-e. Továbbá a felhasználó kényelmét is figyelembe kell vennünk, a navigációs lehetőségeket is alaposan meg kell tervezni mind asztali képernyőre, mind mobil képernyőre.
Egyes navigációs eszközöket csak asztali eszközön érdemes használni, másokat csak mobilon. Például mobil nézet esetében a hosszú szöveg blokkok közé beszúrhatsz egy-egy plusz kapcsolat gombot, így nem kell végig görgetnie a felhasználónak a teljes képernyőt.
A reszponzív weboldal nem csupán a felhasználóknak fontos, hanem Neked is.
Amennyiben hirdeted a weboldalad, jobb eredményeket érhetsz el azzal, hogy a mobilos felhasználók is vásárolni/érdeklődni fognak. Azt tapasztaljuk, hogy ügyfeleink között is egyre több olyan webshop van, ahol a mobil vásárlások száma és tranzakciós értéke meghaladja az asztali számokat.
Ráadásul keresőoptimalizálásnál is előnyt jelent a reszponzív design, mivel nagyobb organikus forgalomra tehetsz szert egy megfelelően optimalizált weboldallal. Ma már szinte lehetetlen labdába rúgni olyan honlapokkal, amelyek mobilon és tableten szétcsúsznak vagy olvashatatlanok.
A felhasználói élményt a weboldal gyorsasága is javítja. Hiába van egy remekül kinéző, izgalmas funkciókkal tele tűzdelt honlapod, ha megnyitáskor megvárakoztatja az érdeklődőt. Rengeteg felhasználó már azelőtt elhagy egy oldalt, mielőtt teljesen betöltene, ha túl hosszasnak találja a folyamatot. Mobilfelhasználók esetében ez sokszorosan igaz, mivel gyakran a lassú mobilnet és gyengébb hardware is rátesz egy lapáttal a betöltési időre.
A honlap sebessége számos dolgon múlhat, először érdemes analizálni a honlap teljesítményét, amit a Google ingyenes sebességmérő eszközével tehetsz meg: https://developers.google.com/speed/pagespeed/insights/?hl=HU
Egy lassú tárhelyszolgáltató, vagy egy túlterhelt szerver nagyon sok kárt okozhat a vállalkozásodnak, de természetesen nem kell azonnal a szolgáltatóhoz rohanni, ha lassú a betöltési sebesség. Te is sokat tehetsz azért, hogy weboldalad betöltési idejét csökkentsd, ezért érdemes először átnézni a weboldaladat lassító elemeket.
A képek és videók igencsak hosszú másodperceket adhatnak hozzá a betöltési időhöz, ezért érdemes csínján bánni velük és csak azokat alkalmazni, amik tényleg szükségesek. Lehet szép UI-t tervezni kevés, kisméretű képpel is és a fehér felület sem ellenség.
Természetesen vannak kivételek, például fotós vagy grafikus portfolió oldalak esetében a teljeskörű bemutatás érdekében a lehetőleg legjobb formátumban érdemes alkalmazni a vizuális tartalmakat, de még ilyenkor is jól jön, ha előtte optimalizálod a méreteket. Azaz a képek felbontását pont akkorára állítod, mint amekkora méretben megjelennek majd a weboldalon. Hiába Full HD nagyságú a kép, ha csak egy apró blokk részeként jelenik meg, akkor fölöslegesen lassítja a weboldalt. Érdemes ezt minden esetben elvégezni, akármilyen weboldalt tervezel, emellett finom képtömörítéssel is spórolhatsz a fájlméreten.
Az alábbi két ingyenes online képtömörítő például teljesen jól megfelel a célnak:
Videók esetében több szempontból is a legegyszerűbb beágyazottakat alkalmazni pl. Youtube és Vimeo. A tárhellyel is spórolsz, emellett ezek a videómegosztó oldalak is elég jól tömörítik a fájlokat, így gyorsabban betölthetnek, mintha feltöltenéd FTP-vel a tárhelyedre. Ráadásul mások is könnyebben rátalálhatnak a mozgóképeidre, akár úgy is, hogy előtte nem ismerték a weboldalad, amennyiben nyilvánosra állítod őket.
A gyorsaság szintén számít a keresőoptimalizálás során, tehát már csak ezért is érdemes odafigyelned a felhasználói élményre.
A design területén örökérvényű szabály, hogy a kevesebb (általában) több. Ez ugyanúgy alkalmazható pl. egy új autó tervezése során és UI felületek kialakításánál is. Ez nem egyenlő a minimalizmussal, egyáltalán nem arra kell törekedned, hogy minél kevesebb dolgot jeleníts meg. Ehelyett azt a szemléletmódot jelképezi, hogy érdemes kigyomlálni minden fölösleges dolgot a tervezés során. Ha nem tudod megmagyarázni, hogy az a bizonyos objektum miért van pont ott, mi célt szolgál, akkor valószínűleg nincs is igazán értelme, hogy az ott legyen.
Vegyük például az űrlapokat, amelyeknél érdemes csak olyan információt bekérdened a kitöltőktől, amire tényleg szükség lehet. Minél több dolgot kell megadni, annál kevésbé lesznek hajlandók kitölteni a felhasználók.
Bizonyos esetekben megkerülhetetlen a nagyon hosszú űrlap, például webshopról való rendeléskor. Ilyenkor érdemes több részre szelni az egészet, és egyszerre csak bizonyos részeket megmutatni a kitöltőnek. Ezáltal kevésbé érződik hosszasnak a kitöltés folyamata, emellett átláthatóbbá is válik, hisz egyszerre csak pár adatot kell megadni. Plusz pont, ha a kitöltés során automatikusan elmenti az adatokat a honlap, és az űrlapot elhagyó felhasználók később ugyanoda tudnak visszatérni.
Ahogy írtuk, ez a szemléletmód nem a minimalizmusról szól, tehát a ló túloldalára se szabad átesni. Nem attól lesz átlátható az oldal, hogy minél kevesebb dolgot mutatunk a felhasználónak. Jó példa erre a hamburger ikonos menü, ami egy remek navigációs eszköz mobilon, de asztali képernyőn nagyon ritkán indokolt a használata. Kismérete révén nehezebb megtalálni nagyobb felületen, emellett ha szövegesen is kifér a menü, minek kényszerítsük a felhasználót eggyel több kattintásra?!
Egyáltalán nem mindegy, hogy melyik objektum milyen méretben jelenik meg a weboldalon, ugyanakkor ez nem azt jelenti, hogy ha valami fontos, akkor annak mindennél nagyobbnak is kell lennie. Az arányok segítenek tájékozódni a szemünknek, de emellett más eszközök is segíthetnek ebben, mint pl. az elrendezés, a színek, kontrasztok és a tipográfia.
Bizonyos elemek, például a hirdetés, pop-up vagy CTA túl nagyban vagy nagyszámban való megjelenése akár idegesíthető is lehet a felhasználó számára. Érdemes ezeket visszafogottan kezelni, amennyire csak lehet.
A nyugati kultúrában balról jobbra olvasunk, ezért preferált F alakban elrendezni a weboldalt. Azaz minél inkább a fenti és a baloldali területre koncentrálni a lényeges objektumokat. Emiatt vált például divatossá az oldal tetején, balra megtalálható logóelhelyezés, hisz így hamar találkozik vele a felhasználó tekintete. Ezt az elvet tehát akkor is használhatjuk, amikor szeretnénk valamit kiemelni anélkül, hogy változtatnánk a méretén.
A hirdetések például sokat segítenek egy-egy hírportál fenntartásában, ugyanakkor ha az oldal felét kitakarják, könnyen visszájára fordulhat az egész. Mindenképp ügyelj arra, hogy a hirdetésekkel együtt is átlátható legyen az oldal, ne zavarják a felhasználót a gondtalan böngészésben. Gyakran egész oldalas hirdetéseket is bevet egy website, hogy kattintásra bírják a felhasználókat. Extrém eset, legtöbbet online újságoknál, blogoknál láthatunk ilyet. Ha te is alkalmazod ezt, arra mindenképp ügyelj, hogy egyértelmű legyen a felhasználó számára, hogyan léphet ki a hirdetésből. Ellenkező esetben meg se tekinti az oldalad érdemi részét és a kilépést mellett dönt.
Pop-up, azaz felugró ablakból is megárthat a sok, még ha fontos is az alkalmazásuk. Igyekezz minél kevesebbet használni és fontosság szerint pozícionálni. A kevésbé fontosak, mint pl. a felugró értékelő miniűrlapokat célszerű a jobb alsó sarokban kisméretben elhelyezni. Ha valami fontos, akkor viszont természetesen középen lesz a legjobb helye. A GDPR elfogadó ablakot érdemes nem túl nagyra venni, hisz kellemetlen lehet az új látogatónak, ha az oldal nagyrészét nem is láthatja az elfogadás előtt.
Gombok esetében számos lehetőség van arra, hogy könnyedén észrevegye a felhasználó anélkül is, hogy akkora mérete lenne, mint a címszövegnek. Már a kontrasztos háttérszín is eléggé feltűnővé teheti, de ha szeretnéd tényleg eléggé feldobni, akkor egy animációt is alkalmazhatsz rajta.
Összeségében azt tanácsoljuk, hogy mindenképp rendszerben gondolkozz egy weboldal megtervezésnél. A lényegtelen részletek nem írhatják felül az összképet: nem feltétlenül lesz attól valami jó, hogy „leugrik a képernyőről”.
A szöveg megjelenése weben legalább annyira fontos, mint a tartalma. Egy profi weboldal nem egy gyorsan összedobott irodai Word dokumentum, amit csak pár munkatárs fog gyorsan átpásztázni, hanem egy olyan felület, amelyet emberek sokasága fog alaposan megtekinteni. Emiatt a szöveg külalakja is fontos, nem csak a képek, ikonok és videók esztétikai minősége számít.
Az első lépés a font / typeface, azaz betűtípus kiválasztása. Egy honlapon maximum 2-3 különböző típusú fontot érdemes használni, de legtöbb esetben egy betűcsalád is elég. A legegyszerűbb, ha a Google Fonts betűkészletből válogatsz: ezek ingyenesek és könnyen integrálhatók.
Weben elsősorban talpatlan betűtípusokat érdemes alkalmazni, hiszen korszerűbb megjelenést kölcsönöznek, de ez nem kőbe vésett szabály. Lehet kísérletezni haladó web designereknek talpas betűkkel is. Ami viszont mindenképp fontos, hogy törzsszövegként semmikép se használj túl kreatív, nehezen olvasható betűcsaládot. Hosszú szövegek esetében nem az a legfontosabb, hogy megmutasd épp milyen izgalmas fontot találtál, hanem hogy minél könnyedebben olvasható legyen a szöveg bárki számára.
Pár Google Fonts-on is elérhető betűcsalád, amelyek törzsszövegek esetében is mindig megállják a helyüket:
Ha a betűtípus választáson túl vagy és a szövegezés feltöltésnél tartasz, akkor az alábbiakra érdemes odafigyelni:
Ha szeretnél többet megtudni a tipográfiáról, tekintsd meg a korábbi cikkünket a témában.
A weboldalfrissítést mindig kellő óvatossággal érdemes elvégezni. A változtatás előtt készíts egy backupmentést az oldalról. Murphy törvénye az online térben is igaz: ami elromolhat az el is romlik. Még ha mindent megvizsgáltál előtte, minden alaposan meg lett tervezve, akkor is megeshet, hogy valami porszem esik a gépezetbe, pár kódsor vagy plugin is tönkre teheti az egészet.
Amennyiben a honlapod már alapvetően is jól működik, csak pár hiányosságot akarsz befoltozni vagy valami újdonsággal egészítenéd ki, a tervezés során érdemes nem 180 fokos irányváltást venni. A felhasználók nem igazán szeretik, ha a jól megszokott dolgok módosulnak és emiatt nem találnak egy funkciót vagy tartalmat.
Jobb, ha apró lépéseket teszel és szép lassan építed újjá a weboldalt. A nagy website-oknál mint pl. a Facebook, Google, Youtube mind így csinálják már jó ideje. Ha mégis nagy változtatásokra adod a fejed, akkor is figyelj a kommunikációra, adj útmutatót a visszatérő felhasználóknak a módosításokhoz. Ezt kisebb, de annál fontosabb változtatásoknál is megteheted, ha bekerül egy új funkció a honlapodba. Például ha webáruházad bevezet egy új fizetési módot, akkor a kosár oldalon egy kisebb kiemelt üzenettel jelezheted a felhasználóknak.
Végezetül ne feledd, hogy a weboldaladnak elsősorban nem a saját igényeidnek vagy az ismerőseid szépérzékének kell megfelelnie, hanem a látogatóidnak vagy vásárlóidnak.
Ha nem elégszel meg ennyivel és szeretnél még többet megtudni a UI és UX design tervezésről, az alábbi cikkekben találhatsz remek tanácsokat, tippeket:
Fucsku Dávid, designer
