16. diel - Ako sa tvorí web v UX

Aby mohol UX dizajnér dobre vykonávať svoju prácu, je potrebné, aby poznal princípy práce svojich kolegov, hlavne programátorov, ktorí tvoria na základoch jeho práce webové stránky a aplikácie. Preto si dnes v tejto lekcii predstavíme kolobeh prác na projekte a základy o vývoji webu.

Ako sa tvorí web

Práca okolo vývoja užívateľských rozhraní, či už ide o webové stránky, aplikácie alebo iný softvér, vyžaduje kooperáciu niekoľkých odvetví.

Pre jednoduchú prácu na projekte, je vhodné, aby všetci zúčastnení spolupracovníci poznali princípy práce svojich kolegov. Je dôležité, aby sme vedeli, kto má akú náplň práce, aké má kto právomoci a za čo nesie zodpovednosť, skrátka, čo spadá pod koho. Tiež by sme ale mali mať hrubý odhad, ako asi práca kolegov vyzerá preto, aby sme mohli dobre pracovať s ich výstupmi alebo pre nich pripravovať podklady.

Kolobeh projektu

Bežný kolobeh práce na webových stránkach (prípadne aplikáciách a pod.) vo firmách je ten, že na začiatku sa dostáva do komunikácie zadávateľ práce (náš klient) s obchodným či projektovým manažérom. Tento manažér konzultuje klientovi predstavy a zadanie a pripravuje cenový návrh. Zároveň by mal byť projektový manažér dozorným orgánom a koordinátorom celého priebehu projektu naprieč všetkými oddeleniami až po finálny výstup a odovzdanie klientovi.

Projekt môže ísť cez marketingové oddelenie, ktoré spolu s obchodným oddelením navrhnú hlavné obchodné ciele a ich plnenie a marketing pripravia prípadné analýzy. V tomto bode by sa mal ideálne zapojiť UX dizajnér, ktorý pripraví svoje návrhy s ohľadom na všetko predtým zistené, pripraví wireframe a prototyp a všetky ďalšie potrebné kroky. Ideálne na svojich návrhoch spolupracuje s grafikom a programátorom, pretože sú to práve oni, ktorí hneď po ňom nastupujú na svoj hlavný diel práce.

Keď sa web začína programovať, je na mieste, aby sa zapojil SEO konzultant a copywriter. SEO konzultant pripraví všetky kroky pre dobrú optimalizáciu a copywriter pripraví ideálne texty podľa obsahovej stratégie plniacej marketingové ciele a berie ohľad aj na optimalizáciu.

Podklady pre tvorbu webu

Čo všetko potrebujeme za podklady pre tvorbu webu a kto ich pripraví:

• Projektový manager - pripraví klientsky brief, teda dokument, ktorý odpovedá na všetky základné otázky ohľadom projektu a zbiera podstatné informácie pre predstavu o klientovi aj projekte.
• Marketingové oddelenie - pripraví marketingovú stratégiu a rôzne ďalšie analýzy, ako určenie cieľových skupín a person, môže pripraviť aj obsahovú stratégiu v spolupráci so stratégom či copywriterom.
• UX dizajnér - pripraví potrebné UX analýzy, navrhne spôsob práce, vytvorí wireframe a prototyp a testuje v každom kroku svoje a ďalšie práce programátorov.
• Programátori - pracujú na front-endovom (to, čo vidíme ako používatelia na prvý pohľad) aj back-endovom (hosting, databázy, zabezpečení atď.) zastrešení webu.
• SEO konzultant – analyzuje vhodné kľúčové slová a sám či v spolupráci s copywriterom tiež napíše všetky vhodné titulky, popisky a ďalšie atribúty vrátane správneho určenia ich umiestnenia.
• Copywriter - napíše vhodné texty na mieru klientovi, ale aj podľa obchodnej a marketingovej stratégie a optimalizácie pre vyhľadávače.
• Grafik - pripraví vizuálny návrh a podieľa sa vo fáze programovania na dodávaní grafických podkladov.

