Mi kell ahhoz, hogy neked is felhasználóbarát weboldalad legyen?

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.

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.

felhasználóbarát felület

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.

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)

programozó

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.

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.

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.

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.

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.