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
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!
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
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
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 Works.
