A legjobb 8 UI (felhasználói felület) tipp weboldalakhoz, applikációkhoz

Egy weboldal sokkal több, mint linkekkel összekapcsolt oldalcsoport. Ez egy felület, egy tér, ahol különböző dolgok – ebben az esetben egy személy és egy vállalat, vagy egyén webes jelenléte – találkoznak, kommunikálnak és befolyásolják egymást. Ez az interakció élményt teremt a látogató számára, és webdesignerként a Te feladatod annak biztosítása, hogy a tapasztalatok minél jobbak legyenek a böngészés során.

Ennek pedig az a kulcsa, hogy mindig a felhasználókra koncentrálj

Szerencsére, bár a webdesign egy viszonylag új tudományág, sokat köszönhetünk az ember-számítógép interakciók (HCI) tudományos vizsgálatainak. Ez a 9 praktikus irányelv, amely közvetlenül a HCI kutatásból származik, segít a felhasználókra összpontosítani, amikor weboldalakat és alkalmazásokat tervezünk. Az interfész-tervezés, amely az interfészek funkcionalitásának elrendezésére összpontosít, a felhasználói élmény tervezésének egy részhalmaza, amely a nagyobb képre összpontosít: vagyis az egész élményre, nem csak a felületre.

1. Ismerd felhasználóidat

Mindenekelőtt tudni kell, hogy kik a felhasználók – kívül és belül. Ez azt jelenti, hogy ismerd az összes olyan demográfiai adatot, amelyet az analitikai alkalmazások megszerezhetnek. De ami még fontosabb, hogy tudjuk, mire van szükségük, és mi akadályozza őket abban, hogy elérjék céljaikat.

Ennek pedig egyik legjobb módja az, ha folyamatos visszajelzéseket kérünk tőlük és javaslatokat, hogy szerintük mivel tehetnénk még jobbá és egyszerűbbé interfészünk használatát.

Ne állj meg ott, hogy tudod, mit akarnak a felhasználóid. Áss mélyebbre és derítsd ki, mire van szükségük. Ha ki tudod elégíteni a felhasználók mélyen gyökerező igényeit, akkor már célegyenesben vagy.

Az adatok alapos kielemzése és a folyamatos kommunikáció a látogatókkal hozzásegít ahhoz, hogy milyen irányba érdemes elindulni, hogy a végeredmény a lehető legjövedelmezőbb legyen.

2. Határozd meg, hogy az emberek hogyan fogják használni a felületedet

A felhasználói felület megtervezése előtt meg kell határozni, hogy az emberek hogyan fogják azt használni. Az érintésalapú eszközök növekvő elterjedtségével ez kulcsfontosságú kérdés.

Itt van például a Tinder:

Az egész másból sem áll, mint balra és jobbra húzni a képernyőn lévő tartalmat ujjainkkal. Ennél könnyebb és egyszerűbb megoldást nem is lehetne választani, nem is csoda a népszerűsége.

Az emberek kétféleképpen használják a weboldalakat és az alkalmazásokat: közvetlenül (a termék interfész elemeivel való kölcsönhatással) és közvetett módon (a terméken kívüli UI elemekkel való kölcsönhatással).

Példák a közvetlen interakciókra:

• ‍Gomb megérintése
• Kártya csúsztatása
• Tétel ujjbeggyel történő elhúzása

Példák közvetett interakciókra:

• Egérrel való kattintás
• Billentyűparancsok / parancsikonok használata
• Gépelés egy űrlapmezőbe
• Rajzolás Wacom táblagépre

Az első pontban vázolt felhasználói viselkedés és demográfiai adatok ismerete itt is erősen visszaköszön. Ha fiatal a célközönséged, akkor érdemes nagyobb hangsúlyt fektetni az ujjbegyekkel történő interakcóikra, mivel ők bizonyára okostelefonról fognak böngészni. Az idősebb korosztály ragaszkodik még a közvetett interakciókhoz, de egyre inkább adaptálják ők is a modern technológiát.

Fontos lehet az is, hogy milyen munkakörben dolgozik a célközönség. Programozók és számítógépekkel dolgozó emberek számára a billentyűzet és a billentyűparancsok továbbra is a legmeghatározóbbak, míg grafikusok és designerek esetében bejön a képbe a digitális rajztábla / tablet is.

3. Mit vársz el a felhasználóidtól?

