Budoucí trendy v User Experience & Designu #1 — Cesta ke Storytellingu

Článek vychází z přednášky “Trendy v designu a UX” v rámci seriálu Inspirative Thursdays pořádaných Usertechem a Creative Dockem.

Trend je kouzelné slovo. V digitálním nehmatatelném světě, snad více než kde jinde, jde o věc pomíjivou, současně ale také o logický vývoj díky novým technologiím a možnostem. Právě ty pak vytváří trend, či něco trvanlivého.

V průměru trvá tři roky, než se můžeme ohlédnout zpět a poznat, co byl trend a co se používá doteď. Někomu to občas trvá trochu déle. Samotné UX je svou podstatou vyvíjející se trvanlivá hodnota, reagující na chování a chtíče uživatelů v průběhu času. UX je momentálně hodně trendy, ale zkrátka není trend. Bylo tu vždy, jen se na něj z mnoha důvodů kašlalo.

Storytelling

To magické “next big thing” bude spojení mnoha principů a přemýšlení do jednoho celku. Po jednom si všechny nutné komponenty popíšeme v několika dílech. Celému směru jsem začal říkat Storytelling.

Když použijeme alegorii, k většině dnešních uživatelů musíme přistupovat jako k dětem. Když je necháme jen tak být, kdoví, kam až se počtyřech dostanou, dost možná moc blízko zásuvky, nepříjemně zvyšující bounce rate. Ve správně zvolené ohrádce ale budeme mít stálý přehled a můžeme korigovat jejich směr. Musíme je uchopit a vést, jednoduše a názorně ukázat cestu, kterou se mají vydat. Vyprávět příbeh. Statická stránka v této fázi umírá, velký význam tak mají nová zařízení a technologie, schopné upoutat pozornost do té doby nevídaným způsobem.

Když je necháme jen tak být, kdoví, kam až se počtyřech dostanou, dost možná moc blízko zásuvky, nepříjemně zvyšující bounce rate.

a) Mikrointerakce

Může jít o první krok, jak na statickém webu zlepšit prožitek uživatele. Lépe jej nasměrujeme tam, kam jej potřebujeme dostat, za současného přidání více možností. Že si to protiřečí? Jak se objeví níže v textu, uživatel by měl mít vždy jen jednu hlavní volbu. Tato logika u mikrointerakce zůstává, jen napovíme, co se může stát dále, necháme uživatele nahlédnout za roh. Příkladem může být Force Touch na iOS, či více možností likes na Facebooku. Mikrointerakce jsou všude kolem. Jako příklad si můžeme uvést e-shopy, které s takovou možností příliš nepracují. Přímo se nabízí u tlačítka “vložit do košíku” rovnou zobrazit volbu ukončit nákup, či nakupovat dále. Volit si něco takového až přímo v košíku, či na separátní stránce je spousta kliků navíc a odvádí pozornost od toho hlavního — od zboží.

b) Směr celého webu

Zaměřte se na to, jak vypadají stránky, které přes den navštívíte. Cover, how it works, benefits… zní to povědomě? Většina z nich podléhá vyvíjejícímu se trendu, který nás ne a ne opustit, pouze užší carousely nahradily tzv. Hero images. Struktura je stále podobná, obsah vkládáme do pruhů onepager webu. Přitom je taková věc ve spoustě případů naprosto nefunkční, nevíme, co nás na stránce čeká, jaký obsah při scrollingu následuje. Stránka nás tak vede k apatickému prostupu s nulovou atraktivitou a přehlcení obsahem. Kolik stránek si na mobilu jen tak proscrollujete aniž pak víte, co na stránce vůbec bylo? Máme příliš mnoho možností, nad kterými se uživatel musí rozhodovat, což nechceme.

Uživatelé tak špatné flow přijmou možná u Googlu, na vaší stránce ale ne.

Takový web je jakýsi splash — zkuste si vygooglit “Google Docs” — proč po kliku na hned první odkaz nejdu do aplikace, ale zobrazí se mi nic neříkající imagová fotka s přinejmenším tupým headlinem? Dále to není o nic lepší, statické stripes např. s výběrem templatu. Co takhle po kliku na některý z nich pustit uživatele přímo do zvolené předlohy? Zabírají celou obrazovku a nedělají vůbec nic. Uživatelé tak špatné flow přijmou možná u Googlu, na vaší stránce ale ne. Počítejte s “dumb userem”, který však otevírá velké možnosti udělat to přeci jen dost jinak, zvolit si zcela jiný směr.

1) Co člověk na stránce uvidí jako první?

Sebedokonalejší wireframe neovlivní fakt, že jako první vidí uživatel (spíše jeho mozek) barvu a jelikož chceme podvědomě číst, také umístění písma. Pokud nad UX a designem přemýšlíme jako nad celkem, dokážeme pozornost chytře stáhnout tam, kam potřebujeme.

2) Dává hero image smysl?

Hero image je strašně trendy věc. V době mizejících billboardů nesoucí často naprosté klišé slogany jsme tuto úchylku přesunuli na web. Celou obrazovku tak zabere ilustrační obrázek s headlinem, ze kterého se většinou nedozvíme o samotném produktu vůbec nic. Přitom jde o nejvíce lukrativní prostor celého webu, to první, co uživatel uvidí. A my jej celý zaplníme stockovou fotografií a k tomu ještě mnoha možnostmi buttonů. Musíme uživateli napovědět, co ho čeká dále, ať už osekáním možností na minimum, kompozicí či chytrou textací. Řekněme hned na úvod, o co na stránce jde, kam se to vlastně dostal.

V době mizejících billboardů nesoucí často naprosté klišé slogany jsme tuto úchylku přesunuli na web.

3) Když to jde, volte JEDNU možnost

Na co jiného by pak člověk klikal? Na to, na co mu řeknete.

Rychlý příklad jiného směru webu a tří bodů zmíněných výše. Z levého screenu máme silný dojem barvy a typografie, ze dvou slov víme, co firma dělá a máme jeden button, který bude nejspíše obsahovat text ve stylu “podívejte se jak”, či se dále dostaneme scrollem. Screen vpravo je pak klasický hero image web s velmi chytrým sloganem a pozadím, které nám neřekne vůbec nic — dělají židle, stoly, čepy…? K tomu přidáme mnoho možností a uživatel se bude chovat jako utržený ze řetězu.

Popsali jsme si základní sérii prvků Storytellingu. Mikroiterakce jako první vlaštovka něčeho většího a analýza struktury webu, která může zbourat klasický layout běžných stránek. V dalším článku si povíme, jak tyto věci spojit, rozvést je, něco k nim přidat a zjistit, že to dost možná děláme nějakou dobu úplně špatně.

www.usertechnologies.com