Jak udržet krok s trendy v roce 2017 #aeasf

San Francisco city skyline with urban architectures at night panorama.

V listopadu 2016 jsem od firmy dostal super šanci. Mohl jsem se podívat pracovně za velkou louži. Konkrétně do San Francisca na konferenci An Event Apart, pořádanou světoznámým blogem o webových trendech A List Apart.

A pak přišel čas na to, napsat o tom, co jsem se na konferenci dozvěděl. Mezitím, co jsem kvůli jiným pracovním povinnostem napsání článku odkládal, uvědomil jsem si, že podle toho, co vidím okolo sebe, konference perfektně předpověděla trendy pro rok 2017. Tenhle článek tudíž bude nejen souhrnem toho, co v San Franciscu zaznělo, ale především nějakou inspirací pro vás, čeho se v tomhle roce držet a na co si dát pozor, abyste drželi krok s ostatními. Číst dále

Testujete? Zkuste to v terénu, dozvíte se mnohem víc

photo 2-2

S připravovaným redesignem Prace.cz potřebujeme získat od uživatelů co nejvíce podnětů,  jak by budoucí podoba měla vypadat. K tomu nám, kromě standardního testování v LMC, slouží i testování v terénu.

Osobně jsem k němu byl zpočátku velmi skeptický. Říkal jsem si, že když nemáte notebook, online přenos, ani oční kameru, nebude takové testování moc přínosné. Pak jsme na první testování s kolegy vyjeli a od té doby ho považuji v ranné fázi vývoje za přínosnější, než testování v LMC.

Proč?

Pražští uživatelé jsou jiní

Pokud si zvete uživatele na testování v Praze, pravděpodobně budou také z Prahy. A chování pražských uživatelů je dost specifické, zejména pokud jde o potřeby při hledání práce.

V Praze jsme několikrát testovali koncepty nového vyhledávání. A pořád jsme nebyli přesvědčeni o tom, že to, co máme před sebou na monitorech, je ono. Pak nám stačilo pár hodin v Děčíně. Povídali jsme si s lidmi o tom, jak hledají práci, třeba v místech, kde je jí málo. A když jsme odjížděli domů, už jsme měli jasno.
Od té doby prochází uživatelé při testování naším připravovaným vyhledáváním jako nůž máslem.

Vyslechnete si spoustu životních příběhů

Během kampaně, při které jsme vyjeli za lidmi po celé zemi a rozdávali jim naše noviny s nabídkami práce, jsem měl možnost setkat se s mnoha lidmi, kteří mi vyprávěli svůj životní příběh. O tom, jak přišli o práci. O tom, jak nemohou sehnat novou. O tom, jak si vydělávají, kde se dá. Po takové zkušenosti se budete na svou práci koukat trochu jinýma očima.

Paper prototyping funguje

Když ukážete lidem papírový prototyp, chvilku na vás budou koukat nedůvěřivě. Stačí jim ale vysvětlit, že takhle to potom bude vypadat i na počítači.

Chcete otestovat dva různé způsoby výběru z nějakých možností? Stačí mít obě dvě varianty připravené na dvou různých papírech. Podle rozhovoru většinou poznáte, kterou variantu uživatelé očekávají. A tu jim pak můžete předložit. Dle mých zkušeností na konci můžete tu druhou variantu vyhodit :-)

Testování v terénu určitě není samospásné. V pozdějších fázích vývoje ho budete muset zcela jistě doplnit i klasickým testováním. Nicméně pro „výkop“ vám poslouží velmi dobře.

Oční kamera. Váš další smysl při uživatelském testování.

An-Eye

Nikdy jsem nebyl velkým zastáncem oční kamery. Vždycky mi přišlo, že oční kamera maskuje neschopnost designéra dobře naslouchat a pozorovat, co člověk na stránkách dělá.

Postupem času se ale eyetrackingové “železo” radikálně zlevnilo a v tu chvíli mi začalo dávat smysl začít ho používat jako doplněk. Jako další smysl pro designéra.

U nás v LMC při testování:
Pozorujeme, jak lidé pohybují myší a na co klikají.
Díváme se, jak se u toho tváří.
Zjišťujeme, jak obtížné je pro lidi vykonat na stránce nějakou akci.
Nebo jak těžké je nalézt určitou informaci.
Posloucháme, co nám lidé říkají.
A teď dokonce víme, na co se dívají 😉

Každá z těchto věcí sama o sobě je jen dílek skládačky. Nikdy nevíte, pomocí kterého “smyslu” zjistíte podstatnou informaci nebo chybu vašeho návrhu. U nás takto celé testování přenášíme online přímo na stůl designérovi, který v reálném čase využívá všechny tyto “smysly”. Vidí, jak člověk pracuje se stránkou, jak se u toho tváří, co při tom povídá a co na stránce poutá pozornost jeho očí.

Vybavení, které používáme:
http://www.techsmith.com/morae.html
http://www.gazept.com/

A jaké máte zkušenosti s oční kamerou vy?

Facereader: Sci-fi UX Research v LMC [video]

můj Edík

Všichni pořád říkají, že UX není jen interakční desing, že je to o emocích. Kdo z nás opravdu měří nebo alespoň zkoumá emoce? Existují různé techniky, ale většina z těch, s kterými jsem se setkal, jdou na emoce oklikou (např. Product reaction cards).

