Vysoká škola ekonomická v Praze
Fakulta informatiky a štatistiky
UX design a aplikácia jeho zásad do obsahu a štruktúry prototypu firemného náborového
webu
BAKALÁRSKA PRÁCA
Študijný program: Aplikovaná informatika Študijný odbor: Multimédia v ekonomickej praxi
Autor: Ing. Silvia Nováková Vedúci bakalárskej práce: Mgr. Filip Dědic
Praha, december 2020
Prehlásenie:
Prehlasujem, že bakalársku prácu na tému „UX design a aplikácia jeho zásad do obsahu a štruktúry prototypu firemného náborového webu“ som vypracovala samostatne. Použitá literatúra a všetky podkladové materiály, ktoré boli využité pri vypracovaní tejto práce sú vyznačené v zozname použitej literatúry.
V Prahe dňa 14. decembra 2020 Silvia Nováková
Poďakovanie:
Na tomto mieste by som sa rada poďakovala Mgr. Filipovi Dědicovi za odbornú pomoc pri písaní tejto práce.
Ďalej by som sa rada poďakovala Skupine Spoločností Bukóza Holding za ich ochotu, čas a poskytnuté informácie potrebné pre vznik tejto práce.
Takisto by som sa chcela poďakovať svojej rodine a priateľom za ich pomoc a podporu počas celého môjho štúdia.
Abstrakt
Bakalárska práca sa zaoberá aplikáciou zásad UX designu do návrhu prototypu webových stránok. Cieľom práce je navrhnúť náborové webové stránky pre konkrétnu firmu, ktoré budú zamerané na študentov, absolventov a školy.
Teoretická časť práce predstaví pojem UX, jeho význam a aspekty. Popíše celý proces UX designu, špecifikuje problematiku webdesignu a tvorby obsahu, priblíži koncepty a trendy tvorby náborových webstránok.
Praktická časť vychádza z procesu UX designu popísaného v prvej časti. Prostredníctvom výskumu, interpretácie poznatkov a designovania, navrhne prototyp webových stránok, ktorý bude otestovaný na užívateľoch.
Kľúčové slová
UX design, user experience, webdesign, náborové webové stránky, prototyp
Abstract
The bachelor thesis deals with the application of UX design principles to the design of a website prototype. The aim of the thesis is to design a recruitment website for a specific company, targeting students, graduates and schools.
Theoretical part of the thesis introduces the concept of UX, its meaning and principles, describes the whole process of UX design, specifies the issue of web design and content creation and introduces the concepts and trends of recruitment websites.
The practical part of the thesis follows the UX design process described in the first part.
Through research, interpretation of data and design process, a prototype of a website is created that will be tested on users.
Key words
UX design, user experience, webdesign, recruitment website, prototype
Obsah
Zoznam skratiek ... 8
Úvod ... 9
1 User Experience ... 11
1.1 Význam UX ... 12
1.2 Aspekty UX ... 13
1.3 UX vs. UI ... 14
1.4 UX design proces ... 15
1.4.1 Výskum ... 16
1.4.2 Interpretácia dát ... 18
1.4.3 Design ... 22
1.4.4 Testovanie ... 23
2 Webový design ... 26
2.1 Zásady tvorby webových stránok ... 27
2.2 Obsah webových stránok ... 30
3 Personálny marketing ... 32
3.1 Náborové webové stránky ... 32
4 Návrh webovej stránky ... 35
4.1 Výskum ... 35
4.1.1 Analýza zadávateľa ... 35
4.1.2 Analýza konkurencie... 42
4.1.3 Analýza cieľovej skupiny ... 45
4.2 Analýza dát z výskumu ... 48
4.2.1 Persony ... 48
4.2.2 User stories ... 50
4.2.3 User journey... 51
4.2.4 User flow ... 52
4.3 Design ... 52
4.3.1 Obsah a informačná architektúra ... 52
4.3.2 Skicovanie, wireframes a grafická vizualizácia ... 55
4.3.3 Prototyp ... 57
4.4 Testovanie ... 58
Záver ... 64
Zoznam použitej literatúry ... 66
Zoznam tabuliek ... 71
Zoznam obrázkov ... 72
Prílohy ...i
8
Zoznam skratiek
CSS Cascading Style Sheets (Kaskádové štýly)
HTML Hypertext Markup Language (Hypertextový značkovací jazyk) IA Informačná architektúra
ISO International Organization for Standardization (Medzinárodná organizácia pro normalizáciu)
JS JavaScript
PHP Hypertext Preprocessor
SEO Search Engine Optimisation (Optimalizácia pre vyhľadávače) SSBH Skupina Spoločností Bukóza Holding
UI User Interface (Užívateľské rozhranie) UX User Experience (Užívateľská prívetivosť)
UXPA The User Experience Professionals Association (Asociácia UX profesionálov)
9
Úvod
Webové stránky sú jedným z prvých miest kam chodíme vyhľadávať informácie.
Určite sa ale každý z nás už stretol s webovou stránkou, na ktorej jednoducho nemohol nič nájsť, nebol si istý, či vykonaná akcia bola úspešne zaznamenaná, alebo kam kliknúť, aby sa dostal ďalej. Toto je len pár príkladov zlého UX designu.
UX alebo užívateľský zážitok je pomerne nová disciplína, ktorá sa snaží vytvárať čo najpríjemnejší zážitok z interakcie s (nielen) digitálnymi produktami. Práve on, v kontexte webových stránok rozhoduje o prístupnosti obsahu a jeho pochopeniu, celkovom dojme o poskytovateľovi stránky a jeho dôveryhodnosti a v konečnom dôsledku o vzťahu užívateľa k nemu, obzvlášť v personálnych otázkach.
Cieľom tejto bakalárskej práce je navrhnúť formuláciu zdelení, štruktúry a následne prototypu náborových webových stránok podľa zásad a princípov UX designu. Stránky sú navrhované pre Skupinu Spoločností Bukóza Holding. Táto spoločnosť pôsobí v špecifickom priemyselnom odvetví spracovania drevnej hmoty chemickým spôsobom, teda výrobe buničiny. Jedná sa o odbor, ktorý si vyžaduje vzdelanie hlavne v oblasti chémie, ale aj elektrotechniky a strojárstva (a.i.). Toto sú ale konkrétne odbory, v ktorých má firma dlhodobo problém nájsť kvalifikovaných zamestnancov. Spolu so starnúcou súčasnou zamestnaneckou základňou musí firma vyvíjať značné úsilie na prilákanie mladých kvalifikovaných ľudí do svojich radov ako aj vytvárať vhodné prostredie pre záujem o štúdium týchto odborov. Práve preto spoločnosť úzko spolupracuje so školami, študentmi a absolventmi.
Všetky informácie o možnostiach, ktoré firma študentom a školám ponúka prezentuje na svojich oficiálnych firemných web stránkach v rámci časti „Kariéra”. Tieto stránky sú pomerne rozsiahle, obsah určený študentom taktiež postupne rastie. Tak vznikla potreba oddeliť tento obsah od hlavných firemných stránok a vytvoriť nové webové stránky zamerané na študentov a absolventov, a tým zároveň vytvoriť priestor pre priamu komunikáciu medzi firmou a mladými ľuďmi.
Cieľom je tak navrhnúť náborové webové stránky, ktoré sú určené pre študentov, absolventov a školy, prezentovať im možnosti, ktoré im firma ponúka a umožniť im jednoduché prihlásenie sa do ponúkaných aktivít.
K navrhnutiu úspešnej webovej stránky poslúži teoretická časť práce, ktorá poskytne teoretický základ, ktorý bude aplikovaný v časti praktickej. V úvode definuje pojem „User Experience”, vysvetlí jeho význam a aspekty, a odlíši ho od často zamieňaného pojmu „User
10
Interface”. Následne popíše celý proces designu užívateľského zážitku. Teoretická časť tiež špecifikuje design webových stránok, zásady ich návrhu a tvorby ich obsahu. Pre uvedenie do problematiky náborových webových stránok je definovaný personálny marketing a základné koncepty a trendy webov, ktorými sa firmy prezentujú svojim potenciálnym zamestnancom.
Praktická časť bude postupne nasledovať UX design proces popísaný v teoretickej časti práce. Realizovaním výskumu pomocou analýzy zadávateľa, konkurencie a užívateľov.
Interpretovaním poznatkov z výskumu do UX výstupov - person, užívateľských príbehov, užívateľskej cesty a užívateľského toku. Všetky tieto informácie poslúžia k návrhu webových stránok. Novo navrhovaný web bude využívať súčasný existujúci obsah, ktorý bude upravený a aktualizovaný, ako aj čisto nový obsah na základe požiadaviek zadávateľa. Bude navrhnutá informačná architektúra a štruktúra webu. Design proces po iterovaní v rámci skicovania a tvorby wireframov navrhne celé užívateľské rozhranie webových stránok, ktoré bude možné otestovať pomocou interaktívneho prototypu. Poznatky z testovania budú implementované do finálneho prototypu náborových webových stránok pre Skupinu Spoločností Bukóza Holding.
11
1 User Experience
User Experience (UX) môže mať viacero prekladov - užívateľská skúsenosť, užívateľský zážitok či užívateľská prívetivosť. Znie ako celkom abstraktný a široký pojem, preto je ho možné definovať viacerými spôsobmi.
Podľa The User Experience Professionals Association (UXPA)1 je užívateľský zážitok definovaný ako: „Každý aspekt užívateľskej interakcie s produktom, službou alebo spoločnosťou, ktorý utvára užívateľove vnímanie ako celok. UX design ako samostatná disciplína sa zaoberá všetkými elementami, ktoré spoločne utvárajú rozhranie, vrátane rozloženia stránky, vizuálneho designu, textu, značky, zvuku a interakcie. UX má za cieľ koordinovať tieto elementy, aby umožnil najlepšiu možnú interakciu pre užívateľa.“2 (UXPA, 2020)
ISO norma3 9241-210:2019 definuje užívateľský zážitok ako užívateľove vnímanie a odozvu, ktorá je výsledkom používania (alebo očakávania z použitia) systému, produktu alebo služby. To zahŕňa, užívateľove emócie, presvedčenie, dojem a pocit zadosťučinenia, ktorý nastáva pred, počas a po použití produktu. Na to vplýva aj užívateľov vnútorný a fyzický stav, ktorý odráža predošlé skúsenosti, názory, zručnosti, jeho osobnosť ale aj kontext, v ktorom produkt používa (ISO, 2019a).
Podľa autoriek Baxterovej, Courageovej a Caineovej odborníčok v oblasti UX sa líši
„použiteľnosť“ od užívateľského zážitku. Podľa nich je použiteľnosť objektívna a zameraná na produkt a má zabezpečiť bezproblémovú interakciu. Zatiaľ čo UX je širší subjektívny pojem zameraný na človeka (človek a produkt spoluvytvárajú užívateľský zážitok) (Baxter, Courage a Caine, 2015, s. 4).
Tento užívateľský zážitok je vytváraný v procese UX designu. Podľa Ungera a Chandlerovej je User Experience design vytváranie a synchronizovanie elementov, ktoré ovplyvňujú zážitok užívateľa s určitou firmou so zámerom ovplyvnenia jeho vnímania a správania (Unger, Chandler, 2009, s. 3).
1 Asociácia UX profesionálov
2 „Every aspect of the user’s interaction with a product, service, or company that make up the user’s perceptions of the whole. User experience design as a discipline is concerned with all the elements that together make up that interface, including layout, visual design, text, brand, sound, and interaction. UE works to coordinate these elements to allow for the best possible interaction by users.“
3 Medzinárodná jednotná norma s rovnakým znením a platnosťou v krajinách, ktoré ju prijali.
12
1.1 Význam UX
Pojem UX sa primárne spája s návrhom digitálnych produktov (webové stránky, aplikácie...). Napriek tomu by sme mohli povedať, že UX je súčasťou väčšiny vecí, s ktorými interagujeme. Je to stolička, na ktorej sedíme, bankomat, z ktorého vyberáme peniaze či rozloženie gombíkov na ovládači, ktorým prepíname programy.
Pri veľkom zjednodušení by sa dalo povedať, že nie je ťažké vyrobiť funkčnú stoličku, ktorá udrží váhu človeka a splní tak účel, pre ktorý bola vyrobená a k tomu povedzme ešte aj vyzerá celkom dobre. To všetko však ešte neznamená, že na stoličke sa sedí pohodlne, je ergonomická, ľahko sa presúva či skladuje. Práve tu vstupuje do hry UX design, ktorý dáva do stredu celého procesu návrhu užívateľa, zohľadňuje práve jeho potreby, očakávania a priania a akýkoľvek produkt4 sa snaží vytvárať s myšlienkou ich naplnenia.
Môžeme povedať, že „dobrý UX“ zabezpečí to, že užívatelia sa budú radi k produktu vracať, stane sa súčasťou ich životov, budujú si s ním vzťah, čo vlastne vyúsťuje k emócii, ktorú majú s produktom spojenú. Požadovaná je samozrejme pozitívna reakcia a emócia, ktorú vyvolal tento, v preklade „užívateľský zážitok“.
Steve Krug autor celosvetovo populárnej knihy „Nenúťte užívateľa premýšľať“
označovaný ako „usability guru“5 sa na to pozerá z pohľadu použiteľnosti. Teda, že človek priemernej (alebo podpriemernej) zručnosti a skúsenosti dokáže zistiť ako používať určitú vec (webovú stránku, ovládač či dvere), aby dosiahol čo potrebuje bez toho, aby to pre neho vyžadovalo viac námahy ako mu to za to stojí. Podstatou a najdôležitejším princípom výstižne obsiahnutom v názve jeho knihy je „nenútiť užívateľa premýšľať“. Napríklad webová stránka má byť tak samozrejmá, očividná a pochopiteľná, že užívateľ nemusí vynaložiť námahu na to, aby pochopil o čom je a ako sa na nej má pohybovať (Krug, 2014, s.
11).
Ďalším rozmerom významu UX je fakt, že výrobca či designer je častokrát tak zahĺbený do tvorby produktu, vyzná sa v ňom a pracoval s ním nespočetne mnohokrát, čo spôsobí, že je s produktom tak oboznámený, že je mu úplne jasné ako ho používať a pri tom si neuvedomuje, že bežný užívateľ, ktorý tento kontext nemá, nedokáže tak jednoducho pochopiť ako s daným produktom narábať.
4 Produktom sa nemyslí len fyzická vec ale akákoľvek entita, s ktorou je možné interagovať (webová stránka,
bankomat, samoobslužná pokladňa...)
5 Guru použiteľnosti (Steve Krug je usability consultant)
13
Obrázok 1 Význam UX (zdroj: Krishnan, 2018, autor ilustrácie: Satu Kyröläinen)
Užívatelia sa predsa nechcú cítiť hlúpo, stratene a neschopne. Nielen, že to v nich vyvoláva negatívne emócie, pravdepodobne to spôsobí, že sa k produktu už nevrátia, nakoľko v súčasnosti majú na výber nespočetné množstvo podobných produktov, ktoré splnia ich cieľ. Preto dobrý UX môže byť ešte stále konkurenčnou výhodou.
1.2 Aspekty UX
Peter Morville priekopník v oblasti informačnej architektúry a UX designu prišiel v roku 2004 s aspektmi užívateľského zážitku v podobe tzv. UX voštiny (UX Honeycomb).
Tento diagram pojednáva o tom, že celkový užívateľský zážitok nepozostáva len z jednoduchosti používania ale jedná sa o kombináciu viacerých aspektov, ktoré tento zážitok spoluvytvárajú.
Obrázok 2 UX voština od P. Morvilla (zdroj: Morville, 2004) Jedná sa o 7 aspektov:
● Užitočný - má prinášať úžitok a (inovatívne) riešenia
● Použiteľný - použiteľnosť je kľúčová (ale nie je všetkým)
● Žiadúci - má vytvoriť priestor pre vzbudenie emócií u užívateľa
● Vyhľadateľný - má poskytovať ľahko navigovateľný priestor
● Dostupný - má umožňovať prístup aj pre hendikepovaných užívateľov
14
● Dôveryhodný - má vzbudzovať dôveru užívateľov v to, čo im je prezentované
● Cenný - má prinášať užívateľom aj firme hodnotu (Morville, 2004) Tieto aspekty ďalej rozvádza druhá kapitola o webovom designe.
1.3 UX vs. UI
UX bol v predošlom texte definovaný ako User Experience alebo užívateľský zážitok.
V porovnaní s UI, ktorý predstavuje User Interface alebo v preklade užívateľské rozhranie sa jedná o dva rôzne pojmy, ktoré bývajú často zamieňané.
Podľa ISO normy 9241-210:2019 užívateľské rozhranie tvoria všetky komponenty interaktívneho systému (softwaru alebo hardwaru), ktoré poskytujú užívateľovi informácie a ovládacie prvky na vykonávanie konkrétnych úloh s interaktívnym systémom (ISO, 2019b). Vo svojej podstate z významu slova „rozhranie“ sa väčšinou jedná o digitálne produkty a zahŕňa všetky vizuálne a interaktívne elementy ako napr. tlačidlá, ikonky, rozmiestnenie, typografiu, farebnosť či responzívnosť (Lamprecht, 2019). Zjednodušene sa jedná o vizuálnu (estetickú) stránku navrhovaného produktu.
Najčastejšie používaným príkladom na vysvetlenie rozdielu medzi UX a UI je kečupová fľaša. Na obrázku 1 je vidieť, že obe fľaše majú určitý vzhľad, ktorý je daný hlavne ich tvarom a materiálom, z ktorých sú vyrobené. To je prirovnateľné k UI. Avšak užívateľský zážitok z ich používania je rôzny. Typická sklenená fľaša s horným uzáverom nie je tak praktická, ťažšie a väčšinou dlhšie sa z nej samotný kečup dávkuje. Naopak plastová fľaša so spodným uzáverom umožňuje rýchlejšie a presnejšie dávkovanie ako aj iný pocit z vytláčania kečupu namiesto jeho nalievania. Tento rôzny zážitok z používania produktu je práve UX.
Obrázok 3 Porovnanie UX a UI (zdroj: Artoon Solutions)
15
UX a UI je často zamieňané práve z titulu častého vnímania designu ako čisto vizuálneho výsledku. Nakoľko užívateľ vidí tvar a materiál, môže sa domnievať, že sa jedná len o čisto estetické rozhodnutie. Naopak, za rozhodnutím o tvare, materiáli a umiestnení uzáveru a teda zdanlivo len celkovom výzore je premyslený UX design, ktorý pochopil užívateľa, jeho ťažkosti s používaním sklenenej fľaše a nahradil ho novým prívetivejším riešením.
UX a UI však spolu neodmysliteľne súvisia, pretože jeden bez druhého neprinesú užívateľovi požadovaný príjemný zážitok a spokojnosť z používania produktu.
Napriek tomu, že sa jedná o rôzne odbory, ktoré si vyžadujú iný súbor zručností a existuje diferenciácia na UX designera a UI designera, mnohokrát sú tieto profesie spojené v jednej osobe.
1.4 UX design proces
UX design proces sa môže líšiť podľa designera alebo zaužívaného postupu v danej firme, ale vo svojej podstate vlastne vychádza z konceptu nazývaného „Design Thinking“
(designové myslenie).
Designové myslenie je proces kreatívneho riešenia problémov, ktorý je zameraný na človeka. Nabáda pri riešení business problémov myslieť najprv na potreby užívateľa. Práve to vedie k lepším produktom, službám a interným procesom. Designové myslenie v sebe spája, čo je žiaduce pre človeka s tým, čo je technologicky uskutočniteľné a ekonomicky realizovateľné. Je o prijatí jednoduchých zmien v zmýšľaní a tým riešení problémov z nového uhlu pohľadu (IDEO U, 2020).
Existuje viacero prístupov k designovému mysleniu, ktoré sa líšia v metodike alebo v postupe, ktorým prechádzajú v procese designovania (nielen) užívateľského zážitku.
Viktoriia Samus vo svojej diplomovej práci (2020) porovnala jednotlivé najznámejšie modely designového myslenia (Model Standford d.school, Model Dvojitého diamantu, Model IDEO, Frog design model, ISO 9241-210:2019 model, Luma institut model) a našla podobnosti v metodikách jednotlivých modelov, ktoré zhrnula do piatich krokov UX design procesu:
1. Výskum
2. Interpretácia poznatkov 3. Design
4. Testovanie
5. Implementácia (Samus, 2020, s. 38)
16
Táto práca využije túto metodiku v procese návrhu webovej stránky. V jednotlivých podkapitolách teoreticky popíše jednotlivé kroky. Vzhľadom na cieľ práce sa bude venovať krokom 1. až 4.. Vopred je potrebné spomenúť, že v praxi tento proces nemusí striktne prebiehať presne takto. Jedná sa o iteratívny proces, v ktorom sa designer mnohokrát vracia do predchádzajúceho kroku, nevyužíva nutne všetky dostupné metódy a postupy. UX design proces je veľmi individuálny, závisí na type projektu (produktu), časových a finančných možnostiach alebo iných prípadných obmedzeniach.
Cieľom tejto podkapitoly je poskytnúť stručný prehľad o jednotlivých fázach, ktorými môže designer postupovať v UX design procese.
1.4.1 Výskum
Výskum je veľmi dôležitou fázou celého UX procesu. Jeho rozsiahlosť, hĺbka či zvolená metóda závisí na type produktu, znalosti problematiky, rozpočte či časových možnostiach. Cieľom výskumu je zistiť o danej problematike dostatočné množstvo informácií, aby bolo možné navrhnúť funkčné a použiteľné riešenie. Z pohľadu výskumu sú pri návrhu akéhokoľvek produktu zvyčajne zapojené 3 subjekty. Zadávateľ, teda firma alebo jednotlivec, ktorej vznikla potreba vytvorenia produktu a ktorá má od neho určité očakávania, požiadavky a ciele, ktoré má naplniť. Konkurencia (ak sa nejedná o neexistujúci produkt), ktorej súčasné riešenie a prístup má určitým spôsobom vplyv na návrh produktu zadávateľa. A nakoniec užívateľ ako subjekt, ktorého očakávania, požiadavky a ciele je potrebné naplniť pre vytvorenie úspešného produktu.
Zadávateľ
Výskum by mal začínať pochopením zadávateľa (firmy), ktorý oslovuje designera s potrebou riešenia. V rámci toho sa jedná zvyčajne o rozhovory so stakeholdermi.
Stakeholdermi sú všetky zainteresované osoby, ktoré majú vplyv na designovaný produkt, a od ktorých je možné získať relevantné a užitočné informácie. Počet stakeholderov závisí na veľkosti firmy, ale môže to byť aj len jedna osoba. Kľúčovými otázkami, ktoré je potrebné zodpovedať sú napríklad:
- O aký produkt (službu) sa jedná, čo má dosiahnuť?
- Kto ho bude používať?
- Čo títo užívatelia potrebujú?
- Ktorí zákazníci alebo užívatelia sú najdôležitejší?
- Akým výzvam sa čelí?
17 - Čo by mal tento produkt priniesť firme?
- Aké sú najväčšie obavy zadávateľa z tohto projektu?
- Ako bude definovaný úspech tohto projektu?
- Sú vo firme iné relevantné osoby, na ktoré je vhodné sa obrátiť?
- Ako veľmi chce byť daný stakeholder zahrnutý v projekte? (Goodwin, 2009, s.70 a s. 80-81)
Ďalej to môžu byť otázky týkajúce sa konkurencie, časové predstavy, nevyhnutné prvky, technické či obchodné obmedzenia atď. Pri výskume môže pomôcť aj poskytnutá relevantná dokumentácia, reporty, prezentácie ako aj dodatočný výskum verejne dostupných informácií o zadávateľovi. Pretože napriek tomu, že UX design je o splnení užívateľských cieľov, produkt, ktorý nenaplní ciele zadávateľa nemôže byť považovaný za úspešný.
Konkurencia
Na druhej strane je tu konkurencia, ktorú zvyčajne dokázal identifikovať zadávateľ.
Konkurenciou nemusia byť iba firmy ponúkajúce rovnaký produkt alebo službu, ale je to akékoľvek iné riešenie, ktoré si užívateľ môže vybrať, alebo ktoré je relevantné pre navrhovaný produkt.
Analýza konkurencie sa vykonáva na odhalenie možností diferenciácie voči konkurenčným produktom a odkrytie ich slabých a silných stránok. Môže sa jednať o prvky užívateľského zážitku, ktoré konkurenčné produkty nemajú práve prívetivo vyriešené a je vhodné sa im vyhnúť, alebo dobré a inovatívne UX riešenia, ktoré môžu slúžiť ako inšpirácia.
Nejde o kopírovanie riešenia konkurencie. Analýza konkurencie nenapovie aké je inovatívne riešenie, ale odhalí aké riešenia v súčasnosti na trhu existujú. Dôležitým dôvodom konkurenčnej analýzy je zmapovať štandardné postupy na trhu. Užívatelia majú totiž pravdepodobne určité očakávania týkajúce sa užívateľského zážitku a funkcií, s ktorými sa môžu stretnúť (Vinney, 2020). To je typické najmä pre webové stránky. Pri analýze konkurenčných webov je možné odhaliť tzv. konvencie, čiže všeobecne zaužívané alebo štandardizované riešenia. Teda riešenia, ktoré začali používať aj iné stránky, užívatelia ich videli mnohokrát, na mnohých miestach, takže už viac nepotrebujú vysvetlenie. To znamená, že už nemusia rozmýšľať, čo jednotlivé veci znamenajú a ako fungujú. To im spríjemňuje celkový užívateľský zážitok (Krug, 2014, s. 29-31).
Konkurenčná analýza môže prebiehať prehliadaním produktu “očami” užívateľa a zaznamenávaním zistených poznatkov, alebo aj užívateľským testovaním, kedy účastníci
18
výskumu (užívatelia) prechádzajú konkurenčným produktom a zaznamenávajú sa ich názory.
Užívateľ
V neposlednom rade je tu užívateľ - subjekt, ktorého potreby, motivácie a správanie sa snažíme pochopiť, aby sme tak jeho požiadavky a ciele dokázali svojím riešením uspokojiť.
Toto sa však väčšinou nedá zistiť len z poznatkov, ktoré o cieľovej skupine dokáže poskytnúť zadávateľ. Preto je nutné vykonať užívateľský výskum s cieľom pochopenia užívateľa a získania insightu, ktorý pomôže pri designe riešenia produktu.
Všeobecne je potrebné získať odpovede na otázky ako:
- Čo užívatelia chcú a potrebujú?
- Ako užívatelia uvažujú nad danou témou, aký je ich mentálny model?
- Aké sú kultúrne či iné vplyvy, ktoré ovplyvňujú ako užívatelia interagujú s produktom?
- Akým výzvam a “pain pointom” (body bolesti, frustrácie) užívatelia čelia?
(Baxter, Courage a Caine, 2015, s. 96)
Existuje množstvo metód užívateľského výskumu. Najtypickejším sú hĺbkové rozhovory či dotazovanie (väčšinou online), ďalej terénny výskum či focus group a i.. V princípe ich môžeme rozdeliť na kvalitatívne (odpovedajú na otázku “prečo?”) a kvantitatívne (odpovedajú na otázku “koľko?”) metódy. Ďalej na behaviorálne metódy, ktoré sa sústreďujú na pozorovanie správania. A v neposlednom rade postojové metódy, ktoré sa snažia zistiť názor a myšlienky užívateľov. Výber metódy záleží na výskumnej otázke a každá z metód má svoje výhody a nevýhody. Pri výbere je potrebné zvážiť kompromis medzi nákladmi, časom, presnosťou a reprezentatívnosťou jednotlivých metód (Baxter, Courage a Caine, 2015, s.102-104 a s. 112).
1.4.2 Interpretácia dát
Dáta získané z výskumu sa interpretujú do výstupov, ktoré slúžia nielen na zhrnutie zistených informácií, ale aj ako spôsob ako jednoduchšie komunikovať zistenia s členmi tímu a stakeholdermi, ako dokumentovať svoju prácu a vytvárať si podklady, ku ktorým je možné sa jednoducho vracať v ďalšom procese. Typickými výstupmi sú tzv. persony, user flows, user stories a user journeys. Taktiež aj jasne formulované ciele a požiadavky zadávateľa a výstup z konkurenčnej analýzy.
19 Persona
Persony sú archetypy popisujúce ciele a pozorované vzorce správania cieľových užívateľov. Jedná sa vo svojej podstate o model, ktorý využíva „storytelling“6, aby zapojil sociálne a emočné aspekty ľudského mozgu na lepšiu vizualizáciu a pochopenie prečo by daný design mohol fungovať alebo nie (Goodwin, 2009, s. 229). Totiž snaha vytvoriť produkt, ktorý má uspokojiť rozmanité skupiny užívateľov väčšinou vyúsťuje v produkt s tak širokou funkčnosťou, ktorý potom v podstate neuspokojí žiadneho užívateľa. Preto je kľúčové vybrať správnych jednotlivcov, ktorí budú reprezentovať väčšiu vzorku cieľových užívateľov a produkt navrhovať priamo pre nich. A práve na to slúžia persony. Persony musia vychádzať z reálnych dát, teda z výskumu. Tvoríme ich ako reálne ľudské bytosti. Nie sú skutočným užívateľom, ale sú syntézou skúmaných užívateľov, ktorých reprezentujú. Majú zachytiť ich správanie a motiváciu (Cooper, Reimann a Cronin, 2007, s. 77-83).
Formát v akom je persona tvorená môže byť relatívne flexibilný, ale mal by obsahovať aspoň:
● Demografické údaje: informácie o jednotlivcovi (vek, rodinný stav, povolanie atď.)
● Správanie: čo momentálne robí
● Pain points (body bolesti, frustrácie): relevantné problémy, s ktorými sa stretáva
● Ciele a potreby: čo sa snaží dosiahnuť (Travers, 2013, s. 50)
Personam sa dávajú aj mená a výzor v podobe fotografie, ktorá by ich mohla vystihovať. Celkovo by mali obsahovať akékoľvek informácie, ktoré napomôžu k pochopeniu vzorcov ich správania. Čo sa týka počtu vytvorených person je ich ideálne mať toľko, koľko je potrebné na vyjadrenie jednotlivých cieľov a vzorcov správaní užívateľov. Záleží ale aj na zložitosti produktu, jednoduchšie môžu mať približne 2-6 person (Goodwin, 2009, s. 238).
User story
User story alebo užívateľský príbeh je krátka, výstižná na cieľ zameraná veta s nasledovnou štruktúrou:
„Ako [typ užívateľa] chcem [cieľ], aby [benefit].”
● Ako [...] - rola, užívateľ produktu
● chcem [...] - čo chce dosiahnuť
● aby [...] - akú potrebu to naplní, čo tým dosiahne Príklad užívateľského príbehu:
6 rozprávanie príbehov
20
„Ako držiteľ bežného účtu chcem vložiť šeky pomocou svojho mobilného zariadenia, aby som nemusel chodiť do banky." (Laubheimer, Loranger, 2017;
Domingo, 2020)
Užívateľské príbehy sa zameriavajú na to, čo sa užívateľ snaží dosiahnuť, nie na to ako mu to má produkt poskytnúť, teda ohraničujú zámer bez toho, aby mali rovno identifikovať riešenie (Hagen, Gilmore, 2009).
Pomáhajú designerom empatizovať s užívateľom a tak definovať požiadavky a princípy produktu z užívateľského pohľadu. Tým následne navrhovať jednotlivé funkcie produktu, ktoré mu to pomôžu dosiahnuť.
User flow a user journey sú často zamieňané, nakoľko sa obe vo svojej podstate používajú na popis procesu interakcie medzi užívateľom a produktom. Čiastočne by sme sa na nich mohli už pozerať ako na ideačné metódy, keďže majú zobrazovať modely fungovania produktu. Sú však medzi nimi rozdiely, keďže sa sústreďujú na trochu iné aspekty.
User journey
User journey (user journey map) alebo v preklade užívateľská cesta je vizualizácia celej cesty užívateľa navrhovaným riešením. Nie je len o krokoch, ktorými prechádza, ale aj o jeho pocitoch, bodoch “bolesti” a momentoch potešenia. Je to vizualizácia vzťahu užívateľa a produktu v priebehu času a naprieč rôznymi kanálmi (napr. webstránka ako jeden kanál s príjemným užívateľským zážitkom a predajňa ako druhý kanál s nepríjemnou skúsenosťou pre užívateľa). Zber informácií z rôznych kanálov môže pomôcť odhaliť medzery v užívateľskom zážitku. Má teda viacero vrstiev a nie je len o konkrétnych prvkoch, ktoré spúšťajú ďalšiu akciu.
Užívateľská cesta môže mať rôzne formáty. Typicky zobrazuje časovú os všetkých kontaktných bodov medzi užívateľom a produktom a informácie o všetkých kanáloch, ktoré užívatelia používajú na interakciu s ním. Užívateľská cesta sa musí sústrediť na konkrétnu osobu - personu a v určitom rozsahu, teda v scenári nejakej interakcie popisujúcej skutočnú situáciu, ktorú mapa cesty rieši. V danom scenári persona prechádza kontaktnými bodmi, čo sú vlastne akcie a interakcie užívateľa s produktom/firmou. Je potrebné identifikovať všetky hlavné kanály spojené s týmito kontaktnými bodmi (napr. kontaktný bod: „Kúpiť produkt“ a jeho kanály: nákup online/ nákup v obchode) (Munro, 2020).
21
Obrázok 4 Príklad užívateľskej cesty (zdroj: Lucidchart, 2017) User flow
User flow alebo v preklade užívateľský tok je už konkrétna cesta, ktorou sa bude užívateľ pohybovať po webe alebo aplikácii. Jedná sa o sériu konkrétnych krokov vedúcich k vykonaniu finálnej akcie (napr. nákup, registrácia). Tento tok nemusí byť lineárny, môže sa rozvetvovať. Pri vytváraní užívateľského toku sa berú do úvahy ciele a potreby užívateľa, ktoré sú spojené s firemnými cieľmi, teda konkrétnymi akciami, ktoré firma chce, aby užívateľ vykonal (nakúpil, zaregistroval sa). Prívetivý užívateľský tok by mal užívateľovi prezentovať správnu informáciu, v správny čas s minimálnou záťažou pre neho (minimálne nutné množstvo informácií, obrazoviek a klikov na dosiahnutie cieľovej akcie) (Munro, 2020; Baskanderi, 2017).
Existuje viacero spôsobov zobrazenie užívateľského toku. Vývojový diagram je jednoduchou kostrou popisujúcou postupnosť krokov v konkrétnej ceste užívateľa. Okrúhle objekty zobrazujú začiatok a koniec toku, kosoštvorce zobrazujú body rozhodovania, obdĺžniky sú jednotlivé obrazovky, ktorými užívateľ prechádza (ich názvy alebo opis, čo sa na nich má udiať) a šípky udávajú smer toku. Užívateľské toky tak pomáhajú určiť koľko obrazoviek je potrebných, v akom poradí a aké komponenty sa na nich majú nachádzať (Birch, 2014).
22
Obrázok 5 Príklad užívateľského toku (zdroj: Baskanderi, 2017) 1.4.3 Design
V procese designovania dochádza k tvorbe návrhu produktu. Jedná sa o fázu tvorby a vizualizácie ideálne množstva nápadov založených na predošlých zisteniach. Fáza designovania zvyčajne pozostáva z viacerých krokov, ktoré začínajú tvorbou tzv. low-fidelity návrhov (návrhov s nízkou vernosťou) akou je skica a wireframe (drôtený model), ktoré sú postupne zdokonaľované do podoby tzv. (mid)/high-fidelity návrhov (návrhov s vysokou vernosťou) akým je grafická vizualizácia, či mockup až do finálnej podoby funkčného a interaktívneho prototypu. Hlavným dôvodom tohto postupu je finančná a časová náročnosť tvorby finálneho produktu. Nakoľko sa pri UX designe jedná o vysoko iteračný proces nebolo by efektívne napr. rovno písať kód webovej stránky a vytvárať tak finálny produkt, keďže prípadné zmeny by stáli oveľa viac času, námahy a financií ako jednoduchá úprava skice či wireframu.
Obrázok 6 Proces designu produktu (zdroj: Goel, 2018)
V prvom kroku dochádza k skicovaniu nápadov. Tento proces zabezpečuje rýchle generovanie nápadov, nakoľko umožňuje ich okamžitú vizualizáciu a úpravu bez toho, aby
23
bol designer zdržiavaný počítačovým programom, v ktorom pracuje alebo potrebou vytvárať esteticky pôsobiaci návrh.
V druhom kroku pri tvorbe wireframov alebo v preklade drôteného modelu zvyčajne designer vstupuje do počítačového programu ako je napríklad Figma alebo Sketch a i., kde vytvára rozhranie a rozmiestnenie elementov na obrazovke. Väčšinou sa jedná o vizualizovanie pomocou boxov, jednoduchých tlačidiel, hrubého textu v čierno-bielej podobe. Nerieši sa pri tom vizuálna úprava (farebnosť, typografia, obsah) mnohokrát nie je ešte pripravená finálna textácia a pracuje sa so zástupným textom alebo hrubou verziou textu, ktorý je neskôr nahradený finálnou textáciou. Pointou drôteného modelu je vytvoriť kostru designu, ktorá obsahuje len nevyhnutné prvky rozhrania a je tak blueprintom produktu. Väčšinou je prezentovateľný užívateľom, ktorí by ho mali dokázať používať aj v tejto čierno-bielej podobe a je možné na ňom vykonať užívateľské testovanie.
V ďalšom kroku sa vytvára grafická vizualizácia designu, ktorá vytvára vzhľad a štýl produktu. Nasadzuje sa farebná schéma, typografia a obsah (text, obrázky, fotografie, video...). Produkt dostáva vizuálnu podobu.
Výslednou fázou je návrh interaktívneho prototypu, ktorý sa snaží o čo najvernejšie napodobenie finálneho produktu predtým ako sa posunie do záverečnej fázy softvérového vývoja. Cieľom prototypu je simulovať interakciu medzi užívateľom a rozhraním. Snahou je vytvoriť realistický prototyp, na ktorom je možné čo najvernejšie otestovať funkčnosť produktu (Babich, 2020; Nice, 2019).
Proces designovania je individuálny a nemusí nutne prebiehať v týchto krokoch. Je možné vytvoriť interaktívny prototyp z čierno-bielych wireframov alebo používať papierové ručne kreslené makety atď. Záleží na individuálnom prístupe designera, type navrhovaného produktu, časových alebo finančných limitáciách.
1.4.4 Testovanie
Testovanie je kľúčovým bodom v UX design procese. Ideálne je ho vykonávať skoro a často (ak to situácia dovolí), nie len tesne pred koncom vývoja produktu. Dôvodom testovania je overenie riešenia na cieľovej skupine užívateľov, pre ktorých produkt vytvárame, pretože práve oni ho budú používať a my chceme zabezpečiť ich spokojnosť.
Počas testovania je taktiež možné odhaliť o užívateľoch informácie, ktoré sa nezistili vo fáze výskumu. Hlavným cieľom testovania je odhaliť problémy v designe čo najskôr, predtým ako sa projekt posunie do finančne a časovo najnáročnejšej fázy - softvérového vývoja (Stevens, 2019).
24
Existuje viacero spôsobov užívateľského testovania. Vzhľadom na rozsah a cieľ práce budú stručne popísané metódy, ktoré by mohli byť použité pri testovaní designu webovej stránky.
Test použiteľnosti je jednou z najdôležitejších metód, pretože odhaľuje ako jednoduché je produkt používať. Jedná sa v princípe o pozorovanie užívateľa pri vykonávaní zadanej pre produkt typickej úlohy (nákup produktu na e-shope, rezervovanie ubytovania na webovej stránke...). To umožňuje odhaliť aspekty, ktoré sťažovali užívateľovi splnenie zadanej úlohy, alebo ktoré naopak boli pre užívateľa prívetivé. Môže sa jednať o viacero scenárov, úloh alebo otázok, ktoré odhalia problémy v designe a môžu byť opravené v jeho ďalšej iterácii (Stevens, 2019; Krug, 2014, s. 113 ). Podľa Kruga je dostačujúci počet testovaných užívateľov 3, nakoľko je vždy možné nájsť viac problémov, ako je prostriedkov na ich opravu. Preto je potrebné sa sústrediť na tie najvážnejšie, ktoré by mali dokázať odhaliť aj 3 užívatelia (Krug, 2014, s. 119). Podľa Jakoba Nielsena z Nielsen Norman Group7, ktorý na základe vlastného prieskumu svojich realizovaných projektov zistil, že dostačujúci počet užívateľov na testovanie použiteľnosti je 5, vzhľadom na to, že podľa jeho prieskumu testovanie väčšieho počtu respondentov neprináša výrazne viac insightu (Nielsen, 2012).
Nemusí sa teda jednať o veľkú vzorku, keďže cieľom nie je niečo dokazovať, ale získať insight.
Card sorting (triedenie kariet) metóda sa používa pri tvorbe informačnej architektúry, predovšetkým pri designe webových stránok, ktorých použiteľnosť silne závisí na usporiadaní informácií na nej. Obsah na stránke býva často usporiadaný podľa toho, čo dáva zmysel pre (zadávateľskú) firmu a nie na tom, aké sú očakávania užívateľov. Metóda triedenia kariet má za cieľ pomocou usporiadania podobných tém do kategórií vytvoriť organizačnú štruktúru, ktorá čo najlepšie zodpovedá mentálnemu modelu užívateľov. Pri tejto metóde účastníci zoskupujú pojmy (cca 40-80 položiek, väčšinou napísaných na kartičkách), ktoré reprezentujú hlavný obsah stránky do skupín podľa kritérií, ktoré pre nich dávajú zmysel. Potom tieto vytvorené skupiny pomenúvajú. To môže slúžiť ako pomenovanie kategórii hlavnej navigácie stránky. Optimálny počet účastníkov je 15-20. Táto metóda sa využíva hlavne pri webových stránkach s rozsiahlym obsahom (Sherwin, 2018).
Pri A/B testovaní sa vytvárajú dve alebo viaceré verzie obrazoviek alebo funkcionalít (napr. „call to action“8 tlačidiel, nadpisov, textácií, obrázkov) pričom sa publikum náhodne rozdelí na polovicu a každej sa po určitú dobu zobrazuje iný variant s cieľom overiť, ktorá
7 Nielsen Norman Group je americká konzultingová spoločnosť založená Jakobom Nielsenom a Donom Normanom, priekopníkmi v obore UX designu.
8 Výzva k akcii
25
verzia bude úspešnejšia - vyvolá požadovanú vopred stanovenú akciu. Toto testovanie je takpovediac spôsob ako zmerať design, keďže sa jedná o štatisticky podložené dáta (väčšinou konverzná hodnota) (Klein, 2013, s. 164-165). Vhodné je vybrať si len jednu premennú (napr.
text na tlačidle) a vytvoriť varianty tejto premennej. Testovanie viacerých premenných naraz môže priniesť nereprezentatívne výsledky. Víťazný variant sa tak zvyčajne stáva finálnym verziou produktu.
Existuje mnoho ďalších metód testovania, či už konceptu, informačnej architektúry, použiteľnosti, vizuálu atď. Testovanie môže taktiež prebiehať na diaľku alebo osobne, môže byť moderované (výskumník sleduje testovaného užívateľa v reálnom čase, môže zasahovať do procesu) alebo nemoderované. Rozhodnutie o metóde testovania závisí hlavne na cieli, ktorý týmto testovaním chceme dosiahnuť (Čo sa chceme z testovania dozvedieť? Na aké otázky hľadáme odpoveď?), ale aj rozpočte, časových limitáciách alebo testovanej funkcionalite.
26
2 Webový design
Design je komplexný odbor a nejedná sa pri ňom len o výslednú vizuálnu podobu diela.
Tá vyplýva z návrhov množstva iných menej viditeľných parametrov. Webdesign by sa podľa Staníčka dal prirovnať k architektonickému návrhu domu. Ten tiež nestojí len na tom ako vyzerá z ulice, ale hlavne na tom, ako je architektom vymyslený životný priestor, jeho praktické využitie a životný štýl, ktorý prináša svojim obyvateľom (Staníček, 2016, s. 53).
Eccher webdesign definuje z dvoch uhlov. Ako programovanie back-endovej9 funkčnosti webu alebo ako vývoj front-endového10 vzhľadu, ktorý dodá jedincovi alebo spoločnosti, ktorú zastupuje zmysel (Eccher, 2010, s. 12).
V tomto ponímaní je potrebné spomenúť, že z technickej stránky má finálny web 3 vrstvy. Štruktúrna vrstva, ktorá tvorí základ a je vlastne obsahom samotného dokumentu (webu). Je vytvorená pomocou HTML značkovacieho jazyka. Na tento obsah je nasadený štýl (CSS), ktorý sa stará o výzor dokumentu (webu) a je teda prezentačnou vrstvou. Na záver je vrstva správania, ktorá vďaka skriptovacím jazykom vytvára dynamickosť a interakciu (JS, PHP....) na webe (Niederst Robbins, 2012, s. 13).
Zjednodušene je webový design návrh funkčných webov. Na základe požadovaného výkonu môžeme tieto weby rozdeliť do 3 typov:
● Webová prezentácia (firemný web, blog, micro-site...), ktorej cieľom je prezentovať určitý produkt či službu a má ovplyvniť správanie určitej skupiny ľudí.
Dôležitú úlohu hrá obsah, pretože ten je hlavným dôvodom návštevy takéhoto webu.
● E-shop má za cieľ prezentáciu a priamy predaj produktov alebo služieb online.
● Webová aplikácia (sociálne siete, intranety...) je produktom samotným, ktorý rieši problém jej užívateľov a je postavený na princípe interakcií (Řezáč, 2014, s. 14).
Fungujúce weby majú prinášať prínos, či už v podobe požadovanej konverznej akcie11, ktorú vykonal užívateľ (odoslal objednávku, zaregistroval sa...), alebo sprostredkovaním hľadanej informácie (návštevník našiel, čo hľadal a opustil web), alebo v neposlednom rade vyvolaním emócie, získaním pocitu (čo zvyšuje zapamätateľnosť a odporúčanie ostatným) (Řezáč, 2014, s. 15). Weby tak musia byť tvorené s myšlienkou umožnenia týchto efektov.
9 Front-end = aspekty webovej stránky, ktoré sú viditeľné vo webovom prehliadači, zabezpečujú dynamickosť
a interaktívnosť stránky (webové technológie: HTML, CSS, JS)
10 Back-end = aspekty webovej stránky, ktoré nie sú viditeľné vo webovom prehliadači, ale prebiehajú na
webovom serveri, napríklad perzistencia dát (programovacie jazyky: PHP, C#, Ruby, Java...)
11 Užívateľ vykoná požadovanú akciu, ktorá má pre vlastníka webu určitý prínos.
27
2.1 Zásady tvorby webových stránok
Od webových stránok sa očakáva naplnenie určitých potrieb návštevníkov, ktoré sú prirovnávané k Maslowovej pyramíde potrieb v jej analogickom modeli tzv. Maslowovej pyramídy webdesignu, ktorá obdobne hovorí, že kým nie sú naplnené základné stupne pyramídy, nemá zmysel stúpať v pyramíde vyššie (alebo preskakovať jednotlivé stupne).
Takisto to neznamená, že každá webová stránka je schopná naplniť potreby najvyšších stupňov (v tom hrajú úlohu vynaložené náklady a čas) (Řezáč, 2014, str. 158-159).
Mnoho z týchto stupňov sa zhoduje a rozvíja Morvillovu voštinu užívateľského zážitku popísanú vyššie. Táto kapitola sa jej bude ďalej venovať z pohľadu webovej stránky.
Obrázok 7 Maslowova pyramída webdesignu (zdroj: podľa Řezáč, 2014, vlastné spracovanie) Sú to teda určité zásady, ktoré je potrebné dodržiavať pri tvorbe webovej stránky.
Základnou zásadou a prvým stupňom pyramídy je zmysluplnosť. Je to dôvod prečo web vôbec tvoríme. Rieši tento web nejaký problém? Má tento problém dostatok ľudí?
Uspokojuje potreby tejto skupiny ľudí? Ak web neslúži na žiadny účel, z ktorého má niekto nejaký osoh, krásny design je zbytočný.
Na to nadväzuje stupeň vyhľadateľnosti. Ak potenciálni návštevníci (cieľová skupina) nevedia o existencii webu a nechodia na neho, web nebude fungovať. Momentálne sú hlavným zdrojom návštevnosti vyhľadávače a weby, ktoré by im mali byť po technickej a obsahovej stránke prispôsobené (SEO).
Keď sa návštevník na web dostane, očakáva, že mu budú informácie dostupné (dostupnosť). A teda web nemá chyby (chybové stránky). Má rýchlu odozvu - načítava sa a reaguje na akciu rýchlo. Rýchlosť odozvy je subjektívna. Dá sa riešiť napríklad indikátormi pokroku (animovanie ikoniek, postupné načítanie atď.)
28
Ďalším stupňom je prístupnosť. To znamená, že web má čo najmenej prekážok, ktoré by mohli sťažovať dosiahnutie účelu, s ktorým na neho návštevník prišiel. Základnými princípmi prístupností sú: farebný kontrast písma, dobrá čitateľnosť textu, ovládateľnosť webu z klávesnice, použité grafické prvky majúce textovú alternatívu, zmysluplne štruktúrovaný obsah pomocou nadpisov atď. Táto zásada je dôležitá hlavne z dôvodu prístupnosti webu pre nevidomých a hendikepovaných (zároveň pre robotov vyhľadávačov a prístupnosť z mobilných zariadení).
Aby web umožnil návštevníkovi dosiahnuť cieľ, s ktorým na neho prišiel, musí byť použiteľný (použiteľnosť). To znamená, že na webe je ľahké zorientovať sa. Obsah je zrozumiteľný a návodný, ideálne je jeho použitie intuitívne. Tu hrá rolu pochopenie vnímania ľudí a jeho praktická aplikácia pomocou typografie, informačnej architektúry a určenia priorít obsahu.
Stupeň dôveryhodnosti webu je predpoklad pre úspešnú konverziu. K vytvoreniu dôveryhodnosti je potrebné jednoznačne uviesť prevádzkovateľa webu. Podporiť sa dá taktiež vhodnou argumentáciou (uvedenie certifikácií, referencií, číselných údajov, členstiev v asociáciách...) zverejnením recenzií zákazníkov, ale aj grafickým stvárnením a umocňovaním pocitu bezpečnosti najmä pri platení online (pomocou vysvetlenia bezpečnostných dotazov).
Všetky doterajšie stupne stále neznamenali, že dôjde ku konverzii zákazníka.
Presvedčivosť webu znamená určité ovplyvnenie návštevníkov k vyvolaniu požadovanej akcie, či presvedčeniu o relevantnosti danej stránky.
Dôležitý stupeň je radosť z používania. Teda návštevník sa na web rád vracia.
K tomu napomáha gamifikácia12 a využívanie emócií. Emócie napomáhajú zapamätateľnosti. Sú podporované designom, použitým tónom v texte alebo využívaním avatarov.
Vytvorenie väzby medzi užívateľmi a webom je konečným stupňom. Web sa stáva súčasťou života návštevníkov, používajú ho, vracajú sa naň a odporúčajú ho ďalej. Táto väzba je dosiahnutá práve pochopením ľudí, ich potrieb a očakávaní (Řezáč, 2014, str. 157- 177).
Mimo Maslowovej pyramídy webdesignu je neodmysliteľnou zásadou tvorby moderných webových stránok responzivita. V súčasnosti prichádza užívateľ na webové stránky z rôznych zariadení od mobilov cez tablety po desktopy. Každý s diametrálne
12 Aplikácia herných prvkov a prostriedkov v nehernom kontexte.
29
odlišnou veľkosťou displeja, pričom je potrebné zabezpečiť hladký užívateľský zážitok a plánovaný vzhľad bez ohľadu na zariadenie. Preto je potrebné vytvárať tzv. responzívne weby, teda také, ktoré reagujú rýchlo a jednoznačne (responzívne) na zmenu prostredia.
Táto zmena obvykle pozostáva z prispôsobenia rozvrhnutia (layoutu) stránky, či prispôsobenia mediálneho obsahu zariadeniu, na ktorom je stránka prehliadaná. Táto zmena sa nekoná len na front-ende, či back-ende, je nutné počítať s výzorom na iných zariadeniach už pri designe webových stránok (Michálek, 2017, s. 29-31).
Pri webovom designe je potrebné myslieť aj na základné princípy designu, ktoré pomáhajú pri použiteľnosti, ale aj prístupnosti a následne dôveryhodnosti webu. Medzi nich patria:
Princíp zvýraznenia napomáha k vytvoreniu vizuálnej hierarchie. Ide o zdôraznenie dôležitého alebo významného obsahu. Najprv je však potrebné analyzovať obsah, ktorý má byť použitý, priradiť mu určitú dôležitosť a hierarchiu a túto hierarchiu vyjadriť designom.
Princíp kontrastu slúži na odlíšenie dvoch alebo viacerých prvkov. Na dosiahnutie kontrastu sa používa hlavne farba či veľkosť a typ písma. Napomáha k upútaniu pozornosti na dôležité prvky, či výzvy k akcii.
Vyváženosť je princíp, ktorý zahrňuje myšlienku toho ako rozmiestniť prvky v designe v súvislosti celkovým vizuálnym rozmiestnením a rozdelením dôležitosti na stránke. Vyváženosť vplýva na vizuálnu stabilitu a „váhu“ designu a obvykle sa k nej dá pristupovať z pohľadu symetrickosti (zrkadlenie po osy a rovnaká vizuálna váha) a asymetrickosti.
Ďalší princíp zarovnania pojednáva o usporiadaní prvkov tak, že vytvárajú určité linky, či ohraničenia, ktoré tak zjednocujú prvky a vytvárajú jednotnosť na stránke. Obvykle sa takéto usporiadanie nazýva mriežka (grid).
Opakovanie je potrebné na vytvorenie dojmu jednotnosti a súdržnosti, kedy sa určité prvky v designe opakujú na viacerých miestach. Väčšinou sa dosahuje pomocou farieb, tvarov, fontov, obrázkov atď. Opakovanie vytvára predvídateľnosť a uľahčuje užívateľovi orientáciu na stránke.
Posledný je princíp toku. Jedná sa o cestu, ktorou sa vydáva oko užívateľa po stránke.
Je výsledkom usporiadania prvkov voči sebe, ale je potrebné brať do úvahy určitú konvenciu.
V krajinách, kde sa číta zľava doprava je prirodzeným tokom pre oko človeka dívať sa zľava doprava, či zhora nadol. Cieľom je tak zabezpečiť prirodzený a hladký tok pri prechádzaní stránky (McNeil, 2011, s. 11-33).
30
2.2 Obsah webových stránok
Ako bolo spomínané v prvej kapitole, dôležitými aspektmi užívateľského zážitku je užitočnosť a použiteľnosť. Pri webových stránkach tieto dva aspekty (ale aj iné) ovplyvňuje hlavne obsah, ktorý webová stránka svojim návštevníkom ponúka. Ak tam užívatelia nenájdu relevantný obsah, nemôžeme povedať, že stránka im priniesla úžitok. Aj keď stránka ponúka relevantný a užitočný obsah, ale je ťažké sa v ňom zorientovať, nebola pre užívateľa veľmi použiteľná.
Obsahom webovej stránky je myslené všetko, čo sprostredkuje zmysluplné informácie pre človeka. Vytvárať vhodný, užitočný a relevantný obsah nie je tak jednoduché. Existuje niekoľko základných princípov ako vytvárať efektívny obsah:
● Obsah by mal byť vhodný pre firmu, užívateľa a kontext, v ktorom k nemu užívateľ pristupuje, teda vhodný v tom ako je doručený, aký je jeho štýl, štruktúra a hlavne podstata. Pre užívateľa je vhodný, keď mu ponúka presne to, čo potrebuje, kedy to potrebuje a v správnom formáte. Jednoducho mu napomáha dosiahnuť jeho cieľ. Pre firmu vtedy, keď tým dosiahne svoj cieľ udržateľným spôsobom.
● Dobrý obsah je užitočný. Užitočný je vtedy ak dosiahol zámer, ktorý mal. Preto je potrebné definovať jasný a špecifický účel pre každý kus obsahu, ktorý sa má publikovať.
● Obsah má byť zameraný na užívateľa, teda sústrediť sa na jeho kognitívny rámec.
Zjednodušene nepožívať žargón, vyjadrenia, interné pomenovania a frázy, ktoré síce dávajú zmysel interne, ale nie navonok.
● Dobrý obsah je jasný, využíva jazyk, ktorému užívatelia rozumejú a je organizovaný tak, že sa s ním jednoducho narába.
● Dobrý obsah je konzistentný. Konzistentnosť jazyka (ako hlavný medzičlánok interakcie so svetom) znižuje kognitívnu záťaž užívateľa a tak pomáha porozumeniu.
● Dobrý obsah je stručný. Len preto, že existuje “nekonečný priestor” na publikovanie obsahu online, neznamená to, že je nutné ho využiť. Rozsiahly obsah väčšinou vyúsťuje v nekvalitný obsah a sťažuje nájdenie potrebnej informácie.
● Dobrý obsah je udržiavaný. Obsah musí byť aktualizovaný ak sa informácie zmenia, alebo vyradený ak už nie je viac relevantný. (Kissane, 2011, s.4-13)
Pri tom je potrebné myslieť na to, že návštevníci nečítajú ale “skenujú” webovú stránku. Sú pripravení odísť ak rýchlo nenájdu, čo hľadajú a sú ochotní venovať svoju pozornosť len veľmi krátko. K tomu môže pomôcť pár tipov. Napríklad obrátená pyramída
31
je pojem používaný pri tvorbe novinových článkov, podľa ktorého by štruktúra obsahu mala ísť od najdôležitejších základných informácii na začiatku až postupne k menej dôležitým a špecifickým. Ďalším tipom je “ukazovať, nie opisovať”, namiesto siahodlhých opisov je vhodnejšie ukázať dôkaz toho, čo sa snažíme vyjadriť, teda využiť štatistiky, prípadovky, testimoniály atď. (Kissane, 2001, s. 19). Pri skenovaní stránky pomáhajú aj vyššie spomínané prvky vizuálneho designu. Zvýraznenie, kontrast a využívanie zoznamov, nadpisov, odsekov.
O spomínanú použiteľnosť webovej stránky sa stará hlavne informačná architektúra.
Informačná architektúra (IA) je spôsob, akým je obsah na stránke organizovaný a štruktúrovaný v snahe o logickosť a užívateľskú prívetivosť. Jedná sa čisto o štruktúru webu, ktorú je možné zobraziť pomocou mapy stránky (sitemap) alebo vývojového diagramu. Vytvára navigačné štruktúry a klasifikácie obsahu. Jej hlavným cieľom je uľahčovať navigáciu návštevníkov na stránke.
Prvým krokom pri navrhovaní informačnej architektúry je zoskupenie podobného obsahu s cieľom vytvorenia logických kategórií. Druhým krokom je vytvorenie mapy stránky, čo je vlastne vizuálna reprezentácia jednotlivých kategórií obsahu, ktorá stanovuje hierarchiu použitého obsahu. Tretím krokom je načrtnutie navigačnej štruktúry. Teda ako sa užívateľ dostane z bodu A do bodu B na webstránke. Jedná sa o všetky možné cesty, ktorými sa užívateľ dostane na jednotlivé stránky webu. Štvrtým krokom je finálne upravenie označenia obsahu ako by sa jednotlivé kategórie mali logicky nazývať. Posledným krokom je testovanie na užívateľoch pre zabezpečenie užívateľskej prívetivosti, logickosti a jednoduchej navigácie (Klancar, 2020).
32
3 Personálny marketing
Nakoľko je cieľom práce navrhnúť vo svojej podstate náborové alebo inak povedané kariérne webové stránky, táto kapitola stručne priblíži oblasť personálneho marketingu, ktorý sa zaoberá práve náborom zamestnancov.
Podľa Koubeka je personálny marketing použitie marketingového prístupu v personálnej oblasti. Jedná sa o úsilie sformovať a udržať pracovnú silu organizácie vďaka vytvoreniu dobrej zamestnávateľskej povesti a výskumu trhu práce (Koubek, 2015, s. 160).
Personálny marketing využíva práve funkcie a nástroje marketingu, ktoré premieta do oblasti personálnej politiky. Dokáže poskytnúť cenné informácie pre personalistov a manažment, nakoľko komunikuje priamo s cieľovou skupinou, teda potenciálnymi zamestnancami (Appel Group, 2020).
Keďže sa jedná o formu marketingu jeho hlavným cieľom je súčasné uspokojovanie potrieb podniku a identifikovaných potrieb potenciálnych alebo existujúcich zamestnancov ich prilákaním (alebo udržaním) prostredníctvom súboru opatrení. Hlavným účelom týchto opatrení je zvýšenie atraktivity firmy v očiach kandidátov o zamestnanie alebo u už existujúcich zamestnancov (Gladka, Fedorova, 2019, s. 147).
Vzhľadom na ciele tejto práce sa v tejto kapitole bude práca zameriavať iba na webové stránky ako jeden z nástrojov personálneho marketingu. Iné náborové aktivity a nástroje nebudú pre účely tejto práce kriticky hodnotené.
3.1 Náborové webové stránky
Jeden z najväčších portálov na vyhľadávanie pracovných miest Jobs.cz už skoro pred desiatimi rokmi uvádzal, že 80% internetovej populácie vyhľadáva pracovné pozície pomocou internetu a približne polovica z toho používa pri hľadaní práce práve firemné kariérne stránky ako hlavný zdroj informácií o firme (Kocourek, 2012).
Skoro o 10 rokov neskôr je toto číslo pravdepodobne ešte vyššie.
Náborovou stránkou (alebo kariérnou webovou stránkou) rozumieme samostatnú webovú stránku firmy, ktorej obsah cieli na uchádzačov o zamestnanie. Je primárne zameraná na prezentovanie firmy ako perspektívneho zamestnávateľa a poskytnutie relevantných informácií o pracovných ponukách v spoločnosti. V tomto ponímaní sa jedná o samostatnú stránku, ktorá je typicky oddelená od hlavnej webovej firemnej stránky (webovej prezentácie spoločnosti).
33
Hlavnou výhodou kariérnych stránok je, že sú dôležitým miestom pre oslovenie uchádzačov, nadviazanie a budovanie vzťahu medzi nimi a firmou. Nakoľko čím viac času na nich uchádzači strávia, tým väčší má firma priestor na budovanie svojej značky a atraktivity. Z technického pohľadu kariérne stránky ponúkajú výhodu aj v tom, že umožňujú využitie metrík na monitoring efektivity a návštevnosti stránky a využitie týchto dát na svoju ďalšiu optimalizáciu. Taktiež prinášajú výhodu v minimalizácii administratívnej a finančnej záťaže, ktorá je spojená s procesom náboru. Umožňujú zacielenie na absolventov, skúsených seniorov alebo univerzálne oslovenie všetkých skupín trhu práce, záleží na požiadavkách a cieľoch danej firmy (Kocourek, 2012).
Kariérne stránky by mali obsahovať:
● Aktuálnu ponuku voľných pracovných miest
● Informácie o priebehu výberu zamestnancov
● Informácie o tom ako sa firma stará o zamestnancov - ich vzdelanie, kariérny rozvoj, benefity
● Predstavenie firmy a firemnej kultúry a aktualít vo firme
● Prípadne novinky, CSR aktivity, ocenenia...
Trendy kariérnych stránok:
● Tvoria sa samostatné kariérne stránky a portály
● Rozvíja sa firemná značka ako vnímaný benefit pre uchádzača
● Kľúčový je zrozumiteľný, jednoznačný a autentický obsah
● Kladie sa dôraz na vizualizáciu v podobe propagačných fotiek alebo videí reálnych zamestnancov
● Podpora vzbudenia emócií a pocitov (testimoniály, fotografie, príbehy...)
● Opúšťa sa od zložitých a dlhých textov
● Jazyk a tón v texte napovedá o firemnej kultúre
● Moderným prvkom sú dynamické prezentácie (animácie, testy, hry...)
● Kontaktné formuláre sú súčasťou webovej stránky - jednoduchý aplikačný proces
● Prepojenie webu so sociálnymi sieťami firmy
● Napojenie na personálny software
● Využitie zaujímavého obsahu v podobe blog príspevkov
● Personalizovaná komunikácia s uchádzačmi
● Optimalizované stránky pre vyhľadávače (SEO) (Kocourek, 2012; Klečka, 2017;
Joska, 2019)
34
Na záver je nutné spomenúť aj samotný grafický design takýchto stránok. Tieto stránky majú slúžiť na vytvorenie prvého dojmu o firme v očiach uchádzačov, na základe ktorého si o nej formulujú určité domnienky a očakávania. Zastaralý dizajn a neaktuálne informácie nevyvolávajú v uchádzačoch práve pocit modernosti, pokroku a flexibility zamestnávateľa.
35
4 Návrh webovej stránky
Teoretické poznatky získané v predošlých kapitolách budú využité pri návrhu webovej stránky. V tejto kapitole budú údaje získané z výskumu analyzované a na základe nich dôjde pomocou skicovania a vytvorenia wireframov k návrhu prototypu. Prototyp bude testovaný na užívateľoch. V celom procese bude kontaktovaný aj zadávateľ.
4.1 Výskum
Dôležitou súčasťou návrhu webovej stránky je výskum, ktorý slúži na lepšie pochopenie potrieb a požiadaviek zadávateľa ako aj užívateľa. V tejto časti je analyzovaná aj konkurencia na porovnanie jej komunikácie a prezentácie na svojich webových stránkach voči ďalej definovanej cieľovej skupine.
4.1.1 Analýza zadávateľa
Webové stránky sú navrhovaná pre Skupinu Spoločností Bukóza Holding (ďalej SSBH alebo Bukóza) - drevospracujúci podnik s 65 ročnou históriou, ktorý sa zaoberá spracovaním drevnej hmoty chemickým spôsobom. SSBH je významným zamestnávateľom vo východoslovenskom regióne s takmer 1000 zamestnancami a ročným obratom 90 mil.
EUR. Produktové portfólio tejto spoločnosti tvoria papierenské buničiny, prášková celulóza a v blízkej budúcnosti obalový papier. SSBH je výlučný exportér svojich produktov hlavne do krajín Európskej únie. Skupinu Spoločností Bukóza Holding tvorí niekoľko spoločností:
Bukóza Holding, a.s., Bukocel, a.s., Bukóza Export-Import, a.s., Bukóza Progres, s.r.o., Greencel s.r.o., BHG Logistika spol. s r.o.. Je to výrobný podnik obchodujúci na B2B trhu (Skupina Spoločností Bukóza Holding, 2020).
Podnik pôsobí v špecifickom priemyselnom odvetví, ktoré si vyžaduje vzdelanie (o. i.) hlavne v oblasti chémie, ale aj elektrotechniky a strojárstva. To sú odbory, v ktorých má podnik dlhodobo problém nájsť kvalifikovaných zamestnancov. Na to nadväzuje aj vysoký priemerný vek zamestnancov na pracovných pozíciách s požadovanou, vyššie spomínanou, kvalifikáciou.
Nedostatok kvalifikovaných ľudských zdrojov v regióne a starnúca zamestnanecká základňa vyústila v posledných rokoch k spusteniu náborových aktivít v snahe prilákať mladšiu generáciu kvalifikovaných (potenciálnych) zamestnancov.
36
Tieto náborové aktivity firmy sa sústreďujú na spoluprácu so školami (základné, stredné odborné školy/gymnáziá, vysoké školy), študentami a absolventmi. Cieľom je vytvárať vhodné podmienky pre zvýšenie záujmu o štúdium chemických (prípadne elektrotechnických a strojárskych) odborov vzdelania, podporovať školy vo výučbe týchto odborov a v dlhšom horizonte tak vychovávať potenciálnych budúcich zamestnancov spoločnosti.
V ďalšom texte sa pod náborovými aktivitami myslia len aktivity spojené so školami, študentami a absolventmi.
Spoločnosť sídli v malom meste na východnom Slovensku. Najbližšie vysoké školy sú vzdialené približne 50-60 km a technické vysoké školy (so vzdelávacími odbormi s požadovaným chemickým zameraním) sa nachádzajú najmä na západnom Slovensku. Tieto faktory, taktiež prispievajú k zložitejšej spolupráci so študentami a prilákaním mladších zamestnancov.
Medzi súčasné náborové aktivity spoločnosti patrí:
● Účasť na veľtrhoch pracovných príležitostí v Košiciach a Bratislave
● Možnosť písania diplomovej práce v spolupráci s podnikom
● Odborný výcvik žiakov stredných odborných škôl
● Letná prázdninová brigáda
● Odborná prax študentov vysokých škôl
● Exkurzia vo fabrike
● Súťaže
● Program podpory študijného odboru: Chemik - operátor
● Podpora školských chemických krúžkov
● Podpora triedy s rozšíreným vyučovaním chémie
● Trainee program
● Ponuka juniorných pozícií pre absolventov
● Podnikové štipendiá
Stakeholderom za zadávateľa je zamestnanec personálneho oddelenia, ktorý má na starosti spoluprácu so školami, študentmi a absolventmi. Vzhľadom na to, že na tomto projekte pracuje už niekoľko rokov má cenný prehľad o cieľovej skupine, s ktorou je v priamom kontakte ako aj prehľad o konkurenčných aktivitách. Analýza zadávateľa tak prebiehala pomocou hĺbkového rozhovoru so stakeholderom, z ktorého vzišli vyššie
37
spomínané dôvody potreby návrhu webovej stránky, nasledovné požiadavky na navrhovaný web ako aj ciele, ktoré má dosiahnuť.
Spoločnosť má záujem o vytvorenie samostatnej webovej stránky, ktorá oddelí obsah zameraný na náborovú činnosť určenú školám, študentom a absolventom od obsahu nachádzajúceho sa na súčasnej firemnej stránke spoločnosti.
Požiadavky na webovú stránku zo strany zadávateľa:
● vytvoriť samostatnú webovú stránku, na ktorú budú odkazovať akékoľvek aktivity spojené so školami, študentami a absolventmi
● vytvoriť priestor informačne a vizuálne atraktívny pre mladšiu vekovú kategóriu
● zjednodušiť tým súčasnú štruktúru webovej stránky spoločnosti
● zadávateľ necháva voľný priestor na design stránky, ktorý nemusí korešpondovať s výzorom hlavnej (súčasnej) webovej stránky
Ako bolo spomínané v teoretickej časti práce, pre vytvorenie užívateľsky prívetivého a informačne hodnotného webu, ktorý prinesie určitú hodnotu nie len užívateľom, ale aj jeho vlastníkom je potrebné stanoviť si, aké ciele má webová stránka naplniť. Spoločnosť potrebuje tieto webové stránky z určitých dôvodov, teda stanovuje ciele, ktoré má web naplniť (tzv. Business goals). Na druhej strane s určitým cieľom (cieľmi) prichádza na webovú stránku aj samotný užívateľ (User goals). Pre úspešný web by malo dôjsť k vzájomnému naplneniu cieľov oboch strán.
Tabuľka 1 Ciele zadávateľa (zdroj: vlastné spracovanie)
Ciele webovej stránky z pohľadu spoločnosti (Business goals):
● zatraktívniť spoločnosť SSBH ako perspektívneho zamestnávateľa pre mladých ľudí
● zvýšiť záujem študentov a absolventov o zamestnanie v SSBH
● zvýšiť záujem študentov najmä o štúdium chémie ( a elektrotechniky a strojárstva)
● zapojiť študentov do aktivít ponúkaných spoločnosťou
Aj keď je cieľom práce navrhnúť novú webovú stránku, zadávateľ už má na svojej súčasnej webovej stránke obsah určený pre študentov, školy a absolventov. Na zhodnotenie informačnej architektúry a informačnej hodnoty súčasného obsahu a designu je vhodné vykonať audit súčasnej podoby webovej stránky. Zhodnotiť tak, ktorý obsah je vhodný použiť
