Pod pojmom webová aplikácia v tomto článku rozumieme akúkoľvek webstránku, ktorá ponúka užívateľské rozhranie a funkcionalitu, ktorú návštevník stránky využíva (e-shop, zľavový agregátor, porovnávač cien, rezervačný systém, objednávkový systém a pod.). Webová stránka, ktorá plní len prezentačnú funkciu NIE JE webovou aplikáciou pre potreby tohto článku.
Každá webová aplikácia začína ideou. Pre vytvorenie dobrej webovej aplikácie by sme si mali dať na začiatku hneď niekoľko otázok – čo má aplikácia robiť? Aký má aplikácia prínos? V čom je táto aplikácia iná ako ostatné? Pred zodpovedaním týchto otázok je dôležité spraviť si rešerš konkurencie, slabých a silných stránok našej aplikácie/podnikania (SWOT analýza). V ideálnom prípade nám už nejaká staršia verzia aplikácie funguje niekoľko rokov a my máme údaje o jej používateľoch, ktoré môžeme použiť pri formovaní nášho nápadu.
BONUS: Ako získať údaje o používateľoch a používaní už existujúcej aplikácie?
Najjednoduchší spôsob je nasadenie a analyzovanie Google Analytics. Tie nám poskytnú dáta o počte návštev hlavnej stránky/podstránok, čas zdržania sa na jednotlivých podstránkach, odkiaľ k nám užívatelia prišli a pri správnom nasadení aj napr. štatistiku toho, koľko užívateľov nám zaslalo objednávku/využilo konkrétnu funkcionalitu, prípadne v ktorom kroku nákupného košíka nám odchádza najviac zákazníkov.
Link: analytics.google.com
How to Set Up Tracking for Multiple Languages In Google Analytics
Heatmapy pomôžu v jednom screene veľmi prehľadne identifikovať, kde sa užívatelia pohybujú kurzorom na podstránke najfrekventovanejšie. SPOILER: najviac sa kliká na navigáciu a tlačidlá/obrázky, ktoré je vidieť bez nutnosti scrollovania. Najmenej sa kliká na elementy, na ktoré je potrebné scrollovať stránku smerom nadol.
Link: mouseflow.com
best_1695_0_0_1000
Nástroj, pomocou ktorého môžeme nahrávať správanie používateľov našej aplikácie. Výhodou je, že priamo vidíme, ako sa zákazník na stránke pohybuje, scrolluje, kam kliká a čo ho zaujíma. Je to najdetailnejší spôsob zisťovania správania sa užívateľa.
Link: inspectlet.com
Niekedy je najjednoduchšie spýtať sa užívateľov, čo sa im páči/nepáči na súčasnej aplikácii. Stačí vytvoriť jednoduchý Google Docs dotazník a rozoslať ho do mailing listu aplikácie. Môžeme tak získať spätnú väzbu od ľudí, ktorí našu aplikáciu poznajú. SPOILER: a často môžeme zistiť, že užívatelia majú našu aplikáciu radi kvôli úplne inej funkcii/feature, než ktorú považujeme za primárnu.
Keď už máme ideu sfinalizovanú, je čas na technickú špecifikáciu. Technická špecifikácia je najčastejšie spísaná po screenoch (obrazovkách/podstránkach) našej webovej aplikácie (index, login page, user account, product listing, product detail, search, cart, contact etc.). Pri každej podstránke je spísaná funkcionalita, ktorá sa na danej podstránke vyskytuje. Okrem funkcionality je v technickej špecifikácii zvyčajne určené aj to, či má byť aplikácia responzívna, pre aké prehliadače má byť optimalizovaná, zoznam pluginov a API tretích strán, prípadne dopyt na vytvorenie API pre tretie strany a tiež určenie technológií, na ktorých má fungovať backend/frontend. Nesmieme zabúdať ani na definovanie skupín užívateľov a ich práv vo webovej aplikácii (masteradmin, admin, blogger, užívateľ a pod.).
Wireframe nám slúži na prvotné vizuálne znázornenie našej aplikácie (nejde o grafický návrh, ale o návrh štruktúry a prvkov). Wireframe by mal byť KLIKATEĽNÝ (na to nám slúžia nástroje ako Balsamiq, v ktorom sa dá priamo kresliť wireframe alebo InVision na rozhýbanie wireframu nakresleného v Illustratore). Pre vytvorenie dobrého wireframu je nutná znalosť UI a UX prvkov (navigácie, dropdowny, slidre, carousle etc.). V prípade responzívnej webovej aplikácie je veľmi výhodné vytvoriť si wireframe aj pre mobilnú/tabletovú verziu a snažiť sa používať čo najviac natívne UI a UX prvky pre mobilné zariadenia (napr. tab navigácia na spodnej lište, touch slidre a pod.).
Link: invisionapp.com
Link: balsamiq.com
Keď máme vyladený a schválený finálny wireframe, je čas na grafickú fázu. Väčšinou sa dnes robia grafické návrhy pre aplikácie vo Photoshope, avšak ten má viacero limitov čo sa týka dizajnu aplikácií. Prvým problémom je vykresľovanie dizajnu, kedy sa otvorený dokument nevykresľuje rovnako, ako sa bude vykresľovať v prehliadači. Minimálne pri písme to už zažil každý. Ďalším problémom sú assets (vložené obrázky, ikonky a pod.), ktoré nevie Photoshop rozumne exportovať pre kódovanie nášho dizajnu. Photoshop taktiež nedokáže (ak nerátame rozdelenie do vrstiev) v jednom dokumente dizajnovať viacero kresliacich plôch (napr. index, košík aj detail produktu) zároveň. Ďalšími problémami sú border radiusy, veľkosť .psd dokumentov, vyťaženie RAM/CPU, grid a v neposlednom rade prototypovanie. Photoshop nebol navrhovaný ako program na dizajnovanie a prototypovanie mobilných a webových aplikácií. Existuje však špecializovaný softvér, ktorý je práve na dizajnovanie a prototypovanie aplikácií určený – SketchApp a Adobe XD (oboje len pre OSx, ale Adobe XD má byť čoskoro dostupný aj pre Windows).
SketchApp
+ spravovanie assets
+ kresliace plátna
+ export pre retina/android zariadenia
+ grid
+ jednoduchosť
+ veľkosť súboru
+ HW nároky
+ prispôsobiteľný toolbar
+ spravovanie vrstiev
+ pluginy
— momentálne je prototypovací plugin Silverflow vo fáze bety, t. j. nie je možné priame prototypovanie v programe (ale dá sa prototypovať cez InVision)
 
