VYSOKÁ ŠKOLA HOTELOVÁ V PRAZE 8, SPOL. S R. O.

Transkript

1 VYSOKÁ ŠKOLA HOTELOVÁ V PRAZE 8, SPOL. S R. O. Kateřina Hejtmánková Hodnocení webových stránek hotelů z hlediska obsahové strategie, interakčního designu a vizuální komunikace Bakalářská práce 2014

2 Hodnocení webových stránek hotelů z hlediska obsahové strategie, interakčního designu a vizuální komunikace Bakalářská práce Kateřina Hejtmánková Vysoká škola hotelová v Praze 8, spol. s r. o. Katedra hotelnictví Studijní obor: Hotelnictví Vedoucí bakalářské práce: Ing. Martina Sochůrková Datum odevzdání bakalářské práce: Datum obhajoby bakalářské práce: @post.vsh.cz Praha 2014

3 Bachelor's Dissertation Hotel Websites Evaluation: Content Strategy, Interaction Design and Visual Communication Point of View Kateřina Hejtmánková The Institute of Hospitality Management in Prague 8, Ltd. Department of Hotel Management Major: Hospitality Management Thesis Advisor: Ing. Martina Sochůrková Date of Submission: Date of Thesis Defense: Prague 2014

4 Čestné prohlášení P r o h l a š u j i, že jsem bakalářskou práci na téma Hodnocení webových stránek hotelů z hlediska obsahové strategie, interakčního designu a vizuální komunikace zpracovala samostatně a veškerou použitou literaturu a další podkladové materiály, které jsem použila uvádím v seznamu použitých zdrojů a že svázaná a elektronická podoba práce je shodná. V souladu s 47b zákona č. 552/2005 Sb., o vysokých školách v platném znění souhlasím se zveřejněním své bakalářské práce, a to v nezkrácené formě, v elektronické podobě ve veřejně přístupné databázi Vysoké školy hotelové v Praze 8, spol. s r.o. V Praze dne jméno a příjmení autora

5 Na tomto místě bych chtěla poděkovat vedoucí mé bakalářské práce paní Ing. Martině Sochůrkové za konzultace, připomínky a podnětné návrhy na úpravu práce. Dále také děkuji za ochotu a čas provoznímu manažerovi firmy Bookassist panu Ing. Jaromíru Pažoutovi, který mi poskytl rozhovor, rozeslal hotelům dotazníky a také mi poskytl určité informace z Google Analytics a informace o firmě Bookassist. Samozřejmě bych chtěla poděkovat i hotelu Hotel Suite Home Prague, který souhlasil se zveřejněním některých dat z Google Analytics. V neposlední řadě bych chtěla ještě poděkovat pracovníkům hotelů, kteří si našli čas a vyplnili mi můj dotazník a samozřejmě i účastníkům testování použitelnosti webových stránek, kteří mi velmi pomohli odhalit problémy, které mohou mít klienti hotelu na webových stránkách a dodali mi tak hlavní návrhy na doporučení v závěrečné návrhové části mé práce. Nakonec bych chtěla poděkovat všem svým blízkým, kteří mě podporovali během celého studia a také těm, kteří mi pomohli se závěrečnou korekturou práce.

6 Abstrakt HEJTMÁNKOVÁ, Kateřina. Hodnocení webových stránek hotelů z hlediska obsahové strategie, interakčního designu a vizuální komunikace. [Bakalářská práce] Vysoká škola hotelová. Praha: str. Cílem této práce je shrnout to, čím by se měly firmy či hotely při provozování svých webových stránek zabývat. Práce pojednává o obsahové strategii, interakčním designu a vizuální komunikaci, ale i o internetovém marketingu a dalších aspektech, které s provozováním webových stránek souvisí. Kromě poskytnutí tohoto uceleného pohledu na problematiku webových stránek je cílem i poukázat na vhodně řešené weby a doporučit různé možné úpravy pro tyto stránky. Součástí analytické části práce je rozhovor s odborníkem, vyhodnocení kvalitativního dotazníku pro dané hotely, samotné hodnocení webových stránek podle předem daných kritérií, testování použitelnosti a SWOT analýza hodnocených webů. Návrhová část se zaobírá možnými doporučeními pro opravu či úpravu hodnocených stránek. Pro tuto část bylo nejpřínosnější především testování použitelnosti webových stránek, které poukazuje na některé problémy, se kterými se klienti hotelů na jejich webových stránkách mohou potýkat. Klíčová slova: interakční design, obsahová strategie, vizuální komunikace, webdesign, webové stránky

