Szolgáltatásoldal UX-terve: blokksorrend, mobilos hierarchia és tartalommodell

Feladattérkép az oldal elé

A drótváz előtt írd fel, honnan és milyen kérdéssel érkezhet a látogató. A kezdőlapról belépő ember már találkozhatott az ajánlattal, a közvetlen részoldalra érkezőnek viszont önálló tájékozódás kell. Jelöld, melyik információ szükséges az alkalmasság megítéléséhez, melyik a részletek ellenőrzéséhez és hol válik indokolttá a kapcsolatfelvétel. Minden feladathoz rendelj egy elsődleges blokkot. Ha egy kérdésre csak három különálló részlet összeolvasása ad választ, a szerkezet még nem elég világos.

A feladattérkép például a szolgáltatás felismeréséből, vállalási feltételek ellenőrzéséből, releváns munka megnyitásából és megkeresésből állhat. A tartalmak közötti sorrendet a döntés logikája határozza meg, nem a rendelkezésre álló látványelemek száma. A blokk rövid tervezői megjegyzése mondja meg, milyen bizonytalanságot zár le. Így a későbbi vizuális tervben is megítélhető, hogy egy új dekoráció vagy átrendezés segítette-e a feladatot.

Szöveges drótváz valós szolgáltatáshoz

Szemléltető vázlat webshopfejlesztéshez: fejléc és morzsa, rövid nyitó összefoglaló, vállalt feladattípusok, indulási feltételek, együttműködési folyamat, releváns projektkártyák, részletkérdések és kapcsolatblokk. Ez kiindulópont, nem minden ajánlatra kötelező recept. A nyitó rész feladata, hogy az olvasó felismerje a szolgáltatást, a következőké pedig az alkalmasság és részletek megítélése. A sorrend indokát írd a drótvázra, ne csak helykitöltő címekkel és üres téglalapokkal dolgozz.

A projektkártya például gyorsan összehasonlítható munkát mutat, a folyamatblokk pedig a közös munka lépéseit és ügyféloldali feladatot rendezi. Ha két szakasz ugyanazt a szerepet tölti be, egyesítsd vagy pontosítsd a különbséget. A kapcsolatfelvételi lehetőség több ponton megjelenhet, de ne szakítsa meg minden bekezdés után az olvasást. A drótváz akkor használható, ha rajta a tartalom mennyisége és az egyes elemek közötti átmenet is értelmezhető.

Komponensmodell és szerkesztői mezők

A rendszeres szolgáltatási adat kapjon saját mezőt: név, rövid összefoglaló, kapcsolódó ajánlat, projektkapcsolat és megkeresési cél. A részletes magyarázat szabadabban szerkeszthető tartalom maradhat. A listaoldali kártya és részletoldal ugyanazt a hiteles nevet használja, így egy átnevezés nem hagy háromféle megfogalmazást a menüben, kivonatban és fejlécben. A tartalmat a megjelenési szabálytól külön kezelő modell könnyebben gondozható több szerkesztő esetén is.

A komponens-munkalap nevezze meg a kötelező adatot, opcionális részt, képhelyet, hivatkozást és hiányállapotot. Referencia hiányában ne maradjon üres galéria, hanem tudatosan maradjon ki a blokk. A szerkesztő kapjon rövid mezőmagyarázatot, és lássa, melyik adat hol jelenik meg. A kész mintát hosszú szolgáltatásnévvel, eltérő képpel és hiányzó opcionális mezővel próbáld ki. A modellnek a reális tartalmi változatokat is rendezett módon kell kezelnie.

Helyi navigáció és információs szintek

A hosszabb oldalhoz szakaszlink vagy tartalomjegyzék segíthet, ha címkéi valódi kérdésköröket neveznek meg. A főmenü a webhely egészében tájékozódik, a morzsa a szolgáltatási hierarchiát jelzi, a helyi navigáció az aktuális tartalom részeihez vezet. Ezt a három szintet ne mosd össze. A látogató a feliratból és megjelenésből értse, hogy új oldalra jut vagy az aktuálison belül mozdul el a kattintással.