Týmto výpočtom sme získali aspoň základnú predstavu o ľuďoch, ktorí kooperujú pri vzniku ideálneho webu. Čím zložitejší projekt, tým je spolupráca viacerých odborníkov nevyhnutná. Môže sa ale stať, že takmer všetko spomínané môže pri menších projektoch zastúpiť jeden či dvaja šikovní freelanci.

Z čoho sa skladá web

Vďaka našej už získanej znalosti o wireframe a návrhoch už vieme, ako je webová stránka štruktúrovaná. Jej hlavnou "výkladnou skriňou" je homepage – domovská stránka. Vďaka nej by mal každý získať základné povedomie o tom, kam prišiel a čo môže očakávať. Najpodstatnejšia časť homepage (i ďalších stránok) je tá časť, ktorá sa zobrazí ihneď po načítaní stránky na viditeľnej časti obrazovky používateľovho zariadenia. Na homepage by mali byť hlavné informácie o čom web je a mala by byť rázcestníkom na ďalšie stránky.

Homepage sa delí na časti, ktoré sa nazývajú:

• header (hlavička) – tá obsahuje väčšinou logo, navigáciu, vyhľadávacie pole;
• body (telo) – všetko, čo treba na stránke oznámiť;
• footer (pätička) – adresa, sekundárne menu, copyright atď.

Rovnaké delenie má aj HTML dokument, v ktorom sa stránka kóduje, viď nižšie.

Ďalšie stránky toho istého webu môžu byť konštruované podobne, niekedy sa napríklad vynecháva pätička a zmenšuje hlavička.

Čo už na prvý pohľad nevidíme, ale je veľmi dôležité vyplniť z dôvodu optimalizácie pre vyhľadávače (SEO), sú popisky v kóde ako Title, Description. Používajú sa na to slová podľa výstupu analýzy kľúčových slov a návrhov SEO konzultanta či SEO copywritera. Každá stránka má svoj názov alebo Title, kde by mal byť hlavný popis, čo na stránke je. Nemusí kopírovať nadpis vo viditeľnej časti textu (H1 – viď nižšie). Ďalej má každá stránka Description, čiže popis o čom stránka je. Aj keď tieto dve položky, nie sú používateľmi na stránke viditeľné väčšinou (podľa rozhodnutia robotov vyhľadávačov) ich vidíme ako snippety (úryvky v SERPe, tzn. na stránkach výsledkov vyhľadávania).

Snippety sú teda takým naším reklamným textom zadarmo, na ktorý treba veľmi dbať ako z hľadiska obchodného, tak aj z hľadiska optimalizácie, pretože tieto dve veci sú dôležité pre umiestňovanie vo vyhľadávačoch.

Ukážka Snippetu homepage:

Veľmi dôležité pre optimalizáciu tiež je, aby programátor dobre využíval štruktúru stránky. Napríklad nadpisy sa v kóde označujú písmenami H a úrovňami od 1 pre hlavný nadpis stránky, po ďalšie subnadpisy (2, 3, 4, …). Aj v týchto nadpisoch je dôležité sa riadiť inštrukciami od SEO oddelenia, pretože v týchto nadpisoch musia byť použité kľúčové slová pre danú stránku. Rovnako sa musí dobre dbať na rozdelenie obsahu do štruktúry HTML dokumentu, v ktorom web tvorí.

Dve oblasti webovej tvorby

Pri práci na webových stránkach je potrebné rozlišovať tieto dve oblasti:

• Front-end – rozhranie prístupné používateľovi, to, čo vidíme na webovej stránke as čím môžeme interagovať ako používatelia.
• Back-end – administračná časť webu a technológie bežiace na serveri, infraštruktúra služby.

.<>

Ako postupuje programátor

Teraz sa pozrieme, ako programátor postupuje.