7 Abstract HEJTMÁNKOVÁ, Kateřina. Hotel Websites Evaluation: Content Strategy, Interaction Design and Visual Communication Point of View. [Bachelor's Dissertation] The Institute of Hospitality Management. Prague: pg. The aim of this thesis is to summarize what should companies or hotels concern on in conducting its website. This thesis is concerned with content strategy, interaction design and visual communication, but also with Internet marketing and other aspects that are with the conduct of websites related. Except for providing this comprehensive view of the issues of websites, the aim is also to point out the appropriate solutions of websites and recommend some possible modifications to these websites. In the part of the analytical section of thesis are an interview with a specialist, appraisal of qualitative questionnaire for the hotels, evaluation of websites according to predetermined criteria, usability testing and SWOT analysis of evaluated websites. Proposal part concerns with possible recommendations for correction or modification of evaluated websites. For this part was the most helpful especially usability testing of websites, which points out some of the problems that the clients of the hotel could contend with. Key words: content strategy, interaction design, visual communication, webdesign, websites

8 Úvod Teoreticko-metodologická část Webové stránky a webdesign Současný stav webových stránek a webdesignu Definice webdesignu Význam webdesignu Zákony a vyhlášky Obsahová strategie Definice obsahové strategie Co je práce obsahového stratéga? Jádro obsahové strategie, obsahová a lidská složka Interakční design Definice interakčního designu Čtyři přístupy k interakčnímu designu Proces interakčního designu Vizuální komunikace Definice vizuální komunikace Analýza vizuální komunikace Layout Barvy Typografie Grafika Fotografie Analytická část Firma Bookassist Zaměření a cíle firmy Produkty Firmy Bookassist Booking Engine Traffic Builder Site Builder Distribution Manager CMS (Content Management System)... 30

9 2.3 Internetový marketing Vyhledávání na internetu SEO On-site optimalizace Off-site optimalizace PageRank Linkbuilding SEM PPC Sociální média Internetové rezervační systémy Google Analytics Data z Google Analytics Rozhovor s odborníkem Dotazník Internetové prohlížeče Hodnocení webových stránek hotelů Obsah Interakční design Vizuální komunikace SWOT analýza hodnocených stránek Návrhová část Savoy Westend Hotel Hotel Paříž Praha Buddha-Bar Hotel Prague Spa & Kur Hotel Harvey Clarion Congress Hotel Prague Závěr Literatura Přílohy... 73

10 Seznam ilustrací, tabulek a grafů Obrázek 1 Webdesign Obrázek 2 Content Strategy Obrázek 3 Design Strategy Obrázek 4 Perzistentní navigace na stránkách hotelu Savoy Westend Obrázek 5 Transfer na webových stránkách hotelu Savoy Westend Obrázek 6 Transfer na webových stránkách hotelu Paříž Obrázek 7 Transfer na webových stránkách hotelu Buddha-Bar Obrázek 8 Transfer na webových stránkách hotelu Clarion Obrázek 9 Rezervace on-line na webových stránkách hotelu Buddha-Bar Obrázek 10 Adresa na mapě na webových stránkách hotelu Paříž Obrázek 11 Barevné schéma hotelu Paříž Obrázek 12 Řádkování a písmo na webových stránkách hotelu Savoy Westend Obrázek 13 Speciální nabídka na webových stránkách hotelu Buddha-Bar Obrázek 14 Navigační nabídka na webových stránkách hotelu Savoy Westend Obrázek 15 Staré datum na webových stránkách hotelu Savoy Westend Obrázek 16 Nevhodně podtržený nadpis na webových stránkách hotelu Paříž Obrázek 17 Odkazy na sociální sítě a blog na webových stránkách hotelu Paříž Obrázek 18 Nabídka navigačního tlačítka Úvod na webových stránkách hotelu Paříž 62 Obrázek 19 Odkaz na kontakty na webové stránce Vítejte hotelu Paříž Obrázek 20 Rezervace na webových stránkách Spa & Kur Hotel Harvey Obrázek 21 Text na webových stránkách Spa & Kur Hotel Harvey Obrázek 22 Navigační nabídka na webových stránkách Spa & Kur Hotel Harvey Obrázek 23 Patkové písmo v navigaci na webových stránkách hotelu Clarion Obrázek 24 Body zájmu na webových stránkách hotelu Clarion Obrázek 25 Úvodní stránka hotelu Savoy Westend Obrázek 26 Úvodní stránka hotelu Paříž Obrázek 27 Úvodní stránka hotelu Buddha-Bar Obrázek 28 Úvodní stránka Spa & Kur Hotel Harvey Obrázek 29 Úvodní stránka Clarion Congress Hotel Prague Obrázek 30 Schéma prohlížení internetových stránek... 80

11 Tabulka 1 Hodnocení webových stránek hotelů: úvod Tabulka 2 Hodnocení webových stránek hotelů: obsah Tabulka 3 Hodnocení webových stránek hotelů: interakční design Tabulka 4 Hodnocení webových stránek hotelů: vizuální komunikace Tabulka 5 SWOT analýza hodnocených webových stránek Graf 1 Long tail Graf 2 Long tail Graf 3 Oblíbenost prohlížečů ve světě a v České republice Graf 4 Wizard Score hlavních klíčových slov hotelů Savoy Westend, Paříž, Buddha- Bar, Spa & Kur Hotel Harvey a Clarion Congress Hotel... 46

12 Seznam zkratek, symbolů a vysvětlivek ACD CMS CMYK ČR GD GIF GTPR HTML IRS JPEG OTA PDF PHP PMS PNG PPC Q&A RGB RSS SD SEM SEO SERP SMS SWOT TCP UCD URL W3C WWW Activity-Centered Design Content Management System Cyan Magenta Yellow black Česká republika Genius Design Graphics Interchange Format Google Toolbar PageRank HyperText Markup Language Internet Reservation System formát pro kompresi obrázků (konsorcia Joint Photographic Experts Group) Online Travel Agency Portable Document Format PHP: Hypertext Preprocessor Property Management Systems Portable Network Graphics Pay-Per-Click Questions and Answers Red Green Blue Really Simple Syndication Systems Design Search Engine Marketing Search Engine Optimization Search Engine Results Page Short Message Service Strengths Weaknesses Opportunities Threats Transmission Control Protocol User-Centered Design Uniform Resource Locator World Wide Web Consortium World Wide Web

13 Úvod Webové stránky jsou často první zkušeností zákazníků [38] V 70. letech 20. století, v době, kdy Vint Cerf a Robert Kahn pracovali na síťovém protokolu TCP nepředpokládali 1, že se Internet takto rozroste a stane se běžnou součástí životů obyčejných lidí, tak jak je tomu dnes [36]. Až právě díky globálnímu hypertextovému systému nazvanému WWW (World Wide Web) a vzniku prvních prohlížečů bylo na místě rozšíření internetu i do běžných domácností. Dnes se ve vyspělých společnostech stal web nepostradatelnou součástí života většiny lidí. Každý kdo má přístup k síti, tedy internetu, dnes může na webu hledat a stahovat informace, komunikovat s lidmi či dokonce i nakupovat. Během jedné minuty je vytvořeno 571 nových webových stránek [12]. Dnes je tolik možností, že za celý svůj život nejsme schopni všechny informace shlédnout, takže si samozřejmě vybíráme. Když webové stránce nerozumíme a valí se na nás mnoho informací, neztrácíme s ní čas a raději se kliknutím na tlačítko zpět vrátíme a hledáme něco vhodnějšího. Podívejme se na problém z druhé strany, pokud my jsme zadavatelé či tvůrci webových stránek naší firmy, jak zjistíme, jestli jsou naše stránky uživatelsky přívětivé? Jsme vtaženi do celého projektu, že nám kolikrát ani nedochází, že lidé si nebudou číst naší domovskou stránku od začátku do konce. Většinou dojde k tomu, že po prvních sekundách zkoumání navigační nabídky okamžitě přejdou na jinou. Když pak nenajdou to, co hledají, vrátí se zpět a kliknou na něco jiného. V naší firmě je možná jasné co jaký pojem znamená, ale dává i uživateli náš název navigačního tlačítka smysl? Webové stránky jsou (nebo by dnes měly být) jednou z nejpodstatnějších součástí našeho marketingu. Nejedná se jen o dobrou reklamu, ale dobré webové stránky nám zprostředkovávají i naše prodejní místo. Základním důvodem, proč si zřizujeme webové stránky, je zaujmout a přitáhnout potencionálního zákazníka, přesvědčit ho, aby si koupil náš produkt či službu. Nicméně na vytvoření a údržbu dobrých webových stránek by nám nemělo stačit, že nám někdo napíše HTML kód, ale měli bychom myslet i na další aspekty, které pomohou vylepšit naše webové stránky a tím prodat náš produkt či službu. 1 Při vytváření protokolu TCP počítali s tím, že poskytne adresy jen zařízením. 13

14 Cílem mé práce je především poskytnout ucelený pohled na problematiku webových stránek, ukázat, jak by mohly některé hotely své stránky vylepšit, poukázat na vhodně řešené stránky a doporučit jiná a lepší řešení všem, kteří se o své stránky zajímají. V první teoreticko-metodologické části své práce se zaměřuji na vysvětlení hlavních pojmů, co vše zahrnuje obsahová strategie, interakční design a vizuální komunikace. Tyto disciplíny pomáhají porozumět problematice webových stránek v širším kontextu. Obsahová strategie je disciplína, která se zaměřuje na to, jaký obsah bychom měli použít, aby korespondoval s našimi firemními cíli a zároveň s potřebami uživatelů [17]. Interakční design je disciplína zabývající se především funkcemi a možnostmi, které produkt či služba nabízí a zda jsou tyto věci pro uživatele pochopitelné a intuitivní [4]. Vizuální komunikace je disciplína zabývající se prezentací určité myšlenky pomocí těchto elementů: layoutu, barev, typografie, grafiky a fotografií [62]. Jedná se asi o nejvíce přeceňovanou disciplínu u tvorby webových stránek, nicméně vzhled stránek je velmi důležitý, aby firma vypadala profesionálně a důvěryhodně. V druhé analytické části představuji firmu Bookassist, která poskytuje hotelům různé produkty, od zavedení menších změn, jako přímého prodeje rezervací na webových stránkách hotelů až po vytvoření zcela nových webových stránek pro hotely na zakázku. Dále uvádím, jaké jsou možnosti prakticky realizovat marketing na internetu a jak získávat zajímavé informace pro firmu, například jaké údaje můžeme získat z Google Analytics. Poté zde uvádím můj rozhovor s odborníkem, dotazníky pro hotely, vlastní hodnocení vybraných webových stránek hotelů (včetně testování použitelnosti s uživateli) a souhrnnou analýzu SWOT pro hodnocené webové stránky. V třetí návrhové části uvádím některá nedopatření či sporné záležitosti, kterých jsem si na hodnocených stránkách všimla a svá doporučení pro vylepšení obsahové strategie, interakčního designu či vizuální komunikace pro tyto konkrétní stránky. 14

15 1 Teoreticko-metodologická část V úvodní teoreticko-metodologické části se zabývám webovými stránkami a webdesignem všeobecně, poté zde probírám různé definice a přístupy k obsahové strategii, interakčnímu designu a vizuální komunikaci. 1.1 Webové stránky a webdesign V této kapitole seznámím čtenáře s webdesignem a webovými stránkami obecně uvádím zde současný stav webových stránek a webdesignu, jeho definici, význam a zákony a vyhlášky, které se webových stránek týkají. Místo pojmu webové stránky je také možné používat termín web. Pokud použijeme pojem webová stránka v jednotném čísle, myslíme tím pouze jednu stránku z daného webu. Ve své práci častěji než web používám termín (v množném čísle) webové stránky, čímž samozřejmě míním celý web v rámci dané domény Současný stav webových stránek a webdesignu Webdesign webových stránek je velmi obsáhlá disciplína a když budu citovat Jana Řezáče [50] z jeho přednášky Úvod do webdesignu, tak největším problémem je, že: neexistuje žádný formální systém, který by webdesignéry, k tomu aby dělali weby, vzdělal. Tedy alespoň ne tady u nás v České republice. Dokonce není v českém jazyce ani žádná odborná kniha, která by tuto disciplínu kompletně pokryla. Jan Řezáč chápe tvorbu webových stránek, resp. webdesign jako kombinaci obsahové strategie, interakčního designu a vizuální komunikace [50]. V této první části své práce se zabývám vysvětlením, co pojmy obsahová strategie, interakční design a vizuální komunikace znamenají a jaký mají význam pro hotel či jakoukoli jinou firmu. Přestože píši o každé této disciplíně odděleně, ve skutečnosti se tyto složky spolu prolínají (viz obr. 1), tudíž se možná místy i opakuji. 15

16 Obrázek 1 Webdesign Zdroj: vlastní zpracování Definice webdesignu Není mnoho pramenů, které by uváděly nějakou jasnou definici webdesignu. Většina z nich uvádí, že webdesign lze definovat různě. Já se tedy budu držet zaměření své práce a definuji webdesign jako disciplínu tvořící webové stránky prostřednictvím obsahové strategie, interakčního designu a vizuální komunikace Význam webdesignu Význam webdesignu je zakotven v každé jeho části. Bez obsahové strategie by nebyl vytvořen vhodný obsah, kvůli kterému klienti na stránky chodí především, nebo by mohl být obsah špatně pochopen (v nesouladu s firemními cíli). Bez interakčního designu by stránky nefungovaly tak, jak mají a těžce by se na nich uživatel zorientoval. Kdybychom opomněli důležitost vizuální komunikace, stránky by vypadaly neprofesionálně a zanechaly by na uživateli, ať už vědomě či podvědomě, špatný dojem a nepůsobily by důvěryhodně Zákony a vyhlášky Celý výčet zákonů a vyhlášek týkající se webových stránek, ať už přímo či nepřímo (týkající se veřejných médií obecně), je uveden v příloze číslo jedna. Zde uvedu jenom ty nejvýznamnější. Důležitá je vyhláška o přístupnosti č. 64/2008 Sb., o formě uveřejňování informací souvisejících s výkonem veřejné správy prostřednictvím webových stránek pro osoby se zdravotním postižením. Přestože hotely nepatří do veřejné správy, a stránky vytvářené 16

17 přístupné pro všechny uživatele mohou být někdy v rozporu se záměry grafických designérů, kteří se spíše snaží o líbivost, měli bychom se při tvorbě webových stránek zaměřit i na přístupnost. Na webových stránkách Ministerstva vnitra nalezneme pokyny, jak můžeme dosáhnout lepší přístupnosti našich stránek. Například bychom měli dodržovat správnou hierarchii nadpisů ve zdrojovém kódu, každé pole formuláře opatřit příslušnými identifikátory, stránky by mělo být možné ovládat pouze s klávesnicí a uživatel by měl mít možnost nastavit si vyšší kontrast barev či velikost stránky [37]. 1.2 Obsahová strategie V této kapitole uvádím různé definice obsahové strategie, čím se takový obsahový stratég zabývá a rozdělení obsahové strategie na jeho jádro, obsahovou a lidskou složku podle uznávaných autorek, zabývajících se obsahovou strategií, Kristiny Halvorson a Melissy Rach Definice obsahové strategie Richard Sheffield ve své knize The Web Content Strategist s Bible [55] definuje obsahovou strategii jako opakující se systém, který vymezuje veškerý redakční vývoj obsahu pro plán vývoje webu, od počátečního úkolu jako je analýza a klasifikace čtenářů do úplně posledního úkolu, jako je plánování neustálé údržby obsahu poté, co projekt uvedeme na trh. 2 Podle knihy Content Strategy at Work od spisovatelky Margot Bloomstein je obsahová strategie vytváření takového obsahu, který zohledňuje shromáždění, organizaci a styl psaní obsahu. Jsou to plány pro tvorbu, dodávku a správu obsahu [5]. Jan Ambrož ve své diplomové práci [2] definuje obsah jako cokoli, co je možné publikovat na webových stránkách. Může jít o klasický text s různorodým formátováním, vlastnostmi a funkcemi, ale třeba také o audiovizuální, interaktivní a automatizovaný materiál: fotografie, video, podcasty, prezentace, animace, dokumenty, programy a aplikace, odkazy, formuláře, tlačítka, chybové hlášky, výsledky fulltextového vyhledávače, RSS kanály, metadata, y. Nejedná se zde tedy jen o texty, ale o veškerý obsah, tím pádem obsahová strategie souvisí i s vizuální komunikací a interakčním designem. 2 Content strategy is a repeatable system that defines the entire editorial content development process for a website development project, from very early tasks such as analyzing and classifying readers to the very last tasks, such as planning for the ongoing content maintenance after the project launches. 17

18 1.2.2 Co je práce obsahového stratéga? V knize Managing Enterprise Content: A Unified Content Strategy, Ann Rockley a Charles Cooper popisují, jak je důležitý sjednocený obsah. Velký důraz kladou na problém, který nastává, když spolu různá oddělení v organizaci dostatečně nekomunikují a nespolupracují spolu, což má za následek větší náklady na obsah, množení chyb a celkově horší kvalitu a produktivitu obsahu. Proto by měl obsahový stratég znát především cíle firmy (nebo hotelu) a nabízený produkt či službu. Ze začátku by si měl utřídit a zanalyzovat veškerý současný obsah, určit požadavky na obsah budoucí a vytvořit obsahovou strategii, která je založena jak na cílích firmy, tak na potřebách uživatelů [47]. Při své práci obsahový stratég spolupracuje s vedením, marketingovým oddělením, web editorem, administrátory databází a s odborníky na informační architekturu, SEO, sociální média a metadata. V neposlední řadě by měl určitě zajistit i plán pro údržbu a vedení obsahu [17]. Obsah můžeme získat z různých zdrojů, asi nejlepší zato nejnákladnější je náš vlastní, nicméně můžeme využít i outsourcing a nechat si obsah vytvořit a spravovat jinou firmou Jádro obsahové strategie, obsahová a lidská složka Kristina Halvorson a Melissa Rach ve své knize hovoří o tom, že obsahovou strategii vytváří jádro obsahové strategie, obsahová složka a lidská složka (viz obr. 2). Obsahová složka nás informuje, jaký obsah bude a jak bude strukturován. Skládá se ze substance a struktury. Lidská složka nás informuje, jak nám lidé pomohou řídit obsahový životní cyklus. Skládá se z workflow a řízení [17]. 18

19 Obrázek 2 Content Strategy Copyright 2010 Brian Traffic Zdroj: HALVORSON, Kristina a Melissa RACH. Content strategy for the Web. 2nd ed. Berkeley, CA: New Riders, c2012, str. 29. xviii, 197 p. ISBN Obrázek dostupný také z: < Jádro obsahové strategie propojuje všechny další součásti obsahové strategie dohromady a mělo by nás směrovat k našim (s obsahem souvisejícím) dlouhodobým cílům a zajistit, aby všechny naše aktivity byly směrovány stejným směrem [17]. U substance nás zajímá, jaký obsah potřebujeme a proč. Zaměříme se na naše cílové skupiny, specifikujeme je a hlavně definujeme, proč jsou pro naši organizaci a naše cíle důležité. Také bychom si měli ujasnit, jaké máme priority tedy ohodnotit skupiny podle toho, kdo je pro nás nejdůležitější. Dále je velmi důležité ujasnit si to, co chceme uživatelům sdělit. U každého typu obsahu bychom měli mít jasno v tom, jaký je náš záměr. Například, jestli chceme uživatele přesvědčit, informovat, něco prokázat, naučit nebo jen pobavit [17]. U struktury musíme vymyslet, jaký obsah je prioritní, jak ho uspořádat, v jakém formátu a kde ho vystavit. Potřebujeme rozhodnout, kde bude náš obsah dostupný. Měli bychom vybrat kanál, skrz který budeme komunikovat s našimi uživateli, dále platformu, tedy technologii, kterou použijeme jako základ pro další vývoj obsahu. Dále vybíráme vhodný formát, ve kterém budeme informace prezentovat například text, obrázek či video. Při výběru z těchto možností bychom se měli vždy ohlížet na naše cíle, potřeby našich uživatelů a v neposlední řadě samozřejmě i na náš rozpočet [17]. 19

20 Například u navigace je velmi důležité, abychom zvolili vhodnou terminologii, aby pojmenování odkazů bylo pro naše uživatele jasné a intuitivní. Lidskou složku obsahové strategie tvoří workflow a řízení. Workflow se zabývá tím, jaké procesy, nástroje a lidské zdroje potřebujeme, zatímco do řízení zahrnujeme způsob, kterým jsou prováděna klíčová rozhodnutí o obsahu a rozhodnutí o tom, jak se provádějí změny [17]. 1.3 Interakční design V kapitole o interakčním designu uvádím různé definice, dále čtyři přístupy k interakčnímu designu podle Dana Saffera a dva různé procesy, ze kterých se, podle daných autorů, interakční design skládá Definice interakčního designu Podle knihy Design for New Media: Interaction Design for Multimedia and the Web od Lona Barfielda [4] je interakční design o zaměření pozornosti na systém interaktivních aspektů designu, tak že uživatelé nejsou zmatení z toho, co se stane. 3 Ve své knize se zabývá tím, jak může být pro uživatele nesrozumitelný a nejasný design, který byl vytvořen. Uvádí zde příklad na designu budíku, u kterého si polovina uživatelů myslí, že určitý stav, ve kterém má postavička zavřené oči znamená, že je aktivován, zatímco druhá polovina si myslí opak. V souvislosti s webovými stránkami mluvíme o fungujícím interakčním designu tehdy, pokud uživatel, již od prvního pohledu na webovou stránku není zmaten, ví, na co zde může kliknout (resp. kde se nacházejí hypertextové odkazy) a má představu, k jakým informacím či funkcím se může skrz jednotlivé odkazy dostat. Kolektiv autorů Yvonne Rogers, Helen Sharp a Jenny Preece ve své knize Interaction Design: Beyond Human Computer Interaction [48] definují interakční design jako: navrhování interaktivních produktů pro podporu způsobů, kterými lidé komunikují a vzájemně působí v jejich každodenních, pracovních životech. 4 Podle Dana Saffera existují na interakční design tři různé pohledy: na technologii zaměřený pohled, který se zabývá hlavně vývojem technologií, které jsou užitečné a dobře 3 Interaction design is about paying good attention to the design of the interactive aspects of a system so that users are not left confused about what is going on. 4 By interaction design, we mean designing interactive products to support the way people communicate and interact in their everyday and working lives. 20

21 se používají; behavioristický pohled, který je zaměřen na funkčnost a zpětnou vazbu jak se produkty chovají a jak poskytují zpětnou vazbu (založené na tom co s nimi lidé dělají); sociální pohled, který se zabývá usnadnění komunikace mezi lidmi skrz produkty [51] Čtyři přístupy k interakčnímu designu Dan Saffer ve své knize Designing for Interaction zmiňuje čtyři přístupy k interakčnímu designu: User-Centered Design, Activity-Centred Design, Systems Design a Genius Design [51]: User-Centered Design (UCD) je, jak již název napovídá, zaměřen především na uživatele. Designéři s tímto přístupem zapojují uživatele do procesu vytváření nového produktu již od samého začátku a řídí se potřebami, cíli a preferencemi uživatelů. Activity-Centered Design (ACD) je zaměřen na činnost. Nástroje, které činnost umožňují, jsou pak tím hlavním v procesu tvoření nového designu. Tento design umožňuje uživateli uskutečnit nějakou činnost, nikoli nutně dosáhnout cíle. Příkladem ACD mohou být housle, na které může člověk hrát, nicméně z hlediska UCD je to pro běžného člověka obtížné (uživatelsky nepřívětivé). Systems Design (SD) používá k řešení designu určité zavedené uspořádání svých složek. Systems Design je strukturovaný a hodí se především pro řešení komplexních problémů. Příkladem tohoto designu je systém topení, který řeší různé stavy a v závislosti na změnách, resp. teplotě v místnosti je schopen reagovat, tedy přitopit či topení vypnout. Genius Design (GD) využívá pro vytváření nového produktu výhradně zkušeností a nápadů samotného designéra. V tomto přístupu ví designér lépe, co by uživatel mohl chtít. Uživatel se svou zpětnou vazbou a názorem na nový produkt přichází až na konci procesu vytváření produktu. Příkladem toho přístupu je ipod navržený designérem Jonathanem Ivem Proces interakčního designu Podle knihy Dana Saffera se proces interakčního designu skládá z (viz obr. 3): 1. Strategie 2. Výzkumu a pozorování 3. Analýzy a strukturovaných přehledů či nálezů 4. Nápadů a principů 5. Vylepšení 6. Vytváření prototypů, testování a vývoj 21

22 Obrázek 3 Design Strategy Zdroj: SAFFER, Dan. Designing for interaction: creating innovative applications and devices. 2nd ed. Berkeley, CA: New Riders, 2010, str. 74. xv, 223 p. Voices that matter. ISBN Obrázek dostupný také z: < Strategie se zabývá zjištěním vhodných cílů firmy tak, aby se její potřeby střetávaly s potřebami klientů. U výzkumu a pozorování můžeme využít různých metod, abychom zjistili, jací jsou naši potenciální či stávající zákazníci. Abychom mohli provést analýzu, musíme si data nejdříve vhodně utřídit a vytvořit si určitý systém. Ze získaných dat si utvoříme různé mapy a diagramy, které nám pomohou v lepším rozhodování. Poté, když máme jasno v tom jaké je zadání a co všechno od produktu čekáme, tak v další fázi nápadů a principů můžeme využít brainstormingu, abychom vytvořili co nejvíce konceptů, ze kterých si pak vybereme těch pár, které dále vylepšujeme. V závěrečné fázi vytvoříme několik prototypů produktů, které otestujeme a na základě zpětné vazby vyvíjíme dál podle potřeby [51]. Podle autorů knihy Interaction Design: Beyond Human Computer Interaction [48] se proces interakčního designu skládá ze čtyř základních aktivit: 1. Určení požadavků či potřeb 2. Navržení alternativ 3. Vytváření prototypů 4. Hodnocení. 5 5 The process of interaction design involves four basic activities: 22

23 Tento proces funguje na stejných principech jako předchozí proces, první bod určení požadavků a potřeb můžeme srovnat s prvními třemi body podle Dana Saffera. Druhý bod, týkající se navržení alternativ není nic jiného než využití brainstormingu při hledání všech možných nápadů. Vytváření prototypů zahrnují oba principy a hodnocení reprezentuje zpětnou vazbu od uživatelů při testování. Zde si můžeme všimnout, že budování obsahové strategie a proces interakčního designu spolu úzce souvisí a nemůžeme tyto disciplíny od sebe oddělit. Hlavní je především spolupráce managementu a všech zaměstnanců, kteří jsou do tvorby webových stránek zainteresováni. 1.4 Vizuální komunikace V této kapitole definuji vizuální komunikaci, dále její analýzu podle Paula Martina Lestera a nakonec zde rozeberu jednotlivé elementy vizuální komunikace Definice vizuální komunikace Na webových stránkách reklamní agentury Bestof.cz [62] zabývající se grafikou a tvorbou webových stránek je běžná komunikace definovaná jako výměna informací, respektive myšlenek. Co se týká vizuální komunikace tak v prostředí internetu předáváme návštěvníkům také myšlenku. K prezentaci této myšlenky používáme layout, barvy, typografii, grafiku a fotografie. Tato prezentace může mít mnoho podob a to jak příjemných a účelných, tak nepříjemných a nefunkčních. Proto je důležité pochopení a ovládnutí všech těchto elementů. Právě těmito pěti elementy: layoutem, barvami, typografií, grafikou a fotografií se budeme následně zabývat podrobněji Analýza vizuální komunikace Paul Martin Lester [33] ve své knize Visual Communication: Images with Messages zdůrazňuje šest perspektiv, díky kterým analyzujeme obrazy: 1. Osobní: základní reakce na práci založená na subjektivních názorech. 2. Historická: určení důležitosti práce založené na sdělovacích prostředcích v čase. 1. Establishing requirements 2. Designing alternatives 3. Prototyping 4. Evaluating. 23