blog.7digits-dev.eu

Tag: webdesign

12+1 UI design tipp a konverzió növeléséhez

[vc_row][vc_column][vc_column_text]Egy weboldalnak számos ismérve van, de ami a látogatók felé látszik belőle, az a UI design – és ez egyben a weboldal megrendelői számára is a legfontosabb alkotóeleme egy weboldalnak. Kevesen vannak vele tisztában, hogy

a felhasználói felület tervezése különböző tudományok határterületein helyezkedik el

és ugyanúgy kell hozzá tervezői képzettség, mint például a kognitív pszichológia, vagy épp az idegtudomány bizonyos összefüggéseinek ismerete.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text]

Nagyon klassz dolog

…ha egy weboldal szép – és annak is kell lennie! Az üzleti sikerhez azonban a szépség egyáltalán nem elég; ehhez a UI design szakma számos fogása kell még. Annak érdekében, hogy ne hozz rossz döntéseket, amikor a saját weboldalad elkészítésére, vagy megújítására kerül a sor, íme 12+1 gyorsan fogyasztható UI design fogás, amiből számodra is kiderül, mennyire nem is olyan egyszerű egy sikeres weboldal tervezőinek feladata…[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Mi az a UI design?

A felhasználói felület (UI) a webhely azon része, amelyet a felhasználó lát, és amellyel interakcióba lép. Ennek a felületnek az a missziója, hogy felkeltse és fenntartsa a látogató figyelmét, szórakoztassa és edukálja a célcsoportot egészen addig a pillanatig, amíg az elköteleződés olyan szintjére nem jut, ahol vásárló – vagy B2B esetén vevő – nem válik belőle.

A megfelelő felhasználói felület kialakítása ezért minden webhely számára elengedhetetlen, de különösen fontos az ügyfélprofilú vállalkozásoknál. Amennyiben szeretnéd, hogy weboldalad professzionális megjelenést keltsen, nem elég, hogy jól nézzen ki. Rögvest körbe is járjuk, hogy miért…

Miért fontos a UI weboldalad számára?

A jó felhasználói felület egyszerűvé teszi a weboldal használatát (navigálását), miközben vizuálisan és tartalmilag is vonzó. Felhasználóbarátnak, következetesnek, intuitívnak és ma már bizony perszonalizáltnak is kell lenni a webhely minden oldalán. A UI design alapvetően két célt szolgál – megszámlálhatatlan taktikával és módon: az egyik, hogy pozitív érzéseket keltsen, a másik, hogy ne keltsen negatív érzéseket – és amint látni fogod, ez a kettő korántsem ugyanaz. De vajon mi a helyzet a SEO-val?

UI design és keresőoptimalizálás

A felhasználói felület a keresőoptimalizálás javításában is segíthet azáltal, hogy láthatóbbá teszi a webhelyet a keresőmotorok számára. A jó felhasználói felület segítségével a felhasználók gyorsabban megtalálhatják, amit keresnek, és magasabb átkattintási arányt (CTR) is eredményezhet. Egy jó felhasználói felület még élvezetesebbé teheti a webhely használatának általános élményét.

A felhasználókat elsősorban az üzenet és a gyors navigáció érdekli, hogy a lehető leghamarabb megtalálják kérdésükre, igényükre a választ. Ehhez nyújt segítséget a megfelelő designelemek használata. Fontos, hogy ügyelj arra, hogy felhasználóid elégedettek legyenek a webhelyek és alkalmazások használatakor. Boldogságuk a látogatás okától és a várt eredményektől függ. Ezért a jó grafikus felhasználói felületek a következők:

1.Könnyed, egyértelmű interakciót tesz lehetővé

2.Erősíti és elősegíti a feladatok elvégzését

3.Összhangban van a brand/márka értékeivel, és a megfelelő felhasználói érzelmeket váltja ki

Ideális esetben a UI design zökkenőmentesen vezeti végig a felhasználókat a tartalomfogyasztási és -interakciós folyamatokon. A kiváló felhasználói felület kiküszöböli a felesleges elemeket, és nagy hangsúlyt fektet a döntő interakciókra.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

És akkor jöjjön a 12+1 UI design best practice

1. Körültekintő betűtípus választás

Használj megfelelő betűkészletet, hogy kezelőfelületed elegáns és professzionális legyen. A rosszul megtervezett betűtípusok megnehezíthetik a szövegek olvasását, továbbá jelentősen megváltoztathatják a felhasználói felület megjelenését és hangulatát. Válassz olyan olvasható és könnyen olvasható betűtípusokat, amelyek a képernyőn és a nyomtatott anyagokon egyaránt értelmezhetőek és jól olvashatóak.

Győződj meg róla, hogy a karakterkészlet az írott nyelvnek megfelelően mindent helyesen tartalmaz (azaz, ha magyar nyelvű az oldalad, akkor van Latin Extended verziója), valamint kerüld a díszes, bonyolult betűtípusokat. Olyan betűtípusokat használj, amelyek kis méretben és minimális méretre csökkentve, valamint sötét környezetben is kitűnően olvashatóak.

Konkrét tanács: a legkönnyebben olvasható betűtípusok az Inter, Open Sans, Poppins, Source Sans Pro. Az ideális betűméret az olvasáshoz függ a célcsoportodtól, de 18-26-os méret között van, a sor pedig ne legyen hosszabb, mint 80 karakter, mert bár a hosszú sorokat gyorsabban olvassák az emberek, a rövid sorok olvasása kényelmesebb és mivel összességében kevesebb szöveg is látszik a képernyőn, sokkal nagyobb valószínűséggel kezdenek bele a tartalom fogyasztásába.

A legjobban olvasható betűtípusok

[/vc_column_text][/vc_column][/vc_row][vc_row rc_bg_type=”color” rc_bg_color=”#f7f7f7″][vc_column][vc_column_text]

2. Színek

Gondos választást követően használd a színeket limitáltan, ugyanakkor hatékonyan. A színek hatással vannak az érzelmekre és a tudatalattira is. A túl sok szín nyomasztó lehet, különösen kis képernyőkön, valamint túlterhelheti a felhasználókat (ezt hívják szaknyelven kognitív load-nak), továbbá eltereli figyelmüket a fontos információkról.

Próbálj csak két vagy három színt használni elemenként, hogy kifinomultabb megjelenést hozz létre. A színhasználat nem csak a UI design szempontjából fontos – egyben hatékony eszköze a márka üzenetének kommunikálásához és a márkaismertség megteremtéséhez. Továbbá, a színek felelős használata a felhasználói felületen javíthatja weboldalad általános megjelenését és a hangulatát is.

A színek használata mellett ügyelj arra, hogy a színek alkalmazása a tipográfiával, a rácsmintázatokkal és más design elemekkel egységet alkosson. Mielőtt új színeket adnál hozzá a színpalettádhoz, győződj meg róla, hogy feltétlenül szükseged van-e rá, mert megbonthatja a UI design összképét. Tanulmányozd át a színek jelentését és használd a célszegmensednek és a márkának megfelelő színeket.

Konkrét tanács: Ezen a linken találsz egy ingyenesen használható színpaletta generátort. Előregyártott palettákkal és sajáttal is dolgozhatsz – érdemes vele eljátszani, ennyit megér a UI design harmóniájának megteremtése.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

3. Színek, grafikai elemek és képek kapcsolata

A UI design során használj relatív méretet és színkontrasztot a fontos elemek és információk közvetítésére. A nagyobb méretű és élénkebb színű elemek és szövegek jobban felkeltik a figyelmet, mint a semleges színekkel rendelkező kisebb méretűek. A szabályos geometriai formákat jobban érzékeljük, mint a szabálytalanokat. Ezenkívül minden mozgás, például animált effektek vagy videók, több figyelmet vonzanak, mint a statikus elemek, továbbá interakcióra késztetik a felhasználót és arra, hogy figyelemmel kísérje az ott megjelenő információt.

Konkrét tanács: Tanulmányok szerint az emberek 38%-a 5 másodpercen belül elhagyja a weboldalt, ha a tartalom, az elrendezés vagy a teljes UI design nem vonzó számukra; beleértve az olvashatóságot és könnyű navigációt is.[/vc_column_text][/vc_column][/vc_row][vc_row rc_bg_type=”color” rc_bg_color=”#f7f7f7″][vc_column][vc_column_text]

4. Hatékony térközhasználat

A fehér tér, más néven negatív tér, vagy white space létfontosságú eszköz a user interface design eszköztárában. Használd annak közvetítésére, hogy mely elemek tartoznak össze és melyek különböznek egymástól. A közelség azt jelenti, hogy az elemek kapcsolatban állnak egymással. Továbbá, ha több negatív teret adsz hozzá egy elemhez, akkor az kiemelkedik, és több figyelmet vonz. A fehér tér nagyszerű eszköz arra, hogy a tekintetet a lényeges elemek felé irányítsa.

Konkrét tanács: A szövegekben is használd a sortörést a nagy szövegtömbök felosztására és kifinomultabb megjelenés létrehozására. A túl sok szöveg nyomasztó és nehezen olvasható. Próbálj meg nagyobb térközöket használni a bekezdések között, vagy válaszd el a különböző típusú tartalmakat szegéllyel, vagy esetleg kis kontraszttal bíró háttérrel – ahogyan ebben a cikkben, vagy az alábbi képen is látod.

Hatékony térközhasználat

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

5. Kiváló minőségű képek, grafikai elemek

Minden jó UI design alapja a kiváló minőségű, nem pixeles, egyedi mondanivalóval bíró képek használata, amelyek bármilyen méretben jól mutatnak és arra is alkalmasak, hogy az őrületbe kergesd velük a letöltési sebességért aggódó SEO szakértődet…

A képek fontos szerepet játszanak az információk közvetítésében, így kulcsfontosságú, hogy megfelelően nézzenek ki nagy és minimális méretre kicsinyített állapotban is, tehát egy nagy képernyőn és különböző méretű mobil eszközökön is – ezt hívjuk reszponzív tervezésnek. Győződj meg arról is, hogy a képek megfelelően vannak vágva és elég nagy felbontásúak, hogy minden eszközön élesen jelenjenek meg.

Konkrét tanács: nem biztos, hogy ugyanaz a kép fog jól mutatni mobilon és asztali gépen is. Nem ördögtől való két külön kivágást csinálni, és a képernyőméretnek megfelelően megjeleníteni a képeket.[/vc_column_text][/vc_column][/vc_row][vc_row rc_bg_type=”color” rc_bg_color=”#f7f7f7″][vc_column][vc_column_text]

6. Kerüld a túl sok kép használatát

Az egyik legrosszabb dolog, amit a UI design során tehetsz, ha túl sok képet használsz. A több kép használata nemcsak lelassítja az oldalak betöltési idejét, hanem értelmezhetetlen kavalkádot is generálnak a felhasználó számára. Próbálj meg ragaszkodni néhány jó minőségű képhez, ha pedig tényleg sok képre van szükséged, akkor azt kattintható galériában, vagy lightbox-ban mutasd meg.

Ellenőrizd a fájlok kiterjesztését, ugyanis a .png fájlok mérete általában nagyobb, illetve webes használathoz érdemes átgondolni milyen formátumban töltöd fel a képeket. Ma már érdemes WebP-ben, SVG-ben, vagy más fejlett formátumban gondolkodni és elszakadni a dicső múltat idéző jpg-png párostól. Ne feledd: az oldal betöltési sebességének mérhető hatása van a konverziós arányra. Tanulmányok kimutatták, hogy a gyors oldalsebesség jobb konverziós arányt eredményez.

Milyen gyorsan kellene betöltenie egy weboldalnak? A skilled.co szerint

az ügyfelek 47%-a arra számít, hogy egy weboldal 2 másodpercen belül vagy kevesebb idő alatt töltődik be.

Ezért törekedj arra, hogy 0-3 másodperc között legyen az oldalbetöltési sebesség. Ugyanis azok az oldalak, amelyek átlag 2,4 másodperc alatt töltenek be 1,9%-os konverzós arányt mutatnak, míg azok, amelyek 4,2 másodperc alatt, azok konverziós aránya 1% alá esik.

Csak hogy ne maradjon kétség: igen, közel duplázni lehet egy webshop árbevételét ezzel az egyetlen fogással!

Amelyik weboldal pedig 5,7 vagy több másodperc alatt tölt be, ott a konverziós arány 0,6% alá is csökkenhet.

Konkrét tanács: Érdemes odafigyelni, hogy mennyi és mekkora méretű képeket, és videókat tartalmaz a weboldalad. Ha csak lehet, használj CDN-t is az oldaladon.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

7. Teszteld különböző eszközökön

Teszteld a UI deisgn kinézetét különböző eszközökön (asztali és mobileszközön egyaránt), hogy minden platformon megfelelően nézzen ki. Nem minden eszköz egyforma, ezért a szélesebb közönség vonzásához elengedhetetlen, hogy a design mindegyiken jól nézzen ki. Teszteld a felhasználói felület kialakítását különböző böngészőkben és különböző típusú képernyőkön is, hogy minden tökéletes legyen, amikor a felhasználók működés közben látják.

A reszponzív UI design alapjai

Konkrét tanács: Mobilon a betöltődési sebesség – ha lehet – még fontosabb. Ellenőrizd a Google Search Console-ban, hogy megfelelőnek látja-e a kereső a weboldalad mobil böngészési élményét.[/vc_column_text][/vc_column][/vc_row][vc_row rc_bg_type=”color” rc_bg_color=”#f7f7f7″][vc_column][vc_column_text]

8. Használd bölcsen a figyelemfelhívó feliratokat

Használd bölcsen szavaid: a megfelelő hangsúly és üzenet magasabb konverziós arányt mutatnak (Nem vagy még otthon a konverzióban? Tudj meg többet online szótárunkból!). Ezért gondoskodni kell arról, hogy olyan szavakat használj, amelyek megfelelnek a céged által hordozott üzenetnek.

Amennyiben okosan és körültekintően alkalmazod az értesítéseket, a felhasználók nagyobb valószínűséggel tudnak azonosulni a képernyőn leírtakkal. Győződj meg róla, hogy ismered és érted a célközönséget, aki felé kommunikálsz, ellenőrizd, hogy megfelelő-e a használt nyelvezet, a szövegközi kiemelések, továbbá hogy alaposan megvizsgáltad az adatokat, amire üzeneted alapoztad.

A sweor.com adatai szerint

a felhasználók 5,59 másodpercet töltenek a weboldal főoldalán található írott anyag tanumányozásával.

Nem túl sok, igaz? Pontosan ezért kell nagyon meggondolni, hogy milyen formában és milyen üzenetet szeretnénk közvetíteni a célcsoportunknak.

Konkrét tanács: A főoldalra általában valamilyen belső oldalról, termékoldalról jutnak az emberek – ellentétben a laikus hiedelemmel, hogy mindig, mindenki ott fog kezdeni. Éppen ezért rövid, tömör, megerősítő-jellegű, benefit-driven kommunikációra kell törekedned, nem pedig arra, hogy a dinoszauruszoktól kezdve elmeséld a történetedet.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

9. Győződj meg arról, hogy minden elem kattintható

A felhasználók számára elsődleges cél, hogy könnyen navigálhassanak a felhasználói felületen, és interakcióba lépjenek a webhelyen található tartalommal. Bizonyosodj meg arról, hogy minden gomb és hivatkozás kattintható, hogy a felhasználók könnyen aktiválhassák őket.

Ellenőrizd, hogy ezek egyértelműek és könnyen elérhetőek, hogy a felhasználóknak ne kelljen keresgélniük. A felhasználók tudni akarják, milyen műveleteket kell tenniük ahhoz, hogy interakcióba lépjenek a felhasználói felülettel. Győződj meg arról is, hogy minden gomb reszponzívan is megfelelően működik-e, mert azok a használt eszköztől függően változhatnak.

Konkrét tanács: Tanulmányok szerint az internetet használók 57%-ka nem ajánl olyan vállakozást, amelynek webhelye nincs optimalizálva, nem reszponzív és a különböző eszközökön rosszul van kialakítva, különösen a mobileszközök esetében. Mivel a felhasználók számára ez kényelmetlenséget okoz, ezért rossz emléket idéz bennük, aminek okán nem ajánlják tovább a vállalkozást.[/vc_column_text][/vc_column][/vc_row][vc_row rc_bg_type=”color” rc_bg_color=”#f7f7f7″][vc_column][vc_column_text]

10. Navigare necesse est

…vivere non est necesse; Azaz navigálni muszáj, élni nem az. Már a rómaiak is felismerték az egyszerű dolgok hatékonyságában rejlő erőt. A mai látogatók pedig jóval türelmetlenebbek, mint a rómaiak, ezért gyorsan és egyszerűen szeretnének navigálni a felhasználói felületen. A navigációs menük ezért legyenek egyszerűek és intuitívak, egyszerre csak a legfontosabb hivatkozások legyenek láthatóak.

A navigáció az eszköz a felhasználók számára a tartalomelemek és funkciók megtalálásához. A navigáció kéz a kézben jár a tartalomszerkezettel, és mindig tükröznie kell a kategória-hierarchiát, ellenkező esetben a felhasználó összezavarodik, frusztrált lesz és elhagyja az oldalt.

Ezenkívül a navigációs területeknek mindig jól láthatónak kell lenniük asztali számítógépen és mobileszközön egyaránt. Ha összetett tartalomszerkezettel rendelkezel mobileszközön, kombinálhatod az elsődleges navigációs elemeket a fontos kategóriákhoz és a másodlagos menüket a többi elemhez.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

11. Minimalizálj

A rendetlenség gyorsan átveheti az uralmat a felhasználói felületen, és megnehezítheti a felhasználók számára, hogy megtalálják, amit keresnek. Rejtsd el a szükségtelen elemeket (például hirdetéseket vagy közösségi média linkjeit), a szükségtelen képeket és elemeket töröld ki, illetve optimalizáld a tartalmat mobileszközökre is.

Konkrét tanács: Gondold át, hogy a megjelenített elemekre feltétlen szükség van-e mobilon is, vagy csak zavarják a felhasználókat, de információt nem hordoznak számukra sem a márkával sem a mondanivalóval kapcsolatban.[/vc_column_text][/vc_column][/vc_row][vc_row rc_bg_type=”color” rc_bg_color=”#f7f7f7″][vc_column][vc_column_text]

12. Hierarchia és rendszer

Próbálj meg megfelelő hierarchiát és tagolást alkalmazni a tervezés során, hogy a fontos tartalom könnyen látható legyen. Minden téma logikai kategóriákba és alkategóriákba sorolható – vagy ha nem, hát szükséged van egy nagyon profi szűrő-rendszerre. Ezeknek a kategóriáknak ismerősnek kell lenniük, és meg kell felelniük a felhasználó elvárásainak.

A felhasználók számára érthető struktúra, vagy intuitív szűrő segíti a gyorsabb navigálást és a fontos információk megtalálását. A kategóriák a felhasználók számára is eltérő jelentőséggel bírnak. Például egy híralkalmazás ugyanazt a logikát követné, mint a TV-közvetítés, így a legfrissebb hírek jelennének meg először, a sporthírek pedig utoljára.

Konkrét tanács: Ha korlátozott a helyed, különösen a mobilképernyőkön, nagyon fontos, hogy a legfontosabb tartalmat a tartalomszerkezet fölé helyezd, hogy ne kelljen hosszú utat bejárnia a felhasználónak, hogy az információkat kiszűrjék. A Google szerint a felhasználók 61%-a valószínűleg nem tér vissza egy weboldalra, ha problémába ütközik a hozzáféréssel, 40%-uk pedig inkább egy versenytárs oldalát keresi fel.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

+1 Tervezés elsősorban mobilra

Az okostelefonok mindenütt jelen vannak, és világszerte közel 4,7 milliárd felhasználó böngészi a netet mobil eszközökről. A mobilos oldalletöltések a globális webhelyforgalom több mint felét teszik ki 2019 harmadik negyedéve óta. Az okostelefonoknak azonban vannak fizikai korlátai: a képernyőjük kicsi, a megjeleníthető információ mennyisége korlátozott, a látogatók pedig ennek (és a megannyi push notification-nek köszönhetően) nagyon könnyen elveszítik a fókuszt.

Ezért a tervezőknek alkalmazkodniuk kell ezekhez az adottságokhoz és a UI design során jól szervezett tartalomstruktúrát kell felépíteniük világos prioritásokkal. A fontos tartalmaknak és funkcióknak azonnal elérhetőnek kell lenniük. Minden más elhelyezkedhet az alatta lévő rétegekben.

Következtetés

Remélem, hogy a tippjeim némi betekintést és új ötleteket adtak számodra a UI design újragondolásához, vagy meglévő felhasználói felületed fejlesztéséhez. Manapság már a minimális számítógépes ismeretekkel rendelkezők is használják a netet keresésre, hírolvasásra, közösségi média böngészésére. A jó UI design ezeknek a nagy forgalmú oldalaknak köszönhetően mainstream lett, így te sem engedhetsz meg magadnak felejthető kinézetet, az ugyanis konkértan pénzt húz ki a zsebedből – de legalább nap, mint nap!

Amennyiben úgy gondolod, hogy hasznos volt a cikk, kérlek küldd el valakinek, akire ráférne, vagy bízd a véletlenre és nyomd meg a megosztás gombok valamelyikét, hogy pár év múlva már ne kelljen használhatatlan oldalakat nézegetned! Vélemények, kérdések a komment mezőben bátorítva![/vc_column_text][/vc_column][/vc_row]

April 10, 2023
A kiváló webdizájn 10 alapszabálya

[vc_row][vc_column][vc_column_text]

Trendek jönnek, trendek mennek, de a kiváló dizájn ismérvei nem nagyon változnak. Nincs ez másképp a dizájn egyik legfiatalabb ágával, a webdizájn területével sem.

A webdizájn definícióját hajlamosak vagyunk a különböző honlapok vizuális megjelenésére korlátozni.

A kifejezés azonban jóval többet takar, és egy egész – mérnökökből, fejlesztőkből, tervezőkből, grafikusokból – álló csapat felelős érte. A webdizájner nem csupán a külcsínnel foglalkozik, és nem is foglalkozhat kizárólag azzal, hiszen a webdizájnról is, mint a dizájn bármelyik másik ágáról elmondható, hogy a vizuális megjelenés csak a jéghegy csúcsa.

A webdizájn bizonyos kritériumai a technológia gyors fejlődésével hamar elavulnak, így nehéz velük kapcsolatban örökérvényű igazságokat felállítani. Mivel azonban a webre való tervezés alapjai a kreatív tervezés minden ágára igaz normákból következnek, elmondhatunk néhány időtállóbb alapvetést, nézzük, mik ezek!

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”21871″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

0. Felejtsd el a palackpostát! Pontosan tudd, kinek tervezel, mit és miért

Egy lakatlan szigetről palackpostával legfeljebb egy üzenetet tudsz kijuttatni, és valószínűleg ennek sem lesz sok haszna: hiszen magad sem tudod, hol vagy, nem tudod, kinek üzensz, és hol van az, akihez beszélni próbálsz.

Minden tervezési folyamat alapköve, hogy tervezőként tisztában legyél azzal, hogy kinek tervezel, mit és miért. Ezt semmilyen esetben nem lehet megspórolni. Pontosan tudnod kell, kit akarsz megszólítani, úgy kell ismerned a célcsoportodat és a nekik szánt üzenetet, akár a tenyeredet.

(Eddig egyszerű, ugye?)[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”21872″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

1. Az első lépéseket egy felfedező óvatosságával tedd meg

Tegyük fel, hogy jól céloztál, jó áramlatba dobtad a palackodat, sőt, még az is halászta ki, akinek szántad. Kinyitja a palackot, széthajtogatja a papirost, arcára kiül az unalom, majd mérgesen félredobja a lapot: már megint ugyanaz!

Előfordul, persze, hogy két tervező a világ két különböző pontján egy problémára ugyanazt a megoldást találja ki, de ezzel mindketten nagyon szerencsétlen helyzetbe kerülnek. Elkerülheted a plágiumgyanús véletlen egybeeséseket, ha a tervezés második lépéseként alapos kutatást végzel, és tüzetesen megvizsgálod a versenytársakat. Könnyebb is lesz egyedi megoldással előállni, ha pontosan tudod, mihez képest kell kitűnnöd.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column css=”.vc_custom_1537887962692{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: #eaeaea !important;border-left-color: #9b9b9b !important;border-left-style: solid !important;border-right-color: #9b9b9b !important;border-right-style: solid !important;border-top-color: #9b9b9b !important;border-top-style: solid !important;border-bottom-color: #9b9b9b !important;border-bottom-style: solid !important;}”][vc_column_text]

PRO infó: Segítségedre lehetnek a webdizájn kezdeti lépéseiben a keresőmotorok és az online portfólióoldalak, például a Béhance, a The Dots, a Dribbble. Miközben kutatsz, jegyzetelj is! Készíts vizuális listát az inspiráló pozitív és negatív példákkal. Szuper eszköz lehet erre a Google Keep vagy a Milanote.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”21873″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

2. Alap nélkül nincsen ház: struktúra, struktúra, struktúra!

Képzeld el, hogy felépíted álmaid házát egy erdő szélén vagy valahol az Antillákon. Kezedben a kulcs, beköltözöl, felakasztod a falakra a kedvenc képeidet, és azt gondolod, immár boldogan élsz, amíg meg nem halsz. Ám rövidesen olyan helyzetben találod magad, mint Tom Hanks a Pénznyelő című filmben: álmaid házának falai repedezni kezdenek, egyik kisebb beomlás a másikat követi, míg végül a fejedre omlik kacsalábon forgó palotád – mert nem építettél rendes alapokat.

Minden jó webdizájn az alaposan átgondolt szerkezettel kezdődik.

Egy tökéletességig cizellált UX-ből, kifogástalan user journey-ből álló alapokra kell építkezned.

Nem lehet eléggé hangsúlyozni a drótvázak (wireframe-ek), vagyis a UX tervezés fontosságát. Ez a szerkezet lesz a házad alapja, ez fogja kijelölni a falakat és a köztük lévő szobákat, amiket majd megtölthetsz tartalommal. Drótvázazásra használhatod az ingyenesen elérhető Adobe XD-t, például.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22119″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

3. Gondolj Jancsira és Juliskára! Tiszta navigáció.

Oké, megvan a házad, nem omlik össze. De hogy éreznéd magad, ha az egyik ajtón belépve olyan szobába érnél, ahonnan nincs kiút? Hogy éreznéd magad, ha elindulnál az erdőben, de a madarak felcsipegetnék mögötted az elszórt kenyérmorzsát, és nem találnál vissza?

Megjegyzés: breadcrumbs-nak, vagyis kenyérmorzsá(k)nak hívja a webdizájn azokat az elemeket, amelyek a tájékozódást, navigációt segítik. Ilyen például az aktív menüpontok színének megváltozása, a „vissza a tetejére” gombok, a már megnyitott linkek megváltozó színe, stb.)

A tervezés során soha nem veszítheted szem elől azt, akinek tervezel. Időről-időre ki kell lépned a tervezői szerepedből, és a felhasználó szemén át nézni a tervedet. Ez elég nehéz feladat, nem kell azonban varázslónak lenned: a webre való tervezés hatalmas előnye, hogy gyors és számszerűsíthető feedbacket kaphatsz arról, hogy a látogatóid hol jártak, mit néztek az oldaladon és meddig, vagy hol tévedtek el. Tesztelj!

Egy alapjaiban jó, de csiszolatlan dizájnt legkönnyebben A/B teszteléssel optimalizálhatod lépésről-lépésre. A Google Optimize segítségével kisebb változtatásokat a fejlesztő ugráltatása nélkül, magad is megtehetsz. Sőt, vannak eszközök, amikkel már a prototípusokat is tesztelheted, ilyen például a Maze.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22067″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

4. Mutass jól minden eszközön

A palackpostával könnyű: csak ráfirkantod az üzenetet egy fecnire, ami épp a kezedbe került, és úgy érkezik meg a megmentődhöz, ahogy a kezedből kiadtad. Ezzel szemben a webdizájn egyik legnagyobb kihívása, hogy a világ elképzelhető összes képernyőjén jól kell kinéznie annak, amit terveztél.

A legújabb statisztikák szerint a világ internet-forgalmának 50%-át mobilon bonyolítják le (Ázsiában és Afrikában ez az arány még nagyobb.) Nem kockáztathatod a lehetséges konverziókat azzal, hogy a felhasználónak zoomolgatnia kelljen az oldalon. Biztosan találkoztál már ilyennel. Elég idegesítő.

Másrészt, a mobilbarát oldalak régóta (a mobilegeddon óta) előnyt élveznek a keresőmotorokban. Tesztelheted az oldalad mobilbarátságát a Google eszközével, de nem tudod megspórolni, hogy a különböző felbontású és képarányú képernyőkön, illetve a különféle böngészőkben való megjelenést modellezd. A Chrome fejlesztői eszközei között a „Toggle Device Toolbar” nagy segítségedre lehet, főleg, ha párosítod a legnépszerűbb eszközök képarányait és felbontását mutató listával, például ezzel.

Miután a webre való tervezés során sokszor kell illeszkednünk különféle keretrendszerekbe, például a social media felületeire, érdemes tisztában lenni az aktuális elvárásokkal a képméreteket tekintve. Illetve azzal, hogy ezek a keretrendszerek a reszponzivitás érdekében az egyes képeket különféleképpen vágják a megfelelő méretre. Érdemes tájékozódni, hogy melyek azok a területek, amelyek a legtöbb felületen biztosan látszódni fognak. (Ezek az ún. safe area-k.)

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22069″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

5. Legyél gyors

Úgy tudod a legkönnyebben elriasztani a lehetséges ügyfeleidet, ha az oldalad nem töltődik be elég gyorsan.

Ennek elkerülése érdekében ne használj feleslegesen sok és feleslegesen nagy felbontású képet, videót, animációt, és amit használsz, mindig optimalizáld a reszponzivitásnak megfelelően! Ezzel az eszközzel például villámgyorsan vághatod és tömörítheted a grided töréspontjaihoz igazítva a képeket, de a Tinypng pandája is sok-sok kilobájtot tud neked spórolni.

Ha tutira akarsz menni, akkor a Photoshop ”Save for web” ablakában egymás melletti nézőképeken ellenőrizheted a különböző méretű képfájlok megjelenítési minőségét.

A Google eszközével ellenőrizheted a betöltési sebességed, de akármilyen gyors is vagy, előfordulhat, hogy eltart néhány másodpercig, mire betölt egy-egy tartalmad. Mindig küldj vizuális visszajelzést a látogatódnak, hogy az oldal tölt. (Tiszta navigáció!) Az utóbbi időben a loading bar-ok különféle formáinál (amiktől – Luke Wroblewski szerint – az embernek az az érzése támad, hogy még lassabban telik az idő) jobban működnek az úgynevezett skeleton screen-ek: ezek megmutatják az oldal vázát, és már előre láthatod, hogy hová fog kerülni a várva-várt tartalom. Így működik például a Facebook news feedje is, de az E-flux journal nyitólapja is kifejezetten szép példája a skeleton screen-nek.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”21882″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

6. Gondolj Mondrianra! A gridrendszer

Ahhoz, hogy reszponzív oldalakat tervezhessünk, szükségünk van arra a strukturális hálóra, amit az ötvenes években a tipográfia nagy svájci mesterei fejlesztettek ki a Bauhaus, az orosz konstruktivisták és a De Stijl örökségére támaszkodva: a gridrendszerre.

A grid a grafikában egy olyan struktúra, amit a tervező annak érdekében szerkeszt meg különböző aránybeli megfontolások alapján, hogy a szövegek és képek halmazában következetes vizuális rendet teremtsen.

A webdizájn esetében a grid elsődleges jellemzője, hogy hány oszlopot használ (A 9, 12, 16 oszlop szélességű grid a legelterjedtebb, de itt is aranyszabály a mértékletesség: ne használj többet a szükségesnél!)

Fejlesztői és tervezői oldalról is a legkézenfekvőbb megoldás létező rendszereket használni (például ezt), pláne, ha irtózol a törtektől, hiszen a gridrendszer tiszta matek.

Már a drótvázazás során ki kell találnod a grid struktúráját, de a pixelpontos kidolgozásban rengeteget segítenek a kész PSD template-ek (például egy ilyen.) Haladóbb megoldás Photoshopban hozzáadni a dokumentumodhoz egy saját guide layout-ot.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22031″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

7. Biztos úr, hiszen zöld volt – színek és webdizájn

A színek hatalma vitathatatlan. Egy rosszul kiválasztott színskála el tudja buktatni a legjobb tervet is, de ha körültekintően és az első szabálynak megfelelően (pontosan tudod, kinek tervezel, mit és miért) választod ki a benne szereplő színeket, nem eshetsz hatalmas hibákba a színek kulturális beágyazottságával kapcsolatban, és az üzenetedet támogatni, nem pedig aláaknázni fogják az egyes színek pszichológiai hatásai.

Figyelembe kell venned azonban néhány földhözragadtabb szempontot is a színek kiválasztásánál: a megjelenítő eszközök sokféleségéből következik, hogy a különböző technológiát használó kijelzők különféleképpen jelenítik meg ugyanazt a színt, ráadásul a felhasználó egyéni beállításai (fényerő, kontraszt, esetleg a gyakran alkalmazott kékfény-szűrő alkalmazások) nagymértékben befolyásolják, hogy a néző milyen színt lát ahelyett, amit terveztél.

Gondolnod kell továbbá azokra a felhasználókra is, akik színérzékelési rendellenességben szenvednek. A leggyakoribb ilyen rendellenesség a piros és a zöld komplementer színpár felcserélése / nem érzékelése. Ezért egy fontos üzenetet, visszajelzést soha nem alapozhatunk kizárólag a színre, formával és verbális üzenettel is meg kell támogatnunk.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22121″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

8. Figyeld a betűk testbeszédét

Képzeld, a betűk is metakommunikálnak. Kialakulásuk több ezer éves története alatt az egyes típusokhoz kulturális beágyazottságukból adódóan rengeteg érzet, asszociáció tapadt, minden egyes betűtípus hordoz valamilyen, a kommunikációs funkciót meghaladó többletet. Ez a többlet, még ha elenyészőnek tűnik is a jelentősége, teljesen félreviheti az üzenetet, ezért nagyon fontos a betűtípusok körültekintő kiválasztása.

A webdizájn hőskorában nagy kihívást jelentett, hogy csak limitált mennyiségű „web safe fonttal” lehetett tervezni, amelyek biztosan minden számítógépen megtalálhatóak. Ma többnyire az úgynevezett web fontokat használjuk, ezeket az oldalad assetjei közé építheted, vagy egy külső kiszolgálótól hívhatod le (pl. Google Fonts, Typekit), – utóbbinak egyetlen hátránya, hogy növelheti az oldal betöltési sebességét. Ebből következik a szabály, hogy 3-4 típusnál többet ne tervezz egy oldalra, ami nem mellesleg esztétikai szempontból is betartandó!

A képernyőre való tervezés másik, technikai szempontból elavultnak tekinthető szabálya, hogy nem szerencsés talpas betűket használni a hosszabb szövegek, bekezdések megjelenítésére, legfeljebb címekhez, alcímekhez. Ez abból következik, hogy az apró betűtalpak könnyen az olvashatóság rovására mennek a rosszabb felbontású képernyőkön. (Igaz, ez a hatás a betű méretének növelésével csökken.)

A technológia fejlődésével azonban már nem annyira releváns, inkább megszokottá vált, hogy a hosszabb szövegeket talp nélküli betűkkel szedjük. Másrészt, a talp nélküli betűt, amit a 19. század elején kereskedelmi célok hívtak életre, sokkal modernebbnek érzékeljük, ezért többnyire úgy tűnik, inkább van helye az internet világában. Természetesen a talpas betűt sem kell kiírtani a netről, néhány helyzetben kifejezetten jó választás, hiszen a talpas betű időtlen eleganciát sugall, jól jöhet például egy ékszerüzlet honlapján.

A kézírást imitáló típusokkal viszont tényleg csínján kell bánni, ezekkel soha ne szedjünk hosszabb paragrafust.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22070″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

9. A kevesebb (mindig) több. Lődd ki a horror vacuit

Képzeld el, hogy a már emlegetett álmaid házát telezsúfolod szebbnél szebb dizájn kuriózumokkal. A gyönyörű és méregdrága Breuer Marcell-széked egyáltalán nem fog érvényesülni, ha át kell rajta verekedned magad a konyhába vezető úton. A negatív tér, amit whitespace-nek is szoktunk hívni, ugyanolyan fontos (ha nem fontosabb) mint a „hasznos tér”, és ha ügyesen bánsz vele, jó barátoddá válik.

Ha betartod a második szabályt, és első lépésben egy kifogástalan struktúrát alakítasz ki, amihez aztán fegyelmezetten tartod magad, elkerülheted azt a hibát, hogy felesleges információkkal áraszd el a felhasználókat. Könnyen elveszítheted valaki figyelmét, ha túlzottan sok vizuális (vagy verbális!) üzenetet akarsz ráterhelni. (Nem mellesleg az oldal betöltési sebességének sem tesz jót.) Ami egy középkori kódexlapon lenyűgözőnek tűnik, azt a webdizájn nem igazán viseli el.

10. Lásd a trendek mögött a lényeget

Mindig lesz valami, ami az újdonságával, szokatlanságával, szépségével lenyűgöz, és elfelejtesz a rózsaszín cukormáz alá nézni, elfelejted lehámozni a filtereket, elfelejted megkérdezni, hogy az a gyönyörű, zöld fagyi milyen ízű (spenótos vagy kivis?)

A trendeket ismerni kell, de önmagukban nem érnek semmit: ha nem alkalmazod körültekintően a megoldásaikat, csak légvárakat építesz. (Ezekben pedig, alapok nélkül, tudod, a Pénznyelőben élsz, hiába van melletted a gyönyörű Shelley Long.) Mindig légy következetes, gondolj a dizájn halhatatlan iskolájának, a Bauhausnak nagy mestereire, akik szerint elsődleges a funkció, és abból deriválódik a megjelenés!

[/vc_column_text][/vc_column][/vc_row]

October 24, 2018
Webdesign, ami bevételt is termel – A UX tervezés 7 trükkje

[vc_row][vc_column][vc_column_text]

A UX tervezés (User Experience Design) előretörése vitathatatlanul az egyik legjobb dolog, ami valaha a webdesign világával és a weben megcélzott vásárlóval történt – bár nem esztétikai szempontok kényszerítették ki. A megfelelő UX-szel felépített üzleti weboldalak ugyanis pénzt termelnek, míg más oldalak – hiába szépek és esztétikusak – valahogy csak nem hoznak a konyhára.

Nézzük meg, hogy mire érdemes figyelni és milyen játékszabályokat kell betartani, ha egy weboldal vagy landing page megvalósítására készülsz – ugyanis az, hogy szép, az üzletileg nem lesz elég! Pszichológiai trükkökről már írtunk részletesen, itt most inkább arról lesz szó, hogy hogyan néz ki egy olyan ux tervezés folyamata, amelynek eredményeképpen a weboldalad messze kiemelkedhet majd a versenytársak közül a posztmodern kor kalandos marketing-játszóterén…

Az alábbi 7 pont betartásával még a nagy versenyt támasztó, zsúfolt piacokon is sikereket fogsz tudni elérni, növelni tudod a konverziós arányt és csökkenteni a visszafordulást (bounce rate).

Mi az az UX tervezés, és miért olyan fontos?

A felhasználói élmény tervezéséről (UX – User Experience design) lényegében bármilyen termék kapcsán beszélhetünk, legtöbbször azonban mégis online marketing funnel-ek, applikációk és weboldalak kapcsán botlunk a kifejezésbe. Az elmúlt évtizedek egyik legnagyobb marketing-tanulságára alapozva a UX tervezés abból az alapvetésből tört a csúcsra, hogy a fókusz többé már nem a terméken magán, sokkal inkább a fogyasztón, a fogyasztó problémáin van, és azon, hogy egy adott termék miként képes erre a problémára megoldást nyújtani.

A UX tervezés a webdesignban ugyanezen az elven működik, – a weboldalad is egy termék, ami minél magasabb szinten elégíti ki a felhasználók elvárásait, annál nagyobb volumennel segít értékesíteni a célterméked/szolgáltatásod. Az pedig elég fontos, hogy a felhasználóid kellőképpen fontosnak érezzék magukat, hiszen

a felhasználók 68%-a azért nem konvertál végül, mert úgy érzi, nem foglalkoznak vele eléggé.

Az élményközpontú tervezés fő motivációi egyrészt a valódi érték közvetítése, másrészt a létező problémákra adható lehető legokosabb megoldás megtalálása. A “jó tett helyébe jót várj” elve tökéletesen működik itt, hiszen az ilyen termékek/szolgáltatások nemcsak vásárlói lojalitást eredményeznek, de sokszor a legértékesebb marketing eszközt, a szájról-szájra terjedő reklámot/ajánlásokat is a vásárlók életét megkönnyítő perfekcionizmusnak köszönhetjük.

A sikeres UX tervezés receptje tehát az, hogy olyan terméked és weboldalad legyen, amely valós problémára találja meg a lehető legokosabb, legpraktikusabb, legletisztultabb (egyszóval legnagyobb “élvezeti értékkel” bíró) megoldásokat. De bármit is tervezel, a legeslegelső szabállyal kezdj; tökéletesen ismerd meg azt, akinek a termékedet szánod.

1. Ismerd azt, akinek tervezel!

Az UX tervezés első lépéseként mindenképpen időt kell szentelned a jövőbeli felhasználóid megismerésére.

A célcsoport modellezése ún. perszónákból kialakított fiktív portfólió létrehozásával történik. A leghúsbavágóbb kérdések, amelyekre a célcsoportod megismeréséhez minenképpen választ kell kapnod:

Kik fogják használni a terméket? Mekkora az átlag életkoruk? Mi a szakmájuk? Mikor használnák és milyen problémára nyújt megoldást a termék? Mi a motivációjuk? Van-e problématudatuk? Milyen lehetséges kifogásaik lehetnek a termékkel kapcsolatban?

A ux tervezés során feltett kérdésekre kapott válaszok segítenek meghatározni az oldal(ak) logikai felépítését, tartalmát, hangnemét és stílusát. Ha időt szánsz arra, hogy megértsd, hogyan gondolkoznak és reagálnak a jövőbeli felhasználóid, akkor fogsz tudni igazán ütőképes weboldalt vagy appot készíteni.

Készíts a perszónákról táblázatot, ahol összegzed az adott perszónákra vonatkozó adatokat!

2. Használd ki a pszichológia alaptörvényeit

Egy online felület rengeteg, lényegében végtelenül sokféleképpen kombinálható összetevőből áll. Használhatsz képeket, animációkat, illusztrációkat, videót, és persze itt vannak még a gombok és egyéb CTA-k, színhasználat, betűkészlet, szöveges tartalmak, kiemelés, alacsony kontrasztú elemek. A kívánt hatás (többnyire vásárlás, esetleg valamilyen soft konverzió) elérése érdekében minden elemet tökéletesen össze kell hangolni a többivel a ux tervezés során. Érdemes olyan alapelvek szerint rendezni a tartalmakat, amiről nagy eséllyel tudjuk, hogy a legpozitívabb hatást fogja kiváltani a felhasználóban. Itt jön képbe a pszichológia. Nézzük, mik azok az elméletek, amelyek minden projektben alkalmazhatóak!

Gestalt elmélet: a gestaltpszichológia (azaz alaklélektan) UX tervezésben való alkalmazása elsősorban a tartalom-elhelyezésben kap kiemelkedő szerepet: az emberi észlelés szabályszerűségeit veszi alapul a webdesign területén is, az egész és a részek közötti hierarchia vizsgálata révén. A tervezés során fontos tudnod, hogy a különböző grafikai elemek, színek, szövegdobozok elhelyezése és egymás mellé rendelése miként fog hatni a látogatóra, milyen érzelmeket vált ki, hogyan tehető könnyen fogyaszthatóvá akár egy terjedelmesebb weboldal is. A leggyakrabban használt alapelvei a közelség elve, a hasonlóság elve és a zártság elve.

Hick’s elmélet: Lényegében azt állítja, hogy a választási lehetőségek számától függ az az idő, amit a felhasználó választással tölt el. Minél több a választás, annál több idő telik el és annál kisebb eséllyel fog végül pozitív lezárást kapni a folyamatunk – ennek landing oldalaknál van óriási jelentőségea ux tervezés gyakorlatát tekitve. Ezért érdemes úgy terveznünk, hogy minél kevesebb választási opció elé állítsuk a felhasználóinkat a folyamat egy adott fázisán belül.

A Von Restorff elméletet alkalmazzuk, amikor szeretnénk elérni, hogy egy adott elemre emlékezzenek a felhasználók. Amikor sok homogén elem kerül a felhasználó elé, arra az elemre fog legjobban emlékezni, amelyik a legnagyobb mértékben tér el az átlagtól. Egy ilyen apró trükk megfelelő alkalmazásával (pl. CTA elhelyezés és színezés) nagy arányú konverziónövekedést is elérhetsz.

Használd a vonatkozó pszichológiai elméleteket az UX tervezés során, és vezesd a felhasználóidat!

3. Milyen a jó user interface (UI)? Leginkább letisztult

…és közérthető! Az elmúlt évek dizájntrendjeinek koronázatlan királyai a minimal és a flat webdesign. Népszerűségüket a könnyen emészthető és átlátható, jól strukturált tartalmi felépítésnek köszönhetik.

Természetesen ez nem azt jelenti, hogy mindig minimal vagy flat dizájnt kell alkalmaznod, csak tanulj az irányvonalak jól működő megoldásaiból és alkalmazd a saját projektednél. A jó dizájnt nem kell magyarázni, a tartalma egyszerűen értelmezhető, nem tántorítja el a júzert felesleges interakciókkal és a folyamat végén nem hagy bennük kétséget.

Érdemes észben tartani, hogy a letisztult tervezés, a lényegretörő, könnyen olvasható szöveges tartalom mind-mind időt és energiát spórol a felhasználóidnak, ami magasabb konverzió formájában köszön vissza.

Az egyik fontos irányadó pont a vizuális hierarchia kialakítása (méretek, színek, headerek, ikonok tudatos rendezése és használata), de idetartozik a könnyen használható navigáció, az új felhasználók tájékozódásának elősegítése, vagy épp a gördülékeny check-out folyamataid felépítése is. A letisztult UI titka az alapos UX tervezés; a folyamattervezés szakaszában ne felejts el részletes drótvázakat készíteni, eltervezni az oldal felépítését, és a már elkészült drótvázakat még a pixelpontos dizájn előtt valós személyeken tesztelni. Rengeteg időt spórolhatsz vele.

A pixelpontos dizájn tervezése előtt készíts drótvázakat, hogy a weboldalad ne csak szép, de átgondolt és könnyen használható is legyen!

4. Soha ne kamuzz!

Talán az egyik legfontosabb szabály a UX tervezés során, hogy soha ne hazudj a felhasználóknak, és ne próbálj sumákolni. Az egyenes és őszinte kommunikáció – akár árral vagy termék/szolgáltatás tartalmával kapcsolatban, – mindig a legjobb választás, lépésről lépésre alapozza meg a bizalmat a fogyasztó és a brand között. Nincs az a webdesign, ami miatt bárki kattintana a vásárlás gombra anélkül, hogy tudná mit is vesz meg pontosan és mennyiért! És senki sem ajánl másnak olyan céget, aki egyszer már átverte, vagy megvezette őt.

Amellett, hogy a terméket/szolgáltatást tisztán, félrevezetésektől mentesen mutatod be, fontos, hogy saját céged imidzsét se hagyd ki az összképből. Adj meg minden olyan információt az oldalon, amely a cég hitelét növelheti a felhasználó szemében. Az online piacon sajnos rengeteg a csaló, így a felhasználókban egyre inkább kialakul egyfajta gyanakvás – ennek révén pedig egyre többen egyre okosabban szűrik meg, hogy kiben bízhatnak meg, így ezt a jelenséget a ux tervezés során muszáj figyelembe venni.

5. Használd az UX tervezés konvencióit!

Ahogy az UI-ban, úgy az UX dizájnban is vannak olyan jól bevált dizájn pattern-ek (minták), amiknek a használatával gyorsíthatunk a tervezési munkán. Így komolyabb erőfeszítések és tesztelés nélkül hozhatunk létre olyan felületeket, amiket a felhasználók már ismernek és szeretnek.

A UX tervezés során konvencióról beszélhetünk:

1. Interakció dizájn konvenciók: vannak olyan esetek, amikor a felhasználó interakcióba kényszerül a weboldallal / applikációval – ilyenkor érdemes egy már jól ismert módon megtervezned azt (kis kreativitás azért belefér). Egy jól megtervezett interakció (például drop down listák vagy on-off switchek megjelenítése és működésük) sokat javíthat a weboldalad használhatóságán, mert a felhasználónak nem okoz extra agymunkát a kezelési mód kitalálása.

2. IA (Information Architecture) konvenciók: azaz az egyes típusú (elsősorban szöveges és infomatív) tartalmakat hogyan, hol és mikor érdemes megjeleníteni a weboldalon.

3. Vizuális webdizájn konvenciók: a weboldal különböző elemeinek (például a navigációs blokk, a logó vagy a footer) elhelyezésére és a társított funkcióira már számtalanszor bevált megoldásokat alkalmazhatsz, ilyen szempontból sok jó template-ttel lehet összefutni a neten. Javasolt hero kép használata is az oldal elején, amellyel egy pillantás alatt közelebb hozhatjuk a felhasználót az oldal témájához, de ugyanilyen fontos a jól megválasztott CTA dizájn, hover állapotok, linkek stílusára vonatkozó konvenciók. Fontos szem előtt tartanunk a színek jelentéshordozó szerepét is (pl tiltó színek vs. megengedő színek). Tartalomrendezésnél pedig a gyakran használt irányelvek egyike a hármas tagolás.

Ha pedig attól félsz, hogy a weboldalad/applikációd „template szagú” lesz a sok pattern-től (mintától), akkor játssz egy kicsit többet, hass az érzelmekre! A UX tervezés során használj egyedi illusztrációkat, izgalmas mikro-interakciókat, animációkat, igazítsd a szövegezés stílusát a célcsoporthoz a fokozott élmény eléréséért – a spanyol viaszt viszont nem kell feltalálnod.

De ne feledd: egyik világklasszis termék (pl. facebook) sem a cuki animációk miatt lett sikeres, hanem mert működő, egyszerűen értelmezhető és szerethető megoldást kínál a felhasználók problémájára.

Vizsgálj meg pár konkurens weboldalt és tanulmányozd az UX trendeket. Mik az erősségeik? Mit érdemes adaptálni és mi az, amit rosszul csinálnak?

6. Maxold ki a reszponzivitást

Ma már nem az a kérdés a webdesign során, hogy tervezz-e mobilra (hiszen a tavalyi évben 63%-ra nőtt a teljes mobilos forgalom az asztali gépek 37%-ához képest!!) hanem az, hogy a weblap- és UX tervezés folyamatának melyik részébe illeszted majd be.

A legjobb módszer, hogy ha a mobilra való tervezés egy időben halad az asztali tervezéssel, vagy megelőzi azt. A dizájn kialakítása során számolj a reszponzív töréspontokkal, így könnyebben tervezhetsz fluid tartalmakat különböző felbontású és méretű kijelzőkre.

Használj grid system–eket! Segítséget jelenthetnek a reszponzív töréspontok meghatározásában, sávokra osztva a képernyőt. Átláthatóvá teszi a tartalmak elhelyezését, rendezését, hierarchiájának meghatározását egy sokkal következetesebb webdesign érdekében.

A grid systemek segítséget nyújthatnak neked az UX tervezés során

Mobilon nem muszáj minden elemet ugyanúgy megjeleníteni, mint desktop-on. A 7blog főoldala például mobil nézetben nem jelenít meg egy navigációs elemet – próbáld csak ki, amikor a cikk végére értél.

7. Tesztelj, használd, és jöjjenek a leadek!

A UX tervezés során szinte végtelen számú lehetőséged adódik (kvalitatív és kvantitatív egyaránt) tesztelésre. Különböző haladó analitikai platformok, heat map-ek, retention (rendszeresen visszatérő látogatók) arányát mérő rendszerek, user tesztek segítik tökéletesíteni a weboldaladat/applikációdat.

Mindezek mellett az egyik legütősebb fegyvered lehet a tökéletességért vívott harcban az A/B tesztelés, amellyel lényegében bármilyen típusú problémát tesztelhetsz, legyen az tematikai sorrend, kontextus, CTA dizájn és használat, szövegezés, képek stb. Egyszerre több verziót futtathatsz, azok külön-külön valós júzerek keze alatt futnak át majd érnek össze újra. A kapott eredményeket elemezve a gyakorlatban jobban működő megoldásokat alkalmazhatod. Egy fontos szabály van: ha valós eredményeket szeretnél, egyszerre csak egy módosítást tesztelj ugyanazon az oldalon.

Teszteld a weboldalad bevételeled növelése érdekében. Hasznos A/B testing tool-ok: pl. Google Optimize, vagy az Optimizely.

Webdesign marketinges szemmel

A UX tervezés fenti elveinek betartása megteremti az alapot, hogy az online marketinges kollégák még tovább tudják növelni az oldalad sikerességét a saját eszköztáruk bevetésével. Ha azonban a saját oldalad – ahol a konverzióknak, vásárlásoknak meg kellene történnie – alulteljesít, akkor azt a marketing eredménye is megsínyli lassabb eredmények és magasabb költés formájában.

Ezért ne nyugodj bele, hogy a weboldal vacak – állj neki az itt olvasott tanácsok alapján egy tényeken alapuló webdesign megvalósításának és csiszold tökéletesre – elvégre a vállalkozásod sikere múlik rajta. Megosztásokat előre is köszönöm, és a kérdések elől sem futok el. 😉

[/vc_column_text][/vc_column][/vc_row]

August 1, 2018