Navrhujte lépe a rychleji pomocí rychlého prototypování

• O autorovi
• Další čtení na SmashingMag:
• Proces rychlého prototypování
• Scoping A Prototype
• Co je třeba prototypovat?
• Kolik by se mělo prototypovat?
• Najděte příběh
• Plánujte iterace
• Vyberte vhodnou věrnost
• Spektrum prototypování
• Nízká věrnost
• Střední věrnost
• Vysoká věrnost
• Výběr úrovně věrnosti
• Výběr nástrojů
• Dos And Don’t
• Dělat…
• Nezpracovávejte…
• Další zdroje

O autorovi

Lyndon Cerejo je certifikovaný stratég uživatelské zkušenosti v praxi Rapid Design & společnosti Capgemini, který má za sebou úspěšné …Více oLyndon↬

Staré přísloví „obrázek mluví za tisíc slov“ vystihuje to, o čem prototypování uživatelského rozhraní je: použití vizualizace k popisu tisíců slov v návrhu a specifikacích vývoje, které podrobně popisují, jak by se měl systém chovat a vypadat. V rámci iterativního přístupu k návrhu uživatelského rozhraní je rychlé prototypování procesem rychlého vytvoření makety budoucího stavu systému, ať už se jedná o webovou stránku nebo aplikaci, a jejího ověření širším týmem uživatelů, zúčastněných stran, vývojářů a návrhářů.

Tímto rychlým a iterativním způsobem se vytváří zpětná vazba v rané fázi procesu, což zlepšuje konečný návrh a snižuje potřebu změn během vývoje.

Další čtení na SmashingMag:

• Optimalizace návrhu pro rychlé testování prototypů
• Výběr správného nástroje pro prototypování
• Prototypování obsahu v responzivním webovém designu
• Oživení prototypů uživatelského rozhraní (bez vytváření zombie)

Prototypy sahají od hrubých papírových skic až po interaktivní simulace, které vypadají a fungují jako finální produkt. Klíčem k úspěšnému rychlému prototypování je rychlá revize na základě zpětné vazby a použití vhodného přístupu k prototypování. Rychlé prototypování pomáhá týmům experimentovat s různými přístupy a nápady, usnadňuje diskusi pomocí vizualizace namísto slov, zajišťuje, že všichni sdílejí společné porozumění, a snižuje riziko a zabraňuje chybějícím požadavkům, což vede k rychlejšímu vytvoření lepšího návrhu.

Proces rychlého prototypování

Rychlé prototypování zahrnuje několik iterací třístupňového procesu:

1. Prototyp Převeďte uživatelský popis řešení do maket, přičemž zohledněte standardy a osvědčené postupy pro uživatelskou zkušenost.
2. Přezkoumání Podělte se o prototyp s uživateli a zhodnoťte, zda splňuje jejich potřeby a očekávání.
3. Zpřesnění Na základě zpětné vazby určete oblasti, které je třeba zpřesnit nebo dále definovat a vyjasnit.

Prototyp obvykle začíná v malém měřítku, s několika maketami klíčových oblastí, a během několika iterací roste do šířky a hloubky tak, jak jsou potřebné oblasti rozšiřovány, až je prototyp dokončen a předán k vývoji finálního produktu. Rychlost procesu je nejvíce patrná v iteracích, které se pohybují od změn v reálném čase až po iterační cykly v délce několika dnů, v závislosti na rozsahu prototypu.

Scoping A Prototype

Slovo prototyp často vyvolává představu zakódované, plně funkční verze aplikace nebo rozhraní. Rychlé prototypy nejsou určeny k tomu, aby se vyvinuly v plně funkční řešení, ale mají pomoci uživatelům vizualizovat a vytvořit uživatelský zážitek z konečného produktu. S ohledem na to se při stanovení rozsahu prototypu rozhodněte o několika klíčových otázkách ještě před zahájením jakýchkoli prací na prototypu.

Co je třeba prototypovat?

Mezi dobré kandidáty na prototypování patří složité interakce, nové funkce a změny v pracovním postupu, technologii nebo designu. Například prototypování výsledků vyhledávání je užitečné v případě, že se chcete výrazně odchýlit od standardního způsobu vyhledávání; například zavést fazetové vyhledávání nebo možnost náhledu dokumentu, aniž byste opustili výsledky vyhledávání.

Kolik by se mělo prototypovat?

Dobrým pravidlem je zaměřit se na 20 % funkcí, které se budou používat 80 % času; tj. klíčové funkce, které se budou používat nejčastěji. Nezapomeňte, že smyslem rychlého prototypování je ukázat, jak bude něco fungovat, nebo v pozdějších fázích, jak bude vypadat design, aniž by se prototypoval celý produkt.

