Optimalizace webu z hlediska použitelnosti a User Experience. Jakub Rokyta

České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačů

Bakalářská práce

Optimalizace webu z hlediska použitelnosti a User Experience Jakub Rokyta

Vedoucí práce: Ing. Ondřej Langr

Studijní program: Otevřená informatika, Bakalářský Obor: Softwarové systémy 23. května 2012

iv

v

Poděkování Rád bych poděkoval panu Ing. Ondřejovi Langrovi za vedení této práce a za možnost učit se od něj. Díky dále patří pánům Mgr. Jakubovi Francovi a Radoslavu Svičinovi za konzultace a mé matce za konzultaci gramatické stránky této práce. Díky samozřejmě také patří celé mé rodině, která mi umožnila studium na vysoké škole a po celou dobu studií mě ve studiu podporovala.

vi

vii

Prohlášení Prohlašuji, že jsem práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu §60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon).

V Praze dne 23. 5. 2012

.............................................................

viii

Abstract The aim of this work is the optimization of web pages in terms of usability and User Experience. The introduction deals with the analysis of usability problems and User Experience of specific sites. The second part deals with the design of new solutions and suggestions for any interaction problems found. The third part deals with the testing of implemented changes with real users, resulting in web pages which are optimized in terms of usability and User Experience.

Abstrakt Cílem této práce je optimalizace konkrétních webových stránek z pohledu použitelnosti a User Experience. V úvodu se zabývám analýzou problémů použitelnosti a User Experience na konkrétních webových stránkách. Ve druhé části se věnuji návrhu nových řešení a interakčních návrhů pro nalezené problémy. Třetí část se zabývá testováním implementovaných změn. Výsledkem jsou webové stránky optimalizované z pohledu použitelnosti a User Experience. Tyto výsledky jsou podpořeny testováním stránek skutečnými uživateli.

ix

x

Obsah 1 Úvod

1

2 Popis problému, specifikace cíle 2.1 Popis problému . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Cíle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3 3 4

3 Analýza 3.1 PPC cílová stránka . . . . . . . . . . . . 3.1.1 Nestandardní rozložení elementů 3.1.2 Přemíra informací . . . . . . . . 3.1.3 Nesouvisející prostor . . . . . . . 3.2 TechBuddy stránka . . . . . . . . . . . . 3.2.1 Přemíra informací . . . . . . . . 3.2.2 Odborné texty . . . . . . . . . . 3.2.3 Nesouvisející grafická podoba . . 3.2.4 Duplicitní obsah . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

5 . 6 . 7 . 7 . 8 . 8 . 9 . 10 . 10 . 12

4 Návrh řešení 4.1 PPC cílová stránka . . . . . . . . . . 4.1.1 Zkušenosti jiných uživatelů . 4.1.2 Funkcionalita . . . . . . . . . 4.1.3 Možnost nákupu . . . . . . . 4.2 TechBuddy stránka . . . . . . . . . . 4.2.1 Sociální prvek . . . . . . . . . 4.2.2 Ztotožnění se s návštěvníkem 4.2.3 Velikost elementů a textu . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

13 13 14 14 15 16 18 18 19

5 Realizace 5.1 PPC cílová stránka . . . . . . . . . . . . . 5.1.1 Prototyp . . . . . . . . . . . . . . . 5.1.2 Grafický design . . . . . . . . . . . 5.2 TechBuddy stránka . . . . . . . . . . . . . 5.2.1 Prototyp . . . . . . . . . . . . . . . 5.2.1.1 Úvodní stránka . . . . . . 5.2.1.2 Výčet nabízených služeb . 5.2.1.3 TechBuddy varianty . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

21 21 22 22 23 23 23 23 24

xi

. . . . . . . .

. . . . . . . .

xii

OBSAH

5.2.2

5.2.1.4 Grafický 5.2.2.1 5.2.2.2 5.2.2.3 5.2.2.4

Jak TechBuddy funguje . design . . . . . . . . . . . Úvodní stránka . . . . . . TechBuddy varianty . . . Výčet nabízených služeb . Jak TechBuddy funguje .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

25 27 27 27 28 28

6 Testování 29 6.1 PPC cílová stránka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.2 TechBuddy stránka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 7 Závěr 31 7.1 Další možné pokračování práce . . . . . . . . . . . . . . . . . . . . . . . . . . 31 A Seznam použitých zkratek

35

B Obsah přiloženého DVD

37

C Prototyp PPC cílové stránky

39

D Prototyp TechBuddy stránky

41

E Finální grafická podoba PPC cílové stránky

47

F Finální grafická podoba TechBuddy stránky

49

Seznam obrázků 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9

PPC cílová stránka - původní podoba . . . . . . . . PPC cílová stránka - nesourodé rozložení elementů PPC cílová stránka - přemíra informací . . . . . . . PPC cílová stránka - nesouvisející prostor . . . . . TechBuddy stránka - původní podoba . . . . . . . TechBuddy stránka - přemíra informací . . . . . . TechBuddy stránka - odborné texty . . . . . . . . . TechBuddy stránka - nesouvisející grafická podoba TechBuddy stránka - duplicitní obsah . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. 6 . 7 . 7 . 8 . 8 . 9 . 10 . 11 . 12

4.1 4.2 4.3 4.4 4.5 4.6

PPC cílová stránka - návrh . . . . . . . . . . . . . . . . . Aplikovaný návrhový vzor Grid-based rozložení . . . . . . TechBuddy stránka - návrh (titulní strana) . . . . . . . . TechBuddy stránka - návrh (nastínění nabízených služeb) TechBuddy stránka - návrh (výčet možností nákupu) . . . TechBuddy stránka - návrh (jak TechBuddy funguje) . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

14 15 16 17 17 18

5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10 5.11 5.12

PPC cílová stránka - hlavní banner . . . . . . . . . . . . . . . . . . . . PPC cílová stránka - prototyp . . . . . . . . . . . . . . . . . . . . . . . PPC cílová stránka - nový design . . . . . . . . . . . . . . . . . . . . . TechBuddy stránka - prototyp hlavní stránky . . . . . . . . . . . . . . TechBuddy stránka - prototyp stránky s nastíněním nabízených služeb TechBuddy stránka - prototyp stránky s výčtem možností nákupu . . . TechBuddy stránka - ilustace průběhu oprav PC s TechBuddy . . . . . TechBuddy stránka - jak TechBuddy funguje . . . . . . . . . . . . . . TechBuddy stránka - nový design . . . . . . . . . . . . . . . . . . . . . TechBuddy stránka - TechBuddy varianty . . . . . . . . . . . . . . . . TechBuddy stránka - výčet nabízených služeb . . . . . . . . . . . . . . TechBuddy stránka - jak TechBuddy funguje . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

21 22 22 23 24 25 26 26 27 27 28 28

6.1

TechBuddy - hlavní banner . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

B.1 Obsah přiloženého DVD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 C.1 PPC cílová stránka - prototyp . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 D.1 TechBuddy stránka - prototyp hlavní stránky . . . . . . . . . . . . . . . . . . 41

xiii

xiv

SEZNAM OBRÁZKŮ

D.2 D.3 D.4 D.5

TechBuddy TechBuddy TechBuddy TechBuddy

stránka stránka stránka stránka

-

prototyp stránky s nastíněním nabízených služeb prototyp stránky s výčtem možností nákupu . . . ilustace průběhu oprav PC s TechBuddy . . . . . jak TechBuddy funguje . . . . . . . . . . . . . .

. . . .

. . . .

. . . .

. . . .

42 43 44 45

E.1 PPC cílová stránka - nový design . . . . . . . . . . . . . . . . . . . . . . . . . 47 F.1 F.2 F.3 F.4

TechBuddy TechBuddy TechBuddy TechBuddy

stránka stránka stránka stránka

-

nový design . . . . . . . výčet nabízených služeb TechBuddy varianty . . jak TechBuddy funguje

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