V LMC jsem na podzim 2013 zkoušel nástroj, jako vystřižený ze seriálu Lie to me – z mikrovýrazů tváře čte emoce. Šikovní lidé v holandsku udělali program, který zužitkoval výzkum Dr. Paula Eckmana. Z výsledků jsem si sednul na zadek (videoukázka je v článku).

Na Jobs.cz jsem koukal na homepage a četl jsem článek. Rozesmutnil mě náborový baner se seznamem benefitů jedné česko-německé automobilky (a to přesto, že v LMC máme masáže, čajovnu, jógu atp.). Pak jsem četl článek o českém absolventovi, který po škole nastoupil do Ebay. V článku nebyl název pozice, na kterou absolvent nastupoval zmíněný a to mě trochu naštvalo. Facereader všechny mé emoce odhalil.

Facereader poznal smutek, rozčílení nejen u mě, ale i u mých kolegů, se kterými jsem nástroj zkoušel.

Závěr:

Nástroj je to zajímavý a dle mého zkoušení přesný, ale za 10 000 euro, je ještě dost drahý. Třicet dnů trialu uteklo jako voda a já se musel s Facereaderem rozloučit.

A jak zkoumáte emoce vy?

Placeholdery vs. popisky: A/B test

Dvě varianty testované v rámci A/B.

Jednou větou: A/B test nám ukázal, že umístění popisků nad hledací pole, byť je to po stránce designu méně elegantní, přináší více konverzí než umístění textu v placeholderech.

Re-design nové titulky Jobs.cz byl u nás v posledních dvou měsících velké téma. Snažili jsme se to nepodcenit, hodně jsme diskutovali a načítali. Jednou z diskutovaných otázek bylo i zda pro hlavní vyhledávání umístit popisky přímo do polí formou placeholderů. Otázku vyvolal nedávný článek na NN Group.

Dvě varianty testované v rámci A/B.

Obě testované varianty, vlevo aktuální titulka

První prototyp, UX-ově produktový, počítal s popisky. Následující grafický návrh už to přetavil do placeholderů a my jsme vzhledem k blížícímu se termínu jeli podle návrhu.

Co se ale nestalo, první analýza čísel nám ukázala, že hlavní hledací pole nejsou na nové titulce zdaleka tak viditelná, jak jsme si mysleli. Jednak jsme do návrhu už asi moc dlouho koukali a druhak se zřejmě projevila výrazná fotka v hlavičce. V UX testování se to neprojevilo.

Nu což, jde o business, museli jsme to řešit. Udělali jsme A/B test, kde jsme pouze vypsali popisky nad hledací pole. Použili jsme Visual Web Optimizer a pustili na 10 % návštěv. Výsledek byl jasný po třech dnech. Verze s popiskami měla o 17 % lepší konverze, v tomto případě využití hlavních polí k hledání vůči ostatním odkazům na stránce.

Graf s výsledky AB testu ve VWO.

Oranžově stávající verze, modře verze s popisky

Potvrdili jsme tedy závěry NNG a dali zapravdu našemu kolegovi Milanu Krylovi, který byl od začátku proponentem tohoto řešení. V dohledné době umístíme popisky nad hledací pole a po skončení probíhající kampaně počátkem prosince nasadíme novou hlavičku, kde bude kladen vyšší důraz na hledání.

PS. A/B testy obvykle pouštíme na doporučovanou dobu jednoho týdne kvůli reprezentativnosti. Tentokrát jsme museli vypnout dříve kvůli tomu, že nám kód testu rozbil jinou část rozhraní. Další náklady směrem k testování jsme vzhledem k výsledkům nevynakládali. Výsledky po třech a půl dne jsou výrazné a stačí.

Za postřehy děkuji Petru Havlíkovi.

Mobile first, aneb jak přesvědčit ostatní, že Váš návrh stránky je to pravé?

_NWJ3733-Edit

Každý návrhář webu se při své práci dříve nebo později dostane do fáze, kdy musí přesvědčit klienta, že jeho návrh je to pravé ořechové. Jako argumenty mohou posloužit výsledky uživatelských testování, analýzy chování současných uživatelů, best practices a další.

Tak jako tak ale klient jednoduše chce stránku vidět, osahat si jí. A v tu chvíli přichází na řadu spousty vysvětlování, co kde na stránce je, proč je to právě tam a ne jinde, jak by měli uživatelé stránku používat …

A tady mám pro vás vyzkoušený tip! U nás v LMC ukazujeme vždy jako první mobilní verzi stránky. “Mobile first” totiž není jen skvělý postup pro návrh, ale i pro prezentaci své práce a přesvědčení klienta.

Jednoduše nechte klienta projít si Váš návrh přímo v jeho mobilu.

V mobilu se krásně soustředíte na priority stránky, to nejdůležitější je nahoře, to nejméně podstatné dole. Nic víc neřešíte! Je to podobné, jako kdybyste procházeli seznam priorit, ale navíc s tím “sfouknete” i design stránky.

Jakmile má klient toto “nastavení” v hlavě, ukažte mu desktop. Uvidíte, že připomínky, na které jste zvyklí, jsou pryč. Pokud na desktopu dodržíte priority, bude klient řešit už jen jestli se mu web líbí nebo ne.

A navíc, ukazovat Váš návrh v telefonu je přeci sexy :-)