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

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.

Works.

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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