49 50 51 52

Kapitola 1

Úvod Často se v běžném životě setkáváme s nepřehlednými a matoucími produkty, ať jde již o elektronický obchod nebo o ovládací panel letadla. Důsledky nepřehledných a nejasných produktů mohou být například ztráta zákazníka nebo letecká nehoda. Těmto situacím se dá předejít aplikováním principů a postupů z odvětví Informačních technologií (dále jen IT) User Experience. User Experience se dá definovat mnoha způsoby, uvedu zde tedy ty definice, které osobně považuji za nejvýstižnější: • „User Experience představuje vjem zanechaný v něčí mysli, který vznikne z řady interakcí mezi lidmi, zařízeními a událostmi nebo kombinací uvedeného.“ (Václav Klimeš, 2008, bod 3) [24] • „User Experience je soubor technik a způsobů, jak řízeně ovlivňovat, jaký dojem návštěva vašeho webu v lidech zanechá.“ (Petr Štědrý, 2010) [7] • „User Experience je to, jaký dojem vaše stránky zanechají na uživateli. Bude po jejich použití frustrovaný nebo nadšený? Bude se na ně chtít vracet, nebo bude dělat vše proto, aby na ně musel co nejméně nebo vůbec? Jaký obrázek si udělá o vaší firmě? Bude motivován a i schopen si na nich něco např. koupit, nebo raději půjde ke konkurenci, kde je snazší uskutečnit nákup?“ (Jiří Mžourek, 2010) [7] Z výše uvedených definic profesionálů je zřejmé, že User Experience je velmi abstraktní a důležité odvětví. Subjektivně vnímám jeho potřebu z praktického hlediska - za předpokladu, že bychom měli dokonalý produkt či službu z pohledu funkčnosti, ceny a vzhledu, je to jen část úspěchu. Když si takový produkt představíme a přimyslíme si k němu absenci User Experience, dostáváme produkt, který je v zásadě odsouzen k zániku. Funkčně skvělý, krásně vypadající produkt či služba za nízkou cenu, který se ale nebude příjemně a efektivně používat, a nezanechá v uživateli příjemné pocity, bude pravděpodobně přehlížen a nahrazen konkurencí. [30] User Experience je obor, který těmto situacím předchází a vytváří příjemné a pochopitelné prostředí pro uživatele konkrétního produktu. Mezi hlavní disciplíny tohoto oboru patří interakční design a uživatelské testování. Interakční design by se dal obecně charakterizovat jako soubor metod a postupů, které mají za úkol uspokojit potřeby a touhy uživatele

1

2

KAPITOLA 1. ÚVOD

a vytvořit mu příjemné prostředí. Interakční design je soubor metod a postupů odvětví User Experience. Metody interakčního designu se dají aplikovat na téměř cokoli – od webových stránek, výsledných softwarových produktů až po komplexní výrobní linky. [4] [5] Uživatelské testování je soubor postupů, při kterých se testuje a analyzuje reálné chování na skupině reálných uživatelů konkrétní služby či produktu. Podrobně je tato metodika popsána v kapitole týkající se testování (viz strana 29).[27]

Kapitola 2

Popis problému, specifikace cíle Současné webové stránky firmy AVG Technologies s.r.o. (dále jen AVG) vykazují nedokonalosti v podobě poskytování neoptimálních informací o produktech a nedostatečnou míru přesvědčení o kvalitě produktů. Tyto závěry byly vyvozeny testovacími týmy AVG za pomoci metodik jako jsou např.: • „Home visits“ – návštěvy testovacích týmů u uživatelů AVG produktů za účelem zjistit v reálném prostředí, kde se tyto produkty používají, ohlasy uživatelů a jejich názory na kvalitu služeb a produktů AVG • Deníková studie – studie, při které jsou participanti1 požádáni o vedení deníku ohledně konkrétní činnosti Hlavním přínosem této metody je jasně viditelná změna User Experience s postupem času. Hlavní nevýhodou je naopak to, že veškeré záznamy v deníku jsou čistě subjektivní. • Testování použitelnosti – testy s uživateli, které fungují na principu analýzy plnění předem zadaných úkolů (např. nastavení síťového připojení) a jejich sekvencí. Při této metodě jsou u participantů v reálném čase vidět reakce, postřehy a i problémy s plněním úkolů, což dává prostor pro zajímavá data a poznatky, které dokáží odhalit kritické problémy v testované aplikaci či službě.

2.1

Popis problému

Počet návštěvníků, kteří navštíví AVG stránky, pouze se „rozhlédnou“ a stránky opustí, je vyšší, než by AVG očekávalo. Míra interakce s těmito stránkami je tedy nízká a je pod očekávání AVG. AVG stránky mají, dle expertního odhadu marketingového oddělení, špatnou marketingovou zprávu pro uživatele. Tato marketingová zpráva se dá definovat jako příslib a předání nějaké hodnoty zákazníkovi. Díky tomu usuzuji, že se jedná o špatně koncipované stránky s nedokonalým obsahem. 1

účastníci testu

3

4

KAPITOLA 2. POPIS PROBLÉMU, SPECIFIKACE CÍLE

Nejvíce viditelné a zřejmé jsou problémy s obsahem těchto stránek, rozložením grafických a interakčních elementů a v neposlední řadě také s nedostatečnými či neúplnými a nepřesvědčivými informacemi o nabízených produktech. Výše zmíněné problémy se primárně projevují tak, že někteří návštěvníci stránek jsou zmatení, nenacházejí okamžitě relevantní informace a v kritických částech nákupu nového produktu ztratí svůj zájem. Sekundárním problémem je situace, kdy nespokojený či zmatený návštěvník stránek získá negativní pohled na AVG jako značku. To má za následek pravděpodobnou ztrátu potencionálního zákazníka a případné šíření negativních ohlasů mezi známé, rodinu apod.

2.2

Cíle

V této práci se budu zabývat analýzou a řešením klíčových problémů použitelnosti a User Experience webových stránek firmy AVG. Mým cílem bude analýza a přestavba kritických částí procesů, kdy uživatel získává negativní pocity, je zmaten nebo nedostává relevantní informace. Samotnou přestavbu těchto částí budu realizovat pomocí high-level prototypů a finální grafickou podobou. High-level prototypy se dají definovat jako prototypy, které se svou podobou a obsahem blíží finálnímu produktu. [9] Mezi hlavní výhody tohoto druhu prototypů je jejich relativně rychlé vytvoření spojené s minimálními náklady. Mezi nevýhody této formy prototypů patří zejména fakt, že při testování těchto prototypů dochází ke zkreslení dat dané participanty, kteří se spíše na podstatu a myšlenku testovaného prototypu soustředí na, v době testu zcela irelevantní grafickou stránku, čímž dochází ke zkreslení reakcí a hodnocení. [10]

Kapitola 3

Analýza Pro analýzy jsem zvolil metodu zvanou Heuristická evaluace, která funguje na principu procházení a hodnocení stránky expertním testerem, který kontroluje plnění doporučení ohledně použitelnosti. Těchto heuristik existuje mnoho, zvolil jsem tedy mnou osvědčené heuristiky Jakoba Nielsena [28], které definují obecné zásady, které je nutno při návrhu uživatelského rozhraní dodržet a pomáhá identifikovat problémy spojené s designem uživatelského rozhraní. Tyto Nielsonovy heuristiky jsou považovány za nejrozšířenější v oblasti Human Computer Interface1 (dále jen HCI) [12] a jejich hlavní výhoda spočívá v její rychlé a levné aplikaci. [13] Nielsenovy heuristiky přeložené do češtiny: (Filip Zwyrtek)[30] 1. Viditelnost stavu systému "Systém dává uživateli najevo svůj stav s přiměřenou dobou odezvy." 2. Systém odpovídá reálnému světu "Jazyk systému odpovídá jazyku uživatelů. Pořadí úkonů je logické a odpovídá zažitým konvencím." 3. Uživatelská svoboda "Uživatel má možnost kdykoli přerušit činnost. Systém umožňuje undo a redo." 4. Konzistence a standardy "Stejné věci musí být v celém systému stejně pojmenovány a odpovídat zažitým konvencím." 5. Prevence chyb "Návrh systému předchází vzniku chyb." 6. Lépe rozpoznat než vzpomínat "Systém by měl být dostatečně intuitivní — není potřeba si pamatovat specifické postupy." 7. Flexibilita a efektivita použití "Umožnění zrychlení práce pro zkušenější uživatele." 1

