Kto sme
Všetky články
Vyberte sekciu
Vyberte sekciu
Programovanie

Testovanie efektívnosti konceptov pre webdizajn stránok

UXUX11/4/202411/4/2024

Presvedčiť klienta alebo zúčastnenú stranu, aby schválila koncept pre webdizajn stránky môže byť náročné. Testovanie to však môže veľmi výrazne uľahčiť a tiež vás to ubezpečí, že ste zvolili správne riešenie.

Väčšina z nás súhlasí s myšlienkou vykonávania testovania pre webové stránky alebo ich prototypy. Nie vždy je však na to príležitosť, ale väčšina dá za pravdu tomu, že je to dobrý nápad.

Pokiaľ však ide o dizajnovú koncepciu, názory sa líšia. Niektorí weboví dizajnéri vám povedia, že takýto prístup podceňuje ich úlohu. Zdá sa, že je to podporované aj slávnou epizódou „Štyridsať odtieňov modrej“, v ktorej Google testoval, ktorá zo štyridsiatich odtieňov modrej sa použije na farbu hypertextového odkazu.

Aricle titled: Google's Marissa Mayers Assaults Designers With Data

Google podceňuje úlohu dizajnéra tým, že kladie obrovský dôraz na testovanie. 


S touto pozíciou webových dizajnérov môžeme súcitiť, pretože testovanie nám určite neprezradí všetko. Napríklad nemôže prísť so správnym riešením, ak budeme posudzovať iba návrh, ktorý už existuje. Ani cestou prehnaného testovania, ktoré Google demonštruje a nie je vhodný pre morálku dizajnérov pracujúcich na projekte a ani pre väčšinu spoločností.

V tomto príspevku chceme preskúmať niektoré výhody, ktoré nám testovacie dizajnérske koncepty môžu ako dizajnérom poskytnúť, a tiež preukázať to, že to je možné realizovať pomerne lacno a bez toho, aby sme zdržiavali celý projekt.

Začnime otázkou, prečo by sa mal webový dizajnér zaujímať o testovanie svojich koncepcií webdizajnu.


Prečo by ste mali využívať testovanie konceptov pre webdizajn?

Každý webový dizajnér má príbehy o tom, že sa chytil do začarovaného kruhu neustálych korektúr. Nekonečné dolaďovanie farieb a prispôsobovanie rozloženia v nádeji, že klient bude na záver nadmieru spokojný.

Nie vždy to je tak, avšak pravdou je, že každý projekt je hazardom. Schváli klient váš návrh ihneď alebo váš názov webdizajnového konceptu sa bude na konci volať „Finálna-verzia-21-návrh_final_final“? A to je problém. Vy jednoducho neviete, ako hladko to celé pôjde, čo mimoriadne komplikuje plánovanie a rozvrh rozpočtu na projekt.


Vďaka testovaniu je proces navrhovania predvídateľnejší

Ľudia majú tendenciu považovať testovanie pre webový dizajn za luxus, ktorý si nemôžu dovoliť. Považujú to za príliš časovo náročné a drahé. Pravdou však je, že takýto postup vnáša do projektu potrebnú predvídateľnosť, ktorá v mnohých prípadoch môže ušetriť čas a aj peniaze.

Áno, ak všetko pôjde hladko s vytváraním konceptu web dizajnu, testovanie dizajnu môže byť zbytočné a môže veci spomaliť a zároveň zvýšiť náklady. Ale to sa stáva málokedy. Dizajnovanie zvyčajne prechádza najmenej niekoľkými cyklami tvorby a občas sa stáva, že sa daný koncept musí úplne zahodiť.

Zriedka je tomu tak preto, že by bol dizajn hrozný. Namiesto toho je to preto, že zainteresované strany nie sú spokojné.

Naopak, testovanie je nosným pilierom pre rozhodovanie o tom, či je webový dizajn správny. Nie je to založené na osobných preferenciách. Niektoré rýchle testovania by mohli dizajn potvrdiť bez potreby ďalších úprav alebo v horšom prípade, ak by dizajnér vykonal svoju prácu, by viedli k relatívne malým zmenám.

