Lo-fi prototypování: kdy se hodí a jak na něj
Vývoj produktu nebo služby je nákladný jak časově, tak finančně. Nikdo nechceme investovat hodiny do projektu, který nefunguje nebo nesplní očekávání a skončí v koši. Proto je dobré návrhy testovat a low-fidelity prototypování je jedním z nástrojů, který nám v oblasti UX/UI designu může pomoci už na startovací čáře vývoje.
Co je to prototyp a k čemu je prototypování dobré?
Prototyp je model finálního produktu či služby, který designérovi umožňuje vidět svůj návrh v akci. Jinými slovy, prototyp je simulace interakce mezi uživatelem a rozhraním produktu, díky kterému designér může ověřit použitelnost a funkčnost svého návrhu. Interakce je zde klíčovým slovem, neboť právě tou se prototyp liší od náčrtů, wireframů či mock-upů. Prototyp může simulovat jak celek, tak dílčí interakce. Cílem prototypu je otestovat návrh a vychytat v něm mouchy ještě před vypuštěním jeho finální podoby do světa.
Mezi prototypem a finálním produktem
Prototypy nemusí nutně vypadat jako finální produkt — při prototypování rozlišujeme míru přesnosti (level of fidelity) prototypu vůči finálnímu produktu. Přesnost (fidelity) prototypu závisí na tom, jak blízko má vzhledu a chování (look-and-feel) finálního produktu. Na škále od nízké (low-fidelity) po vysokou (high-fidelity) se přesnost modelu může lišit v oblasti vizuální, obsahové i co se komplexnosti interaktivity týče.
Předtím než se pustíme do prototypování, musíme se rozhodnout kolik času, energie a financí chceme a můžeme do modelu investovat. Od toho se odvíjí, zda se vydáme lo-fi nebo hi-fi cestou. Je také možné začít s lo-fi prototypováním a návrh designu postupně vylepšovat až do hi-fi a posléze finální verze.
Výhody lo-fi prototypování
Lo-fi prototypování umožnuje rychle a za minimální náklady vyzkoušet naše nápady a návrhy, ať už stojíme na začátku projektu, nebo chceme otestovat novou funkci v existující aplikaci. Lo-fi prototyp může být sada papírových náčrtů i propojených wireframů v digitální podobě, jejichž vytvoření zvládne i člověk bez pokročilých technických dovedností a technologií.
Další výhodou lo-fi prototypů je, že díky zjednodušujícímu provedení na nich lépe vystupují koncepty za designem UX/UI. Prakticky to znamená, že při testování hi-fi prototypů se může stát, že dostaneme zpětnou vazbu na provedení (tzn. volbu barev, podobu tlačítek, výběr fontů apod.), spíše než na rozložení stránky, cestu uživatele a srozumitelnost.
Dokud je náš návrh v hlavě, nemusíme vidět jeho slabé stránky, a proto je potřeba své hypotézy ověřovat. Když při testování narazíme na problém, přepracování lo-fi prototypu bolí méně než přepracování hi-fi prototypu, do kterého jsme investovali více. Pokud váš návrh nevyhovuje vůbec, hodíte do koše spíše projekt, na kterém jste pracovali minuty, anebo hodiny?
Díky tomu, že lo-fi prototypování nevyžaduje speciální technologie, můžeme je snadno přenášet a prezentovat. Zvláště papírový prototyp lze upravovat i během testování, podporuje kreativitu a usnadňuje spolupráci. Má tedy smysl pracovat i s vytištěným, původně digitálním, materiálem.
Nevýhody lo-fi prototypování
Když uvažujeme o lo-fi prototypování, je potřeba znát i jeho slabé stránky. Na jednoduchých prototypech např. z papíru nedokážeme simulovat komplexnější interakce, proměny nebo animace. Testování s papírovými prototypy také může být časově náročnější oproti testování s digitální alternativou — proměna listů obrazovek totiž vyžaduje fyzickou výměnu papíru. Při testování prototypu z papíru je potřeba zajistit dostatek prostoru, aby byla zajištěna dostatečná přehlednost a všechny kroky je potřeba pečlivě naplánovat. Lo-fi prototypy také vyžadují větší imaginaci od účastníků a schopnost představit si jak design webu či aplikací funguje. Z uvedených důvodů a omezení mohou být výsledky testování nepřesné a je potřeba to mít na paměti.
Metody lo-fi prototypování
Lo-fi prototypy mohou být jak 2D, tak 3D. Kromě tužky a papíru můžeme sáhnout po kartónu, plastelíně, dřevě i jiných materiálech.
Mezi papírové prototypy patří např. náčrty webových stránek a mobilních obrazovek. Při testování je vhodné mít po ruce i prázdné šablony, aby bylo možné bezprostředně zpracovat zpětnou vazbu. Dále se hodí mít po ruce zařízení, pro které řešení připravujeme, aby účastníci testování měli nastavený správný mindset při práci s prototypem. Tady se může hodit právě např. model z kartonu. Papírové prototypy jsou nejjednodušším prototypem, se kterým mohou lidé interagovat. Jsou sice nejdál od finální podoby produktu či služby, ale základní funkčnost simulovat dokážou.
Digitální prototypy mají podobu wireframů, mezi kterými se můžeme proklikat. Tento prototyp opět nevypadá jako finální produkt, ale výhodou je, že je potřeba méně lidí, kteří dohlíží na testování (není potřeba osoby navíc, která bude simulovat počítač a obracet stránky). Pro tento typ prototypování stačí PowerPoint nebo Keynote, ale existují i specializované nástroje jako AdobeXD, InVision či Mockup. Tato metoda je také vhodná pro testování ve větších skupinách.
Jak na lo-fi prototypování v 5 krocích:
1. Vytyčení cíle
Než se pustíme do tvoření prototypu, musíme vědět proč to děláme — co chceme ukázat a ověřit. Chceme testovat cestu uživatele, nebo jen konkrétní funkci? Chceme získat zpětnou vazbu od týmu, stakeholderů nebo cílové skupiny uživatelů? Po zodpovězení si těchto otázek je dobré napsat si 2–3 hlavní funkce, které chceme do lo-fi prototypu zahrnout.
2. Vybrání metody
Na základě našeho cíle se ptáme, jak chceme prototyp prezentovat. Je užitečné klást si otázky: co nám pomůže získat nejužitečnější zpětnou vazbu? Která z metod je pro náš účel nejvýhodnější a nejjednodušší? Podrobnost detailů závisí na tom, komu chceme prototyp ukazovat a kolik do něj můžeme investovat času, energie a financí. V této fázi můžeme zjistit, že pro nás papírová ani digitální metoda není vhodná a lo-fi prototypování nenaplní naše potřeby.
3. Provedení
Když víme proč a jak, můžeme se pustit do tvoření prototypu. Máme vše, co potřebujeme? Pro papírový model nám stačí papír a tužka, pro digitální potřebujeme alespoň PowerPoint. Je potřeba mít na paměti, že lo-fi prototypování není o tom, aby náš model byl perfektní, ale o diskusi.
U papírového prototypu je nejprve potřeba promyslet co patří na každou stránku, poté projít každou z nich a doplnit k čemu slouží. Každou stranu posléze nadepsat a začít vyplňovat jednotlivými elementy. Další krok je zkontrolovat návrhy a rozhodnout, co je tam navíc. Pokud něco není potřebné pro funkčnost designu, jde to z kola ven. Dále je potřeba určit pořadí, tedy flow stránek. Po rozmístění je vhodné je propojit šipkami, které naznačují jejich vztahy. Takto se tvoří základní storyboard.
4. Testování
Prototyp tvoříme proto, abychom otestovali jeho použitelnost a získali zpětnou vazbu pro jeho vylepšení. Je potřeba vše nachystat a ověřit, že je prototyp připravený pro interakci s lidmi, aniž bychom po úvodu museli vysvětlovat každý krok. Poté co necháme účastníky testování se s prototypem seznámit, je potřeba navázat otázkami, abychom ověřili, co potřebujeme — ty je dobré si napsat předem.
Doptávat se můžeme na:
- Benefity: Co dané funkce člověku přináší? Jaké funkce chybí?
- Pozitivní/negativní reakce: Na škále od 1–5, jak se člověku daný koncept líbí? Proč?
- Srovnání: Která ze dvou možností je lepší?
- Dojem: Na základě dnešní prezentace, co člověku utkvělo v paměti?
- Emocionální reakce: Jaké má člověk pocity?
- Výhled: Na škále od 1–5, je člověk ochotný tuto aplikaci vyzkoušet poté co bude hotová? Proč?
- Obecnou zpětnou vazbu: Má člověk jakékoliv nápady jak produkt vylepšit?
5. Vyhodnocení a opakování
Testováním jediného prototypu práce nekončí, ale posouvá nás dál. Je potřeba testování vyhodnotit a zpracovat zpětnou vazbu. Co jsme se naučili, a co s tím uděláme? Jestli se naše předpoklady potvrdily, můžeme otestovat naše další návrhy, a nebo se posunout k podrobnějšímu (hi-fi) prototypování. Pokud ne, je potřeba návrh upravit a otestovat znovu (iterovat). I poté, co jsou produkt či službu vypustíme do světa, můžeme prototypovat a testovat nové nápady a vylepšení.
Shrnutí
Díky lo-fi prototypování můžeme získat cennou zpětnou vazbu na začátku vývoje produktu nebo služby s co nejmenšími náklady a rizikem. Hodí se také při testování nových nápadů a řešení u již existujících produktů a služeb. Existují různé specializované aplikace, ale stačí nám k němu papír a tužka. Z těchto důvodů je lo-fi prototypování cenným nástrojem UX/UI designéra.
Použité zdroje:
BABICH, Nick. Prototyping 101: The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each. Adobe Blog [online]. 29. 11. 2017 [cit. 2021–01–31]. Dostupné z: https://blog.adobe.com/en/publish/2017/11/29/prototyping-difference-low-fidelity-high-fidelity-prototypes-use.html#gs.s4zyfx
BUSCHE, Laura. The Skeptic’s Guide To Low-Fidelity Prototyping. Smashing Magazine [online]. 6. 10. 2014 [cit. 2021–01–31]. Dostupné z: https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/
High-Fidelity & Low-Fidelity Prototyping: What, How and Why? Mockplus [online]. 9. 8. 2017 [cit. 2021–01–31]. Dostupné z: https://www.mockplus.com/blog/post/high-fidelity-and-low-fidelity
Low-fi prototyping: What, Why and How? Prototypr [online]. 26. 2. 2016 [cit. 2021–01–31]. Dostupné z: https://blog.prototypr.io/low-fi-prototyping-what-why-and-how-24f77d9f4995
PIERZCHAŁA, Bartłomiej. Low Fidelity vs High Fidelity Prototypes: What they are and which one to choose for your project. 7ninjas [online]. 31. 1. 2018 [cit. 2021–01–31]. Dostupné z: https://medium.com/7ninjas/low-fidelity-vs-high-fidelity-prototypes-903a7befaa5a
SIMS, Mike. How To Create A Low-Fidelity Prototype Like An App Expert. Thinklions [online]. [cit. 2021–01–31]. Dostupné z: https://www.thinklions.com/blog/how-to-create-a-low-fidelity-prototype-like-an-app-expert/
VENLOV, Claus. High-Low-Fidelity-Prototypes. Preely [online]. 21. 9. 2020 [cit. 2021–01–31]. Dostupné z: https://preely.com/design-product/high-low-fidelity-prototypes/
