Rubrika: Tvorba webu

  • User Experience aneb jak UX vidím já

    User Experience aneb jak UX vidím já

    Web je plný buzzu a tak se ze vÅ¡estranných tvůrců webu stávají specialisté – javascript ninjové, informační architekti, interakční designeÅ™i a ponejvíce asi user experience experti. Proč? Nálepka user experience, ideálnÄ› prezentovaná zkratkou UX, je docela vágní a pÅ™itom se dá docela dobÅ™e prodat.

    Každopádně UX je tady a my, tvůrci webů, musíme dyzajnovat zážitky. Není to žádná prdel. Poslední dobou mě zaujaly 2 příklady dokonale nadesignovaného uživatelského prožitku.

    „Fuj, to nebudu jíst!“

    Každý rodič musí akceptovat fakt, že malé dítě je velice konzervativní co se jídelníčku týká. Nerado přijímá změny, nerado zkouší nové a neznámé chutě. Vystačí si s kuřecím řízkem, dětskou šunkou, suchým rohlíkem, polévkou s písmenky a vším, co obsahuje velké množství bílého cukru. Což je nutričně nic moc. Zelenina je přirozeně jedním z největších nepřítelů většiny rozumných dětí. Jenže, co když se zelenina promění v neskutečnou mořskou příšeru a dítě je vyzváno na nelítostný souboj o přežití? Je to výzva pro dětské ego, které se nechce nechat zahanbit, protože ono zvládne naprosto vše.

    A tak dítě sní papriku s pomazánkou a je pochváleno za to, že zvládlo „ten souboj, který vyžadoval spoustu odvahy a statečnosti“. Vždyť ta chapadla vypadají vážně děsivě, navíc je jich osm! V hlavě dítěte je tak „nechci jíst zeleninu“ nahrazeno „tohle zvládnu“ a to pouhou změnou designu jídla na talíři. Až se bojím domyslet, co svým designem ve skutečnosti sledují firmy jako Apple nebo Facebook. Děsivá chapadla!

    Urinal Fly – aby podlaha nebyla pomočená

    Druhý příklad bude trošku praktičtější. Muži na toaletách stojí u pisoárů před mnoha výzvami. Jsme od přírody soutěživí, takže jednou z disciplín může být „obsáhnout co největší plochu, aby ani kousek porcelánu nezůstal suchý“. Nebezpečnější variantou je pak „co nejblíže okrajům“ a vrcholným uměním je, pokud jste na toaletách sami, močení do pisoáru z co největší dálky. Bohužel důsledky takové soutěživosti zavání, a to mnohdy doslova, nižší úrovní hygieny na pánských veřejných toaletách.

    Čelem se k tomuto problému postavil ekonom Aad Kieboom, který měl za úkol ušetřit peníze letišti Schiphol v Amsterdamu. A tak vymyslel tzv. Urinal Fly. Do pisoárů na pánských záchodech umístil obrázek malé mušky. Výsledek byl ohromující: „pomočení“ podlahy se snížilo o úctyhodných 80 procent. Zlepšení se tak dotklo samotných návštěvníků toalet i provozovatelů, kteří ušetřili výraznou část nákladů na údržbu pánských toalet.

    Muži jsou poměrně jednoduché bytosti, není problém získat si jejich pozornost. O tom by mohly ženy dlouze vyprávět. Stačí zase zacílit na jejich ego a vymyslet mušku, pod kterou si pánové mohou vytvářet další identity. Partnerku či manželku, její milence nebo rodiče, nepříjemného šéfa či kolegu, movitého souseda a tak dál a tak dál. Svou „mušku“ si najde každý velice snadno. Pak stačí zamířit a „mušku“ pořádně pokropit. Prvně nožičky, pak křidélka, tělíčko a nakonec hezky opláchnout hlavičku. Muž pak vychází z toalety, aspoň z té na letišti v Amsterdamu, jako vítěz, s lehkým úsměvem na tváři a dokonale suchou obuví.

    Pouhým umístěním obrázku mušky do pisoáru se, stejně jako v prvním příkladě, radikálně změní mentální model (močícího) uživatele. Zároveň se tak dosáhne dvojího praktického výsledku: čistějších toalet a úspory nákladů.

    Tolik v rychlosti 2 příklady užitečného UX designu. Ať jsou letošní prázdniny rozpálené nejen sluncem, ale i dokonalými zážitky. Ať máme UX, co hrdlo ráčí a rozpočet unese!

  • Jak vytvoÅ™it webové stránky

    Webové stránky jsou dnes nedílnou součástí marketingu každé firmy. První se objevily na internetu v polovině 90. let minulého století. Za tu dobu se ve tvorbě stránek vytvořila řada ověřených standardů, takže dnes už provozovatelé webů nemusí tápat ve tmě a vymýšlet “originální” řešení.

    Do It Yourself nebo najmout odborníka?

    Web si dnes můžete vyrobit – naklikat sami, stačí využít nÄ›který z populárních tzv. website builderů. Na globálním trhu zkuste tÅ™eba Wix nebo Squarespace, v čeÅ¡tinÄ› jsou pak dostupné služby Webnode nebo eStránky, pokud chcete elektronický obchod, tak nejvíce uživatelů pÅ™itáhl Shoptet.

    Všechna tato řešení fungují podobně, většinou je můžete využít zdarma se základní sadou funkčnosti, za plnou verzi služby nebudete platit nic předem, jen průběžně měsíční či roční pronájem. Cena za rok se bude pohybovat v řádu jednotek tisíců korun. Nemusíte se starat o provozní či technické detaily, jen si vesele vytváříte webové stránky nebo vlastní eshop. Řešení jsou snadno přístupná přes webový prohlížeč, vždy ale mají omezení v možnostech přizpůsobení webových stránek vašim představám a potřebám, ať už jde o vzhled nebo funkčnost.

    Odborník – expert na weby či přímo agentura, která se tvorbou webů a eshopu zabývá, pÅ™ichází na Å™adu, když potÅ™ebujete nÄ›co více, než jen klikat web v prohlížeči. Požadujete speciální funkčnost, integraci s vlastními firemními systémy, eshop na míru atd. Cena za vytvoÅ™ení funkčního menšího webu se bude pohybovat v desítkách tisíc korun, za vÄ›tší weby pak dáte pÄ›timístnou sumu. Rozpočty velkých webových projektů se počítají v milionech korun, ale to nebude zÅ™ejmÄ› na začátek náš případ.

    UX, SEO, PPC a další zkratky

    Celá oblast tvorby webu se za poslední 2 dekády promÄ›nila k nepoznání a to hlavnÄ› díky vývoji technologií. StejnÄ› tak šíře znalostí, která je potÅ™ebná k vytvoÅ™ení webu na míru, je dnes velice těžko obsáhnutelná jedním človÄ›kem. Web vám udÄ›lá grafik – bude hezký, ale zÅ™ejmÄ› nebude funkční, programátor vám taky udÄ›lá web – bude technicky propracovaný až velice těžko použitelný.

    Takže si můžete najmout experta na User Experience (UX), který učiní váš web user-friendly, čili uživatelsky příjemným, a funkčním. Můžete také využít odborníky na uživatelský výzkum, kteří vám přesně řeknou, pro koho web máte dělat a jak tyto cílové skupiny efektivně oslovit, tedy aspoň teoreticky na papíře. K webu si pak můžete dokoupit další odborníky, třeba na SEO (optimalizace pro vyhledávače), PPC (internetovou reklamu), sociální sítě a další.

    Pro zadavatele webu bez předchozích zkušeností s tvorbou stránek je, logicky, téměř nemožné se v tomto chaosu vyznat. Je tedy dobré dívat se na reference, ukázky prací a zkušenosti jiných firem s lidmi, kteří vám mohou s webem pomoci a nebudou jen prodávat své služby, bez potřebných zkušeností a znalosti kontextu.

    Cíle webu a cílové skupiny

    Ve všech případech musí mít váš web nějaký cíl. Nejčastěji web představuje daný projekt, výrobek či službu. Na webu pak budete sbírat poptávky, typicky prostřednictvím webového formuláře, který zájemce o vaše produkty či služby vyplní a odešle. Druhou skupinou webů jsou eshopy, kde své produkty rovnou prodáváte. Mimochodem věděli jste, že Česká republika patří k zemím s nejvyšším počtem eshopů na hlavu (více na Ceska-ecommerce.cz)?

    Pokud tedy známe cíl webu, je dobré také vědět, koho chceme oslovit. Musíme si definovat cílové skupiny webu a stránky, resp. obsah webu jim přizpůsobit. Měli bychom znát potřeby a problémy, které naše cílová skupina řeší a se kterými jim umíme pomoci.

    Informační architektura a navigace

    Obsah, který se bude na webu nacházet, musí být organizován. O to by se měla postarat informační architektura, která udává, co vše na webu bude, jak budou mezi sebou informace propojeny, jaké informace budou prioritní a jaké budou plnit spíše podpůrnou úlohu. Dobré je promyslet také tzv. konverzní cesty, tedy pořadí stránek, po kterých by měl uživatel jít, aby provedl cílovou konverzi, např. odeslání poptávkového formuláře nebo nákup zboží. Jednotlivé kroky konverzní cesty pak v reálném chodu ladíme s cílem zvýšit konverzní poměr každého kroku i celé cesty.

    Z návrhu informační architektury pak vychází navigace webu, což je typicky horizontální seznam nejdůležitÄ›jších odkazů na webu umístÄ›ný v hlavičce webu a opakující se ve stejném provedení na vÅ¡ech stránkách webu. Speciální či významovÄ› sekundární menu se pak často umísÅ¥ují do zápatí webu, kde slouží jako záchytný bod pro uživatele, kteří proÅ¡li celou stránkou až úplnÄ› dolů. Hlavní menu nahoÅ™e je zásadní prvek webu, který určuje, jak rychle uživatelé najdou to, co na webu hledají. DobÅ™e navržené menu je výhra – uÅ¡etří uživatelům spoustu času, naopak nepromyÅ¡lené menu pÅ™ispívá k tomu, že uživatelé váš web rychle opustí.

    Obsah – texty a obrázky

    Informace – pÅ™edevším texty na webu musí být hutné, tedy stručné, jasné a výstižné. S tím vám pomůže copywriter, pokud neumíte takové texty napsat sami. KaždopádnÄ› se říká, že “content is king”, takže vlastnímu obsahu webu je vhodné vÄ›novat maximální pozornost. NezkuÅ¡ení tvůrci webu na toto často zapomínají a kladou důraz na zcela nepodstatné vizuální detaily jako napÅ™. vyladÄ›ní odstínů barev nebo zaoblení tlačítek.

    Pokud umisťujete na web obrázky, tak dnes jsou fotky z fotobank dávno out. Prostě nikdo tak bílý chrup nemá a navíc většinou u stolu během pracovní schůzky nesedí zástupci 5 různých etnik. Lepší je ukázat tváře lidí, kteří ve firmě skutečně pracují, případně na webu zobrazit výrobky či produkty tak, aby si o nich potenciální zákazník udělal představu, jak vypadají. Klíčovým slovem jsou zde autenticita, transparentnost a důvěra, kterou se snažíte vyvolat či budovat.

    Technologie aneb na čem webové stránky běží

    Webové stránky či elektronický obchod je vždy jen část Å™eÅ¡ení a to ta, kterou vidí návÅ¡tÄ›vník stránek. Druhá část bývá přístupná provozovateli stránek nebo obchodu, který může po pÅ™ihlášení stránky spravovat v administračním rozhraní. Stránky anebo produkty v případÄ› eshopu může pohodlnÄ› editovat, pÅ™idávat a mazat, bez znalosti programování. Toto vÅ¡e provozovatelům stránek a eshopů poskytuje redakční systém (CMS – Content Management System), který je skrytý za vÄ›tÅ¡inou stránek.

    Nejužívanějším redakčním systémem je WordPress, který je dostupný zdarma a navíc je jednoduše použitelný. Podle tvůrců WordPressu tento systém pohání 34 % webů na globálním internetu, od malých blogů až po velké zpravodajské portály a velké elektronické obchody.

    A opravdu webové stránky na WordPressu lze vytvořit za několik málo hodin, pokud se spokojíte s nějakým z již hotových a zdarma dostupných vzhledů webu. V tomto případě je jedinou investicí váš čas. Na druhou stranu lze na WordPressu postavit sofistikovaný firemní web s mnoha funkcemi a vzhledem i funkcemi na míru dělanými pro konkrétního zákazníka. Bude ale třeba mít v týmu kodéry front-endu a vývojáře back-endu, případně další odborníky, spolu s rozpočtem v řádu desítek u menších webů a až stovek tisíc korun u větších webů.

    Pokud si najmete agenturu, která vám web vytvoří, je možné, že vám postaví web právě na WordPressu nebo jiném zdarma dostupném redakčním systému. V mnoha případech tak lze ušetřit nemálo času, potažmo peněz. Druhou variantou je, že agentura nabízí vlastní redakční systém, na kterém tvoří a provozuje weby svých zákazníků. Pro zákazníka je zde prvotním nákladem pořízení takového redakčního systému, proto je dobré si ověřit, že nabízený systém bude odpovídat všem vašim požadavkům a potřebám.

    Doména a hosting

    Doména, pod kterou vás uživatelé a potenciální zákazníci na internetu najdou, je velmi důležitá. Měla by být jednoduše zapamatovatelná, snadno vyslovitelná a čím kratší, tím lepší. Bohužel atraktivní domény, ať už s populární koncovkou “com” nebo domácí “cz”, jsou už dávno obsazené a koupě takových domén vyjde poměrně draho. Lze se uchýlit k alternativním koncovkám jako třeba “eu” nebo “info”, “biz” a dalším. Cena registrace a roční údržby domény vyjde většinou na pár set korun ročně.

    Hosting je pronájem místa na serveru, kde budou stránky či elektronický obchod umístěné. Je to nezbytnost, za kterou zaplatíte v základní verzi do 1000 Kč za rok. Takový hosting je vhodný pro nenáročné stránky s menší návštěvností. Pro firemní stránky s hojnou návštěvností, pro kritické firemní aplikace nebo elektronický obchod, který musí vydělávat, se hodí vlastní virtuální nebo managed server. Za takový typ hostingu zaplatíte pár set korun až nižší tisíce korun měsíčně.

    Kvalitní hosting na výkonném serveru s dostatečnou konektivitou do internetu je předpokladem toho, že se vaše stránky budou rychle načítat. Mimochodem, rychlost načítání stránek je jedním z důležitých faktorů uživatelské přívětivosti a navíc rychle se načítající stránky mají u vyhledávačů přednost před těmi, které se načítají pomaleji.

    Samostatnou kapitolou jsou pak tzv. cloudové služby, které využijete, pokud provozujete velké a náročné nebo hodně specifické webové projekty. Nejpopulárnější jsou webové služby Amazonu pod značkou Amazon Web Services, cloudové služby Googlu nebo Azure od Microsoftu.

    Tip: změřte si rychlost svého webu:

    Měříme webové stránky

    Web nebo eshop vám jedou a co teď? Je dobré vědět, jestli to funguje. Komplexní zpětnou vazbu vám dá služba Google Analytics, kterou si může zdarma nainstalovat na svůj web každý provozovatel stránek. Dozvíte se následující:

    • počet návÅ¡tÄ›vníků
    • počet shlédnutých stránek
    • tzv. bounce rate – podíl návÅ¡tÄ›v, kdy uživatel odchází po shlédnutí jediné stránky
    • bližší informace o návÅ¡tÄ›vnících (vÄ›k, pohlaví, mobilní přístupy atd.)
    • zdroje návÅ¡tÄ›vnosti – odkud návÅ¡tÄ›vníci na vaÅ¡e stránky pÅ™ichází
    • efektivitu vaÅ¡ich reklamních kampaní
    • chování návÅ¡tÄ›vníků, napÅ™. které stránky navÅ¡tÄ›vují nejčastÄ›ji
    • míru konverzí, napÅ™. počet odeslaných poptávkových formulářů z webu
    • detailní výsledky elektronického obchodu – obrat, počet objednávek, nejoblíbenÄ›jší kategorie, nejprodávanÄ›jší zboží a další

    Užitečnou zpětnou vazbu mohou dát také tzv. heatmapy. Teplotní mapy ukazují, na která místa návštěvníci stránek nejčastěji klikají. Můžete tak například odhalit, které odkazy či stránky, z vašeho pohledu důležité, jsou návštěvníky opomíjené. Anebo naopak zjistíte, že návštěvníci klikají na místa, kde není žádný odkaz či tlačítko, takže takový design bude pro uživatele matoucí či zavádějící. Lze tak odhalit chyby v navigaci, na úvodní či produktové stránce, ve formulářích nebo kdekoliv jinde.

    Na co si dát pozor

    Neexistující zadání

    Zadavatel webu chce web nebo elektronický obchod, ale má spíše mlhavou představu o tom, co požaduje. Nemá potřebné znalosti k tomu, aby sestavil zadání pro funkční a efektivní web. Výsledkem je pak velice často situace, kdy dodavatel web vytvoří, ale funkčností neodpovídá přesně tomu, co zákazník potřebuje.

    S vytvořením webu práce končí

    Ze začátku vypadá vše báječně, web či eshop zákazníka je na světě. Bohužel ze strany zákazníka zde veškeré úsilí končí s domněnkou, že teď už půjde vše samo. Opak je ale pravdou. Web je živý organismus a je potřeba mu věnovat patřičnou péči. Po dokončení webu je dobré pracovat jak s obsahem, tak s funkcemi. Pravidelně aktualizovaný web dává návštěvníkům důvod se na vaše stránky vracet. Pokud jde o funkce webu, ty je dobré rozvíjet na základě zpětné vazby od návštěvníků nebo podle čísel ze statistik návštěvnosti Google Analytics a heatmap. Investovat do webu bez toho, že s ním budete dále pracovat, jsou většinou vyhozené peníze.

    Vendor lock-in

    Jde o situaci, kdy dodavatel webu ovládá svého zákazníka. VÄ›tÅ¡inou prodává vlastní redakční systém na svém hostingu, zákazník nemá vůbec přístup na server, celé Å™eÅ¡ení si de facto jen pronajímá. VeÅ¡kerý obsah je velice těžko exportovatelný – pÅ™enositelný, takže v případÄ› nespokojenosti zákazníka je pro nÄ›j velice obtížné od takového dodavatele odejít.

    Tip na závěr: jak navrhnout a vytvořit webové stránky, aby nad nimi vaši uživatelé neplakali a nerozčilovali se? Podívejte se na seznam článků o User Experience od těch nejpovolanějších.

    Vzděláním informatik, více než 20letou praxí tvůrce webů a webových služeb. Pomůžu vám s následujícím:

    • Specifikace požadavků na tvorbu webu, napÅ™. pro výbÄ›rové řízení
    • Audit stávajících webových stránek, napÅ™. z pohledu použitelnosti (User Experience) nebo rychlosti načítání stránek
    • Optimalizace stránek na základÄ› auditu, cílem napÅ™. zvýšení konverzí nebo rychlejší stránky
    • Kompletní tvorba webových stránek nebo elektronického obchodu (na systému WordPress)