Vo finále je to rýchlejšie a lacnejšie ako nekonečná diskusia o tom, aký smer zvoliť. Dokonca aj v prípade, že by to tak úplne nebolo, je to vo finále omnoho predvídateľnejšie, čo zlepšuje celkové plánovanie projektu.

Testovanie má aj ďalšiu výhodu. Mení to celkový pohľad na vec, na základe ktorého posudzujeme webový dizajn.


Testovanie podporuje správne zameranie sa a predchádza konfliktom

Webdizajn má svoju úlohu. Vo väčšine prípadov sa musí spojiť s používateľom na emocionálnej rovine a zároveň mu musí umožniť využívať webovú stránku čo najefektívnejšie. Bohužiaľ, väčšina webdizajnu sa na tomto základe neposudzuje.

Namiesto toho často hodnotíme návrh podľa jednoduchých kritérií, či sa to klientovi páči alebo nie. Práve tento konflikt medzi úlohou webdizajnu a tým, ako sa skutočne hodnotí, spôsobuje nezhody.

Vykonaním testov na webovom dizajne opätovne privediete pozornosť zainteresovaných strán na to, na čom skutočne záleží, pretože test založíte práve na tých najdôležitejších kritériách.

To má tiež ďalšiu výhodu. Pomáha predchádzať mnohým nezhodám ohľadom smerovania návrhu. To platí najmä vtedy, keď sa v samotnom procese akým je tvorba webdizajnu angažuje väčšie množstvo ľudí.

Nakoľko je webový dizajn subjektívny, tak čím viac ľudí sa na neho pozrie, tým viac rôznorodých názorov vznikne. Štandardne sa to rieši kompromisom, kedy sa vytvorí webdizajn, ktorý nepoteší nikoho a častokrát sa ani nehodí na daný účel.

Alternatívou k tomu je testovanie. Vedie to k menším konfliktom medzi zainteresovanými stranami a tiež sa zabezpečuje integrita webdizajnu, čo v konečnom dôsledku vedie k lepšiemu produktu.


Testovanie zlepšuje výsledky

Ak sa využije testovanie, ktoré pomôže sa zainteresovaných stranám zamerať na tie správne kritéria hodnotenia, tak vo finále vznikne zaručene omnoho lepší webdizajn, s omnoho kvalitnejším UX webstránky.

Existuje však ďalší faktor, ktorý zaisťuje, že testovanie prinesie lepší webový dizajn; to je skutočnosť, že my, ako webdizajnéri, nie sme neomylní.

Niekedy nesprávne odhadneme tón webdizajnu alebo mentálne rozpoloženie cieľovej skupiny používateľov. Niekedy sa nám nepodarí si uvedomiť, ako obrázok zabraňuje používateľovi vykonať určitú výzvu k akcii alebo či nie je písmo pre staršie publikum príliš malé. Testovanie nám pomáha včas identifikovať tieto problémy ešte v čase, kedy sa dajú veľmi ľahko opraviť. Aktualizácia wireframu či prototypu vo Figme je oveľa jednoduchšia ako úpravy na už fungujúcich webových stránkach.

Dúfame, že teraz už vidíte, že testovanie webdizajnu je dobrý nápad pre všetky zúčastnené strany. Tu však nastáva ďalšia otázka - ako vykonáme testovanie webdizajnu?


Ako implementovať testovanie webdizajnu

Predtým, ako budete môcť vyskúšať ako dobre funguje dizajnérsky koncept, musíte si najskôr ujasniť, čo chcete testovať. Predtým sme si vraveli, že webdizajn mal dve úlohy. Musí sa emocionálne spojiť s používateľmi a umožňuje pre nich čo najefektívnejšie používanie webstránky.

Z tohto dôvodu chceme otestovať dve veci:

  • Značku a tón webdizajnu, čo určuje, či sa webdizajn emocionálne spája s používateľom.
  • Použiteľnosť a vizuálnu hierarchiu, ktorá umožňuje ľuďom efektívnejšie používať web.


