Image for post
Image for post

Mindent a prototípusról I.

A folyamat

Peter Santha
Dec 19, 2017 · 4 min read

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

Image for post
Image for post
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!

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
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.

Works.

Élményszerű digitális felületek kialakításában segítjük…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store