rozhraní pro komunikaci člověka s počítačem

5

6

KAPITOLA 3. ANALÝZA

8. Estetický a minimalistický návrh "Dialogy a funkce by neměly obsahovat zbytečné, nerelevantní nebo málo používané elementy." 9. Pomoc uživatelům rozpoznat a napravit chyby "Srozumitelné chybové hlášky, konstruktivní návrhy řešení." 10. Nápověda a dokumentace "Dobře strukturovaná, lehce nalezitelné informace a konkrétní postupy." Nevýhody těchto heuristik, například riziko neodhalení všech problémů jedním expertním testerem či absence návrhu řešení nalezených problémů, jsou zanedbatelné a nevyvažují benefity těchto heuristik a této metody obecně. [14] [16] [22] [21]

3.1

PPC cílová stránka

Současná podoba AVG PPC2 cílové stránky je značně kontroverzní a největším problémem této stránky je fakt, že má výrazně vyšší bounce rate3 než jiné AVG stránky se stejným segmentem návštěvnosti.

Obrázek 3.1: PPC cílová stránka - původní podoba

Dle mého názoru je největším problémem této PPC stránky to, že nepůsobí jako jednotný celek sloužící svému účelu, ale že je poskládána z nesouvisejících součástí. Tento názor jsem si nepřímo ověřil v knihách zabývajících se analýzou uživatelského rozhraní a User Experience. [5] 2 Pay Per Click je jeden z nástrojů internetové reklamy a využívá principu, že inzerent neplatí za zobrazení reklamy, ale pouze za kliknutí na ni 3 míra opouštění stránky = počet návštěvníků, kteří odejdou / počet návštěvníků celkem

3.1. PPC CÍLOVÁ STRÁNKA

3.1.1

7

Nestandardní rozložení elementů

Jak je z obrázku patrné, stránka má nestandardní rozložení a velikost elementů, které jsou umístěné bez jakéhokoliv řádu či uspořádání. Různá výška či šířka částí stránky působí zmateným a nesourodým dojmem. Tyto problémy indikují porušení heuristiky Konzistence a standardy. [30]

Obrázek 3.2: PPC cílová stránka - nesourodé rozložení elementů

3.1.2

Přemíra informací

Hlavním účelem primární části této stránky by měla být prezentace nabízeného produktu a jasné vysvětlení možnosti nákupu. Ve skutečnosti tomu tak není a hlavní prostor stránky je směsicí nepříliš souvisejících ikon, ze kterých není patrné to nejdůležitější, tedy hlavní přínosy a funkčnost aplikace.

Obrázek 3.3: PPC cílová stránka - přemíra informací

Ne příliš dobrý současný popis funkcionality nedává návštěvníkům prostor k vytvoření si uceleného názoru na daný produkt, tím pádem je tento způsob prezentace neefektivní. Tyto jevy porušují heuristiku Flexibilita a efektivita použití. [30]

8

3.1.3


Nesouvisející prostor

Ve zvýrazněných částech je zřetelně vidět tendence vývojářů této webové stránky vyplnit prostor nezměrným množstvím informací. Tento maximalistický design vytváří nesouvisející prostor a odvádí pozornost návštěvníků od podstatných věcí jako jsou pochopení funkcionality produktu nebo prozkoumání možnosti nákupu. Výše uvedené porušuje heuristiku Estetický a minimalistický návrh. [30]

Obrázek 3.4: PPC cílová stránka - nesouvisející prostor

3.2

TechBuddy stránka

TechBuddy stránka prezentující a nabízející službu sloužící ke vzdálené odborné pomoci méně technicky zdatným návštěvníkům vykazuje zásadní pochybení User Experience. Tyto pochybení se projevují vysokým bounce rate na této stránce a negativními ohlasy participantů, na kterých tato stránka byla opakovaně interně testována.

Obrázek 3.5: TechBuddy stránka - původní podoba

3.2. TECHBUDDY STRÁNKA

9

Dle analýzy provedené v následujících sekcích je zásadním problémem této stránky nepřehlednost, přemíra informací a tendence původních vývojářů a grafiků odprezentovat co nejvíce informací na co nejmenší ploše. S tímto mým názorem se ztotožňují kolegové z grafického a interakčního týmu AVG. Tento názor se vyskytuje i v knihách a článcích zabývajících se optimalizací uživatelského rozhraní či jejich hodnocením. [14] [15]

3.2.1

Přemíra informací

Účelem této stránky by mělo být jasné, stručné a zřetelné komunikování funkcionality a možností služby TechBuddy. Tento design ve skutečnosti dělá přesný opak a působí nepřehledným a velmi přeplněným dojmem s duplicitními informacemi, odborně a technicky vyloženými službami a absencí jednoznačného vysvětlení klíčových kroků k nabytí této služby. V současnosti tato stránka slouží primárně pro návštěvníky netechnicky zdatné, kteří se dají zařadit do dvou skupin: • Jednorázoví zákazníci – návštěvníci, kteří mají akutní technický problém, se kterým si neumějí poradit a chtějí ho urgentně jednorázově vyřešit • Dlouhodobí zákazníci – návštěvníci, kteří mají zájem o dlouhodobou podporu službou TechBuddy ve věci řešení nenadálých technických problémů či o poradenství ohledně informačních technologií Cílem této stránky by tedy, dle požadavků na vývoj této stránky v minulosti, mělo být jednoduché odkomunikování podstaty a klíčových výhod služby TechBuddy. Jelikož z podstaty této služby vyplývá, že návštěvník, který si neví rady s technickým problémem např. se svým osobním počítačem, nebude rozumět složitým a odborně vyloženému technickému slangu. Na obrázku je zřetelné značné množství informací, které by na této titulní straně pouze rozptylují a matou návštěvníka.

Obrázek 3.6: TechBuddy stránka - přemíra informací Výše zmíněné aspekty přímo negativně ovlivňují uživatelskou zkušenost a použitelnost stránky, díky čemuž tato stránka dělá přesný opak toto, proč byla vytvořena. Z výše popsaného vyplývá, že současný design TechBuddy stránky jasně porušuje heuristiky Flexibilita a efektivita použití, Estetický a minimalistický návrh. [30]

10


3.2.2

Odborné texty

V současném designu jsou klíčové texty vysvětlujicí funkcionalitu a rozsah pomoci službou TechBuddy vysvětleny dopodrobna a odbornými termíny. Dle interních testů s participanty bylo zjištěno, že tito návštěvníci, pokud nejsou technicky vzdělaní, nemají povědomí o technických termínech, které jsou aktuálně prezentovány. Tento fakt měl při testech dvě zakončení: • návštěvník opustil stránku s negativními pocity a o službu ztratil zájem • návštěvník se pokusil informace zanalyzovat, ale nebyl schopen svůj problém zařadit do některé z prezentovaných oblastí technické pomoci nabízenou TechBuddy službou. Svůj zájem neztratil a použil telefon ke komunikaci s živým operátorem, který mu jeho problém pomohl charakterizovat Jak je z výše uvedeného vidět, stránka nesplňuje její podstatu. Návštěvníci, pokud o službu neztratí zájem, volí raději formu komunikace s živým operátorem ohledně charakterizace konkrétního problému a snahou zjistit, "jestli dokáže TechBuddy problém vyřešit"než jejich vlastní snaha analyzovat a zařadit své potíže. Z obrázku je patrná velmi odborně vysvětlená funkcionalita, která je zaměřená spíše na technicky vzdělanou část návštěvníků webu.

