Metodika tvorby webových aplikácií

901

ddd

Proces tvorby:

  1. Idea
  2. Technická špecifikácia
  3. Prototypovanie–wireframe
  4. Grafický návrh
  5. Prototypovanie–funkcionalita
  6. HTML/CSS/JS
  7. Backend/API
  8. Prepojenie backendu s frontendom
  9. Optimalizácia
  10. Beta testing
  11. Produkcia
  12. Analýza, ladenie

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.

1: Idea

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?

Google Analytics

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 (Mouseflow)

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

Video monitoring (Inspectlet)

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

Dotazník

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.

2: Technická špecifikácia

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.).

3: Prototypovanie–wireframe

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

4: Grafický návrh

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 vs. Adobe XD

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

Zhrnutie

Bonus – na čo si dávať pri dizajnovaní webovej aplikácie pozor?

  • SketchApp je prvým a momentálne aj najlepším nástrojom, ktorý na dizajnovanie a prototypovanie aplikácií máme. Adobe XD je na trhu len pár mesiacov a preto je ešte veľa priestoru, aby bol v dohľadnej dobe minimálne rovnako kvalitným nástrojom ako SketchApp.
  • pre responzívny dizajn platí, že je potrebné dizajnovať minimálne 4 breakpointy pre media queries (320 px – smartfóny, 768 px – tablety, 1024 px – tablety landscape, 1366 px – ntb a viac). Osobne odporúčam dizajnovať aj (480 px – väčšie smartfóny, 992 px – väčšie tablety a 1920 px – full HD)
  • najlepšie je, ak sa nám podarí dizajnovať najprv mobilnú verziu, následne tabletovú verziu a až na záver desktop verziu
  • ikonky si dávať do dizajnu ako .svg (následne sa z nich dá vytvoriť font icons cez https://icomoon.io)
  • upratovať, triediť a pomenovávať si vrstvy
  • nezamykať si vrstvy (layers), ale celé skupiny (groups)
  • netvoriť farby textu/ikon/prvkov cez znižovanie opacity, ale používať konkrétne farby
  • keď je korporátnou farbou v dizajne konkrétna farba, napr. zelená, tak si držať jeden odtieň tejto farby a nevytvárať zbytočne veľa derivátov
  • všetko, čo sa dá kresliť cez vektory, kresliť cez vektory
  • dodržiavať margin/padding v celom projekte rovnaký
  • dodržiavať border radius pre elementy jedného druhu rovnaký (napr. buttony)
  • používať fonty s rozumom a tak, aby boli použiteľné aj na webovej stránke (typekit, google web fonts etc.)
  • 5: Prototypovanie–funkcionalita

    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

    6: HTML/CSS/JS

    Po hotovom a funkčnom prototype je čas nakódovať dizajn.

    Čo je dôležité pri kódovaní dizajnu:

    1. FRAMEWORK – Je potrebné použiť framework? Ak áno, aký? (Bootstrap, Foundation, vlastný…)
    2. BOOTSTRAP – Keď už použijeme Bootstrap, je dôležité si jeho produkčnú verziu upraviť cez http://getbootstrap.com/customize/. Konkrétne pluginy a komponenty, ktoré budeme používať, border radius, farby, fonty a grid.
    3. GRID – Zvoliť si správny grid. Najrozšírenejším gridom je dvanástkový grid, avšak v poslednej dobe je čím ďalej, tým viac rozšírené používanie stovkového gridu, ktorý ponúka väčšiu kontrolu pri pixel perfect kódovaní dizajnu.
    4. MOBILE FIRST – Najprv by sme mali kódovať verziu pre mobily, následne pre tablety a v poslednom rade pre notebooky a desktopy. Takýto princíp kódovania je prehľadnejší a prirodzenejší.
    5. VYTVÁRANIE PATTERNOV – vytvárajte si pri kódovaní patterny (vzory), ktoré pomôžu unifikovať aplikáciu po stránke HTML a CSS. Ak má celý projekt rovnaký nadpis h2, použite pre tento nadpis rovnakú triedu naprieč celým projektom. To isté platí pre buttony, formuláre, odkazy a iné HTML elementy.

    7: Backend/API

    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.).

    Čo je dôležité pri vytváraní Backendu:

    1. Výber správneho jazyka
      1. Python
      2. PHP
      3. Javascript ES6-ES7 (Node.js, Swift 2, Go, TypeScript)
      4. Ruby
    2. Výber správneho frameworku
      1. Pre Python – napr. Django, Flask
      2. Pre PHP – napr. Symfony, Zend, Laravel, CakePHP
      3. Pre Node.js – napr. Express, Hapi, Sails.js
      4. Pre Ruby – napr. Rails
    3. Výber databázy
      1. MySQL/MariaDB
      2. PostgreSQL
      3. Redis
      4. RethinkDB

    Pri výbere jazyka/frameworku by sme sa mali sústrediť na tieto faktory:

    1. Vyvíjame aplikáciu pre bežných užívateľov, alebo tvoríme korporátne riešenie?
    2. Na akom jazyku/frameworku rieši podobnú webovú aplikáciu konkurencia?
    3. Viem zabezpečiť dostatok ľudskej sily na výrobu aplikácie? (Je ľahšie nájsť PHP developerov, ako Node.js alebo Ruby developerov. Čím mladší jazyk, tým ťažšie sa hľadajú ľudia).

    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/

    8: Prepojenie backendu s frontendom

    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

    9: Optimalizácia

    Keď má aplikácia funkčný backend aj frontend, je čas na optimalizáciu.

    Čo optimalizujeme:

    1. Veľkosť frontend kódu (minifikácia)
    2. Načítavanie len súvisiacich CSS/JS (t. j. JS ku galérii produktu nenačítavame na indexe)
    3. Množstvo HTTP requestov (zlučovanie CSS/JS súborov, nahrádzanie obrázkov cez DATA URI)
    4. Nastavenie cashovania a priority načítania JS/CSS súborov a obrázkov (viac tu: https://www.mnot.net/cache_docs/)

    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: http://robime.it/delayed-content-loading/).

    10: Beta testing

    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/

    11: Produkcia

    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).

    12: Analýza, ladenie

    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.

    Zhrnutie

    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.

    Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

    Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.