Kész UI elemek weboldalakhoz

UI elemek weboldalakhoz

A jó UI elemek weboldalakhoz akkor működnek, ha a látogató gyorsan érti, mire kattintson, mit olvasson el, és hogyan jusson el a következő lépésig. Ez nem díszítés kérdése. Inkább rend, érthetőség és következetesség. Magánügyfélként legtöbbször nem teljes rendszert keresel, hanem olyan felületi elemeket, amelyekből összeáll egy tiszta és használható oldal. Ilyen lehet a gomb, a fejléc, a kártya, az űrlapmező, a menü, az árblokk, a kérdés válasz rész vagy a kapcsolatfelvételi szakasz.

Én azt látom, hogy a legtöbb megrendelő nem külön elemeket akar, hanem biztos eredményt. Azt szeretné, hogy a weboldal ne legyen széteső, ne nézzen ki barkácsmegoldásnak, és telefonon is könnyen használható maradjon. Ezért fontos, hogy a kezelőfelületi elemek ne csak szépek legyenek, hanem illeszkedjenek egymáshoz. A méret, a térköz, a tipográfia, a sorrend és a visszajelzés együtt ad használható felületet. Ha ezek összevissza készülnek, a látogató bizonytalan lesz. És ilyenkor gyakran nem is olvas tovább.

A webes elemek tervezésénél a magánügyfél számára általában három dolog számít igazán. Az első a bizalom. A második az érthető használat. A harmadik a gyors átadás. Egy jó felülettervező ezért nem azzal kezdi a munkát, hogy színeket mutat, hanem azzal, hogy megérti a célt. Mi legyen a kattintás után, milyen mezőket kell kitölteni, hol törik meg a figyelem, és melyik blokk hozza a legtöbb bizonytalanságot. Szerintem ez sokkal fontosabb, mint bármilyen divatos látványmegoldás.

Qjob.hu oldalán is az látszik, hogy sokan konkrét részfeladatra keresnek magánszakembert. Nem teljes újratervezést kérnek, hanem például főoldali szekciókat, űrlapokat, termékkártyákat vagy belépési felületeket. Ez reális igény. És gyakran ez a jobb út, mert nem kell mindent újrakezdeni. Elég rendbe tenni azokat az elemeket, amelyek most lassítják a döntést vagy rontják a benyomást.

Felületi elemek online munka menete

Az online együttműködés akkor jó, ha már az elején tiszta, pontosan mi készül el. A megrendelő rövid összefoglalót küld, mellé képernyőképet, régi oldalt vagy példákat. A szakember erre visszajelez, hogy mely blokkokat érdemes újratervezni, milyen fájlban adja át a munkát, és hány kör módosítás fér bele. A távoli munka nem akadály. Sőt sokszor gyorsabb, mert minden döntés írásban rögzül.

A tipikus folyamat egyszerű. Először jön a brief. Utána a vázlat vagy drótváz. Ezt követi a részletes felület, majd az átadás fejlesztőnek vagy közvetlen használatra. Ha csak néhány blokk készül, ez pár nap alatt lezárható. Ha több nézet és több állapot kell, a munka hosszabb. De itt sem a napok száma a lényeg, hanem az, hogy minden elemhez legyen egyértelmű funkció. Egy gomb akkor jó, ha világos a felirata. Egy űrlap akkor jó, ha kevés felesleges mezőt kér. Egy kártya akkor jó, ha első pillantásra kiderül belőle a lényeg.

Volt olyan eset, amikor egy ügyfél azt kérte, hogy csak szebb legyen a főoldal. A beszélgetésből viszont kiderült, hogy nem a kinézettel volt a fő gond, hanem azzal, hogy a fontos gomb három különböző helyen háromféleképpen jelent meg. Mire a felületi elemek egységesek lettek, az oldal sokkal nyugodtabb lett, és már nem kellett túlmagyarázni a használatát. Ilyenkor látszik, hogy a rend néha többet ér, mint egy új grafikai ötlet.

Az átadásnál fontos kérdés, hogy milyen formában kapod meg az anyagot. Általában szerkeszthető terv, méretezett elemek, állapotleírás és rövid megjegyzések érkeznek. Ha a kivitelező fejlesztő külön dolgozik, érdemes olyan csomagot kérni, amelyben a hover állapot, a hibajelzés, a lenyíló menü és a mobilnézet is benne van. Tapasztalatom szerint sok félreértést pont az okoz, hogy a megrendelő csak a szép képet látja, de az állapotokat nem kéri el.