Najděte příběh

Po určení oblastí, které mají být prototypovány, je spleťte do jednoho nebo více scénářů: určete souvislé cesty uživatelským prostředím, které prototyp simuluje. U webové stránky, která prodává boty, může být jedním ze scénářů „nudný Joe“, který si koupí přesně ty samé běžecké boty Nike, které si koupil před šesti měsíci, zatímco jiným scénářem může být „zkoumající Sam“, který prochází velikost 10, aby našel pár oxfordek a pár mokasín, které ho zajímají.

Plánujte iterace

Celý prototyp obvykle nevzniká v jedné iteraci, ale spíše po částech. Dobrým přístupem je začít prototypování široce a zeširoka a poté se ponořit do vybraných oblastí řešení. V případě webových stránek by to znamenalo vytvořit v první iteraci domovskou stránku a vstupní stránky hlavních sekcí (někdy se označuje jako horizontální prototyp) a poté tento rámec přezkoumat a revidovat. Následné iterace by mohly proniknout do jedné nebo více sekcí webu (vertikální prototyp); u webu pro stahování médií by to mohly být kroky, které by uživatel udělal, aby našel video a stáhl ho, nebo jak by spravoval média ve své online knihovně.

Vyberte vhodnou věrnost

Věrnost označuje, jak moc se prototyp podobá konečnému řešení. Existuje více dimenzí věrnosti a prototypy mohou ležet kdekoli na spektru každé z těchto dimenzí. V závislosti na fázi procesu návrhu a cílech prototypu zvolte vhodnou věrnost pro každou z následujících dimenzí:

• Vizuální věrnost (nakreslená ↔ stylizovaná) Vzhled a dojem jsou nejvýraznější dimenzí věrnosti prototypu, a pokud nejsou správně zvoleny, mohou se recenze prototypu dostat stranou. Přejděte na hi-fi příliš brzy a uživatelé se zaměří na vizuální design, což není v raných fázích vhodné. Z vizuálního hlediska nemusí být prototypy dokonalé v pixelech, ale měly by být proporcionální; například pokud má levá navigační oblast zabírat pětinu obrazovky o velikosti 1024 pixelů, nemusí být široká přesně 204 pixelů, pokud je v prototypu proporcionálně zobrazena. Jak prototypování postupuje v průběhu návrhového cyklu, zvyšujte vizuální věrnost podle potřeby zaváděním prvků stylu, barev, značky a grafiky.
• Funkční věrnost (statická ↔ interaktivní) Odhaluje prototyp, jak bude řešení fungovat (statický), nebo se jeví jako plně funkční a reaguje na vstupy uživatele (interaktivní)? Tento rozměr uživatele rozptyluje méně, ale přidání interaktivity v dalších iteracích zvyšuje funkční věrnost a umožňuje prototyp použít pro testování použitelnosti a školení a komunikaci.
• Věrnost obsahu (lorem ipsum ↔ skutečný obsah) Dalším rozměrem, který často rozptyluje uživatele, je obsah, který je v prototypu zobrazen. Klikatým řádkům a fiktivním textům typu lorem ipsum je užitečné se v raných fázích prototypování vyhnout. Ale jak se prototyp zdokonaluje, vyhodnocujte potřebu nahradit fiktivní text skutečným obsahem, abyste získali pocit, jak ovlivňuje celkový design.

Spektrum prototypování

Nízká věrnost

Nejrychlejší způsob, jak začít prototypování, je také nejjednodušší: přiložit pero(cil) na papír. Skicování na papír je přístup nízké věrnosti, který zvládne každý; nevyžaduje žádné speciální nástroje ani zkušenosti. Skicování se nejčastěji používá v raných fázích návrhového cyklu, je to rychlý způsob, jak vytvořit hrubé makety přístupů a konceptů návrhu a získat zpětnou vazbu od uživatelů. Vytváření papírových prototypů je ideální během brainstormingu a konceptualizace a lze je provádět samostatně v kabině se skicákem nebo ve skupině s flipchartem (nebo tabulí) a fixami.

Papírové prototypy, které leží na konci spektra prototypů s nízkou věrností, jsou statické a obvykle mají nízkou vizuální a obsahovou věrnost. To nutí uživatele soustředit se na to, jak budou systém používat, a ne na to, jak bude vypadat, a návrháři jsou díky tomu otevřenější změnám na základě zpětné vazby od uživatelů.

Prototypování s nízkou věrností se hodí k rychlému prototypování. Nemá žádnou křivku učení, ale umožňuje snadno a rychle provádět změny.

Střední věrnost