Hosting

Na začiatku treba mať kde web prevádzkovať, tzn. musí zriadiť hosting. Hosting je prenájom priestoru pre webové stránky na cudzom serveri.

Doména

Aby web mal svoju webovú adresu, je potrebné zaplatiť doménu, pre ktorú je treba vybrať unikátny názov. Doména je unikátna internetová adresa, ktorej hlavnou funkciou je nahrádzať číselný kód v podobe IP adresy.

Prístup k tvorbe webu

Potom programátor vyberá, akým spôsobom pristúpi k tvorbe webu. Web sa môže písať aj čisto ako kód pomocou HTML a CSS. Všetko o tvorbe jednoduchých webov nájdeme v našom kurze Webové stránky krok za krokom - Online kurz.
HTML je skratkou z HyperText Markup Language – textový značkovací jazyk, ktorý udáva štruktúru a obsah webovej stránky.

CSS je skratkou názvu Cascading Style Sheets alebo tabuľky kaskádových štýlov. Ide o formátovací jazyk, ktorý popisuje, ako sa majú zobrazovať stránky napísané v HTML. CSS sa teda stará o vzhľad a formátovanie obsahu popísaného v HTML.

Využiť sa môže aj systémov, ako je napríklad Bootstrap, čo je sada nástrojov kaskádových štýlov pre tvorbu webu, ktoré obsahujú šablóny napísané v HTML, CSS a JavaScripte, z ktorých možno tiež poskladať webovú stránku alebo ich využiť vo vlastnom kóde.

Ukážka, ako môže vyzerať kódovanie pomocou HTML a CSS:

Pre bežný web menších firiem i jedincov sa väčšinou volí z redakčných systémov, najznámejší je asi Wordpress, ktorý má veľmi intuitívnu administráciu, s ktorou človek aj sám zostaví jednoduchý web. Známa je aj Joomla.

Pokiaľ sa jedná o eshop, dá sa voliť opäť z pripravených systémov ako je Prestashop či Shoptet a ďalšie. Prípadne existuje plugin pre Wordpress s názvom WooComerce, ktorý sa dá prepojiť a zo statického webu ide urobiť eshop.

Riešením pre neprogramátorov môže byť aj ešte intuitívnejšia online tvorba webu na pripravených šablónach s ovládaním väčšinou systémom Drag and drop (preťahovanie myšou). Príkladom môže byť Webnode alebo napríklad Wix.

Pokiaľ sa ale jedná o veľké a košaté weby predpripravené riešenia nie sú väčšinou tak variabilné, aby obsiahli všetky potrebné požiadavky. Tiež u nich často nedokážeme upraviť všetko, čo by sme potrebovali kvôli UX alebo napríklad SEO. Pri weboch, ktoré potrebujú fungovať v spolupráci s rozsiahlymi databázami, ako je napríklad veľký eshop s napojeným skladom a finančným systémom či firmy, ktoré napríklad na svojich interných weboch majú databázy klientov či správu klientsky personalizovaných profilov atď., je nutné voliť individuálne riešenie. Tieto veľké weby v sebe už spájajú veľké zložitosti a potrebujú mať naprogramovaný dobre ako front-end, tak aj back-end, ktorý sa pri menších weboch takmer nemusí riešiť.

Dnes sme si teda predstavili, čo všetko sa skrýva za tvorbou webu a čomu je nutné rozumieť, aby sme mohli dobre komunikovať o našom projekte a vzájomne si kolegami boli nápomocní. Tiež už vieme základné pojmy a úkony pri tvorbe webovej stránky.

V budúcej lekcii, Webový dizajn v UX , nahliadneme pod pokrievku webového designu, ktorý s UX designom úzko súvisí. Webový dizajn nám môže byť nápomocný v mnohých oblastiach. Jeho princípy je dôležité poznať aj pre naše navrhovanie aj následnú spoluprácu s kolegami.