Design Better And Faster With Rapid Prototyping

• A szerzőről
• További olvasnivalók a SmashingMag oldalán:
• A gyors prototípusalkotás folyamata
• A prototípus feltérképezése
• Mit kell prototipizálni?
• Mennyit kell prototipizálni?
• Find the Story
• Tervezze meg az iterációkat
• A megfelelő hűség kiválasztása
• A prototípuskészítés spektruma
• Low Fidelity
• közepes hűség
• Nagy hűség
• A hűségszint kiválasztása
• Az eszközök kiválasztása
• Dos And Don’ts
• Do…
• Ne…
• További források

A szerzőről

Lyndon Cerejo a Capgemini Rapid Design & Visualization Practice minősített felhasználói élmény stratégája, aki sikeres …További információLyndon↬

A régi mondás, miszerint “egy kép többet mond ezer szónál”, jól érzékelteti, miről szól a felhasználói felület prototípusalkotása: vizuális eszközökkel leírni több ezer szavas tervezési és fejlesztési specifikációkat, amelyek részletezik, hogyan kell viselkednie és kinéznie egy rendszernek. A felhasználói felület tervezésének iteratív megközelítésében a gyors prototípusalkotás egy rendszer – legyen az weboldal vagy alkalmazás – jövőbeli állapotának gyors modellezése, és annak validálása a felhasználókból, érdekeltekből, fejlesztőkből és tervezőkből álló szélesebb körű csapattal.

Ez a gyors és iteratív eljárás a folyamat korai és gyakori szakaszában visszajelzést generál, ami javítja a végleges tervezést, és csökkenti a fejlesztés során szükséges változtatások szükségességét.

További olvasnivalók a SmashingMag oldalán:

• Optimizing Your Design For Rapid Prototype Testing
• Choosing The Right Prototyping Tool
• Content Prototyping In Responsive Web Design
• Resurrecting User Interface Prototypes (Without Creating Zombies)

A prototípusok a durva papírvázlatoktól a végtermékhez hasonlóan kinéző és működő interaktív szimulációkig terjednek. A sikeres gyors prototípuskészítés kulcsa a visszajelzések alapján történő gyors átdolgozás és a megfelelő prototípuskészítési megközelítés alkalmazása. A gyors prototípusalkotás segít a csapatoknak többféle megközelítéssel és ötlettel kísérletezni, szavak helyett vizuális eszközökkel megkönnyíti a vitát, biztosítja, hogy mindenki közös álláspontot képviseljen, csökkenti a kockázatot és elkerüli a követelmények elmulasztását, ami gyorsabban vezet jobb tervezéshez.

A gyors prototípusalkotás folyamata

A gyors prototípusalkotás egy háromlépcsős folyamat többszörös iterációját jelenti:

1. Prototípus A felhasználók leírását a megoldásról makettekké alakítja át, figyelembe véve a felhasználói élmény szabványait és a legjobb gyakorlatokat.
2. Felülvizsgálat Ossza meg a prototípust a felhasználókkal, és értékelje, hogy megfelel-e az igényeiknek és elvárásaiknak.
3. Finomítás A visszajelzések alapján azonosítsa azokat a területeket, amelyeket finomítani vagy tovább kell definiálni és pontosítani.

A prototípus általában kicsiben, néhány kulcsfontosságú terület makettjével kezdődik, és több iteráció során egyre szélesedik és mélyül, ahogy a szükséges területek kiépülnek, amíg a prototípus véglegesítése és átadása a végleges termék fejlesztésére. A folyamat gyorsasága leginkább az iterációkban nyilvánul meg, amelyek a prototípus terjedelmétől függően a valós idejű változtatásoktól a néhány napos iterációs ciklusokig terjednek.

A prototípus feltérképezése

A prototípus szó gyakran egy alkalmazás vagy felület kódolt, teljesen működő változatának képét idézi. A gyors prototípusok nem arra szolgálnak, hogy teljesen működőképes megoldásokká fejlődjenek, hanem arra szolgálnak, hogy segítsék a felhasználókat a végtermék felhasználói élményének vizualizálásában és kialakításában. Ezt szem előtt tartva, a prototípus tervezésekor döntsön néhány kulcsfontosságú kérdésről, mielőtt bármilyen prototípustervezési munkát elkezdene.