Obrázek 3.7: TechBuddy stránka - odborné texty

Výše zmíněné jevy porušují heuristiky Flexibilita a efektivita použití, Systém odpovídá reálnému světu a Prevence chyb. [30]

3.2.3

Nesouvisející grafická podoba

Dle interních testů AVG s uživateli vyplývá, že současná grafická podoba stránky TechBuddy je složena z nesouvisejících grafických elementů, které fungují jako rušivý a agresivní prvek. Z mých výzkumů vyplývá, že barva na webu určuje z nejméně 80% celkový dojem z nabízeného produktu či služby. Zbylá procenta se skládají z použitých textur, informačním obsahu a rozmístění elementů. [3]


11

Obrázek 3.8: TechBuddy stránka - nesouvisející grafická podoba

Jak je vidět z přiloženého obrázku, současná grafická podoba se skládá dohromady z 10 typů barev. Dominantní z uvedených barev působí na návštěvníka TechBuddy a poutají jeho pozornost takto: • fialová, světle modrá, růžová - upoutá zákazníka s tradičním přístupem k nákupům a preferující hotovost či šeky [3] • modrá, šedá - upoutá zákazníky náchylné ke spontálním a impulzivním nákupům, preferující platbu platební kartou [3] Z výše uvedeného vyplývá, že současný design je koncipován převážně pro zákazníky preferující způsob nákupu pomocí hotovosti nebo pomocí platebních šeků. Z interních dat firmy AVG jsem zjistil, že tito lidé jsou z nadpoloviční většiny (60% testovaných participantů) lidé starší 50 let a lidé, kteří nevěří moderním platebním technologiím či k nim nemají kladný vztah. Z těchto dat také vyplynulo, že ostatní lidé preferující moderní způsoby plateb na internetu, nejsou při průchodu TechBuddy stránkou zaujati a jejich zájem o nabízené služby v řádu minut opadne. Z podstaty funkcionality TechBuddy služby, tedy online remote služby sloužící k řešení technických problémů zákazníka, je nabízena možnost nákupu pouze pomocí platebních karet. Z výše uvedeného tedy vyplývá, že stránka není z pohledu grafické podoby optimalizovaná, a konzervativní zákazníky preferující platby pomocí hotovosti grafickou podobou zaujme, ale nenabídne jim jimi preferovaný způsob nákupu. Ostatním zákazníkům, preferujícím moderní způsoby plateb v online světě, nabídne jim vyhovující možnosti platby, ale

12


nezaujme je svou grafickou podobou, čímž o nabízenou službu ztratí, dle interních testů, zájem. Výše zmíněné jevy porušují heuristiku Flexibilita a efektivita použití. [30]

3.2.4

Duplicitní obsah

Stránka TechBuddy obsahuje hned na úvodní stránce několik duplicitních informací týkajících se možnosti kontaktu. Tyto duplicity zbytečně zaplňují už tak přeplněný obsah těchto stránek a subjektivně si myslím, že odvádí pozornost návštěvníků od jejich obsahu. Jako sekundární problém duplicit na webových stránkách je nedokonalé fungování Search Engine Optimization (dále jen SEO), čímž se tato stránka stává pro návštěvníky internetu hůře dohledatelná. [8]

Obrázek 3.9: TechBuddy stránka - duplicitní obsah Tyto duplicity porušují heuristiku Estetický a minimalistický návrh spolu s Flexibilita a efektivita použití. [30]

Kapitola 4

Návrh řešení 4.1


Při návrhu nového designu této stránky jsem se zaměřil primárně na splnění těchto klíčových vlastností, které by měla splňovat: • Jednoduchý, přehledný a jasně definovaný obsah • Konzistentní rozvržení stránky • Absence zbytečných informací a elementů • Dát návštěvníkovi těchto stránek, tedy potencionálnímu zákazníkovi, jasně a zřetelně najevo, co a v jaké formě se na této stránce nabízí • Dát návštěvníkům možnost volby mezi stáhnutím testovací verze produktu a jeho plnou placenou verzí Samotný návrh byl výsledkem několika mnou vytvořených iterakcí, ve kterých jsem postupně analyzoval současné trendy v PPC cílových stránkách. Při návrhu jsem se držel jasného cíle, a to udělat tuto stránku jednoduchou, efektivní a použitelnou. Tyto aspekty poté zhodnotím skrze konverzi návštěvníků na zákazníky s tím, že budu pracovat se skutečností, že jediné, co se na této stránce změnilo je mnou nově vytvořený design. Na základě výše vytyčených cílů jsem vytvořil základní kostru stránky s klíčovými elementy jejichž vlastnosti a důvody pro ně jsou podrobně rozebrány dále. Tyto rozbory se odkazují přímo na konkrétní elementy uvedené ve zmíněné kostře.

13

14

KAPITOLA 4. NÁVRH ŘEŠENÍ

Obrázek 4.1: PPC cílová stránka - návrh

4.1.1

Zkušenosti jiných uživatelů

Při návrhu jsem pracoval s faktem, že lidé v běžném životě při výběru antivirového systému dají na rady jiných (například svých přátel, rodiny apod.), na jejich zkušenosti, názory a hodnocení. Tento fakt v praxi mnohdy určuje, který produkt si noví uživatelé zakoupí. AVG má velmi velkou uživatelskou základnu, čítající přibližně 110 000 000 uživatelů po celém světě, což teoreticky předpokládá kvalitní propagaci AVG produkt. Periodické výzkumy AVG dokazují, že největší vliv na výběr antivirového programu má doporučení od jiných uživatelů daného produktu. Vzhledem k velké míře utajení, kterému tyto interní AVG výzkumy a výsledky z nich podléhají, se tyto postupy a výsledky nemohou veřejně publikovat. Tyto informace jsem si ověřil z různých zdrojů a zjistil jsem, že doporučení jiných uživatelů (expertů, přátel, známých atd.) zvyšuje nákup nových služeb a produktů o desítky procent. [2] Díky výše zmíněným faktům jsem nový design koncipoval tak, aby značnou část stránky (alespoň 30% celkového obsahu) zabíral hlavní banner1 umístěný tak, aby byl první věcí, které si návštěvník po příchodu na tuto stránku všimne. Tento banner má za úkol přesvědčit návštěvníky, že AVG produkt je oblíbený značným množstvím lidí po celém světě, kteří do něj vkládají důvěru. Na tomto hlavním banneru bude vyobrazená skupina siluet lidí, kteří symbolizují uživatele AVG produktu s pozitivními emocemi.

4.1.2

Funkcionalita

Dalším důležitým aspektem takovéto PPC stránky je informovat, co daný produkt obsahuje, jaká je jeho funkcionalita a jaký užitek by mohla pro návštěvníka mít. 1

druh reklamního poutače používaného na World Wide Web (dále jen WWW) stránkách

4.1. PPC CÍLOVÁ STRÁNKA

15

Při designování této části stránky jsem se nechal inspirovat moderními trendy [29] [20] a zjistil jsem, že místo dlouhých překombinovaných textů stačí jeden odstavec popsaný ne technicky odborným výkladem funkcionality, ale jednoduchými, méně odbornými větami. Tyto trendy byly zjištěny také interní kompetitivní analýzou konkurentů firmy AVG a kompetitivní analýzou prodeje produktů ve webovém průmyslu. Tyto analýzy, výsledky z nich a postupy jsou považovány za přísně tajné, tedy veřejně nepublikovatelné. Tento fakt je, dle testů provedených AVG v minulosti, kritický při vytváření celkového pocitu o stránce a odráží se v její použitelnosti. Pro vysvětlení hlavních funkcionalit jsem zvolil návrhový vzor Grid-based rozložení, jehož hlavním smyslem je poskytnout návštěvníkovi stránek možnost prohlédnout stránku, zjistit její obsah a pochopit jeho funkcionalitu ve velmi krátkém čase, což osobně považuji na tomto typu webové stránky za důležité. Měl jsem za cíl jasně a stručně vysvětlit hlavní funkcionalitu a benefity produktu. Volil jsem tedy neodborný jazyk bez technických definic, jazykový tón používaný lidmi v běžné konverzaci a text nepřesahující 3 řádky z důvodu úspory místa a času návštěvníka, který stráví čtením textu.

