Wireframing

03

Design

Vissza a szolgáltatásokhoz

A drótváz tervezés lényege

A drótváz tervezés az Ergománia gyakorlatában egy mindenki számára könnyedén átlátható és megérthető módszer, amely a digitális felület tervezése során bemutatja, hogy milyen elemek szerepelnek majd az egyes oldalakon.

Ahhoz, hogy UX szemléletű weboldalakat és alkalmazásokat tervezhessünk, kiemelten fontos a felhasználók viselkedésének és feladat végrehajtásának folyamatközpontú lekövetése. Azaz a tervezés alapegységei a folyamatok, amik funkciókat realizálnak, de azokat egyedi képernyőterveken keresztül mutatjuk be.

Az általunk alkalmazott drótváz tervezésnek köszönhetően az üzleti és fejlesztési oldal képviselői egyszerűen átláthatják, miként fog az oldaluk, alkalmazásuk felépülni, akár a struktúrát nézzük, akár a tervezett funkciókat és azok használatát.

A drótváz tervezés által lényegében az egész weboldal, szoftver, alkalmazás váza, struktúrája és funkcionalitása kialakítható még a rendkívül költséges fejlesztés megkezdése előtt. A drótvázak esztétikus, végleges vizuális elemeket nem tartalmaznak, a hangsúlyt tisztán a funkcionalitásra és az ügyfélélményre helyezzük.

 

A drótváz tervezés az Ergomániánál

A drótvázazás (wireframing) során az alábbiakat határozzuk meg a tervezett digitális termék kapcsán:

  • Mi az alapstruktúrája (menüpontok, almenük, oldaltípusok felépítése)
  • Hova és milyen alapelemek kerülnek az egyes oldalakon belül (Navigáció, tartalom blokkok és azok hierarchiája stb.)
  • Milyen csoportokat alkotnak az egyes elemek (Egy űrlap beviteli mezői, címkéi és azok pontos elrendezése)
  • Statikus oldalak szövegblokkjai, képek helye és jellege, stb.
  • Rövidebb szövegek pontos és végleges megírása
  • Milyen élményeket szerez(zen) a felhasználó az egyes oldalak megnyitása és használata során
  • Egyes funkcionális és tartalmi elemek pontos és részletes felépítése és azok működésének definiálása

A weboldal drótvázát a tervezés során szabadon lehet alakítani, akár papír és ceruza, vagy wireframing szoftver segítségével. A drótváz tervezéshez alapvetően szükséges a digitális termék felépítésnek, funkcióinak és folyamatainak előzetes definiálása.

 

A drótváz tervezés főbb módszerei

Az Ergománia csapata a drótvázas tervezéshez két gyakorlati eszköztárat használ:

  • filctoll és whiteboard
  • célszoftver

A klasszikus eszközök elsősorban offline környezetben használatosak, illetve előzetes skiccelés során, amikor szabadon áramolhatnak az ötletek, és bőven elég, ha „nagyjából felvázoljuk”, miként épül fel majd a weboldal.

A célszoftverek már a wireframing komolyabb szintjét képviselik. Ezek közül elsősorban Figmát használunk, mert így drótváz tervezés során már tudunk igazodni egy design rendszerhez. A Figma mellett főként még Axure-t alkalmazunk, amennyiben az interakciók pontos megjelenítése a cél.

Az így kapott drótvázak többnyire fekete-fehérek, de időnkét alkalmazunk színeket is.

 

Mit nyernek az ügyfeleink a drótváz tervezéssel?

Az Ergománia ügyfelei több mindent is nyernek a drótváz tervezéssel, sőt közvetve az ügyfeleink felhasználói lesznek a legnagyobb nyertesek:

  • Ügyfélélmény-központú weboldal, alkalmazás tervrajzot kapnak, amely alapján már gyorsan és könnyedén megvalósítható a tényleges weboldal vagy alkalmazás
  • Egyszerűsíti a tervezési folyamatot, így a költségeket is csökkenti
  • Pontos képet kapnak arról, hova milyen komponensek és interakciós elemek kerülnek, azok hogyan viselkednek
  • Időt takarítanak meg azzal, hogy a drótváz tervezés során véglegesítésre kerülnek a vizuális és szöveges tartalomtípusok

Az ügyfeleink tehát egy olyan weboldal-struktúrát kapnak, amely tökéletesen érthető, átlátható és egyértelmű a döntéshozók, a fejlesztők és a grafikusok számára éppen úgy, mint a leendő ügyfeleknek.

 

Mi az ügyfeleink szerepe a drótváz tervezés során?

Az ügyfeleink részvétele kiemelten fontos a wireframing során, hiszen elsősorban ők tudják, milyen megoldást szeretnének – de legalábbis ők döntik el, hogy az adott célra leginkább megfelelő 2-3 lehetőség közül melyiket fogják előnyben részesíteni.

Bár a munka java részét az Ergománia szakemberei végzik, de fontos az is, hogy ügyfeleink is felvázolják a saját elképzeléseiket, mert minél több az információ, annál optimálisabb eredményt tudunk alkotni.

 

A sikeres drótváz tervezés eredménye

A drótváz tervezés eredménye egy olyan ábra, ami a weboldal leegyszerűsített struktúrája, és minden kulcsszereplő számára egyértelműen megjeleníti a tartalom főbb csoportjait, az információ megjelenésének struktúráját és a felhasználók számára elérhető folyamatok megjelenését és azok esetleges leírását, ami együttesen teszi lehetővé a UX szemléletű weboldal, alkalmazás elkészítését.

  • Ügyféloldali részvétel: Kulcsoldalak közös meghatározása, heti rendszeres design critique-en való aktív részvétel, gyors visszajelzés tervekkel kapcsolatban
  • Leszállítandók: Részletes, szükség esetén interaktív drótvázak, Figma-ban vagy Axure-ben megosztott drótvázak