Je tiež dôležité poznamenať, že kvôli tomuto článku predpokladáme, že máme iba statický model návrhu bez akejkoľvek interaktivity.

Začnime teda tým, ako testujeme značku a tón.


Testing značky a tónu

Predtým, ako je niekto ochotný interagovať s vašou webovou stránkou, musí jej dôverovať. Používatelia musia mať prvý pozitívny dojem.

V štúdii publikovanej v časopise Journal of Behavior and Information Technology zistili, že mozog robí rozhodnutia už po 50 milisekundách prezerania webovej stránky. Tieto rozhodnutia majú navyše trvalý dopad.

Article Titled: Attention Web Designers, you have 50 milliseconds to make a good first impression

Podľa štúdie v časopise Journal of Behavior and Information Technology, máte na prvý dojem 50 milisekúnd.


Za tento časový úsek používateľ posudzuje web výlučne na základe estetiky, a preto musíme zabezpečiť, aby estetika komunikovala správne veci.

Máme tri spôsoby, ako to môžeme otestovať, ale začnime s naším osobným favoritom.


Sémantický diferenciálny prieskum

Sémantický diferenciálny prieskum je komplikovaným názvom pre jednoduchý koncept. Predtým, ako začnete s návrhom webového dizajnu, najskôr sa dohodnite na zozname kľúčových slov, ktoré sa vďaka návrhu budú signalizovať koncovému používateľovi. Môžu to byť výrazy ako dôveryhodný, zábavný alebo prístupný.

Po vytvorení webdizajnu môžete otestovať, či komunikuje tieto dojmy používateľovi, a to spustením sémantického diferenciálneho prieskumu.

Jednoducho ukážte používateľovi webdizajn a požiadajte ho, aby návrh vyhodnotil pre každé z vašich kľúčových slov.

Example Survey taken from Smashing Magazine’s Membership landing page

Môžete použiť jednoduchý prieskum, aby ste pochopili, či dizajn vysiela správnu správu.


Skvelé je, že ak je návrh v súlade so všetkými stanovenými slovami, nielen že viete, že odvádza svoju prácu, ale tiež je pre zainteresované strany ťažké návrh odmietnuť, iba preto, že by sa im nepáčil niektorý z jeho aspektov.

Túto metódu môžete použiť na zistenie, ktorý z viacerých vašich návrhov pristupuje k danej problematike najúčinnejšie. Existuje však oveľa jednoduchší test, ktorý môžete tiež využiť, ak máte viac ako jednu koncepciu návrhu.


Preferenčné testy

Preferenčným testom jednoducho ukážete používateľom niekoľko koncepcií návrhu a požiadate ich, aby vybrali, ktorý prístup uprednostňujú.

Avšak namiesto toho, aby ste iba vyzvali používateľov, aby vybrali, ktorý webdizajn sa im páči, ich najviac požiadajte, aby si vybrali dizajn na základe vašich kľúčových slov. Môžete požiadať používateľov, aby si vybrali, ktorý dizajn sa podľa nich najlepšie hodí ku kľúčovým slovám, ktoré ste vybrali.

Rovnaký princíp porovnania môžete uplatniť tiež na svoju konkurenciu.


Konkurenčné testovanie

Môžete spustiť rovnaký typ preferenčného testu, ako sme uvádzali vyššie, pričom porovnávate svoju koncepciu návrhu s webmi konkurencie. To vám pomôže pochopiť, či váš návrh dokáže v porovnaní s konkurenciou lepšie komunikovať požadované kľúčové slová.

Example competitor preference test

Pomocou testu preferencií môžete porovnávať váš návrh s konkurenciou.


Výhodou oboch typov preferenčného testovania je, že odrádza zainteresované strany od toho, aby k navrhovaniu využívali prístup „zo všetkého niečo“. Inými slovami, povzbudzuje ich, aby porovnávali webové dizajny ako celok, namiesto toho, aby vyberali rôzne dizajnové prvky od konkurencie alebo rôznych verzií, a vo finále ich skombinovali dohromady ako Frankensteina.