Obrázek 4.2: Aplikovaný návrhový vzor Grid-based rozložení

4.1.3

Možnost nákupu

V případě, že se návštěvníkům produkt zalíbí, je třeba mu jednoduše a názorně prezentovat všechny možnosti nákupu. Nákup produktu je logickým vyústěním pro návštěvníka, který získal pozitivní názor a zájem o prezentovaný software a doposud tuto stránku neopustil. Nedílnou součástí nákupu prezentovaného antivirového produktu je specifikace počtu počítačových stanic, které budou chráněny. Po konzultaci s marketingovým oddělením jsem zjistil, že jediná možnost, kterou mohu prezentovat tuto volbu počtu stanic je rozbalovací menu. Toto rozbalovací menu zaručuje nejlepší kompatibilitu s obchodním systémem AVG. Tento fakt je založen na technických požadavcích AVG serverů, které mají na starosti manipulaci s licencemi na prezentovaný produkt. Toto je technické omezení, které nejsem schopen změnit či ovlivnit, proto se mu musím přizpůsobit. K tomuto elementu jsem připojil 2 radio buttony2 , které slouží k výběru délky licence – jeden nebo dva roky. Mnoho potencionálních zákazníků si nemusí být jisto kvalitou a potřebností nabízeného produktu, proto na stránce nesmí chybět dominantní tlačítko pro stažení 30 denní zkušební verze umístěné vedle tlačítka sloužícího k nákupu plné verze. Tato strategie poskytování zkušební verze je dle marketingového oddělení úspěšná a velmi rozšířená. 2

interakční element, který dovoluje z většího množství možností zvolit právě jednu

16


4.2

TechBuddy stránka

Při návrhu nového, optimalizovaného designu této stránky jsem se zaměřil na splnění těchto vlastností: • Jednoduchý a přehledný design, který jasně a stručně vysvětlí podstatu nabízené služby • Absence složitých, nepřehledných a odborných textů • Eliminování duplicitních informací • Přehledný grafický design Mým cílem také bylo optimalizovat průchod návštěvníka stránkou tak, aby v případě zájmu pokryl všechny jeho případné dotazy a požadavky. Tento průchod se, dle interních testů a analýz společnosti AVG, dá obecně charakterizovat takto: • V případě prvotního kladného dojmu z nabízené služby či produktu se u návštěvníků objeví otázka, co přesne tato služba či produkt nabízí • Po zjištění funkcionality či nabízených služeb vyvstává otázka jak tato služba či produkt funguje • V případě zjištění jak produkt či služba funguje a trvajícího zájmu je na místě dotaz ohledně ceny produktu • Jako posledním krokem je fáze, kdy návštěvníka zajímá, jak tuto službu či produkt získat Na základě výše vytyčených cílů jsem vytvořil základní kostry s klíčovými elementy jejichž vlastnosti a důvody pro ně jsou podrobně rozebrány dále.

Obrázek 4.3: TechBuddy stránka - návrh (titulní strana)


Obrázek 4.4: TechBuddy stránka - návrh (nastínění nabízených služeb)

Obrázek 4.5: TechBuddy stránka - návrh (výčet možností nákupu)

17

18


Obrázek 4.6: TechBuddy stránka - návrh (jak TechBuddy funguje)

4.2.1

Sociální prvek

Stránka služby TechBuddy je cíleně zaměřena na netechnicky zdatnou část populace. Předpokládá se, že návštěvníci, kteří na tuto stránku přijdou s konkrétním problémem, nemají možnost zeptat se jiných, technicky zkušenějších např. přátel. Jelikož tedy sami nejsou technicky vyspělí, potřebují podvědomé ujištění, že TechBuddy je schopno jejich problémy vyřešit a že se jedná o profesionální službu. Jako osvědčená a v praxi hojně využívaná metoda se nabízí využití sociálních prvků od jiných, stejně situovaných uživatelů služby TechBuddy. Malé a jednoduché pole s krátkou větou obsahující kladnou reakci na službu TechBuddy spolu se jménem a fotkou autora, který měl stejný či podobný problém, dokáže přímo ovlivnit pohled a pocity na nabízenou službu. Tato metoda má úskalí v tom, že někteří technicky zdatnější lidé tento sociální prvek vnímají negativně a považují ho spíše než za pravdivé reakce uživatelů za marketingový tah. Tento negativní jev ale bude, dle mého subjektivního názoru, utlumen na naprosté minimum, jelikož stránku budou navštětovat primárně zástupci skupiny, pro kterou je tato stránka vytvořena. Tito zástupci, tedy netechnická část populace, vnímají tuto metodu kladně, jak vyplývá z interních testů. [2]

4.2.2

Ztotožnění se s návštěvníkem

Dle mých zkušeností a znalostí získaných během studia spolu s praxí v komunikaci s netechnickými typy uživatelů jsem si ověřil metodiku jednání a prezentací technických funkcionalit a služeb těmto uživatelům. Díky těmto zkušenostem a znalostem jsem jako formu prezentace obecné podstaty služby TechBuddy volil přímé otázky na typické problémy, se kterými může TechBuddy pomoci. Tato forma komunikace, dle mého subjektivního názoru, pomůže netechnickým návštěvníkům lépe pochopit nabízené služby a uvědomit si, že TechBuddy je služba, která vyřeší jejich potíže. Mezi typické situace, dle interních testů, patří např.: • Pomalý počítač bez zjevných příčin


19

• Mechanické a softwarové poškození počítače • Otázky týkající se synchronizace, zálohování a přesunu dat obecně • Instalace nového softwaru či připojování nových hardwarových periferií • Zprovoznění nového počítače či laptopu Dle výše zmíněného jsem navrhl formu vysvětlení faktu, že s těmito problémy umí TechBuddy pomoci, a to pomocí přímých otázek, na které si návštěvník s problémem, dle mého názoru, odpoví "Ano". Tyto otázky jsem se snažil koncipovat tak, aby pokryly nejběžnější situace, se kterými se dle mých zkušeností a interních testů AVG, uživatelé služby TechBuddy potýkají. "Měli jste někdy... • ... pomalý počítač nebo laptop a nevěděli jste, jak ho zrychlit?" • ... něco rozbitého v počítači a nevěděli jste, jak tento problém opravit či na koho se obrátit o pomoc?" • ... potřebu přenést data mezi vícero zařízeními a odkládali jste tuto činnost?" • ... potřebu urgentní pomoci, ale nebylo na koho se obrátit?" • ... novou elektroniku a nevěděli jste, jak ji správně zapojit a zprovoznit?

4.2.3

Velikost elementů a textu

V interních testech s uživateli bylo zjištěno, že lidé mladší 30 let by službu TechBuddy pravděpodobně nevyužili. Usuzuji z toho, že zástupci této generace mají dostatečné povědomí o technických rutinách a operacích, které jim postačují k tomu, aby přinejmenším základní problémy a technické operace zvládali sami. Při návrhu nového designu jsem s touto myšlenkou pracoval a předpokládal jsem, že návštěvníky TechBuddy stránek budou lidé starší 30 let. Jelikož tato skupina je velmi velká, design jsem navrhl tak, aby pokryl potřeby i starších uživatelů počítače. Tito starší uživatelé / návštěvníci TechBuddy stránky ocení větší a lépe zvýrazněné texty a větší kontrast mezi grafickými elementy. Tito uživatelé nemají natolik osvojené základní návyky orientace na webových stránkách (jako např. pozice menu, CTA3 , pozice základních informací atd.). Díky těmto aspektům bude text v novém designu TechBuddy stránky velký minimálně 13pt4 a, na rozdíl od současného designu, bude jasně oddělený a s vysokým kontrastem. Tento způsob návrhu bude mít, dle mého názoru potvrzeného odbornou literaturou, pozitivní dopad na schopnost orientace a navigace v novém designu pro zmíněnou skupinu návštěvníků.