Když začneme k prototypování používat počítačové nástroje, jako je Visio a Omnigraffle, věrnost se na většině front zvyšuje a výsledkem jsou prototypy střední věrnosti. Wireframy, toky úloh a scénáře vytvořené pomocí těchto nástrojů vyžadují více času a úsilí, ale vypadají formálněji a propracovaněji. I když lze zavést vizuální prvky značky, barev a stylu, prototypisté se od nich často drží dál a místo toho se zaměřují na demonstraci chování aplikace. Interaktivitu lze simulovat propojením stránek nebo obrazovek, ale funkční věrnost je zde přinejlepším střední. Tyto prototypy se nejlépe hodí ke zjištění, zda jsou splněny potřeby uživatelů a zda je uživatelský zážitek optimální.

Existují dva důvody, proč lze záměrně dosáhnout toho, aby prototyp se střední věrností nevypadal jako prototyp se střední věrností:

• Prvním důvodem je, že použitím šablon Balsamiq nebo skicovitých šablon Visio, aby prototyp vypadal s nízkou věrností, nutíte uživatele, aby na něj pohlíželi jako na návrh nebo rozpracovanou práci, a ne jako na vybroušený a hotový produkt.
• Druhý spočívá v tom, že tím, že prototypu dodáte vysokou vizuální věrnost (například v komplexním rozvržení provedeném ve Photoshopu), přimějete uživatele, aby se soustředil na vizuální návrh a vzhled, včetně barev, písma, rozvržení, loga a obrázků.

Rychlosti prototypování střední věrnosti dosáhnete pomocí šablon, šablon a opakovaně použitelných widgetů a prvků. Zrychluje se s tím, jak se zdokonalujete ve vybraných nástrojích.

Vysoká věrnost

Prototypy vysoké věrnosti jsou nejrealističtější a často jsou zaměňovány za finální produkt, ale obvykle jsou časově náročné. Před několika lety bylo jediným způsobem, jak vytvořit prototypy s vysokou věrností, skutečné kódování pomocí programovacího jazyka, což často vyžadovalo spolupráci designéra a vývojáře. V dnešní době však nástroje pro simulaci aplikací umožňují netechnickým uživatelům přetahováním widgetů uživatelského rozhraní vytvářet vysoce věrné prototypy, které simulují funkčnost konečného produktu, a to i v případě obchodní logiky a interakcí s databází. Axure a iRise jsou příklady nástrojů pro simulaci aplikací, které lze použít k vytvoření vysoce věrných prototypů.

Tyto prototypy jsou vhodné, pokud je vyžadována vysoká vizuální a funkční věrnost; například při zavádění nové technologie (například při přechodu z mainframové aplikace – ano, stále existují!) na webové řešení. Většinu těchto prototypů nelze převést do použitelného kódu, ale slouží jako vynikající reference pro vývojáře. Jsou také užitečné pro provádění testování použitelnosti a školení uživatelů.

Vysoce věrné prototypy jsou vzhledem k úrovni interaktivity a věrnosti poměrně rychlé a lze je urychlit použitím simulačních nástrojů typu drag-and-drop. Některé z těchto nástrojů navíc usnadňují shromažďování zpětné vazby od uživatelů a dokumentování požadavků, což dále urychluje proces návrhu. I když se nemusíte učit nový programovací jazyk, mají tyto nástroje určitou křivku učení.

Výběr úrovně věrnosti

Při výběru věrnosti prototypu neexistuje jediný správný přístup. Většinu návrhů nových produktů je nejlepší začít s náčrty a poté přejít buď na prototypy střední, nebo vysoké věrnosti, v závislosti na složitosti systému a požadavcích na rozměry věrnosti.

Při práci s jedním konkrétním klientem z farmaceutického průmyslu jsme přešli od bílých tabulí k interaktivním prototypům, které měly vysokou funkční a obsahovou věrnost, ale nízkou vizuální věrnost. Na vzhledu jim záleželo méně než na dodržení firemních směrnic.

Pro jiného klienta, tentokrát z oblasti maloobchodu, musel mít náš interaktivní prototyp vysokou vizuální a funkční věrnost. Na obsahové věrnosti nezáleželo, protože by obsah používali opakovaně a byli s ním již obeznámeni. Pro ně byl důležitější vzhled a interaktivní zážitek, protože to byla jejich první implementace SharePointu a chtěli, aby portál vypadal „nesharepoinťácky“!“

Výběr nástrojů

V závislosti na přístupu máte na výběr širokou škálu nástrojů. Dan Harrelson sestavil na blogu Adaptive Path seznam populárních nástrojů pro tvorbu prototypů.