Kombináciou sémantických diferenciálnych prieskumov a testovania preferencií môžete získať jasný obraz o tom, či estetika dizajnu komunikuje správny dojem.

Stále však musíme zabezpečiť, aby to bolo použiteľné a aby ľudia mohli nájsť informácie alebo funkcie, ktoré potrebujú.


Testovanie použiteľnosť a vizuálnej hierarchie

Webové stránky môžu vyzerať skvelo a navodiť u používateľa správny dojem, ale ak sa v nich používateľ ťažko orientuje, stále zlyhávajú vo vykonávaní svojej úlohy.

Ak už je tvorba webstránky u konca, testovanie použiteľnosti je jednoduché pomocou A/B testovania (kvantitatívneho) a testovania použiteľnosti (kvalitatívneho).

Ak však máte k dispozícii iba statickú maketu vzhľadu, t.j. front-end, môže sa zdať, že sa to testuje ťažšie. Tento dojem je našťastie nesprávny. V počiatočnej fáze to navyše stojí za to vyskúšať, pretože veci sa dajú napraviť oveľa ľahšie ešte pred tým, ako prebehlo samotné programovanie webstránky.

Máme dva testy, ktoré môžeme urobiť, aby sme zistili použiteľnosť. Prvý sa zameriava na navigáciu a druhý na vizuálnu hierarchiu.


Test prvého kliknutia

Štúdia použiteľnosti, ktorú vypracovali Bob Bailey a Cari Wolfson, preukázala dôležitosť zabezpečiť to, aby prvá voľba používateľa pri navigácií na vašom webe, bola skutočne správnou voľbou. Dokázali, že ak prvý klik používateľa bol na správne miesto, mali až 87% šancu na dokončenie toho, čo začali; ak ich však prvý klik nejakým spôsobom rozptýlil, táto šanca klesla iba na 46%.

Našťastie môžeme otestovať, či prvé kliknutia používateľov budú správne pomocou imaginatívne pomenovaného „testu prvého kliknutia“.

Prvým kliknutím dostanú testeri úlohu (napr. „Kde by ste klikli, aby ste kontaktovali vlastníkov webových stránok?“) A potom sa im zobrazí koncepcia návrhu.

Používateľ potom klikne na príslušné miesto v koncepte, ktoré považuje za správne, a výsledky sa zaznamenajú. Je to až takto veľmi jednoduché.

Example first-click test

Testy prvého kliknutia vám pomôžu pochopiť, či je vaša navigácia prehľadná.


Výhodou spustenia testu prvého kliknutia spočíva pre webových dizajnérov v tom, že môžu vyriešiť nesúlady a neprehľadnosť v hierarchickej štruktúre sledovaním toho, či používatelia rozumejú označeniu a celkovej štruktúre webu.

Použiteľnosť však nie je iba o klikaní. Je tiež nevyhnutné, aby používatelia našli dôležitý obsah a výzvy na akciu. Aby ste to mohli otestovať, potrebujete 5-sekundový test.


5-sekundový test

Zdá sa, že výskum naznačuje, že priemerne máte asi 8 sekúnd na to, aby ste upútali pozornosť používateľov, a že mnohí opustia webovú stránku už po 10 až 20 sekundách. To znamená, že naše weby musia poskytovať informácie, ktoré chceme, aby používatelia videli čo najzrejmejším možným spôsobom. Inak povedané - musíme rozlišovať medzi najdôležitejšími a menej dôležitými informáciami.

Testovanie tohto druhu vizuálnej hierarchie je možné dosiahnuť pomocou 5-sekundového testu.


UsabilityHub popisuje päťsekundový test takto:

„Päťsekundový test prebieha tak, že sa účastníkovi zobrazí obrázok iba na päť sekúnd, potom účastník poskytne odpovede na otázky založené na jeho pamäti a dojme z dizajnu.“