Mit kell prototipizálni?

A prototipizálás jó jelöltjei közé tartoznak az összetett interakciók, az új funkciók és a munkafolyamat, a technológia vagy a tervezés változásai. A keresési eredmények prototipizálása például akkor hasznos, ha jelentősen el akar térni a szokásos keresési élménytől; például ha facettált keresést vagy a dokumentum előnézetének lehetőségét szeretné bevezetni anélkül, hogy elhagyná a keresési eredményeket.

Mennyit kell prototipizálni?

Egy jó ökölszabály szerint a funkciók azon 20%-ára kell összpontosítani, amelyet az idő 80%-ában használni fognak; azaz a legfontosabb funkciókat, amelyeket a leggyakrabban fognak használni. Ne feledje, a gyors prototípus készítés lényege, hogy bemutassa, hogyan fog működni valami, vagy a későbbi fázisokban, hogyan fog kinézni a design, anélkül, hogy az egész terméket prototípusba foglalná.

Find the Story

A prototípusba foglalandó területek azonosítása után fonja őket egy vagy több forgatókönyvbe: azonosítsa azokat az összefüggő utakat a felhasználói élményen keresztül, amelyeket a prototípus szimulál. Egy cipőket árusító weboldal esetében az egyik forgatókönyv lehet “Unalmas Joe”, aki pontosan ugyanazt a Nike futócipőt vásárolja meg, amit hat hónappal ezelőtt, míg egy másik forgatókönyv lehet “Felfedező Sam”, aki a 10-es méreteket böngészi, hogy megtalálja az őt érdeklő Oxfordot és cipőt.

Tervezze meg az iterációkat

A teljes prototípus általában nem egyetlen iterációban, hanem inkább darabonként épül fel. Jó megközelítés, ha széleskörűen és széleskörűen kezdjük a prototípuskészítést, majd mélyen belemerülünk a megoldás kiválasztott területeibe. Egy weboldal esetében ez azt jelentené, hogy az első iterációban felépítjük a fő részek kezdőlapját és céloldalait (néha horizontális prototípusnak is nevezik), majd felülvizsgáljuk és átdolgozzuk ezt a keretrendszert. A későbbi iterációk a weboldal egy vagy több szakaszára is rátérhetnek (vertikális prototípus); egy médiatöltő weboldal esetében ez lehet az a lépés, amelyet a felhasználó megtenne egy videó megtalálásához és letöltéséhez, vagy az, hogy hogyan kezelné a médiát az online könyvtárában.

A megfelelő hűség kiválasztása

A hűség arra utal, hogy a prototípus mennyire hasonlít a végleges megoldásra. A hűségnek több dimenziója van, és a prototípusok e dimenziók mindegyikének spektrumán bárhol elhelyezkedhetnek. A tervezési folyamat szakaszától és a prototípus céljaitól függően válassza ki a megfelelő hűséget a következők mindegyikéhez:

• Vizuális hűség (vázlatos ↔ stilizált) A megjelenés a prototípus hűségének legszembetűnőbb dimenziója, és ha nem megfelelően választjuk ki, eltérítheti a prototípus felülvizsgálatát. Ha túl hamar hi-fibe megy, a felhasználók a vizuális kialakításra fognak összpontosítani, ami a korai szakaszokban nem megfelelő. Vizuális szempontból a prototípusoknak nem kell pixelpontosnak lenniük, de arányosnak kell lenniük; ha például a bal oldali navigációs területnek egy 1024 pixeles képernyő egyötödét kell elfoglalnia, nem kell pontosan 204 pixel szélesnek lennie, feltéve, hogy arányosan van ábrázolva a prototípusban. A tervezési ciklus során a prototípus készítése során szükség szerint növelje a vizuális hűséget a stílus-, szín-, márka- és grafikai elemek bevezetésével.
• Funkcionális hűség (statikus ↔ interaktív) A prototípus megmutatja, hogyan fog működni a megoldás (statikus), vagy teljesen működőképesnek tűnik, és reagál a felhasználói inputra (interaktív)? Ez a dimenzió kevésbé vonja el a felhasználók figyelmét, de az interaktivitás hozzáadása a későbbi iterációkban növeli a funkcionális hűséget, és lehetővé teszi, hogy a prototípust használhatósági tesztelésre, képzésre és kommunikációra használják.
• Tartalomhűség (lorem ipsum ↔ valódi tartalom) Egy másik dimenzió, amely gyakran elvonja a felhasználók figyelmét, a prototípusban megjelenített tartalom. A görbe vonalakat és a lorem ipsumhoz hasonló álszövegeket célszerű elkerülni a prototípuskészítés korai szakaszában. De ahogy a prototípus finomodik, értékelje, hogy szükség van-e a dummy szöveg valódi tartalommal való helyettesítésére, hogy megérezhesse, hogyan befolyásolja a teljes dizájnt.