A webhelyekkel vagy alkalmazásokkal végzett sok interakciónak következményei vannak: egy gombra kattintás pénzkiadást, webhely törlését, vagy becsmérlő megjegyzést tehet a nagymama születésnapi tortájára. Meg kell tehát határozni, mi lenne a cél, mit és hogyan csináljanak a felhasználók az oldalunkon.

Tehát feltétlenül tájékoztasd a felhasználókat arról, hogy mi fog történni, miután rákattintanak erre a gombra, mielőtt megtennék.

Minden művelethez közérthető piktogramot adj. Anélkül is érthető legyen a gomb, hogy a szövegezést elolvasnánk.

Széles körben ismert szimbólum (például kuka a törlés gombhoz, plusz jel hozzáadása, vagy nagyító a kereséshez) másolással kombinálva.

Szín kiválasztása releváns jelentéssel (zöld a „go” gombra, piros a „stop” gombra)

4. Számíts a hibákra, hibázókra

Hiába a tesztek, az elemzések, elejétől a végéig alapos áttekintések, amikor kikerül élesbe a tartalom, vagy elstartol az applikációd, rövidesen érkezni fognak a visszajelzések, hibaüzenetek, bugfix iránti kérelmek. Ez sajnos elkerülhetetlen, mert igazán akkor tesztelhető egy tartalom, amikor a világ minden pontjáról, mindenféle körülmények és verziószámok mellett globálisan használni kezdik az interfészt. A lényeg, hogy ezeket intelligensen kezeld és amint csak lehetséges, javíts minden kritikus hibát. Előbb-utóbb elfogy minden hiányosság és a felület 100%-os lesz.

5. Visszajelzések fontossága

A visszajelzés legyen gyors! A való világban a környezet visszajelzést ad nekünk. Beszélünk, mások pedig válaszolnak (általában). Ha simogatunk egy macskát, akkor az dorombol, vagy fújtat (attól függően, hogy milyen hangulatban van éppen.)

A fenti példa is az azonnali visszajelzést illusztrálja. Lehet, hogy a digitális világban nem vagyunk egymás közvetlen környezetében és ebből kifolyólag a visszajelzések gyorsasága is változik, azonban a fontossága elvitathatatlan, így amint lehetséges adjunk visszajelzést a felhasználónak egy adott cselekedete nyomán.

Ez lehet egy köszönőoldal, vagy egy megrendelés összesítő levél, egy GIF a lap alján, vagy egy ügyes animáció is, ami örömöt, bánatot fejez ki, attól függően, hogy az interakció milyen eredményességgel zárult.

6. Gondold át a sorrendet, az elemek elhelyezkedését

Tedd nagyobbá és szembetűnőbbé a leggyakoribb műveletek gombjait.

Helyezd a navigációt (és más gyakori interaktív vizuális elemeket, például keresősávokat) a képernyő szélére vagy sarkába. Ez utóbbi ellentmondásosnak tűnhet, de azért működik, mivel csökken vele az elfoglalt terület mértéke. Ha a jól bevált és kiismert területekre teszed ezeket az elemeket, akkor pedig a felhasználó gondolkodás és keresgélés nélkül is egyből megfogja találni, hiszen máshol is ugyanott helyezkednek el.

Amíg az elemek elhelyezésére és méretére gondolsz, mindig tartsd szem előtt az interakciós modellt. Ha webhelyed vízszintes, nem pedig függőleges görgetést igényel, akkor meg kell fontolnod, hogy hol és hogyan kell ráirányítani a felhasználókat erre a szokatlan interakciós típusra.

7. Törekedj a standard-re, ahol lehetséges

Az előző ponthoz hasonlóan, itt is a cél az, hogy ha valami jól bevált és közismert, akkor a legjobb amit tehetünk, ha ettől nem rugaszkodunk el nagy mértékben. Nem mindenki professzionális felhasználó, vannak kevésbé gyakorlott látogatók is. Ezek az emberek esetleg elrettenhetnek a szokatlanságtól, idegenkednek a designtól és elrendezéstől, ezért inkább nem is ássák mélyebben bele magukat a tartalomba.

Ne feledd, egy programozó és egy kisnyugdíjas is használja az internetet, csak különböző célokból, feltehetőleg. Általánosságban kell kiszolgálni mindkét csoportot, hacsak az interfészed nem kifejezetten egy adott célcsoportnak készül. A standardek viszont ilyenkor is fontosak, mert ha nem elég kényelmes, vagy áttekinthető a tartalom és a használat, akkor nem is fogják igénybevenni azt.

8. Legyen a döntés egyszerű!