3 4

call to action - vyzvání uživatele k akci za účelem nějaké aktivity[23] point - jednotka velikosti písma (0,3527 mm)[17]

20


Kapitola 5

Realizace Při vytváření prototypů jsem vycházel ze mnou vytyčených cílů v kapitole týkající se návrhu řešení (viz str. 13). Grafický design a jeho iterace byl vytvořen grafickým týmem s mou spoluprácí. Obrázky uvedené spolu s textem jsou ve větší velikosti uvedeny samostatně v příloze.

5.1


Pří návrhu nového designu jsem se soustředil na minimalistický design s pouze nezbytnými informacemi. Z mých zkušeností z interních testování s uživateli / participanty jsem zjistil, že lidé webové stránky začínají prohlížet z levého horního rohu. Do tohoto místa jsem tedy vložil hlavní banner se sociálním prvkem, který má jediný účel, a to zaujmout návštěvníka a dát mu pocit, že nabízený produkt je oblíbený u velkého počtu lidí.

Obrázek 5.1: PPC cílová stránka - hlavní banner

V dalším kroku návrhu jsem na úroveň hlavního banneru umístil důležité informace o koupi a interakční prvky, jakými byla tlačítka sloužící k nákupu či stáhnutí testovací verze. Tímto krokem, umístěním na úroveň hlavního banneru, jsem chtěl dodat návštěvníkům stránek pocit, že se jedná o hlavní informace díky tomu, že budou jednoduše blízko u banneru, kterého si všimnou jako první.

21

22

KAPITOLA 5. REALIZACE

Na základě výzkumů pomocí metody eye tracking reprezentovanou v tomto konkrétním případě heatmapou1 , logické místo, kam se návštěvník webu přesune po zhodnocení prvotního dojmu vytvořeného dominantími prvky (v tomto případě hlavní banner), je přímo pod něj. [25] [26]

5.1.1

Prototyp

V rámci konzultace s grafickými experty a oddělením marketingu byly před finální grafickou podobou provedeny drobné změny v umístění elementů.

Obrázek 5.2: PPC cílová stránka - prototyp

5.1.2

Grafický design

Grafická podoba byla vytvořena s ohledem na brandové2 barvy a grafiku firmy AVG.

Obrázek 5.3: PPC cílová stránka - nový design Grafická podoba vytvořená grafickým týmem na mě působí, čistě subjektivně, velmi dobrým dojmem. 1

eye tracking je metoda, při které se využívá oční kamera, která zaznamenává na co se na co se testovaný člověk soustředí [11] 2 brand je soubor grafickch stylů, který díky své jednotnosti má za úkol odlišit značku firmy od značek jiných firem


5.2 5.2.1 5.2.1.1

23

TechBuddy stránka Prototyp Úvodní stránka

Při vytváření prototypů jsem vycházel z mnou vytyčených cílů v kapitole týkající se návrhu řešení (viz str. 16). Prvotním krokem bylo znázornění dominantního banneru obsahujícího fotografii reálné postavy spolu se sociálními prvky mající za úkol zvýšit důvěryhodnost této stránky a pomoci návštěvníkovi se lépe ztotožnit s nabízenou službou. V dalším kroku při implementaci jsem se řídil mnou vytyčenými cíly a vytvořil jsem tři oddělené sekce umístěné pod hlavním bannerem, které obsahují přesné a jasné informace, jak v případě zájmu o nabízenou službu postupovat. Konkrétně se jedná o sekce: • s čím umí TechBuddy pomoci? • jak to funguje? • kolik služba TechBuddy stojí? Implementované texty jsou v této fázi dočasné a před samotným vývojem finálního grafického designu budou zkontrolovány a případně vyladěny jazykovými specialisty.

Obrázek 5.4: TechBuddy stránka - prototyp hlavní stránky

5.2.1.2

Výčet nabízených služeb

Při vytváření podstránky s nabízenými službami jsem vytvořil taktéž dominantní banner s reálnou postavou, která oproti hlavní stránce obsahovala socializující otázky (viz str. 18) a odkaz na telefonní číslo na asistenta, který pomůže návštěvníkovi identifikovat jeho problém a navrhne jeho nejlepší řešení. Součástí této stránky je také výběr ze tří technických odvětví, se kterými umí TechBuddy pomoci (pomoc s instalací nového hardwaru, pomoc se softwarovými problémy či viry a

24


podpora AVG produktů). Jako formu navigace mezi těmito třemi možnostmi jsem volil tři veliká dominantní tlačítka zobrazovaná na stejných pozicích bez ohledu na vybranou možnost. Jediná přítomná dynamika je grafické odlišení vybrané varianty od odstatních, nevybraných. Samotný obsah těchto nabídek je zobrazován pod těmito třemi tlačítky. Tuto variantu jsem volil z důvodů zmíněných v analýze a návrhu této stránky, konkrétně minimalistický a přehledný design. Dle interních testů vyplynulo, že návštěvníci stránek tuto formu navigace lišící se pouze grafickým odlišením aktivních tlačítek přijímají pozitivně. Dalším důvodem je také fakt, že tyto navigační prvky se po celou dobu strávenou na této části TehBuddy webu nemění a jsou na stejných pozicích, což dle heuristik uvedených v analýze, přispěje k celkové přehlednosti a použitelnosti.

Obrázek 5.5: TechBuddy stránka - prototyp stránky s nastíněním nabízených služeb

Zbylý obsah stránky zůstal neměnný, jelikož nebylo potřeba sdělovat návštěvníkům žádné další informace a také z důvodu zachování konzistentního rozložení elementů. 5.2.1.3

TechBuddy varianty

Při vývoji této části jsem pracoval s faktem dodaným během implementace prototypů mnou navrhnutých optimalizací, konkrétně zrušením jakýchkoliv jiných forem plateb než online transakcemi a rozdělením nabízené služby na možnost jednorázové opravy nebo roční nonstop podpory. Tyto nové informace jsem implementoval pomocí dvou graficky oddělených sloupců s rozdílnými informacemi. Tento styl mi subjektivně a dle mých dosavadních zkušeností, dodal maximum prostoru, který jsem mohl využít. Nebyl jsem tedy omezen šířkou stránky, ale pouze přizpůsobivou výškou. Tyto dva sloupce obsahují sociální prvek v podobě reakcí reálných uživatelů na službu TechBuddy, dále dominantní a jasně viditelná tlačítka sloužící k pokračování na konkrétní variantu TechBuddy a v poslední řadě také výčet benefitů lišících se dle varianty.


25

Obrázek 5.6: TechBuddy stránka - prototyp stránky s výčtem možností nákupu

Zbylý obsah stránky zůstal neměnný, jelikož nebylo potřeba sdělovat návštěvníkům žádné další informace a také z důvodu zachování konzistentního rozložení elementů. 5.2.1.4

Jak TechBuddy funguje