Adobe XD (Adobe Experience Design)
+ spravovanie assets
+ kresliace plátna
+ export pre retina/android zariadenia
+ grid
+ jednoduchosť
+ HW nároky
+ veľkosť súboru
+ prototypovanie priamo v programe
— slabé spravovanie vrstiev
— nie úplne dotiahnutý export assets
— žiadne pluginy
— neprispôsobiteľný horný toolbar
Bonus – na čo si dávať pri dizajnovaní webovej aplikácie pozor?
Máme hotový dizajn, ide sa prototypovať. V súčasnosti je najlepším nástrojom na prototypovanie InVision App, kde si môžete celý svoj dizajn, či už z Photoshopu alebo SketchApp, natiahnuť a rozanimovať – t. j. všetky prekliky, buttony, animácie, filtre, selecty, inputy, off-canvas menu, color pickery, hovery, focusy a pod. Takýto prototyp pomáha projekt pripraviť na finálnu fázu – programovanie a kódovanie.
Ukážka takého prototypu: https://projects.invisionapp.com/d/main#/console/8570446/183549859/preview
V súčasnosti je už dokonca možné prepojiť si InVision App a Slack, viac tu: https://slack.com/apps/A08N434LS-invision-app
Po hotovom a funkčnom prototype je čas nakódovať dizajn.
Čo je dôležité pri kódovaní dizajnu:
Keď máme hotový a funkčný prototyp, môžeme začať pracovať na backende (nezávisle od kódovania dizajnu). Vieme, čo a kde budeme zobrazovať. V tejto fáze sa napájajú aj API tretích strán (napr. získavanie dát z mobilnej aplikácie, Facebook Login API a pod.).
Pri výbere jazyka/frameworku by sme sa mali sústrediť na tieto faktory:
Viac na tému backendov nájdete tu: https://medium.com/aws-activate-startup-blog/choosing-the-right-programming-language-for-your-startup-b454be3ed5e2#.8xu0h97n4
a tu: http://tutorialzine.com/2015/12/the-languages-and-frameworks-you-should-learn-in-2016/
V tejto fáze máme hotový backend, ktorý potrebujeme prepojiť s hotovým a nakódovaným dizajnom. Môžeme ísť cestou jQuery, alebo použiť frontend framework ako React.js (funguje na tom napr. Facebook, Instagram, Netflix, Uber) alebo Angular (funguje na tom napr. Paypal, The Guardian). Výhodou použitia JS frameworkou je možnosť urobiť z frontendu súhrn komponentov, ktoré vieme opakovane využívať a vykresľovať cez všetky zariadenia a to spôsobom, ktorý je najbližšie k natívnym aplikáciám. Najviac v trende je momentálne React.js. Dôvody, prečo je to tak, si môžete prečítať napr. tu: https://www.quora.com/Why-would-I-use-React-over-AngularJS
Keď má aplikácia funkčný backend aj frontend, je čas na optimalizáciu.
Výsledkom by mal byť čo najrýchlejší web. Na mobilných platformách môžeme využiť na načítanie menej dôležitých sekcií webu (napr. komentáre k produktu, hodnotenia, súvisiace produkty) metódu delayed content loading (viac tu: https://robime.it/delayed-content-loading/).
Aj v dnešnej dobe sa betatesting veľmi podceňuje, o to viac, ak ide o webové aplikácie. Súkromný (uzatvorený) betatesting nám pritom vie priniesť výborný feedback od našich potenciálnych užívateľov, prepojiť nás s trhom, simulovať problémy, ktoré vzniknú po spustení aplikácie do produkcie a pripraviť našu aplikáciu pre širšie publikum. Nepodceňujte betatesting. Využite ho na zlepšenie vášho produktu. Viac o betatestingu sa môžete dočítať tu: http://thinkapps.com/blog/development/beta-testing-how-to-guide/
S dobre postaveným backendom viete pri betatestovaní vykonávať už priamo aj A/B testovanie, kde sa jednej skupine testerov zobrazuje určitý komponent/funckionalita inak, ako druhej skupine testerov. Viac o A/B testingu sa môžete dočítať tu: https://blog.optimizely.com/2016/08/10/7-step-ab-testing-process/
Aplikácia je dotiahnutá, otestovaná a pripravená na spustenie. Nezostáva, než ju pustiť do produkcie. Na čo určite nezabudnúť – ak ste doteraz nepoužili GIT, je čas ho použiť. GIT vám dá prehľad úprav, ktoré ste od spustenia aplikácie spravili a tiež vám pomôže organizovať projekt tak, aby sa k nemu dalo i po niekoľkých mesiacoch vrátiť a upraviť ho.
Momentálne, jedno z najpoužívanejších je GIT riešenie bitbucket.org + SourcTree (GUI pre tých, čo neradi terminál).
Je dôležité sledovať a analyzovať webovú aplikáciu aj v jej produkcii a na základe analýzy navrhovať a implementovať úpravy, ktoré buď zlepšia užívateľskú skúsenosť na stránke, alebo budú mať marketingový prínos. Na tieto účely nám slúži opäť Google Analytics, Inspectlet, heatmapy, prípadne vlastný trackovací systém, ktorý poistí sledovanie štatistík aj v prípade, že užívateľ má v prehliadači nainštalované rozšírenie, ktoré blokuje napr. Google Analytics.
Tento článok by mal slúžiť ako prehľad metodiky a procesov vývoja webovej aplikácie. Do prierezu sa, vzhľadom na rozsah, nezmestí veľa informácií, ktoré by pri každom bode vystačili na samostatný článok.
Nezabudnite sa preto podeliť so svojimi skúsenosťami s vývojom aplikácií v komentároch.
Dobrý článok? Chceš dostávať ďalšie?
Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.
Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.
robime.it existuje od roku 2012 s cieľom byť partnerom IT-čkárov a pomáhať im v odbornom raste.

Robíme to cez budovanie osobných vzťahov, HR službami a podpore IT komunít.

IT Blog – bloguj s nami
Vyhľadávanie pracovných príležitosti
Aktualizácia životopisu
Pohovor na skúšku
SÓLO pre freelancerov
Odporuč nám známeho
Digital footprint – Bloguj na robime.it
Pridať pracovnú ponuku
Prehľad pracovných ponúk

O nás
Kontakt
Ochrana súkromia
[email protected]

source