Kreatív és reszponzív vízszintes görgetésű tartalom létrehozása és fejlesztése

Horizontális görgetés online felületeken

A Horizontális görgetés akkor hasznos, ha a tartalom szélessége nagyobb, mint amit kényelmesen el lehet féríteni egy képernyőn. Ilyenkor nem az a cél, hogy minden elemet összezsúfoljunk, hanem az, hogy a felhasználó jól értse, merre találja a további tartalmat. Ez lehet termékkártya, képgaléria, idővonal, összehasonlító sáv, táblázat vagy mobilos tartalomblokk. Én azt látom, hogy sok megrendelő csak a látványos mozgást keresi, pedig a jó megoldás inkább a tiszta használhatóságról szól.

Magánügyfélként gyakran akkor van szükség ilyen online munkára, amikor egy meglévő weboldalon vagy alkalmazásban túl hosszú a tartalom, szétesik a mobilnézet, vagy a látogatók nem veszik észre, hogy oldalirányban is lehet továbbhaladni. Egy szabadúszó fejlesztő ilyenkor nemcsak a csúszkát állítja be, hanem ellenőrzi a megjelenést, az érintőképernyős működést, az akadálymentességet és a tartalom áttekinthetőségét is.

Horizontális görgetés tervezése

A tervezés első lépése annak eldöntése, hogy valóban szükség van-e oldalirányú mozgatásra. Nem minden széles elemhez kell ilyen megoldás. Szerintem a legjobb eset az, amikor a vízszintes tartalom természetes módon olvasható, például kártyák egymás után, képek sorban, vagy egy többoszlopos összehasonlítás. Ha viszont hosszú szöveget teszünk oldalra húzható sávba, az gyakran rontja az olvasást.

Sokan ott hibáznak, hogy a horizontális tartalomsávot csak díszítő elemként kérik. A látogató ilyenkor nem kap jelet arról, hogy van még tartalom jobbra vagy balra. Hiányzik a halvány átmenet, a nyíl, a részben látható következő elem, vagy a mobilos húzás természetes érzete. Egy tapasztalt szakember ezt már a tervezésnél jelzi. Nem elég, ha a sáv technikailag mozog. Érthetőnek is kell lennie.

Vízszintes görgetés árak

Az ár főleg attól függ, hogy egyszerű tartalomsávról, egyedi felületi elemről vagy összetettebb fejlesztésről van szó. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent, mert kimarad a mobilos tesztelés, a böngészők közötti ellenőrzés és a finom részletek beállítása. Tapasztalatom szerint egy kisebb feladat gyorsan elkészülhet, de egy valóban kényelmesen használható megoldás több körös pontosítást igényel.

Ezek az összegek tájékoztató jellegűek, de a gyakorlatban reálisak kisebb és közepes online feladatoknál. Qjob.hu felületén magánszemélyként is lehet olyan szabadúszót keresni, aki webes felületek javításával, tervezésével vagy fejlesztésével foglalkozik. Utána már érdemes pontosan leírni, hol jelenjen meg a megoldás, milyen eszközökön kell működnie, és milyen tartalom kerül bele.

Oldalirányú görgetés mobilon

A mobilos használat külön figyelmet kér. Egy asztali gépen jól működő vízszintes sáv könnyen kényelmetlen lehet telefonon. Ha az elem túl magas, túl széles, vagy a görgetés összeakad az oldal függőleges mozgásával, a látogató gyorsan elakad. Ez nem apró részlet. A felhasználó gyakran nem fogja keresni a megoldást, csak bezárja az oldalt.

Volt olyan eset, amikor egy ügyfél termékkártyákat szeretett volna egymás mellé tenni. A régi megoldásban minden kártya teljes szélességű volt, ezért a látogató hosszú ideig lefelé görgetett. A fejlesztő átalakította a blokkot oldalirányban mozgatható sorra, de úgy, hogy a következő kártya széle mindig látható maradt. Ez egyszerű ötlet volt, mégis jobban működött, mert a látogató azonnal értette, hogy van tovább.

Horizontális tartalom átadása

