Mindent a prototípusról I.

A folyamat

Képzeljük el, hogy online felületet építünk egy képzeletbeli autókölcsönzőnek. Kitaláljuk a működését, megkeressük a legmenőbb designereket, felvesszük a legjobb programozókat és egy hosszú költséges fejlesztési folyamat végén, leteszteltetjük az eredményt.

A tesztből az látszik, hogy bonyolult a kölcsönzési mechanizmus miatt a felhasználók idő előtt félbe hagyják a folyamatot. Hogy megoldjuk a problémát, további költséges fejlesztéseket kell eszközölnünk, pedig mindez könnyen elkerülhető, ha fejlesztés előtt prototípus is készül.

A prototípus — ahogy egy korábbi bejegyzésben írtuk — legnagyobb előnye, hogy egyszerre képes szemléltetni folyamatokat és funkciókat, de sokkal könnyebben módosítható, mint a már lefejlesztett felületek.

Igy lehetőség nyílik tesztelni a funkciókat a gyakorlatban, és könnyen meggyőződhetünk arról, hogy a felületünk a megfelelő módon lett-e kialakítva.

Az esetleges módosítások átvezetése sokkal kevésbé erőforrás igényes, mintha ugyanezt a programozók az éles felületen végeznék.

Oké, ez világos… A prototípus egy jó dolog, de hogy készül a gyakorlatan?

Papír és ceruza

Sketch

A digitális kor dacára, még mindig a papír és a ceruza a legkönnyebben elérhető eszköz, ezért kezdetben érdemes szabadkézi skicceket készíteni, amíg teljesen ki nem kristályosodik a felületünk struktúrája. Ahogy befutnak a kutatási eredmények, és meghatározzuk a funkcionális igényeket, el lehet kezdeni rajzolgatni.

Egy skiccet pár pillanat alatt fel lehet vázolni, és legalább ugyan ilyen könnyű újat rajzolni. A vizuális megjelenés pedig segíti a gondolkodást, így könnyebb az ötletelést a csapat számára is.

Function first!

Low-Fidelity prototípus

A második fázis, hogy drótvázat készítünk a skicceink alapján. Kezdetben egyszerűbb formákkal és jelzés értékű szövegekkel érdemes operálni, hogy ne vonja el a figyelmet a funkciókról. Ezt hívjük Low-Fidelity Wireframe-nek. Törekedjünk kevés szín használatára, de a legszerencsésebb, ha csak szürke árnyalatokkal különböztetjük meg a majdani színes felületeket is.

Milyen programot használjunk?

Számtalan drótváz készítő program létezik, az egészen egyszerűtől a bonyolult logikákat is kezelni képesig. Használat előtt érdemes tájékozódni, hogy nekünk milyen funkciókra lesz szükségünk belőle és az alapján megválasztani a megfelelőt.

A második részben ezek közül be is mutatunk néhányat.

A prototípus születése

Folyamat térkép

Ha kialakítottuk a folyamatainkat, elkezdhetjük demozni a funkciókat. Ezt házon belül „ bekötögetésnek „ nevezzük, de szokták „ bedrótozásnak „ vagy „ kattinthatóvá tételnek „ is hívni.

Ez ennyit takar, hogy összefűzzük a képernyőterveket a majdani funkcionalitásnak megfelelően. Vagyis ha az ember egy TOVÁBB gombra kattint, akkor az valóban tovább is viszi a megfelelő képernyőtervre. Ennek segítségével már lehet a képernyőterveket egyszerű prototípusnak nevezni, és első körös tesztelésre küldeni.

Amint lemegy a tesztelés, láthatjuk, hogy mik azok a folyamatok, amik további finomításra szorulnak, ezeket viszonylag könnyen át is tudjuk is tudjuk vezetni a drótvázba.

Hi-Fi

Balra a low-fi jobbra a hi-fi protoítus

Ha megvagyunk a folyamatok véglegesítésével, neki lehet állni a grafikus felület és az egyszerűbb interakciók kidolgozásának. Bizonyos prototipizáló szoftverek segítségével komplett logikákat tudunk építeni a felületünk alá, ami már megközelítheti a későbbiekben lefejlesztett oldal működését is.

Érdemes előre meghatározni, hogy milyen mélységig szükséges kidolgozni ezeket, mert a végtelenségig lehet finomítani és bonyolítani ezeket az interakciókat.

A prototípusnak, — mint a neve is mutatja — a szemléltetés a célja, ezért nem szerencsés, ha szinte már a végleges lefejlesztett oldal szintjét hozzák ezek a felületi logikák. Ne feledjük, hogy a mi feladatunk demozni a funkciót, nem pedig lefejleszteni azt.

A folyamat ezen részénél már közelíthetjük a kinézetet a végleges grafika felé, használjunk az arculatnak megfelelő színeket és véglegesnek szánt szövegeket is.

Amint elkészült a kidolgozott prototípusunk újabb tesztkörre küldjük. Itt a tesztelők a folyamaton kívül már tudnak figyelni a kinézetre, a szövegezésre és a felületi logikákra is. Ez általában a legkomplexebb teszt kör, az itt kapott eredményt implementálva, jó eséllyel már a végleges oldal működését határozzuk meg.

Az elkészült prototíusunk alapján a designer elkészítheti a végleges UI-t, és átadhatja az anyagot fejlesztésre. A fejlesztők így egy alaposan átgondolt, többszörösen tesztelt felületet és folyamatot fognak leprogramozni, minimalizálva annak az eshetőségét, hogy a fejlesztés végén komolyabb összegeket kelljen módosításokra áldozni.

A következő részben nagyitó alá vesszük a prototípus készítésre alkalmas szoftvereket.


Élményszerű digitális felületek és kiszolgálási folyamatok létrehozásában segítjük ügyfeleinket. Ez a Testbirds.