Při implementaci této části stránky TechBuddy jsem si položil otázku, jak nejlépe charakterizovat TechBuddy funkcionalitu. TechBuddy služba funguje na principu spojení počítače zákazníka s počítačem TechBuddy specialistů. Tito specialisté po analýze problémů zákazníka tyto problémy sami pomocí vzdáleného připojení opraví, uživatel se tedy nemusí o nic starat. Subjektivně si myslím, že pro běžného, netechnicky založeného uživatele může být problém porozumět podstatě vzdáleného připojení k jeho počítači. Domnívám se, že by tento postup, i přes všechna ubezpečení a zabezpečení, mohl vnímat negativně a jako zásah do jeho soukromí. Tento názor jsem si potvrdil analýzou interních dat z testů z participanty. Snažil jsem se tento postup nejlépe charakterizovat pomocí názorné ilustrace. Ilustrace fungují lépe než sáhodlouhé texty, které by byly potřeba na vysvětlení výše zmíněných aspektů a přínosů vzdáleného připojení TechBuddy specialisty. [18] Při vymýšlení této ilustrace jsem si představil typickou situaci, která může pro uživatele TechBuddy nastat: "Počítač je nějakým způsobem softwarově poškozený a probíhá oprava specialistou TechBuddy, kterému předal uživatel kontrolu nad počítačem. Zatím co probíhá oprava, uživatel si může dovolit dát si kávu či jiné občerstvení zatím co se jeho počítač opravuje." Tato myšlenka mě inspirovala a za pomoci grafických expertů z grafického týmu jsme vytvořili tuto ilustraci, která by mohla být umístěna ve finálním designu v horní dominantní části obsahující ukázku výše zmíněných procesů a situace:

26


Obrázek 5.7: TechBuddy stránka - ilustace průběhu oprav PC s TechBuddy

Z obrázku je patrný klid a pohoda, jakou uživatel služby TechBuddy pociťuje. Počítač je opraven zcela bez nutnosti zásahu uživatele, který se může věnovat jiným činnostem a samotnou opravu přenechat specialistům. Pro další ilustrační účely jsem do nového designu implementoval i expandovatelné video, které v případě neúspěchu vysvětlení funkcionality pomocí obrázku poslouží jako další demonstrace.

Obrázek 5.8: TechBuddy stránka - jak TechBuddy funguje

Zbylý obsah stránky zůstal neměnný, jelikož nebylo potřeba sdělovat návštěvníkům žádné další informace a také z důvodu zachování konzistentního rozložení elementů.


5.2.2

27

Grafický design

Nový grafický návrh byl vytvořen grafickými experty dle mých návrhů řešení s drobnými změnami v zobrazovaných elementech. Tyto změny jsou podrobněji rozebrány níže. 5.2.2.1

Úvodní stránka

V grafické podobě byly implementovány drobné změny v podobě pozice textů a přidáním ikonky charakteristické pro TechBuddy produkt do dolní části webu.

Obrázek 5.9: TechBuddy stránka - nový design

5.2.2.2

TechBuddy varianty

Subjektivně tuto stránku považuji za graficky zdařilou kromě minoritních rozdílů v podobě absence obličejů u reakcí na TechBuddy a malé rozlišení sloupců s nabízenými variantami.

Obrázek 5.10: TechBuddy stránka - TechBuddy varianty

Nový design úvodní stránky dle mého názoru splňuje cíle vytyčené v kapitole týkající se návrhu nového řešení, konkrétně na první pohled viditelný přehledný a minimalistický design.

28

5.2.2.3


Výčet nabízených služeb

Nový design stránky prezentující konkrétní oblasti podpory TechBuddy koresponduje s vytvořeným návrhem s pod sebou umístěnými, jasně oddělenými částmi s grafickými prvky pomáhajícími tyto sekce odlišit.

Obrázek 5.11: TechBuddy stránka - výčet nabízených služeb

5.2.2.4

Jak TechBuddy funguje

Při implementaci finálního designu došlo k drobné změně v podobě nezařazení mnou navrhnutého horního obrázku ilustrujícího funkcionalitu služby TechBuddy. Došlo k tomu kvůli obavám o nejednoznačnost a případně špatnou interpretaci významu ze strany interakčního a marketingového týmu a také kvůli brandovému omezení a nekonzistenci s brandovými barvami a ilustracemi. Zbytek stránky kopíruje navržený obsah a rozložení elementů.

Obrázek 5.12: TechBuddy stránka - jak TechBuddy funguje

Kapitola 6

Testování Testování finálních verzí stránek probíhá formou A/B testů. A/B test je výzkumná metoda, při které se testují minimálně 2 různé varianty obsahu nebo designu stránek. Jedná se o kvantitativní test, ve kterém se testované varianty nechají zobrazit stejným vzorkům náhodných návštěvníků stránek (v řádu 10 000 až 100 000 návštěvníků) a následně, po skončení testu, se vyhodnocuje úspěšnost každé z testovaných variant. Jelikož se jedná o velké a náhodné testovací vzorky, statisticky se jedná o dvě totožné skupiny se stejným zastoupením obou pohlaví a věkových skupin. [19] Mezi hlavní výhody tohoto testování patří • možnost testovat velmi dramatické změny designu a funkcionality [19] • rychlost jakou test probíhá (za situace dostatečně velkého provozu stránek) [19] • empirické testování na návštěvnících webu [1] Úspěšnost A/B testů je ve firmě AVG definována skrze „Lifetime value“ 1 hodnotu návštěvníka, který navštíví jednotlivé varianty testu. Tato Lifetime value se skládá z • tržeb objednávek produktu objednaných na webu • tržby z konverzí ze zkušebních a zdarma poskytovaných verzí na placené • tržby z AVG internetového vyhledávače Při těchto testech výsledek ovlivňuje velké množství faktorů. Jedná se například o pocit ze stránky, míru dostupných a jasně formulovaných informací, jednoduchost manipulace se stránkou, celkový vyvolaný dojem a pocit z daného produktu. Všechny tyto faktory ovlivňují úspěšnost testu, což se viditelně projeví zakoupením produktu či stáhnutím zkušební verze. [6] 1

jedná se o hypotetickou tržbu, kterou by nový zákazník firmě zaplatil

29

30

KAPITOLA 6. TESTOVÁNÍ

6.1


Testované vzorky čítaly 50 000 náhodných návštěvníků PPC stránky. V testu proti sobě byl testován mnou nově navrhnutý design proti aktuálnímu. Nový design se setkal s nebývalým úspěchem – výsledky takovýchto testů se pohybují v řádech jednotek procent, ať už co do zlepšení nebo zhoršení. Nově vytvořený design měl zvýšení počtu stáhnutých zkušebních verzí o 19% a zvýšení počtu zakoupených verzí o 11%. Díky tomuto výsledku usuzuji, že problémy, které byly na těchto stránkách nalezeny, se vyřešily. Ve společnosti o velikosti firmy AVG se 110 000 000 aktivními zákazníky se zvýšení obratů o 19% projeví velmi vysokými příjmy, což jenom potvrzuje důležitost odvětví interakčního designu a User Experience. Zástupci AVG výše uvedené vnímají jako úspěch a provedené změny byly pozitivně přijaty klíčovými pracovníky z oblasti designu a marketingu.

6.2

TechBuddy stránka

Testované vzorky o velikosti 30 000 návštěvníků TechBuddy stránky.V testu proti sobě byl testován mnou nově navrhnutý design proti aktuálnímu. Nový design zaznamenal zvýšení nákupu služby TechBuddy o velikosti 11%, z čehož usuzuji, že mnou provedená analýza kritických problémů a jejich nový návrh se setkal s úspěchem, a tyto problémy byly odstraněny. Dle mého subjektivního názoru je nový design a obsah optimalizovaný natolik, že se mi subjektivně zdá výše zmíněné zlepšení 11% příliš malé. Po ukončení A/B testů jsem tedy provedl dodatečné semistrukturované interview2 s náhodnými participanty a zjistil jsem, že nový design optimalizoval všechny analyzované problémy, ale nové grafické provedení nepokrývá potřeby uživatelů. Z testů jsem konkrétně zjistil, že lidé zobrazení v hlavním banneru v návštěvnících vzbuzují neutrální pocity na místo pozitivního dojmu. Z reakcí participantů jsem měl subjektivně pocit, že tito zobrazení lidé na participanty nepůsobí dojmem reálných uživatelů, ale pouze jako fotografie dostupné z online obchodů s fotografiemi. Dále jsem pak vypozoroval, že grafické podoba stránky dotázaným participantům připadá pro tento typ stránek běžná, tedy je ničím nezaujala.