A prototípuskészítés spektruma

Low Fidelity

A prototípuskészítés megkezdésének leggyorsabb módja egyben a legegyszerűbb is: toll(cil) papírra vetése. A papírra vázolás egy olyan alacsony hűségű megközelítés, amelyet bárki meg tud csinálni; nincs szükség különleges eszközökre vagy tapasztalatra. Leggyakrabban a tervezési ciklus korai szakaszában használják, a vázlatkészítés gyors módja a tervezési megközelítések és koncepciók durva makettjeinek elkészítésének, valamint a felhasználók visszajelzéseinek megszerzésére. A papírprototípusok ideálisak az ötletelés és a koncepcióalkotás során, és végezhetők egyedül egy fülkében egy vázlatfüzettel, vagy csoportosan egy flipchart (vagy tábla) és filctollak segítségével.

A prototípusok spektrumának alacsony hűségű végpontján elhelyezkedő papírprototípusok statikusak, és általában alacsony vizuális és tartalmi hűséggel rendelkeznek. Ez arra kényszeríti a felhasználókat, hogy arra koncentráljanak, hogyan fogják használni a rendszert, ahelyett, hogy hogyan fog kinézni, és nyitottabbá teszi a tervezőket a felhasználói visszajelzéseken alapuló változtatásokra.

Az alacsony hűségű prototípuskészítés alkalmas a gyors prototípuskészítésre. Nincs tanulási görbéje, de lehetővé teszi a változtatások egyszerű és gyors elvégzését.

közepes hűség

Amint elkezdünk számítógépes eszközöket, például a Visiót és az Omnigraffle-t használni a prototípusok készítéséhez, a hűség a legtöbb fronton növekszik, és közepes hűségű prototípusokat eredményez. Az ilyen eszközökkel létrehozott drótvázak, feladatfolyamatok és forgatókönyvek több időt és erőfeszítést igényelnek, de formálisabbnak és kifinomultabbnak tűnnek. Bár a márkaépítés, a színek és a stílus vizuális elemei is bevezethetők, a prototípusok készítői gyakran távol maradnak ezektől, és inkább az alkalmazás viselkedésének bemutatására összpontosítanak. Az interaktivitás szimulálható oldalak vagy képernyők összekapcsolásával, de a funkcionális hűség itt legfeljebb közepes. Ezek a prototípusok a legalkalmasabbak annak megállapítására, hogy a felhasználói igények teljesülnek-e, és hogy a felhasználói élmény optimális-e.

Két oka van annak, hogy egy közepes hűségű prototípus szándékosan nem úgy néz ki, mint egy közepes hűségű prototípus:

• Az első az, hogy a Balsamiq vagy vázlatos Visio-sablonok használatával, hogy a prototípus alacsony hűségűnek tűnjön, arra kényszeríti a felhasználókat, hogy inkább vázlatnak vagy folyamatban lévő munkának tekintsék, mint csiszolt és kész terméknek.
• A második az, hogy a prototípus nagy vizuális hűségűvé tételével (például egy Photoshopban készített átfogó elrendezéssel) ráveszi a felhasználót, hogy a vizuális tervezésre és megjelenésre összpontosítson, beleértve a színeket, betűtípusokat, elrendezést, logót és képeket.

A közepes hűségű prototípusok gyorsaságát sablonokkal, sablonokkal és újrafelhasználható widgetekkel és elemekkel érheti el. Gyorsabbá válik, ahogy egyre jártasabbá válik a választott eszközökkel.

Nagy hűség

