Prototypování, wireframy a MVP

Prototyp je nejlevnější místo na chyby. Skicujeme, drátujeme a klikací verze dáváme do ruky lidem dřív, než vznikne řádek kódu, takže drahá fáze vývoje startuje s designem, který si už někdo osahal. Platí to pro jednu obrazovku stejně jako pro celé MVP, kde se rozhoduje, co se do první verze vejde.

Od10 000 Kčza projekt

Začít projektZjistit cenu
  • 5uživatelů odhalí asi 80 % problémů
  • 1-2 týd.ke klikacímu prototypu
  • 2 kolapřipomínek v ceně návrhu
  • 0 Kčza změnu, dokud je to návrh

Prototyp je klikací model aplikace nebo webu, na kterém se dá ověřit, jestli lidé najdou, co hledají, dřív než se napíše první řádek kódu. Wireframy stojí od 10 000 Kč, klikací prototyp od 15 000 Kč. Oprava chyby v prototypu trvá hodinu, v hotovém kódu týdny.

Prototyp testujeme na pěti až osmi lidech z cílové skupiny, kteří dostanou úkol a nikdo jim neradí.

Prototyp testujeme na pěti až osmi lidech z cílové skupiny, kteří dostanou úkol a nikdo jim neradí.

Z testu vzejde seznam míst, kde se lidé ztratili, a upravený prototyp dřív, než se začne platit vývoj.

Z testu vzejde seznam míst, kde se lidé ztratili, a upravený prototyp dřív, než se začne platit vývoj.

Vše kreslíme ve Figmě a soubory předáme celé, takže prototyp může dostavět kterýkoli tým.

Vše kreslíme ve Figmě a soubory předáme celé, takže prototyp může dostavět kterýkoli tým.

Vývojáři sedí ve stejné partě, takže už u prototypu víme, co jde postavit levně a co ne.

Vývojáři sedí ve stejné partě, takže už u prototypu víme, co jde postavit levně a co ne.