A jó eredményhez nem elég azt írni, hogy kell egy görgethető sáv. A szakember akkor tud pontos munkát végezni, ha látja a tartalmat, a meglévő oldalt, a célképernyőket és a várt működést. Hasznos átadni képernyőképet, mintát, rövid leírást és azt is, hogy a tartalom később bővülni fog-e. Egy online megbízásnál ezek pótolják a hosszú magyarázatokat.

A munkamenet általában rövid egyeztetéssel indul. Utána készülhet egy egyszerű változat, majd jöhetnek a javítások. Fontos, hogy a megrendelő ne csak azt nézze, szép-e az elem. Meg kell nézni, hogy húzható-e telefonon, működik-e egérrel, látszik-e a túloldali tartalom, és nem takar-e ki fontos részt. A végeredményt a szabadúszó általában kódrészletként, kész oldalon, fejlesztői környezetben vagy fájlcsomagként adja át.

Szabadúszó választása görgethető elemekhez

A megfelelő szabadúszó kiválasztásánál nem csak a technikai tudás számít. Nézd meg, ért-e a felületi logikához is. Egy görgethető elem lehet működőképes, de mégis zavaró. A jó fejlesztő rákérdez a tartalom céljára, a felhasználók eszközeire, a keretrendszerre, és arra is, hogy a megoldás később szerkeszthető legyen-e.

Érdemes portfóliót kérni, de nem kell túl nagy bemutatkozó anyag. Elég néhány hasonló felület, ahol látszik a kártyasor, galéria, táblázat vagy vízszintes navigáció. A szakember akkor megbízhatóbb, ha konkrétan elmondja, mit tartalmaz az ár, hány javítás fér bele, milyen határidővel dolgozik, és hogyan adja át a kész eredményt. Ha ezek nincsenek tisztázva, később könnyen vita lesz abból, hogy mi számított alapfeladatnak és mi külön kérésnek.

Gyakori hibák vízszintes sávoknál

A leggyakoribb hiba az, hogy a horizontális megoldás nem kap vizuális jelzést. A felhasználó nem tudja, hogy oldalra is lehet mozgatni. A másik gond a túl sok elem. Ha egy sorba minden belekerül, a tartalom elveszíti a súlyát. Jobb kevesebb, de jól tagolt elem, mint egy hosszú, fárasztó sáv.

Gyakori még a billentyűzetes használat elhanyagolása, a rossz fókuszállapot, a túl gyors animáció és az, hogy a sáv nem viselkedik egyformán különböző böngészőkben. Sokan csak egy képernyőméreten nézik meg a kész munkát. Ez kevés. Legalább telefonon, táblagépen és nagyobb kijelzőn is ellenőrizni kell. Én azt látom, hogy a minőség itt a részleteken múlik. Egy apró árnyék, egy jól elhelyezett nyíl vagy egy finom levágás sokkal érthetőbbé teheti a teljes felületet.

Minőségi horizontális görgetés eredménye

A minőségi megoldás nem akarja mindenáron felhívni magára a figyelmet. Egyszerűen működik. A látogató érzi, hogy merre lehet továbbhaladni, nem akad el, és nem kell gondolkodnia a használaton. Ez különösen fontos online szolgáltatásoknál, bemutatkozó oldalakon, portfólióknál és olyan webes felületeknél, ahol sok elemnek kell kis helyen rendezett maradnia.

A jó oldalirányú tartalom nem helyettesíti a rendes szerkezetet. Inkább segít abban, hogy a fontos elemek átláthatóbbak legyenek. Ha a brief pontos, az ár reális, a kommunikáció gyors, és a szakember a használhatóságot is figyeli, akkor a végeredmény nem csak látványos lesz, hanem tényleg használható. Ez a különbség egy egyszerű görgetős blokk és egy jól megtervezett felületi elem között.

A megrendelőnek érdemes már az elején eldöntenie, mi számít sikeres eredménynek. Lehet ez gyorsabb tájékozódás, kisebb helyigény, rendezettebb termékbemutatás vagy könnyebb összehasonlítás. Ha ez világos, a szakember kevesebb felesleges kört fut, és a vízszintes görgetés nem öncélú elem lesz, hanem valódi segítség az oldalon.