Každý nástroj má svou vlastní sadu funkcí a silných stránek. Na základě svých potřeb a požadavků projektů, na kterých pracujete, vyhodnoťte, který nástroj bude nejvhodnější. Zde je několik otázek, které je třeba při hodnocení nástrojů zvážit:

• Jak snadné je se nástroj naučit a používat?
• Je flexibilní, aby podporoval prototypy pro webové, balíčkové a vlastní softwarové aplikace a také desktopové a mobilní aplikace?
• Je k dispozici úložiště opakovaně použitelných šablon, šablon nebo widgetů?
• Jak snadné je sdílet prototyp s ostatními k posouzení? Lze pomocí nástroje zachytit jejich zpětnou vazbu?
• Jak snadné je provádět změny za běhu nebo zapracovávat zpětnou vazbu?
• Má nástroj nějaké funkce pro spolupráci, například umožňuje, aby na něm pracovalo více lidí současně?
• Jaké jsou licenční podmínky a náklady?

Dos And Don’t

Jak začínáte, zde je několik bodů o efektivním rychlém prototypování, které byste měli mít na paměti:

Dělat…

• Pracovat společně s uživateli, obchodními a IT zainteresovanými stranami při rychlém vytváření prototypů. Kromě toho, že poskytnou cennou zpětnou vazbu, získají také pocit vlastnictví konečného produktu.
• Vyhněte se „prototype creep“ stanovením očekávání pro proces, včetně těch, která ovlivňují účel, věrnost, rozsah a dobu trvání. Připomeňte všem, včetně sebe, že rychlé prototypování je prostředkem k dosažení cíle, nikoli cílem samým o sobě.
• Při vytváření interaktivních prototypů a simulací s vysokou věrností počítejte s realistickým zpožděním (například při obnovování obrazovky nebo při procházení jednotlivými kroky transakce), aby uživatelé neočekávali od konečného produktu okamžitou odezvu.
• Používat, znovu používat, znovu používat. V případě počítačového prototypování to znamená ukládání opakovaně použitelných šablon, šablon, vzorů a widgetů pro budoucí projekty.
• Nejdůležitější je začít každou revizi prototypu s upozorněním, že se jedná pouze o prototyp, o maketu, nikoli o skutečné řešení. To uživatelům připomíná, že se jedná o nedokončenou práci, podporuje to zpětnou vazbu a v případě prototypů s vysokou věrností to zabraňuje tomu, aby si je uživatelé pletli s funkčním řešením.

Nezpracovávejte…

• Nezpracovávejte prototypy funkcí nebo vlastností, které nelze implementovat – často je to problém u implementací softwarových balíků. V případě pochybností si to před zahájením ověřte u vývojářů.
• Neberte každou změnu nebo požadavek, který vzejde z revize prototypu, jako nový požadavek. Rychlé prototypování pomáhá zachytit opomenuté požadavky, ale tyto nové požadavky by měly být pečlivě vyhodnoceny. Některé z nich mohou být implementovány, zatímco jiné se přesunou do budoucí verze.
• Nezačínejte relace přezkoumání prototypů bez jasných pokynů pro zpětnou vazbu. Buďte velmi konkrétní ohledně typu zpětné vazby, kterou hledáte. (Jsou kroky logicky uspořádané? Je navigace jasná a intuitivní?) Pokud ne, připravte se na: „Nelíbí se mi modrá barva v záhlaví,“ nebo „Nemůžeme místo toho použít tohle písmo?“ nebo „Můžete to udělat větší, tučnější, červené a blikající?“
• Nebuďte perfekcionisté. Ve většině případů nemusí být rychlé prototypování stoprocentně dokonalé, stačí, když bude dostatečně dobré, aby si všichni rozuměli.
• Nezhotovujte prototypy všeho. Většinou byste to ani neměli dělat.

Další zdroje

• Pokud potřebujete popostrčit, abyste začali skicovat, zkuste knihu Dana Roama The Back of the Napkin.
• Další informace o papírovém prototypování najdete v knize Carolyn Snyder Paper Prototyping:
• Sketchboarding, technika pro zkoumání a zdokonalování konceptů.
• Potřebujete obsah s nízkou věrností? Vygenerujte text Lorem Ipsum pro svůj prototyp.
• Chcete, aby vaše papírová skica vypadala vysoce věrně? Vyzkoušejte tyto šablony pro web, iPad a iPhone.
• Nástroje pro skicování a prototypování aplikací pro iPhone
• Snadné skicování a prototypování ve Firefoxu s doplňkem Pencil.
• Zdarma tisknutelné šablony PDF pro skicování, wireframing a tvorbu poznámek
• 50 bezplatných sad, zdrojů a zdrojových souborů pro wireframing uživatelského rozhraní a webového designu

(al)

.