Když klienti přijdou do naší společnosti, aby vyvinuli nový web, vysvětlíme, jaké fáze budou čekat. Chcete-li vytvořit web, musíte projít alespoň 6 kroky:
- diskuse o cílech a cílech projektu;
- vývoj interaktivního prototypu;
- vývoj technických specifikací;
- vývoj designu;
- rozložení a programování;
- implementace a testování.
V tomto článku budeme my, tým DIGIMATIX, hovořit o jedné z nejdůležitějších fází – prototypování: co to je a proč je to potřeba .
Co je prototyp a proč je potřeba?
O významu
Prototypování je jednou z raných fází vývoje. Podle našeho názoru je jeho hlavním úkolem otestovat hypotézy o tom, jak mohou uživatelé na webu dosáhnout svých cílů co nejrychleji a nejsnadněji. Díky prototypování produktu je možné výrazně snížit náklady na vývoj, protože vývojáři budou mít ruce na struktuře produktu, mapě interakce uživatele s produktem a konečném designu. Považujeme také za důležité poznamenat, že v procesu návrhu tvoří konstrukční tým kompletní sadu metod a nástrojů pro interakci uživatele s produktem. Toto je velmi důležitý bod, protože je nutné udržovat rovnováhu mezi novostí a vynalézavostí, aby uživatelé neměli žádné potíže a jejich zkušenosti byly pozitivní.
Souhrnně je potřeba prototyp pro:
- testování hypotéz, které byly předloženy v době formování cílů a záměrů projektu;
- schopnost rychle vytvořit změny funkčnosti produktu bez kódu;
- vysvětlení logiky interakce uživatele s produktem;
- prezentace nápadů partnerům a zákazníkům;
- vyhýbání se dalším nákladům na zdroje v dalších fázích.
Typy prototypů
Prototyp je poměrně široký koncept, protože to může být pouze ručně nakreslený náčrt na papíře, diagram ve formátu obrázku nebo podrobný interaktivní prototyp.
Podle hloubky detailů se rozlišují prototypy:
- s malými detaily;
- s vysokými detaily.
s prototypem/b>
s prototypem/b>
ul>
V průběhu práce lze použít všechny typy prototypů, ve zvláštních případech lze některé zanedbávat.
Volba typu a podrobností prototypu závisí na tom, jaký druh výzkumu se provádí a jaké hypotézy chceme testovat. Je třeba mít na paměti, že byste neměli podrobněji popisovat prototyp, než je nutné k testování hypotéz.
Kroky, které je třeba podniknout při vývoji prototypu
Prvním krokem je stanovení cílů
Prototyp je výsledkem celé řady prací odborníků z příbuzných oborů a dalších účastníků projektu. Úplně prvním krokem ve společnosti DIGIMATIX je setkání s klientem a kolegy, kde jsme si stanovili cíle pro budoucí produkt. Čím jasnější a jasnější jsou, tím přesnější budou hypotézy o tom, jak jich dosáhnout, v budoucnu.
Druhým krokem je tvorba hypotéz
Pokud je v předchozím kroku možné připustit vágní formulace, pak jsou ve fázi vytváření hypotéz požadavky vyšší. Je těžké ocenit hodnotu prototypování, pokud nevíte, co chcete otestovat. „Načrtnutí náčrtu stránky pro zobrazení přibližného uspořádání bloků“ je pochybné opatření a „Podle našeho názoru je vynikající hypotézou otestovat„ Automaticky vybrat počítač označující úkoly, pro které je vyžadován “.
< h3> Třetím krokem je výzkum
Velmi důležitá fáze. Ani jeden technický úkol, ani jediný vyplněný brief se 100 500 otázkami nemůže poskytnout takové úplné ponoření do podnikání klienta jako je výzkum. Porozumění obchodním procesům vám pomůže vytvořit nejúčinnější řešení. Dostupnost výzkumu bohužel často závisí na rozpočtu projektu.
Čtvrtým krokem je prototypování
Tento krok je charakterizován „destilací“ výsledků výzkumu nebo hypotéz do požadavků na produkt. Může obsahovat vše od požadavků na navigaci až po popis funkcí způsobů uzavření potřeb. Teprve nyní se tento čistý destilát transformuje do náčrtů a prototypů s nízkými detaily.
Pátým krokem je vypracování hloubky prototypu
A teprve v této fázi začíná prototyp získávat podrobnosti a obsah. Vysoce detailní prototypy lze snadno otestovat, poskytují ucelený obraz o budoucím projektu a pomáhají identifikovat úzká místa v logice produktu a cesty uživatele. Po této iteraci je prototyp připraven stát se designem. Ale to je úplně jiný příběh …
5 nejlepších nástrojů pro vytváření prototypů
Při výběru nástroje pro vytváření prototypů se řídíme, kupodivu – lenivostí. Pro nás je důležitá výhoda přenosu prototypu a obsahu do editoru, kde bude probíhat hra s písmy.
1. Figma
Absolutní vůdce v naší špičce. Skvělý nástroj pro prototypování i design uživatelského rozhraní. Jsem nekonečně potěšen možnostmi spolupráce a rychlého sdílení pro prezentace. V nedávných projektech zde byla připravena téměř veškerá animace.
2. Axure
Nejznámější a nejoblíbenější program pro vytváření prototypů webových stránek a aplikací. Dostatečně hluboký na to, aby vytvářel složité prvky, a přesto dostatečně snadný na to, aby připravil rozvržení i pro netrénované uživatele za deset minut hraní s rozhraním.
< h3> 3. Skica
Skvělý editor. Velké příležitosti. Omezeno platformou.
4. Adobe XD
Další produkt americké společnosti Adobe Inc. Zaměřeno na vývoj rozhraní.
5. Adobe Photoshop + zázrak nebo Invision
Pokud jste starým věřícím, můžete pomocí těchto softwarových balíčků snadno vytvořit klikatelný, ale jednoduchý prototyp a představit ho týmu nebo klientovi.
Jak vypadá vývoj prototypů v praxi?
Než přistoupíme přímo k vytvoření prototypu, projdeme si předběžné kroky, o kterých jsme již hovořili: stanovení cílů, vytváření hypotéz, provádění výzkumu. Na základě přijatých dat vytvoříme seznam požadovaných funkcí a sestavíme scénáře chování.
Vezměme si příklad – vytvoření prototypu pro internetový obchod. Seznam funkcí může vypadat takto:
- víceúrovňový katalog a praktická karta produktu;
- filtrování a třídění produktů podle charakteristik;
- systém vyhledávání produktů na webu;
- pokladna;
- doručovací a platební moduly;
- rychlý nákup několika kliknutími;
- správa objednávek ve vašem účtu.
Toto je jen malá část funkcí, které lze použít na budoucím webu, takže je velmi důležité definovat jej před spuštěním prototypu. Spolu s definicí funkčnosti sestavujeme seznam jedinečných stránek, které musíme vyvinout.
Jakmile budou všechny přípravné práce je hotovo, společně s klientem určíme typ prototypu, který vytvoříme. Pro internetový obchod obvykle vytváříme interaktivní prototypy s vysokou podrobností.
Na samém začátku práce vytváříme mřížku budoucího webu, vytváříme potřebné styly textu a shromažďujeme minimální sadu komponent uživatelského rozhraní, takže již ve fázi návrhu by pro nás bylo snazší a rychlejší spojit všechny prvky do jednoho stylu. Všechny prvky vytváříme v černé a bílé paletě, takže nás v této fázi nebude rozptylovat barevné řešení, ale zaměříme se na testování.
V prvním kroku vytváření prototypů vytváříme hlavní stránku webu, na jejímž základě budou postaveny všechny ostatní. V této fázi také pracujeme na záhlaví, zápatí, navigačních prvcích a vytváření všech bloků na stránce. Nezapomínáme projít všemi použitými interaktivními prvky, se kterými bude uživatel interagovat. Mezi tyto prvky mohou patřit odkazy, na které lze kliknout, vznášet se, vyskakovací formuláře, posuvníky. Na obr. Je možné tyto prvky snadno vytvořit pomocí funkce Varianty. Je v beta testování, ale uživatelé již mohou vyhodnotit všechny jeho schopnosti. Hlavní výhodou interaktivních prvků je jejich klikatelnost a schopnost kontrolovat a zlepšovat porozumění tomu, jak bude budoucí web vypadat bez zapojení programátora a návrháře rozvržení.
Po schválení prototypu hlavní stránky , začínáme vyvíjet interní stránky. V této fázi také shromažďujeme bloky obsahu, zpracováváme strukturu a nezapomínáme na prvky interakce: přechody mezi stránkami, kliknutí, rozevírací seznamy.
Výsledkem veškeré provedené práce je podrobný interaktivní prototyp, který napodobuje funkčnost hotového projektu. S pomocí toho můžeme:
- otestovat cíle projektu;
- otestovat hypotézy, které byly předloženy v nulové fázi;
- identifikovat problémové oblasti a chyby v logické práci tak, aby nepřišly do dalších fází.
Doporučujeme vytvořit nejpodrobnější interaktivní prototyp webu, protože to pomůže minimalizovat rizika z hlediska použitelnosti a obchodní logiky v projektu.