A rögzített fejléc ne takarja el a hivatkozott szakaszcímet. A horgonyugrás és fókusz viselkedését billentyűzettel is vizsgáld, mert az odagördülés nem mindig jelenti, hogy a bejárás onnan folytatódik. A tartalomjegyzék ne foglaljon indokolatlanul nagy részt a mobilképernyőből. A szakaszoknak önállóan értelmezhető címet adj, így a gyors átfutás és segítő technológiás tájékozódás is ugyanazt a tartalmi rendet követheti.

Mobilos hierarchia és részletezés

A többoszlopos asztali kompozíció mobilon egymás alá kerülhet, de sorrendje tudatos döntés legyen. A szükséges magyarázat előzze meg a díszítő képet, ha így érthetőbb az ajánlat. A nagy címsor ne tolja aránytalanul mélyre az első lényegi választ. A rögzített kapcsolatgomb ne takarja el a szöveget vagy űrlapállapotot. A tartalom hosszúsága önmagában nem ok fontos feltétel elhagyására; előbb a sorrendet és szakaszolást javítsd.

Lenyitható részlet akkor indokolt, ha valóban másodlagos és pontosan megnevezhető. A fontos vállalási feltétel maradjon könnyen hozzáférhető. A nyitás szabályos vezérlővel, érzékelhető állapottal és követhető fókuszkezeléssel működjön. A próbában növeld a szöveget, nyisd meg a virtuális billentyűzetet és járd végig a kapcsolatot. A mobilos hierarchia nem pusztán dobozok egymás alá rendezése, hanem a teljes döntési út újraszervezése szűkebb, változó méretű térben.

Kapcsolódó felületek és visszatérés

A projekt vagy szakmai útmutató megnyitása után legyen releváns visszaút az ajánlathoz. A kártya ne csak logót és általános jelzőt tartalmazzon: a feladattípus, projektcím és céloldal szerepe segíti a választást. A blogajánló konkrét részletkérdésre vezessen, ne minden szolgáltatásnál ugyanazokat a legfrissebb cikkeket mutassa. A kapcsolatokhoz rendelhető szerkesztői mező, amelynek tartalmát rendszeresen át lehet tekinteni, ha egy referencia vagy ajánlat megváltozik.

A kapcsolatoldalra átadható a választott szolgáltatás, ha ez segíti az első egyeztetést. Az adat legyen látható és módosítható; a felhasználó közben más témát is választhatott. A visszalépés ne törölje indokolatlanul a megkezdett kitöltést. A listától a részleten és referencián át a megkeresésig rajzold fel az egész útvonalat. Így észrevehető, ha két önmagában jó felület között kontextusvesztés vagy fölösleges adatismétlés alakul ki.

Prototípuspróba és tartalmi átadás

Adj a tesztelőnek valós feladatot: keresse meg, vállaltok-e meglévő webshop megújítást, milyen anyag szükséges hozzá, majd nyisson releváns munkát és indítson megkeresést. Ne mutasd meg a kattintási útvonalat. Jegyezd fel, melyik blokkban vár más tartalmat, melyik navigációs felirat félreérthető és hol veszíti el a kiinduló kérdést. A megfigyelés szerkezeti javításra adjon alapot, ne csak esztétikai tetszéslistát hozzon létre.

Az átadási munkalapban szerepeljen a blokkok sorrendje és feladata, mezőmodell, mobilos eltérés, hiányállapot és kapcsolódó céloldal. Ebből a szövegíró pontos tartalmi keretet, a tervező kompozíciós alapot, a fejlesztő ellenőrizhető komponensrendszert kap. Az organikus keresési megfeleltetést és mondatszintű ajánlati szöveget külön szakmai munka bontja ki. A kész UX-terv azt biztosítja, hogy ezek egymást kiegészítve, követhető felületen jelenjenek meg a látogató számára.

Gyakori kérdések