Aké sú webové trendy roku 2018 a na čo by ste sa pri tvorbe či úprave webu mali zamerať? Ako sa vyhnúť zablokovaniu reklám pri tvorbe online reklamných kampaní? Kam smeruje webová analytika a akú úlohu hrajú v UX mikro-interakcie? Spolu s našou UX špecialistkou Zuzkou Konečníkovou sme preskúmali 17 webových trendov a zhrnuli tie najdôležitejšie, ktoré nás ovplyvnia v roku 2018.
Rýchlosť (Web development a UX)
Rýchlosť bude naďalej kraľovať v používateľskom zážitku. Návštevníci budú ochotní ešte menej čakať na načítanie stránok, čo bude špeciálne platiť pre relatívne pomalé mobilné pripojenia. Preto sa do popredia pretláča formát AMP podporovaný iniciatívou Googlu a ďalších internetových gigantov. Tento formát vám okrem zvýšeného zviditeľnenia vo výsledkoch Googlu prinesie aj načítanie webu do cca 1 sekundy. Pozrite si aj ďalšie nové techniky na zrýchlenie webu.
Cesta používateľa naprieč zariadeniami (Webová analytika)
Návštevníci budú pokračovať v prístupe cez viaceré zariadenia na váš web. Z hľadiska web analytiky vám tým skomplikujú vyhodnocovanie dát. Preto odporúčame čím skôr prejsť (ak je to možné) na identifikáciu používateľa naprieč zariadeniami cez user ID alebo iným, vlastným spôsobom. Dokážete sa tak okrem iného vyhnúť obťažovaniu používateľov remarketingovým kampaňami na mobile po tom, ako už dávno nakúpili na desktope.
Univerzálne SVG (Web development a UX)
SVG sa stane novým formátom, ktorý bude preferovaný pre zobrazovanie ikoniek, log či CSS animácií. Dokonca dokáže v niektorých špecifických prípadoch nahradiť fotografie (ako dočasný placeholder) bez toho, aby návštevník registroval rozdiel. Odporúčam si k téme prečítať vysoko oceňovaný článok o SVG placeholderoch.
Zabezpečený web HTTPS (Web development a UX)
Vyše 40 % webov, ktoré sú v návštevnosti v rámci top milióna, beží na šifrovanom protokole HTTPS. Toto číslo bude prudko rásť špecificky v e-commerce, keďže nemať šifrované pripojenie je dnes cesta nízkej dôveryhodnosti a prenechávania zákazníkov konkurencii. Ak ešte stále nemáte na vašom webe SSL certifikát (napr. ten zadarmo cez Let’s Encrypt), nie ste včerajší, ale niekde v praveku internetu. Okrem toho, že predídete odchodu návštevníkov z webu, ktorých vystraší hlásenie prehliadača o nezabezpečenom pripojení, sa vyhnete aj pokutám v rámci zavádzania GDPR pravidiel (máj 2018). Prečítajte si návod ako prejsť na HTTPS bez straty pozícií.
Progresívne webové aplikácie
Progresívne webové aplikácie (Progressive Web Apps) sa snažia simulovať natívne aplikácie na mobilných zariadeniach tak, že používateľ nespozná rozdiel medzi webom a natívnou aplikáciou. Cieľom je umožniť používať webové stránky, z ktorých mnohé už dnes fungujú ako aplikácie (médiá, e-shopy atď.), aj mimo pripojenia k internetu.
Progresívne webové aplikácie tiež eliminujú pomalé načítanie a ich cieľom je vylepšiť celkový používateľský zážitok (UX) z webu. Keďže za nimi stojí opäť (aj) Google, začneme sa tento rok s nimi stretávať. A to bez toho, aby sme museli niečo do mobilu inštalovať.
Automatizácia, integrácia dát a externé API (PPC)
Vzhľadom na množstvo dát, s ktorými denne pracujeme, je pochopiteľné, že automatizácia a prepájanie dát z rôznych zdrojov budú čoraz dôležitejšie. Ešte viac online nástrojov ponúkne API a reklamné systémy tak budeme vedieť naviazať na rôzne dianie v okolí potenciálnych zákazníkov.
Do podmienok zobrazovania reklám sa tak stále viac budú dostávať externality ako počasie, dopravné podmienky, kultúrne dianie či akékoľvek iné faktory, ktoré môžu ovplyvniť nákupné správanie. Pozrite si inšpirácie na prepájanie dát pre Festival Pohoda. Ak chcete pružne reagovať na zmeny podľa vopred určených podmienok, pomôže vám Automatizácia Adwords kampaní.
Push notifikácie a prehliadač reflektujúci stav prostredia (Web development, PPC a UX)
Stále viac webov sa za posledný rok snažilo o vyžiadanie povolení na zasielanie push notifikácií do prehliadačov či na mobilné zariadenia. Rozvoj štandardov pre prehliadače v podobe napojení na interné fungovanie počítača (mobilu, tabletu…) povedie ešte k väčšiemu záujmu o ochranu súkromia.
Vedeli ste napríklad, že už dnes môže prehliadač získať informácie o stave batérie alebo zistiť, či sa používateľ nachádza na ostrom slnku alebo v šere? Tieto aj mnohé ďalšie informácie budú môcť weby (a potenciálne aj reklamné systémy) využívať na špecifickú segmentáciu návštevníkov.
Od praktických (a pragmatických) volieb ako CSS štýl s vysokým kontrastom pre zobrazenie na ostrom slnku či pokojnejšie farby pre prezeranie webu v tme, sa dostaneme aj k invazívnemu využitiu. Pod tým si predstavte zasielanie notifikácií či vyžadovania pozornosti len v čase, keď používateľ netelefonuje alebo nie je v rýchlom pohybe (a teda predpokladáme, že si upozornenie môže pozrieť). Ďalšie využitie záleží najmä na schopnosti pochopiť vplyv podmienok prostredia na správanie návštevníkov. Pre lepšie pochopenie UX tematiky si prečítajte si tieto kvalitné UX zdroje.
Hlasové vyhľadávanie (SEO a UX)
Články ospevujúce hlasové vyhľadávanie sa za posledné roky objavujú pravidelne. Faktom je, že od naozaj schopného hlasového asistenta sme ešte roky ďaleko. Rozoznávanie reči je dnes ešte stále pomerne nepoužiteľné pre ostatné európske jazyky. Namiesto niekoľkonásobného pomalého opakovania do mobilu, čo to vlastne chceme nájsť, je ešte stále praktickejšie hľadanú frázu napísať. Tento rok však môžeme očakávať postupné zlepšovanie aj pre neanglofónnych používateľov. Štatistiky a tipy na hlasové vyhľadávanie spísal kolega Imro Petro.
Mriežka ako layout (Web development)
V rámci vývoja webových stránok sa presadzuje takzvané rozloženie prvkov v mriežke alebo tiež grid layout. Takéto definovanie HTML a štýlovanie CSS umožňuje flexibilnejšie, dvojdimenzionálne rozloženie obsahu na webe oproti súčasným metódam. Ak rozhodujete o novom webe, počítajte už s jeho vytvorením cez grid layout, aby ste ho opäť nemuseli po roku (vo veľkom) prerábať.
Mikrointerakcie (UX)
Mikrointerakcie sú tu s nami už dlhšie, ale nie vždy im pripisujeme primeranú dôležitosť. Spadá do nich akákoľvek aktivita na stránke bez nutnosti prechodu na inú URL či stránku opäť načítať.
Základnými mikrointerakciami je aktivita v rámci formulárov či cez rôzne využitie AJAXu. Cieľom je opäť minimalizovať čas potrebný na zobrazenie niektorých prvkov (napr. po zakliknutí tlačidla) a zlepšenie celkového používateľského zážitku. V prípade ich využitia nezabúdajte na nutnosť primerane nastaviť aj webovú analytiku.
Blokovanie reklamy vs blokovanie ad blockerov (PPC a UX)
Blokovanie reklám je dlhodobo na vzostupe najmä u mladších vekových skupín, ktoré odmietajú nevyžiadanú reklamu. Podľa prieskumu PageFair na Slovensku v roku 2017 až 9 % používateľov nikdy vašu reklamu nevidelo (v ČR 10 %). Toto číslo v roku 2018 porastie, keďže 15. februára začne prehliadač s najväčším podielom na trhu – Google Chrome – tiež automaticky blokovať niektoré reklamy. Časť reklám, ktoré nespĺňajú pravidlá definované Koalíciou za lepšiu reklamu (Coalition for Better Ads), návštevníci neuvidia.
Áno, existuje možnosť ad blocker detegovať a následne zobraziť takzvaný ad wall, ktorý návštevníka ďalej nepustí (využívajú niektoré médiá). Podľa celosvetového výskumu však týmto spôsobom stratíte 74 % návštevníkov, ktorý váš web okamžite opustia. Iba zvyšných 26 % používateľov vypne blokovanie reklamy.
V roku 2018 preto prejdite na reklamné systémy a formáty, ktoré garantujú zobrazovanie bez zablokovania pre väčšinu návštevníkov, a tiež nezabúdajte na optimalizáciu pre vyhľadávače.
Personalizovaný používateľský zážitok na základe aktivít (PPC a UX)
Personalizácia v reklamách je štandardom, ktorý má čoraz väčší presah aj do webových riešení, označovaný ako personalizácia v UX. Obsah na webe je segmentovaný podľa záujmov, veku, pohlavia a geografických parametrov. Hlavným cieľom personalizácie je poskytovanie obsahu a funkcionality, ktoré zodpovedajú špecifickým potrebám používateľov alebo záujmom.
Celý proces zobrazovania špecifického obsahu určitým návštevníkom webu je plne automatizovaný, takže na prvý pohľad nemáte šancu rozpoznať, že ide o personalizovaný web, iba s tým rozdielom, že by ste na ňom mali nájsť pre vás najrelevantnejšie informácie.
Viac info o tejto téme nájdete aj pri googlení výrazu age responsive design, ktorý bol označovaný za trend už aj v roku 2017, no stále sa nezbavil statusu novinky, ktorej potenciál využíva zanedbateľné percento webov.
Z webov sa postupne vytratí hamburger menu (Web development a UX)
Ikonka s 3 horizontálnymi líniami, označovaná ako hamburger menu, je klasickým navigačným prvkom, ktorý by váš nový web v roku 2018 nemal obsahovať. Ikonka hamburger menu nie je dostatočne výpovedná, skrýva obsah, a tak znižuje interakciu s webom. Nahradením hamburger menu navigačnými štítkami (tzv. tag-based menu alebo tag bar) zvýšila aplikácia Spotify kliknutia na kategórie menu o 30 %. Ďalšou možnosťou je jemný redizajn ikonky na tlačidlo s jasným označením „Menu”.
Príklad nahradenia hamburger menu výpovednejším tlačidlom a príklad tag bar menu vo Facebook aplikácii, ktorý sa však hamburger menu nedokázal vzdať úplne a prepašoval ho do tag baru
Život bez hesiel (UX)
Možno máte už aj osobnú skúsenosť s prihlasovaním sa do aplikácie alebo účtu na e-shope, pri ktorom ste boli vyzvaní iba k zadaniu e-mailovej adresy alebo tel. čísla, kam vám bol odoslaný verifikačný kód pre prihlásenie do vášho konta. Celý proces prihlásenia teda prebehol bez potreby zadania hesla.
Každý z nás má nespočetné množstvo kont, od účtu v internetbankingu cez e-mailové kontá, kontá na e-shopoch, hudobných aplikáciách a pod. Výskum z roku 2012 ukázal, že v priemere disponujeme 17 osobnými heslami a 8,5 pracovnými heslami. Zapamätať si všetky prihlasovacie údaje je nemožné, preto môžeme očakávať, že v tomto roku mnohé služby prejdú zo štandardného prihlasovania na iné autentifikačné metódy, ktoré sú rýchlejšie a predovšetkým pohodlnejšie pre používateľov.
Autentifikovať totožnosť je možné biometrickými metódami (napr. zoskenovanie odtlačku prsta alebo sietnice), autentifikácia prostredníctvom sociálnych sietí a iných tretích strán a na záver moja najobľúbenejšia, autentifikácia úplne bez hesla.
Verifikácia totožnosti bez zadávania hesiel na platforme Medium – zadáte iba e-mailovú adresu, kam vám je doručený e-mail, prostredníctvom ktorého sa prihlásite do aplikácie
Na vašom webe môžete zároveň využiť aj automatické prihlasovanie cez služby ako Google a Facebook prostredníctvom OAuth 2.0 autentifikačného protokolu. Samotný protokol neobsahuje identifikačné atribúty používateľa (unikátne ID, e-mail, meno a pod.), bez ktorých napr. nemôžete personalizovať obsah aplikácie, napr. v štýle „Dobrý deň, Peter“. Tieto cenné dáta však môžete získať prepojením OAuth 2.0 s s OpenID Connect API, ktoré používateľa autorizuje.
Zavádzanie návštevníkov webu sa už nenosí (Web development a UX)
Z webov pomaly zmiznú tzv. „Darkpatterns”, ktoré používateľom komplikujú orientáciu na webe, naschvál zvýrazňujú možnosti, ktoré vedú k vyššej sume objednávky v e-shope, ale skrývajú najdôležitejšiu možnosť ako napr. „dokončiť nákup“.
Príklad darkpatternu z dielne Amazon. Všimli ste si možnosť odmietnutia 2-dňovej doby doručenia?
Postoffice naštýloval checkboxy (možnosť voľby viacerých možností) ako radio buttony (možnosť voľby iba 1 možnosti), aby na prvý pohľad používateľov odradil od označenia všetkých ponúkaných položiek.
Nenúťte používateľov do služieb, ktoré nechcú, nepútajte viac pozornosti na up-sell produkty tak, že skomplikujete samotné dokončenie objednávky. Aj na prezentáciu doplnkových produktov je priestor a čas, ale nie za každú cenu. Hrajte fér a jednajte s vašimi zákazníkmi na webe otvorene. Používateľ, ktorého zavádzate darkpatternami, sa na váš web už nemusí vrátiť.
Ilustrácie šité na mieru a odklon od fotiek (UX)
V minulých rokoch dominovali webovému obsahu fotografie. Práca s fotografiou vo webdizajne prerástla až do rozmeru, keď boli celé úvodné obrazovky pokryté iba fotografiami s minimom textu.
Fotografii začína konkurovať ilustrácia, ktorej najväčšia výhoda je výrazne menšia veľkosť oproti fotografiám. Boj s komprimovaním fotografií s cieľom zvýšiť rýchlosť načítavania stránky už nebudete musieť riešiť a Google váš web taktiež ocení za rýchlosť.
Výhodou ilustrácií je, že vedia jasnejšie komunikovať informácie a emócie v rámci komplexných konceptov (prezentácia ako váš produkt funguje alebo pre koho je vaša služba určená) v porovnaní so štylizovanou fotografiou.
Ilustrácie môžete navyše animovať, a tak do webu vniesť viac dynamiky, ktorá nabáda používateľa k väčšej interakcii s obsahom stránky.
Zdroj Inturn.com
Kľúčová rola typografie vo webdizajne (Web development a UX)
Typografia je silný nástroj, vďaka ktorému vieme jasnejšie komunikovať odkaz návštevníkovi webu. Typografia dokáže reprezentovať tón reči, vyvolať žiadané emócie a podporuje vizuálny štýl značky tak, aby bol rozoznateľný naprieč konkurenciou. Aktuálna ponuka webfontov, ktoré nespomaľujú web, je pomerne široká, všetko závisí už len od dizajnérovej šikovnosti, ako font zakomponuje do celkového konceptu webu. V roku 2018 budeme určite svedkami nápaditých a originálnych záhlaví s výrazným a dominantným písmom.
Zdroj Nurturedigital.com