Je dôležité poznamenať nielen to, či si používatelia pamätali kritické prvky obrazovky, ktoré videli, ale aj to, ako rýchlo si na tieto prvky spomenuli. Ak používatelia spomenú ako prvé menej dôležité prvky, mohlo by to naznačovať, že majú príliš veľkú dôležitosť.

Skvelé na 5-sekundovom teste je, že môže ukľudniť obavy klientov z toho, že používateľ môže prehliadnuť určitý dôležitý prvok na ich webe.

Ako vidíte, testovanie môže pomôcť vylepšiť váš webový dizajn a zároveň znížiť nástrahy pri presadzovaní dizajnových konceptov. Môže sa však stať, že máte obavy z praktickej implementácie týchto testov. Nemusíte sa obávať. Je to omnoho priamočiarejšie, ako si myslíte.


Koho a ako testovať?

Dobrou správou je, že existujú skvelé nástroje, ktoré vám pomôžu spustiť testy, ktoré sme načrtli v tomto príspevku. UsabilityHub v skutočnosti ponúka všetkých päť testov, ktoré sme si predstavili, plus ďalšie.

Usability Hub Homepage

Usability Hub nám umožňuje vykonávať všetky testy, ktoré potrebujem na posúdenie koncepcie návrhu.


Jednoducho vytvoríte test a potom budete s používateľmi zdieľať webovú adresu, ktorú vám dajú. Nájsť týchto používateľov môže byť samozrejme náročné, takže poďme sa ešte pobaviť aj o tom.

Pokiaľ ide o testovanie použiteľnosti, nepotrebujeme veľa používateľov. Skupina Nielsen Norman navrhuje, aby ste testovali iba päť ľudí, pretože potom vidíte klesajúcu návratnosť.

Graph showing the diminishing returns from adding more people to usability testing

Asi po piatich používateľoch získate z testovania použiteľnosti klesajúcu návratnosť.


Týchto používateľov je možné rýchlo získať buď z vašej existujúcej zákazníckej základne, alebo prostredníctvom priateľov a rodiny. Ak však chcete byť trochu demografickejší, služby ako UsabilityHub vám získajú účastníkov už za dolár na osobu. Na Slovensku podobné agentúry, ktoré toto sprostredkúvajú, bohužiaľ nie sú a agentúry si to zabezpečujú sami.

Testovanie estetiky je zložitejšie, pretože ako už viete, dizajn je subjektívny. To znamená, že potrebujeme viac ľudí, aby boli akékoľvek štatistické anomálie eliminované.

Skupina Nielsen Norman opäť navrhuje konkrétne číslo. Tvrdia, že ak chcete skutočne hodnotnú finálnu štatistiku, mali by ste nájsť najmenej 20 ľudí.

Za zmienku tiež stojí, že v prípade estetiky by ste mali testovať s demograficky presnými jednotlivcami, s čím by vám pri testovaní mala pomôcť vaša testovacia platforma.

Aj keď to bude stáť menšiu sumu peňazí, bude to zanedbateľné v porovnaní s množstvom zdrojov (osoby, hodiny a peniaze), ktoré ušetríte.

Často tiež vznikajú obavy, že to bude trvať príliš dlho. Podľa našich skúseností však zvyčajne môžete dostať 20 odpovedí za hodinu alebo menej. Kedy ste naposledy dostali schválenie webového dizajnu za menej ako hodinu?


Stojí to za pokus

Testovanie koncepcie návrhu nevyrieši všetky trápenia webových dizajnérov. Povedie to však k lepším návrhom a má to potenciál výrazne pomôcť pri riadení zainteresovaných strán. A keď vezmete do úvahy minimálnu investíciu do jeho uskutočnenia, nedáva zmysel to nevyskúšať aspoň na jednom projekte.
My v Narative testovanie berieme vážne, a klientom odporúčame zahrnúť túto etapu do UX fázy, ktorú ponúkame v našom tvorivom procese.

Ďalšie články

Všetky naše referencie

Ďalšía kategória

Design