Sok esetben előfordul, hogy egyetlen aloldal több információt és cselekvésre ösztönzést is felkínál a látogatónak. Ez nem túl szerencsés, mivel minél nagyobb a választék, annál nehezebb a döntés. A landing oldalak, és a hírlevélre feliratkoztató funkciók azért jók ilyen szempontból, mert egyetlen célt szeretnének csak elérni, és minden erőforrást arra használnak, hogy ezt el is érjék.

A lényeg tehát, hogy választást kínálhatunk a látogató számára, de ne zúdítsunk rá hirtelen több információt is, legyen mindig szögegyenes, hogy mi az adott oldal témája és célja. Jól látható, helyesen megfogalmazott CTA gombokkal operáljunk, jusson el a látogató a lehető legkevesebb interakcióval az ajánlatig.

Nincs időd weblapot készíteni? Ne aggódj, mi elkészítjük neked!

Berta Gergő
06 30 386 2627
gergo.berta@maximumbusiness.hu

Landing oldal készítés

A landing oldalak elsődleges célja egy adott termék vagy szolgáltatás minél nagyobb számban történő értékesítése. Számtalan módszer létezik arra, hogy egy terméket / szolgáltatást vonzóvá tegyünk, az online marketing szakemberek folyamatosan finomhangolják a módszereket és újabbnál újabb módszerekkel, „csodatevő” lépésekkel állnak elő annak érdekében, hogy saját maguk renoméját kedvező irányba tereljék.

Ezek között vannak olyan lépések, amik általánosságban is alkalmazhatóak, de előfordul az is, hogy a módszer mesterkulcsként nem felhasználható, tehát a lépések és a módszerek nagyban függnek attól, hogy kinek és mit szándékozunk eladni.

Ebben a blogcikkben összeszedjük azt, hogy mik azok az általános tartalmi egységek egy landing oldalban, amik kivétel nélkül, minden termék és szolgáltatás esetén beépíthetőek és nagyban hozzájárulnak a konverziónöveléshez.

A kötelező landing oldal-elemek mellett továbbá azt is megmutatjuk, hogy milyen sorrendben érdemes megjeleníteni ezeket, hogy a lehető legjobb eredményt érjük el.

1. A hero, avagy a hajtás nélküli tartalom:

A landing oldal egyik legfontosabb eleme. Ez az a terület, amit a látogató először fog látni, már itt meg kell őt fognunk, fel kell keltenünk az érdeklődését. Akárcsak a való életben történő ismerkedésnél, itt is kiemelten fontos az első, jó benyomás. Legyen szép és ízléses az elrendezés, látványos grafikai megoldásokkal, valamint egy bivalyerős, szlogenszerű, rövid mondattal. Ez a mondat foglalja össze frappánsan, hogy kik vagyunk, mit csinálunk és miért mi vagyunk a legjobbak.

2. A rövid, tömör, tagolt felsorolás:

A mai felgyorsult világban az internetezők ritkán szánják rá magukat a kényelmes böngészgetésre és olvasgatásra. Ezt tudomásul kell vennie minden weboldal tulajdonosnak, ezért úgy kell kialakítani a struktúránkat, hogy alkalmazkodjon ezekhez az igényeknek. Az egyik legjobb módszer erre, az aduászok rövid, piktogrammal ábrázolt felsorolása. Néhány szóban, egy rövidebb mondatban és egy releváns ikonnal vagy piktogrammal remekül lehet érzékeltetni, hogy miért érdemes minket választani, miért tőlünk vásároljanak.

3. Hassunk az érzelmekre:

Következhet a jól bevált pszichológiai trükk, az a tartalmi egység, amikor arra kérjük az olvasót, hogy képzelje el magát a nem túl távoli jövőben úgy, hogy a terméket már megvásárolta, vagy a szolgáltatást már igénybe vette. Érdemes ilyenkor egy kifejezett helyzetet leírnunk, amibe remekül bele tudja képzelni magát az olvasó, és ez azt a vágyat fogja kelteni benne, hogy: „Igen, én is ezt akarom!”

4. Fényképes bizonyíték:

Itt szintén az érzelmekre hatunk, de egy fokkal vizuálisabb formában. Ide érdemes fényképeket feltölteni olyan vásárlókról, akik már megvették a terméket, mosolyognak, elégedettek, látszik rajtuk, hogy jó döntést hoztak, amikor a termék mellett döntöttek. Ez lehet fényképes galéria, montázs. A lényeg itt a vizualitás, tehát nem konkrét vásárlói visszajelzések, azt majd az oldal későbbi szakaszában jelenítjük meg.