Obrázek 6.1: TechBuddy - hlavní banner I přesto, že jsem v dodatečných testech odhalil další případný prostor pro optimalizaci, osobně považuji zlepšení produktivity stránky o 11% za dobrý výsledek. 2

strukturovaný rozhovor obsahující otevřené a doplňující otázky

Kapitola 7

Závěr Cílem této práce byla optimalizace webových stránek z pohledu použitelnosti a User Experience. Myslím si, že tento cíl jsem splnil, o čemž vypovídají i dobré výsledky testování těchto optimalizací. V této práci jsem si osvojil jak postupy testování uživatelského rozhraní a testy s uživateli, tak způsoby návrhu nových, optimalizovaných webových řešení. Tyto zkušenosti vnímám jako velmi přínosné a jelikož se hodlám User Experience odvětví věnovat profesionálně, považuji tyto zkušenosti za neocenitelné. Výsledné optimalizace vytvořené v této práci se setkaly s pozitivními reakcemi jak ze strany zástupců User Experience oddělení, tak ze strany dalších klíčových týmů, které se podílely na jejich implementaci. Jako neméně důležité reakce považuji hodnocení mnou oslovených participantů podílejících se na jiných probíhajících testech, kterým jsem po ukončení optimalizací a vývoje ukázal výsledné optimalizované designy a obsah a provedl jsem s nimi semistrukturované interview. Jejich reakce byly, až na konkrétní připomínky vůči grafické podobě TechBuddy (viz kapitola Testování, str. 30) pozitivní, z čehož usuzuji, že přínos výsledků této práce není přínosný pouze pro mě, ale i pro běžné lidi navštěvující PPC cílové či TechBuddy stránky.

7.1

Další možné pokračování práce

V další fázi optimalizace webových stránek se chci zaměřit na optimalizaci dalších klíčových podstránek a zbytku webového obsahu firmy AVG. Během testování jsem odhalil prostor pro další optimalizace na základě testů s participanty, chci se tedy zaměřit primárně na tyto nově zjištěné problémy a dále postupovat napříč celým webovým portfoliem. Mým dalším cílem je celé webové portfolio firmy AVG, které bude zcela zoptimalizováno z pohledu User Experience a použitelnosti tak, aby byly pokryty všechny případné běžné potřeby jeho návštěvníků.

31

32

KAPITOLA 7. ZÁVĚR

Literatura [1] Useful Usability, Květen 2009. Dostupné z: . [2] Social Proof Is The New Marketing, Listopad 2011. Dostupné z: . [3] How do colors affect purchases?, Srpen 2010. Dostupné z: . [4] A Definition of Interaction Design, Únor 2012. Dostupné z: . [5] Interaction design?, Leden 2009. Dostupné z: . [6] How To Calculate Lifetime Value, Leden 2012. Dostupné z: . [7] User Experience – poznejte své uživatele, Červen 2010. Dostupné z: . [8] Duplicate Content: How to solve the problem, Srpen 2011. Dostupné z: . [9] Balancing fidelity in prototyping, Červenec 2005. Dostupné z: . [10] Usability Testing: What are the pros and cons of using a static high-fidelity prototype in a User Test?, Březen 2011. Dostupné z: . [11] Use a Heat Map to Boost Website Usability!, Leden 2012. Dostupné z: . [12] Heuristic evaluation, Květen 2012. Dostupné z: . [13] Heuristics and heuristic evaluation, Červen 2008. Dostupné z: .

33

34

LITERATURA

[14] Heuristic Evaluation. Dostupné z: . [15] Worst Websites of 2011, Březen 2012. Dostupné z: . [16] ALAN COOPER, D. C. R. R. About Face 3 : The Essentials of Interaction Design. Indianapolis, IN, USA : Wiley Publishing, 3rd edition, Květen 2007. [17] BAECKER, R. M. Human Factors and Typography for More Readable Programs. New York, USA : Addison-Wesley Professional, 1st edition, Leden 1990. [18] CARLSON, A. Why Pictures Speak Louder than Words, Červenec 2009. Dostupné z: . [19] GOWARD, C. A/B Split Testing vs. Multivariate: Pros and Cons, Duben 2011. Dostupné z: . [20] HUNT, B. Current Style in Modern Web Design, Červen 2010. Dostupné z: . [21] INC, I. D. Nielsen’s heuristics. _nielsen-heuristics>.

Dostupné z:
[22] JOHNSON, J. GUI Bloopers 2.0. San Francisco, CA : Elsevier Inc, 2.0 edition, Srpen 2008. [23] KIRŠ, D. Call to action, co to je?, Leden 2011. smartemailing.cz/call-to-action-co-to-je/>.

Dostupné z:
[24] KLIMEŠ, V. Co je User Experience a proč ho potřebujeme?, Leden 2008. Dostupné z: . [25] NIELSEN, J. F-Shaped Pattern For Reading Web Content, Duben 2006. Dostupné z: . [26] NIELSEN, J. Eyetracking Research, Prosinec 2009. Dostupné z: . [27] NIELSEN, J. Testing Expert Users, Březen 2000. Dostupné z: . [28] NIELSEN, J. Usability Engineering. San Francisco : Morgan Kaufmann, 1st edition, 1993. [29] SNELL, S. 25 Beautiful, Minimalistic Website Designs, Leden 2008. Dostupné z: . [30] ZWYRTEK, F. Nielsenovy heuristiky. Dostupné z: .

Příloha A

Seznam použitých zkratek AVG AVG Technologies s.r.o. HCI Human Computer Interface IT Informační technologie PPC Pay Per Click SEO Search Engine Optimization WWW World Wide Web

35

36

PŘÍLOHA A. SEZNAM POUŽITÝCH ZKRATEK

Příloha B

Obsah přiloženého DVD

Obrázek B.1: Obsah přiloženého DVD

37

38

PŘÍLOHA B. OBSAH PŘILOŽENÉHO DVD

Příloha C

Prototyp PPC cílové stránky

Obrázek C.1: PPC cílová stránka - prototyp

39

40

PŘÍLOHA C. PROTOTYP PPC CÍLOVÉ STRÁNKY

Příloha D

Prototyp TechBuddy stránky

Obrázek D.1: TechBuddy stránka - prototyp hlavní stránky

41

42

PŘÍLOHA D. PROTOTYP TECHBUDDY STRÁNKY

Obrázek D.2: TechBuddy stránka - prototyp stránky s nastíněním nabízených služeb

43

Obrázek D.3: TechBuddy stránka - prototyp stránky s výčtem možností nákupu

44


Obrázek D.4: TechBuddy stránka - ilustace průběhu oprav PC s TechBuddy

45

Obrázek D.5: TechBuddy stránka - jak TechBuddy funguje

46


Příloha E

Finální grafická podoba PPC cílové stránky

Obrázek E.1: PPC cílová stránka - nový design

47

48

PŘÍLOHA E. FINÁLNÍ GRAFICKÁ PODOBA PPC CÍLOVÉ STRÁNKY

Příloha F

Finální grafická podoba TechBuddy stránky

Obrázek F.1: TechBuddy stránka - nový design

49

50

PŘÍLOHA F. FINÁLNÍ GRAFICKÁ PODOBA TECHBUDDY STRÁNKY

Obrázek F.2: TechBuddy stránka - výčet nabízených služeb

51

Obrázek F.3: TechBuddy stránka - TechBuddy varianty

52

PŘÍLOHA F. FINÁLNÍ GRAFICKÁ PODOBA TECHBUDDY STRÁNKY

Obrázek F.4: TechBuddy stránka - jak TechBuddy funguje

Optimalizace webu z hlediska použitelnosti a User Experience. Jakub Rokyta

Recommend Documents