A nagy hűségű prototípusok a legrealisztikusabbak, és gyakran összetéveszthetőek a végtermékkel, de általában időigényesek. Néhány évvel ezelőtt a nagy hűségű prototípusok létrehozásának egyetlen módja a tényleges kódolás volt egy programozási nyelv használatával, ami gyakran megkövetelte a tervező és a fejlesztő együttműködését. Manapság azonban az alkalmazás-szimulációs eszközök lehetővé teszik a nem műszaki felhasználók számára, hogy a felhasználói felület widgetjeit húzva és eldobva olyan nagy hűségű prototípusokat hozzanak létre, amelyek szimulálják a végtermék funkcionalitását, még az üzleti logika és az adatbázis-interakciók esetében is. Az Axure és az iRise néhány példa a nagy hűségű prototípusok létrehozására használható alkalmazás-szimulációs eszközökre.

Ezek a prototípusok megfelelőek, ha nagy vizuális és funkcionális hűségre van szükség; például egy új technológia bevezetésekor (mondjuk, ha egy mainframe alkalmazásról – igen, még mindig létezik! – egy webalapú megoldásra való áttérés esetén. A legtöbb ilyen prototípus nem alakítható át használható kóddá, de kiváló referenciaként szolgálnak a fejlesztők számára. Hasznosak a használhatósági tesztek elvégzéséhez és a felhasználók képzéséhez is.

A nagy hűségű prototípusok készítése az interaktivitás és a hűség szintjét tekintve viszonylag gyors, és a drag-and-drop szimulációs eszközök használatával felgyorsítható. Ezen túlmenően néhány ilyen eszköz megkönnyíti a felhasználói visszajelzések összegyűjtését és a követelmények dokumentálását, ami tovább gyorsítja a tervezési folyamatot. Bár nem kell új programozási nyelvet tanulni, ezeknek az eszközöknek mégis van tanulási görbéjük.”

A hűségszint kiválasztása

A prototípus hűségszintjének kiválasztásakor nincs egyetlen helyes megközelítés. A legtöbb új termék tervezését legjobb vázlatokkal kezdeni, majd a rendszer összetettségétől és a hűség dimenzióinak követelményeitől függően áttérni a közepes vagy magas hűségszintű prototípusokra.

Egy konkrét gyógyszeripari ügyféllel dolgozva a táblákról interaktív prototípusokra váltottunk, amelyek magas funkcionális és tartalmi hűséggel, de alacsony vizuális hűséggel rendelkeztek. Őket kevésbé érdekelte a megjelenés, mint a vállalati irányelvek betartása.

Egy másik, a kiskereskedelemben tevékenykedő ügyfél esetében az interaktív prototípusunknak magas vizuális és funkcionális hűséggel kellett rendelkeznie. A tartalmi hűség nem számított, mivel a tartalmat újra fogják használni, és már ismerték. Számukra a megjelenés és az interaktív élmény fontosabb volt, mert ez volt az első SharePoint-implementációjuk, és azt akarták, hogy a portál “nem-SharePointos” megjelenésű legyen!

Az eszközök kiválasztása

A megközelítéstől függően sokféle eszköz közül választhat. Dan Harrelson az Adaptive Path blogon összeállított egy listát a népszerű prototípuskészítő eszközökről.

Minden eszköznek megvan a maga funkciókészlete és erőssége. Az Ön igényei és a projektek követelményei alapján, amelyeken dolgozik, értékelje, hogy melyik eszköz lenne a legmegfelelőbb. Íme néhány kérdés, amelyet érdemes figyelembe venni az eszközök értékelésénél:

• Mennyire könnyű megtanulni és használni az eszközt?
• Flexibilis-e a webes, csomagolt és egyedi szoftveralkalmazások, valamint asztali és mobil alkalmazások prototípusainak támogatása szempontjából?
• Megvan-e az újrafelhasználható sablonok, sablonok vagy widgetek tárháza?
• Mennyire könnyű a prototípus megosztása másokkal felülvizsgálat céljából? Az ő visszajelzéseiket is rögzíteni lehet az eszközzel?
• Milyen könnyű menet közben változtatni vagy beépíteni a visszajelzéseket?
• Vannak együttműködési funkciók, például lehetővé teszi, hogy több ember egyszerre dolgozzon rajta?
• Milyenek a licencfeltételek és költségek?

Dos And Don’ts

Az induláshoz az alábbiakban néhány pontot érdemes szem előtt tartani a hatékony gyors prototípuskészítésről:

Do…

• Dolgozzon együtt a felhasználókkal, az üzleti és informatikai érdekeltekkel a gyors prototípusfejlesztés során. Amellett, hogy értékes visszajelzéseket adnak, a végtermék iránti tulajdonosi felelősség érzését is elnyerik.
• Kerülje el a “prototípus kúszást” a folyamatra vonatkozó elvárások meghatározásával, beleértve a célt, a hűséget, a terjedelmet és az időtartamot érintő elvárásokat is. Emlékeztessen mindenkit, beleértve saját magát is, hogy a gyors prototípuskészítés egy cél elérésének eszköze, nem pedig öncélú.
• Az interaktív, nagy hűségű prototípusok és szimulációk készítésekor építsen be reális késleltetéseket (például a képernyő frissítésére vagy a tranzakció lépéseinek végigjárására), hogy a felhasználók ne várjanak azonnali válaszidőt a végterméktől.
• Újrafelhasználás, újrafelhasználás, újrafelhasználás. A számítógép-alapú prototípusok esetében ez azt jelenti, hogy a jövőbeli projektekhez újrafelhasználható sablonokat, sablonokat, mintákat és widgeteket kell elmenteni.
• A legfontosabb, hogy minden prototípus-ellenőrzési ülést kezdjen azzal a kijelentéssel, hogy ez csak egy prototípus, egy mock-up, nem a tényleges megoldás. Ez emlékezteti a felhasználókat, hogy ez egy folyamatban lévő munka, ösztönzi a visszajelzéseket, és a nagy hűségű prototípusok esetében megakadályozza, hogy a felhasználók összetévesszék a működő megoldással.

Ne…

• Ne készítsen prototípusokat olyan funkciókról vagy funkciókról, amelyeket nem lehet megvalósítani – ez gyakran probléma a szoftvercsomagok megvalósításánál. Ha kétségei vannak, a fejlesztés megkezdése előtt erősítse meg a fejlesztőkkel.
• Ne tekintsen minden változtatást vagy kérést, amely a prototípus felülvizsgálatából származik, új követelménynek. A gyors prototípuskészítés segít a kimaradt követelmények rögzítésében, de ezeket az új követelményeket gondosan ki kell értékelni. Egyeseket meg lehet valósítani, míg másokat egy későbbi kiadásra kell halasztani.
• Ne kezdje el a prototípus-felülvizsgálati üléseket a visszajelzésre vonatkozó egyértelmű iránymutatások nélkül. Legyen nagyon konkrétan meghatározva, hogy milyen típusú visszajelzéseket vár. (A lépések logikusan vannak elrendezve? A navigáció világos és intuitív?) Ha nem, készüljön fel arra, hogy “Nem tetszik a kék a fejlécben”, vagy “Nem használhatnánk inkább ezt a betűtípust?”, vagy “Nem lehetne ezt nagyobbra, merészebbre, pirosra és villogó színűre csinálni?”
• Ne legyen maximalista. A legtöbb esetben a gyors prototípuskészítésnek nem kell 100%-ban tökéletesnek lennie, csak elég jónak ahhoz, hogy mindenki számára közös értelmezést biztosítson.
• Ne készítsen prototípust mindenről. A legtöbbször nem is kell.

További források

• Ha kell egy kis lökés a vázlatkészítéshez, próbálja ki Dan Roam The Back of the Napkin című könyvét.
• Tudjon meg többet a papír prototípuskészítésről Carolyn Snyder Paper Prototyping című könyvében: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, a koncepciók feltárásának és finomításának technikája.
• No need low-fidelity content? Generáljon Lorem Ipsum szöveget a prototípusához.
• A papírvázlatát szeretné nagy hűségűvé tenni? Próbálja ki ezeket a webes, iPad- és iPhone-sablonokat.
• Vázlatkészítési és prototípuskészítési eszközök iPhone-alkalmazásokhoz
• Egyszerű vázlatkészítés és prototípuskészítés a Firefoxban a Pencil kiegészítővel.
• Ingyenes nyomtatható vázlatkészítő, drótvázlatkészítő és jegyzetelő PDF sablonok
• 50 ingyenes UI és webdesign drótvázlatkészlet, erőforrás és forrásfájl

(al)