5. Tények arról, hogy mit kap, miben segít a termék:

Ez a blokk hasonlít a 3. pontban leírtra, de itt nem az érzelmekre és a fantáziára hatunk, hanem konkrét, „száraz” tényeket közlünk arról, hogy mit nyújt a termék vagy adott szolgáltatás. Ez a rész lehet felsorolásszerű, pontokba szedett, áttekinthető és könnyen fogyasztható.

6. Vásárlói vélemények:

Amennyiben rendelkezünk már elismerő visszajelzésekkel a termékünkről, akkor itt az ideje közölni őket! A landing oldalunk ezen szakaszában már – ideális esetben – megfogtuk a látogatót, felkeltettük az érdeklődését, ideje további bizonyítékokkal szolgálni, hogy nem ő az első, aki ebből a termékből vásárolni akar. Ideális esetben, a vásárlói vélemények fényképpel és névvel ellátott vélemények, ezzel is életszagúbb lesz, illetve a vásárló is jobban tud azonosulni a többiekkel.

7. Egy nagy kijelentés:

A legfelső, hajtás nélküli tartalomhoz hasonló blokkot kell ide is készítenünk azzal a különbséggel, hogy itt már nem akarunk bemutatkozni, hanem egy hangzatos kijelentést közlünk termékünkről. Legyen nagy betűs, „kiabáljon” ez a mondat, nyomjuk a látogató arcába. Legyen ez egy hipotézis, tehát a jövőre vonatkozó kijelentés, amit tényként közlünk, mert annyira biztosak vagyunk benne.

8. Összehasonlítás, avagy miért minket választanak másokkal szemben:

Ebben a tartalmi blokkban „fényezhetjük” egy kicsit magunkat a konkurenciával szemben. Fontos, hogy ne menjen át pocskondiázásba a dolog, egy kicsi rivalizálás is bőven megteszi. A konkurenciát ne nevezzük nevén. Ide bekerülhet az is, hogy mi a döntő érv, amiért a vásárlók tőlünk szoktak vásárolni.

9. A bónuszok:

Nincsen landing oldal bónuszok nélkül! Mivel az oldal elsődleges feladata az eladás, egy adott termékre vagy szolgáltatásra kihegyezve, ezért nem minden esetben elegendő csak szimplán a terméket értékesítenünk, szükség van egy kis pluszra, bónuszra, amitől még vonzóbb lesz az ajánlatunk. Ez lehet egy extra termék a jelenlegi mellé, vagy egy ingyenes e-book, használati útmutató, stb. Ami a legjobban illik üzleti modellünkbe.

10. Ideje közölnünk az árat.

A landing oldal egyik legkardinálisabb pontja. Mire ideér a látogató, már kellően felkeltettük az érdeklődését, létrejön benne a birtoklási vágy, azonban ott motoszkál benne a gondolat, hogy: „Ez jól hangzik, na de mennyibe kerül?” Ezt fogjuk most megválaszolni neki. Nagyon lényeges, hogy ne csak kiírjuk az árat és ennyi, kell mellé egy kis körítés, indoklás és érvrendszer, hogy az adott ár miért annyi, amennyi. Nyugodtan odaírhatjuk azt is, hogy árunk az egyik legméltányosabb a piacon.

11. A döntés megsürgetése:

A következő klasszikus marketing-elem, a birtoklási vágy felkeltése mellett, a döntés sürgetésének fontossága. Számtalan módszer és alternatíva létezik erre: hányan nézik jelenleg is az oldalt, hány termék maradt még raktáron, meddig él még az akciónk… Általában visszaszámlálóval prezentáljuk ezt blokkot, nagyon jó vizuális fogás láttatni, hogy hány óra / perc van még hátra az ajánlat végéig. Ezzel az a célunk, hogy a látogató ne gondolkodjon, ne halogassa, hanem impulzusból azon nyomban vásároljon.

12. Garancia:

A sürgetéssel „felingereltük” a vásárlót, itt az ideje megnyugtatni! Ajánljunk neki pénzvisszafizetési, vagy visszaküldési garanciát, vagy bármi mást, amivel azt kommunikáljuk nekik, hogy nyugodtan meghozhatják most rögtön a döntést, mivel nincsen tétje a dolognak, nem veszít semmit. Ha nem segít a termék, visszaküldheti és visszafizetjük neki az árát. Tapasztalataink szerint a legritkább esetben élnek a vásárlók garanciális jogukkal, ellenben nagyban hozzá tud járulni a döntés meghozatalához.