Každá služba v této kategorii, srozumitelně

  • Interakční design

    Jak se rozhraní chová po kliknutí, při načítání a při chybě.

    Začít projektSpočítej si cenu

    V kostce Popis toho, jak se rozhraní chová: co se stane po kliknutí, jak vypadá načítání, co uvidí člověk u prázdného seznamu nebo při chybě. Tyhle stavy se v návrzích vynechávají nejčastěji a pak se dodělávají naslepo.

    Jak postupujemePřechody a animace navrhujeme s jasným účelem: vysvětlit, co se právě změnilo a kde se to objevilo. Každý z nich rovnou zkoušíme při zapnutém omezení pohybu. Chování ověřujeme na živém prototypu, kde se dá klikat, takže se stavy nehádají ze statických snímků.

    Co si odnesešPopis chování rozhraní stav po stavu, včetně načítání, prázdných seznamů, chyb a potvrzení, k tomu časování a druh přechodu u každé animace. Vývojář z toho staví bez hádání, jak se má tlačítko chovat, když se čeká na odpověď serveru.

    Co je v ceně

    • Stavy načítání, chyby i prázdný seznam
    • Animace s účelem, bez ozdoby
    • Respektuje „omezit pohyb“ v systému
    • Popsané chování místo hádání

    Interaktivní prototyp

    Klikací model produktu, který si projdeš před programováním.

    Začít projektSpočítej si cenu

    V kostce Klikací prototyp MVP nebo většího produktu, ve kterém si projdeš celou cestu dřív, než se začne programovat. Dá se poslat na testování skutečným lidem, ukázat investorovi i obchodnímu týmu a sesbírat k němu připomínky, které pak nestojí vývojářský týden.

    Jak postupujemeZ odsouhlasených obrazovek poskládáme model a určíme, jak realistický musí být pro otázku, na kterou má odpovědět. Nástroj bereme podle tvého týmu: Figma, Sketch nebo Adobe XD. Co se v testech ukáže jako zbytečné, škrtneme, dokud je to jen obrázek.

    Co si odnesešOdkaz na klikací prototyp, kterým se dá projít celá cesta, se zapracovanými připomínkami a se seznamem funkcí, které z rozsahu vypadly. Po odsouhlasení slouží jako zadání pro vývoj.

    Co je v ceně

    • Proklikáš celý produkt před vývojem
    • Testovatelný na lidech i na investorech
    • Slouží pak jako zadání pro vývoj
    • Ušetří funkce, které nikdo nepotřebuje

    Součástí balení

    Tohle si neobjednáváš zvlášť: je to v každé zakázce a děláme to my.

    Wireframy

    Wireframe webu je rozvržení obrazovek vyřešené dřív, než začne vizuální design a než se napíše první řádek kódu. Kreslíme ho bez barev a bez písma, takže se debata drží u toho, co je na stránce důležité a v jakém pořadí.

    Pracujeme se skutečným obsahem, takže se hned ukáže, kde na text nezbylo místo a kde zeje prázdno. Návrhy si s tebou procházíme a klidně desetkrát přeházíme, protože v téhle fázi stojí změna minuty. Z odsouhlasených drátěnek pak vzniká vizuál i odhad práce.

    VýstupDrátěné modely všech klíčových obrazovek s reálnými texty, s vyznačeným pořadím důležitosti a s poznámkami, co se na které obrazovce má stát. Slouží zároveň jako podklad pro odhad rozsahu vývoje. Rozvržení webu ve Figmě si projdeš i na telefonu.

    • Struktura vyřešená před vizuálem
    • Skutečný obsah místo výplňového textu
    • Levné iterace místo drahé přestavby
    • Podklad pro odhad práce

    Uživatelské toky

    Diagramy každé cesty, kterou u tebe člověk dokončí úkol: od registrace přes objednávku po reklamaci. Kreslíme i nešťastné varianty, tedy vypršenou platnost, selhanou platbu, tlačítko zpět nebo příchod z odkazu doprostřed procesu. Právě tyhle větve protahují projekty.

    Každou cestu rozkreslíme krok za krokem a hned k ní dopisujeme chybové větve. U každého kroku popíšeme, co se má stát, co uvidí uživatel a co se má uložit nebo odeslat. Hotové diagramy projdeme s vývojářem dřív, než se z nich staví, protože oprava na papíře trvá minuty.

    VýstupDiagramy všech cest, kterými u tebe člověk dokončí úkol, včetně chybových větví a zápisu chování u každého kroku. Vývojář z nich staví přímo a testerovi z nich rovnou vyjdou testovací případy.

    • Včetně chybových a nešťastných větví
    • Podklad, ze kterého se staví přímo
    • Odhalí kroky chybějící v zadání
    • Levnější než oprava v hotové aplikaci

    Mapy webu

    Plán webu po jednotlivých stránkách: co existuje, co kam vede, co při přestavbě zanikne a co vznikne. Rozhoduje se tu, jestli bude mít každá tvoje služba vlastní adresu, na kterou jde odkázat a která se dá dostat do vyhledávání.

    Sepíšeme, co na webu dnes stojí, vytáhneme adresy s návštěvností nebo odkazy a určíme, co zůstane, co se sloučí a co skončí. Do plánu zaneseme i budoucí služby, jazykové verze a blog, aby se za rok nepřestavovalo menu. U redesignu k tomu párujeme staré a nové adresy jednu po druhé.

    VýstupMapu webu po jednotlivých stránkách s vyznačením, co vzniká, co zaniká a co kam vede, v podobě, ve které se dá odškrtávat během plnění obsahem. U redesignu k tomu tabulku přesměrování staré adresy na novou.

    • Vlastní adresa pro každou službu
    • Mapa přesměrování při redesignu
    • Počítá i s obsahem, který teprve vznikne
    • Dá se odškrtávat při plnění

    Technologie

    Znáš to?

    Pan Novákprvní hovor

    1. Investor chce vidět produkt, a my máme jen prezentaci

    2. Klikací prototyp vypadá a chová se jako hotová aplikace, jen za zlomek ceny. Na schůzce ho investor projde na telefonu a pochopí produkt rychleji než z dvaceti slajdů.

    3. Vývojáři postavili něco jiného, než jsme mysleli

    4. Textové zadání si každý přečte po svém. Prototyp ukáže každou obrazovku a každý stav, takže o tom, co se staví, už není co vykládat. Změny se dělají ve Figmě, kde stojí minuty.

    5. Rozpočet na vývoj je daný a nevíme, co se do něj vejde

    6. Na prototypu seřadíme funkce na nutné pro MVP a na ty, které počkají. Vývojáři odhadnou každou zvlášť, takže víš, co za své peníze dostaneš, ještě před podpisem smlouvy.

    7. Aplikaci máme hotovou a lidé v ní bloudí

    8. Chyby v toku se v kódu opravují draze. Nový tok nakreslíme a otestujeme v prototypu, do kódu jde až verze, která na testu obstála. Vývojáři tak přepisují jednou.

    Ve které situaci jsi ty?

    Vyber si svůj případ a dosaď svoje čísla. Obrazovka spočítá, co tím ztrácíš nebo získáváš.

    Lidi mi odcházejí a nevím proč

    Návštěvníků za měsíc2 000
    Kolik návštěvníků nakupuje1,5 %
    Průměrná objednávka2 900 Kč

    Aby se audit UI/UX vrátil za 3 měsíce, stačí

    +8,4 % ke konverzi

    Teď ti web vydělává zhruba 87 000 Kč za měsíc: 2 000 návštěvníků, z toho 1,5 % nakupuje za 2 900 Kč. Audit UI/UX obvykle stojí 22 000 Kč.

    Cena „obvykle“ je z ceníku studia. Tržby bez marže. Jde o práh návratnosti, růst konverze předem nikdo negarantuje.

    Začít projekt

    Stavím něco nového

    Rozpočet na vývoj490 000 Kč
    Kolik obrazovek podle tebe bude nutné předělat25 %

    V ohrožení kvůli předělávce po spuštění je

    122 500 Kč z rozpočtu

    Předělat 25 % obrazovek po spuštění znamená zaplatit navíc 122 500 Kč z 490 000 Kč. Klikací prototyp u nás obvykle stojí 30 000 Kč, a tyhle úpravy se dělají v něm ještě před kódem.

    Podíl předělávek zadáváš ty. Cena prototypu „obvykle“ je z ceníku studia.

    Začít projekt

    Produkt se mi rozjel do nekonzistence

    Kolik lidí dělá rozhraní4
    Hodin týdně u každého na sjednocování obrazovek3 h
    Kolik stojí tvoje hodina750 Kč

    Nejednotnost tě stojí

    38 970 Kč za měsíc

    4 lidé po 3 h týdně po 750 Kč na hodinu. Design systém obvykle stojí 65 000 Kč a vrátí se za 1,7 měsíce.

    Hodiny a sazbu zadáváš ty. Odhad shora: počítáme, že systém sjednocování odstraní úplně. Cena „obvykle“ je z ceníku studia.

    Začít projekt

    Rovnou programovat a ušetřit krok?

    Vynechat prototyp vypadá jako úspora týdne a pár desítek tisíc. U malého a jasného projektu to tak opravdu je. U produktu, kde se teprve hledá, co lidé chtějí, se ta úspora obvykle vrací jako předělávka.

    Kdy se bez prototypu obejdeš

    • Jednoduchý web se známou strukturou, třeba prezentace firmy
    • Přebíráš osvědčený tok, například standardní nákupní košík
    • Vývojář je zároveň designér a zadavatel sedí vedle něj
    • Jde o interní nástroj pro pár lidí, kteří si řeknou, co je špatně

    Kdy se to vymstí

    • Nový produkt, u kterého se teprve ověřuje, jestli ho někdo chce
    • Víc obrazovek a rolí uživatelů, kde se tok nedá udržet v hlavě
    • Pevný rozpočet, kde každá předělávka ukrajuje z funkcí
    • Investor nebo vedení chce produkt vidět a vyzkoušet dřív, než ho zaplatí

    Od nápadu k ověřenému prototypu

    1. Víš, co postavit první

      Hovor a rozsah MVP

      Projdeme, pro koho produkt je a jaký problém řeší. Funkce rozdělíme na nutné pro první verzi a na ty, které počkají. Dostaneš pevnou cenu.

    2. Vidíš celou cestu

      Mapa stránek a toky

      Nakreslíme mapu obrazovek a uživatelské toky: kudy člověk jde od příchodu k cíli a kde se může ztratit. Tady se nejčastěji škrtají zbytečné kroky.

    3. Máš kostru obrazovek

      Wireframy

      Černobílé rozvržení každé obrazovky bez barev a grafiky, aby se debata točila kolem obsahu a pořadí. Změny v této fázi stojí minuty.

    4. Zkoušíš produkt v ruce

      Klikací prototyp

      Wireframy propojíme ve Figmě do modelu, který se proklikává jako hotová aplikace, na počítači i na telefonu. Přidáme stavy jako chyba, prázdný seznam nebo načítání.

    5. Víš, kde lidé bloudí

      Test na lidech

      Pět až osm lidí z cílové skupiny dostane úkoly a my sledujeme, kde zaváhají. Nahrávky i souhrn zjištění dostaneš.

    6. Prototyp je připravený

      Úpravy a předání

      Opravíme, co test ukázal, a předáme soubory Figmy s popisem obrazovek. Pokračovat můžeš s námi na designu a vývoji, nebo s jiným týmem.

    Kolik stojí prototyp a wireframy

    Wireframy od 10 000 Kč, uživatelské toky od 12 000 Kč, klikací prototyp od 15 000 Kč. Cenu víš po prvním hovoru a nemění se. Cena je konečná, nic se k ní nepřičítá.

    Zjistit cenu

    Nejdřív důkazy, potom vkus

    Designujeme podle důkazů: výzkum řekne, co opravit, prototyp to ověří na skutečných lidech a analytika po spuštění ukáže, jestli to zabralo. Všechno stojí na design systému, jednom zdroji pravdy pro barvy, písmo, odsazení a komponenty, takže nové obrazovky vznikají v hodinách místo dnů a produkt zůstává konzistentní, jak roste. A při předání nemizíme: designér zůstává na telefonu během vývoje, aby se hotový produkt shodoval s tím, který jsme otestovali.

    Na co se lidé ptají nejčastěji

    Co je MVP?

    MVP (minimum viable product) je nejmenší verze produktu, kterou jde dát lidem do ruky a zjistit, jestli ji chtějí. Obsahuje jen funkce, bez kterých produkt nedává smysl. Prototyp je často první krok k MVP: ověří tok dřív, než se postaví.

    Jaký je rozdíl mezi wireframem a prototypem?

    Wireframe je statické černobílé rozvržení jedné obrazovky, řeší obsah a pořadí. Prototyp propojuje obrazovky do modelu, který se dá proklikat, a ukazuje, jak se produkt chová. Wireframy jsou obvykle podklad pro prototyp.

    Kolik stojí prototyp?

    Wireframy od 10 000 Kč, klikací prototyp od 15 000 Kč, u větší aplikace běžně kolem 30 000 Kč. Mapa stránek od 6 000 Kč. Přesnou cenu víš po hovoru, kde spočítáme obrazovky a role. Cena je konečná, nic se k ní nepřičítá.

    Jak dlouho to trvá?

    Wireframy menšího produktu týden, klikací prototyp s testem dva až tři týdny. Nejvíc času obvykle zabere domluva účastníků testu, samotné kreslení je rychlejší.

    V čem prototyp děláte?

    Ve Figmě. Prototyp funguje v prohlížeči i v telefonu přes odkaz, nic se neinstaluje. Soubory předáme celé a můžeš s nimi dál pracovat sám nebo s jiným designérem.

    Otestujete prototyp na lidech?

    Ano, je to hlavní důvod, proč prototyp dělat. Pět až osm lidí z cílové skupiny dostane úkoly a sledujeme, kde se zadrhnou. Pět účastníků podle výzkumu Nielsen Norman Group najde zhruba 85 % problémů.

    Může prototyp dostavět jiný tým?

    Ano. Předáme soubory Figmy s popisem obrazovek, stavů a toků, takže je sestaví kterýkoli vývojář. Když budeš chtít, postavíme ho my, design i vývoj dělá jedna parta.

    Stačí prototyp na schůzku s investorem?

    Často ano. Klikací prototyp na telefonu vysvětlí produkt rychleji než prezentace a investor si ho může projít sám. Pro vážnější jednání doporučujeme ukázat i výsledky testu na skutečných lidech.

    Co když se na testu ukáže, že nápad nefunguje?

    Pak jsi ušetřil celý rozpočet na vývoj. Prototyp je nejlevnější místo, kde se může ukázat, že lidé produkt nechápou nebo nechtějí. Upravený tok otestujeme znovu, nebo spolu probereme, jestli směr změnit.

    Sousední kategorie

    Všechny služby

    Výzkum

    3 služby

    Vizuální design

    3 služby

    Testování a předání

    3 služby

    Jdeme postavit něco pořádného?

    Napiš nám pár vět. Ozveme se do několika hodin a domluvíme krátký hovor.

    1. 1Do pár hodin: odpoví ti člověk: první myšlenky, možná pár otázek.
    2. 2Do pár dnů: 30minutový hovor. Ty mluvíš, my posloucháme. Zdarma, bez závazků.
    3. 3Po hovoru: písemná pevná nabídka, nebo upřímná odpověď, že pro tebe nejsme ti praví, a tip, na koho se obrátit.

    Žádné obchodní skripty. Budeš mluvit s lidmi, kteří to skutečně postaví.

    Alergie na formuláře? Chápeme.info@chronicles.cz+420 773 230 278

    Odesláním formuláře souhlasíš se zpracováním vyplněných údajů za účelem odpovědi na tuto poptávku. Ochrana osobních údajů. Údaje slouží jen k odpovědi. Neprodáváme je a do newsletteru nepřidáváme.