UI elemek weboldalakhoz árak

Az ár attól függ, hány elem készül, mennyire egyedi a stílus, kell e mobil és asztali változat, és mennyi átdolgozás várható. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent. Nem azért, mert minden olcsó ajánlat rossz, hanem azért, mert kevés időből ritkán lesz átgondolt felület. Egy magánmegrendelőnek általában fix csomag a legátláthatóbb. Így előre látható, mire mennyi megy el.

Ezek nem merev díjak, inkább használható sávok. Szerintem az a korrekt ajánlat, amelyik világosan leírja, hány elem készül, hány módosítási kör van, és mi számít plusz kérésnek. Ha csak annyi szerepel az üzenetben, hogy teljes UI csomag kedvező áron, abból nehéz eldönteni bármit. A részletezett ajánlat kevesebb vitát szül, és később is könnyebb visszanézni.

UI elemek weboldalakhoz szakember választása

A jó szakember kiválasztásánál nem az első kérdés az, hogy mennyire látványos a portfólió. Előbb azt nézd meg, tud e egyszerűen és pontosan kommunikálni. Egy felülettervező akkor hasznos, ha kérdez. Rákérdez a célra, a célközönségre, a meglévő oldal hibáira és arra is, hogy a kész anyagot ki fogja beépíteni. Ez azért fontos, mert a magánügyfél sokszor csak azt érzi, hogy valami nem jó az oldalon, de nem tudja megfogalmazni a pontos gondot.

Hasznos jel, ha a tervező megmutat kész blokkokat, különböző állapotokat és valós munkafolyamatot. Kevésbé meggyőző, ha csak látványos nyitóképeket mutat, de nincs példa űrlapra, menüre, hibajelzésre vagy mobil nézetre. A webes elemek értéke pont ott derül ki, ahol a felhasználó ténylegesen kattint, kitölt és dönt. Egy jó szakember ezt nem hagyja homályban.

Én azt javaslom, hogy rendelés előtt kérj három rövid dolgot. Egy becsült ütemezést. Egy világos átadási listát. És egy mintát arra, hogyan kezeli a módosításokat. Ebből gyorsan kiderül, mennyire megbízható. A felülettervező és a megrendelő között sok vita abból lesz, hogy mást értenek kész állapot alatt. Ha ezt előre tisztázzátok, sok ideges kör megspórolható.

UI elemek minősége és gyakori hibák

Sokan ott hibáznak, hogy túl sok mindent akarnak egy blokkba tenni. Több szín, több gomb, több ikon, több szöveg. Ettől az oldal nem lesz informatívabb, csak fárasztóbb. A kezelőfelületi elemek között rangsort kell tartani. Mi az elsődleges művelet, mi a másodlagos, mi csak háttérinformáció. Ha minden egyformán erős, akkor valójában semmi sem vezet.

Gyakori hiba az is, hogy a megrendelő azonnal kész látványt kér, de nem ad elég bemenetet. Nincs példa a tartalomra, nincs céloldal, nincs döntés arról, mire kell kattintani. Ilyenkor a szakember kénytelen találgatni. A találgatás pedig drágább, mint egy rövid, tiszta brief. Tapasztalatom szerint már néhány jól összerakott mondat is rengeteget javít az eredményen.

A minőséget nem csak a szép elrendezés mutatja. Ugyanilyen fontos az olvashatóság, az egységes térköz, a mobil nézet, a hibás mezők visszajelzése, a gombok következetes neve és az, hogy a látogató ne veszítse el a fonalat. De a másik véglet sem jó. A túl merev, sablonos felület néha annyira semleges, hogy semmit nem emel ki. Itt kell jól egyensúlyozni.

Végül azt mondanám, hogy egy jó felület ritkán hangos. Inkább csendben működik. A látogató nem dicséri meg külön a gombot vagy a kártyát, csak simán használja az oldalt. Szerintem ez a valódi mérce. Ha a webes elemek nem akasztják meg a folyamatot, ha a megrendelő pontosan tudja, mit kap, és ha az átadás után a fejlesztés sem fullad félreértésekbe, akkor a munka rendben van.