13. A vásárlás biztosítása, avagy küldjük padlóra a kétségeket!

A garanciát követően, röviden és tömören foglaljuk össze ismét a vásárlónak, hogy miért jó döntés, ha itt és most megveszi a terméket. Vázoljuk fel újra, hogy milyen most az élete és miben lesz jobb, ha használja termékünket. Hangsúlyozzuk, hogy ez csakis akkor változhat, ha most vásárolni fog.

14. Megrendelő blokk:

Következhet az egész oldal leglényegesebb pontja, az a tartalmi egység, ahol a terméket meg tudja rendelni a vásárló. Legyen a vásárlás menete pofonegyszerű, UX szempontból optimalizált, csak a legszükségesebb adatokat kérjük el, ne terheljük és ne is bonyolítsuk a megrendelési procedúrát. Ha adottak a lehetőségek, legyen többféle fizetési és szállítási mód, mindent kövessünk el annak érdekében, hogy a vásárlás mindenki számára megoldható legyen.

15. Gyakori kérdések a végére:

Jó ötlet a landing oldal végére egy gyakori kérdésekből összeállított tartalmi egységet is elhelyezni. Ez azért fontos, mert sokszor maradnak megválaszolatlan kérdések a vásárlóban, amik miatt nem biztos a dolgában, ezért inkább lefújja az egészet.

Mint tudjuk, a vásárlók nagy része pedig annyira kényelmes, hogy ha nem talál azonnal választ mindenre, akkor nem veszi a fáradságot, hogy utánajárjon. Tehát hiába tüntetjük fel a telefonszámunkat és email címünket, ezzel kapcsolatban nem fognak keresni. Így logikus és jó megoldás feltüntetni azokat a kérdéseket megválaszolva, amik általában előjönnek.

A fent felsorolt tartalmi egységek gyakorlatba ültetésével biztosak lehetünk abban, hogy landing oldalunk konvertáló lesz. Persze fontos az ízléses kialakítás és eladásösztönző megfogalmazás is. A cikk végére összeszedtünk pár extra pontot, amire ugyanúgy figyelni kell, máskülönben rosszul fog teljesíteni az oldalunk, hiába a marketing-központú felépítés.

• Találjuk meg a célközönséget! Az egész egy fabatkát sem ér, ha nem a célközönségünk számára hirdetjük a terméket. Idős embereknek nem érdemes homokozó készletet hirdetni, ahogy kisgyermekeknek / fiatal anyukáknak sem kínálunk porcerősítőt.
• Legyen a weboldalunk reszponzív, mobilra optimalizált. Manapság a weboldalakat egyre nagyobb arányban böngészik okostelefonról, a felosztás már meg is fordult, tehát többen böngésznek mobilról, mint asztali számítógépről. Ezért kiemelten fontos, hogy oldalunk mobilon is ízléses, szép és olvasható legyen, valamint a technikai összeköttetés is kifogástalan legyen.
• Optimalizájunk! Az internet felhasználóira jellemző türelmetlenséggel is számolnunk kell. Ha a weboldal nem tölt be 2-3 mp-en belül, az komoly konverzióveszteséggel járhat, az olvasó egyszerűen nem várja meg, hogy összetegye magát az oldal. Nem kell teljesen betöltődnie minden tartalomnak ez idő alatt, viszont ha másodpercekig csak a fehérséget látja, jó eséllyel bezárja a lapot.
• Figyeljük a vásárlói viselkedést és ez alapján folyamatosan javítsunk. A munka nem ér ott véget, hogy összetettük a landing oldalt, innentől kezdve indul a „csiszolgatás, javítgatás”. Figyeljük hőtérképen keresztül a vásárlói viselkedést, mire kattintanak, hol időznek tovább és ezek alapján optimalizáljunk.
• Call to Action gombok, horgonylinkek. Tegyünk meg mindent annak érdekében, hogy a látogató dolgát a lehető legnagyobb módon megkönnyítsük. Egy-egy hangsúlyos blokk végére tegyünk CTA gombot, ami a megrendeléshez irányít. Minél több, annál jobb, persze túlzásba sem szabad esni.

A Maximum Business ezen pontok használatával tesz össze működő és jól konvertáló landing oldalakat már évek óta. Bevételben gazdag, további szép napot kívánunk!

Berta Gergő
06 30 386 2627
gergo.berta@maximumbusiness.hu