Dnes se podíváme na hlavní stránku služby Userbrain… Jde o testovací nástroj pro weby. Vytvoříte si pro testery úkol a ti vám provedou uživatelské testování…

Určitě ne! Často máme potřebu na hlavní a přistávací stránky tlačit vizuál v podobě fotek, obrázků nebo videí…Ale není to vždy potřeba…

…pokud ne, vizuál klidně vypusťte. Nic se nestane. Vyčistíte prostor. Zbavíte se balastu—protože abstraktní vizuál, které nic nepřidává je dobrý jen na jednu věc… Zaujmout oko a na chvíli se zastavit…

Zaujmout oko jde i jinak…

Podívejte se na nadpis. Jeho zvýrazněná a podbarvená část tuto funkci perfektně nahrazuje…Je to rozhodně první věc, které si všimnete. A zvládlo se to i bez obrázků.

Jaká strategie se pro zvýraznění textu použila?

 

– Změnil se typ písma (na bezpatkové),

 

– použil se tučnější řez,

 

– přidalo se zelené pozadí připomínající „podtržení“.

Potřebujete zvolit co nejmenší počet prvků, informací, slov, barev… Obecně máme jako tvůrci tendenci na webu říct vše, co máme na jazyku. To zvládne každý… Ale vybrat jen to nutné a říct myšlenku s minimem slov? To už chce disciplínu.

…angličtina je skvělá v tom, že dlouhou myšlenku dokážete popsat v pár krátkých slovech…

V češtině je sice těžší napsat kratší text…Ale ne nemožné! Podívejte se na prezentaci produktů Apple na české verzi webu. Můžete se tam inspirovat, jak psát krátké nadpisy. Čeští copywriteři odvádí na Apple webu dobrou práci…Spoustu lidí se snaží napodobit design Applu. A neví jak. A toto je ta skrytá ingredience.👍

Sdělte v textu, co je benefitem pro zákazníky. „Set up in minutes“, „Get first results in hours“

—tady je jasně kladen důraz na šetření času. To je jeden z klasických benefitů. Lidé rádi šetří čas.

Používejte akční slovesa… Vyzývejte zákazníky k akci. Mluvte přímo k nim (you set up, you get).

2 krátké věty se rozhodně čtou lépe než 1 dlouhá věta. Rozsekejte dlouhé věty na kratší a jednodušší—Když si věty přečtete nahlas, uslyšíte rytmus a pauzy… Schválně si text přečtěte nahlas, ale místo tečky mezi větami dejte spojku „and“. Slyšíte ten rozdíl?

Když umožníte zákazníkům vyzkoušet si produkt, přichází na řadu psychologický efekt tzv. Averze ke ztrátě (Loss Aversion)…

…jde o to, že si zákazníky pěkně zaháčkujete. Získají produkt zdarma—a pokud si jej po zkušební době nezaplatí, přijdou o něj. Je dokázáno, že lidé hůře snáší, když něco ztratí, než kdyby něco získali.

…zároveň tady do hry vstupuje i „Poslušnost vůči autoritě“. Protože mezi logy vidíte velmi známé značky. Je to opravdu motivující kombinace.

…a aby se to celé podtrhlo a dalo se najevo, že je řešení opravdu oblíbené, věta pod logy to ještě zdůrazňuje—Když potvrzujete nějaký fakt stále dokola, lidé ho rychleji přijmou za pravdu.

 

„UX teams—přesně řečeno pro koho. Čím konkrétnější popis, tím lepší. Oslovte lidi z cílové skupiny. Dejte jim najevo, že to je ten správný produkt přímo pro ně. Proč?…

Protože když je něco pro všechny, není to pro nikoho.

❌ Jen pozor na mobilu… Často vídám příliš dlouhou textaci, která na mobilu zakrývá rozhled na samotný web.

Ano, správně… Je to „nic“. Prázdné místo (white-space)…

…pro designéry je prázdné místo grafický prvek a hraje důležitou roli. Tvoří ochranný prostor okolo prvků a umožňuje zaujmout. Oči se o něj zastaví, mozek zbystří, a přiměje se podívat na následující prvek—schválně si srovnejte následující varianty:

…

Lidé snadno 3 položky zpracují a zapamatují si je.

—Jde o známé Pravidlo tří, o kterém se dočtete 🎁

v bonusu…

Často na webech vídám v podobných situacích pouze ikony. —Designéři je používají jen proto, aby rozbili barevně prostor a zaujmuli. Nebo když není čas ani nápad. Není to úplně špatně…Ale mnohem lepší je přidat extra hodnotu obsahu navíc. Třeba v podobě dodatečné ukázky produktu nebo služby.

Přelom sekcí ve formě „vlny“. Oblé tvary a nepravidelný tvar decentně říká, že tady sekce končí.

Nadpis:

„Rychlé a cenově dostupné uživatelské testování webových stránek a prototypů“

—Jasné a stručné. Ukažte, co produkt dokáže a co zákazník získá, když produkt využije.

Rychlost a šetření nákladů jsou pro zákazníky významné benefity.

Odstavec textu:

Jeden krátký odstavec, který obsahuje mnoho informací…Napsat krátký odstavec se zdá být jednoduché. Běžný laik by stejné množství informací rozepsal na několik odstavců.

Řádek textu se snažte držet max. do 75 znaků na řádek. Jen tak zaručíte dobrou čitelnost…

Pokud by délky řádků byly delší, měli bychom problém najít očima vždy následující řádek.

Userbrain má odstavec navržený správně ✅.

…

❌ Podívejte se, jak by to vypadalo, kdyby tvůrci intuitivně zarovnali hrany textového bloku s hranami obrázku:

A podle čeho ideálně určovat, jak široké prvky na webu mít? Designéři k tomu používají sloupcovou mřížku. Podívejte se, jak prvky v  návrhu lícují.

Bloky s příklady—jsou barevně odlišné. Mezi pozadím i mezi bloky navzájem dosáhnete kontrastu. Každého zvlášť si proto všimnete. Barva je skvělým pomocníkem jak toho dosáhnout.

Na pozadí bloků jsou náhodné křivky, které přináší do pozadí hloubku a dělají celý blok zajímavější. Blok není „suchý“ a sám o sobě působí jako vizuál.

…Jak to zlepšit? ✅ V libovolné formě přidejte prvek, který evokuje, že jde o odkaz. Může to být ikona, šipka, text, …

Benefity by měly předcházet funkcím…Nejprve na stránce mluvte o výhodách produktu. Až později ukažte, co umí.

 

Benefit = stav, do kterého se zákazník po použití produktu dostane. Co mu přinese? Co získá?

 

Funkce = to je to, co produkt umí, jaké má vlastnosti, apod.

Schválně, kterého ze 6 bloků si nejvíce všimnete? Který vám nedá spát? Který vás nejvíce zaujal?

…

Je to tento?—A víte proč?

Jasně! „Access 100k+ user testers“:

• Číslovky a znak „+“přitahují pozornost. Jsou důvěryhodné. Působí fakticky.
• Je to opět sociální důkaz. Zjišťujeme, že existuje více než 100k testerů.

❌ Textový odstavec první podsekce má pouze 2 řádky. Nevypadá to tak dobře. Bylo by vhodné přidat ještě jeden řádek.
Proč?…
Protože 3 řádky doplňují pomyslný tvar obdélníku. Textový blok pak vypadá profesionálněji, má jasněji definovaný tvar a „propojuje“ celý design (více popsáno v lekci pod odkazem).

✅ Textový blok u druhé podsekce má správně 3 řádky. Vypadá to o dost lépe a profesionálněji.

Obrázky jsou abstraktní. Nic neříkají. Zvolil bych opět takové, které podpoří téma.

V sekci jsou pouze 2 podsekce. V podstatě jde o jakýsi seznam… Před chvílí byla řeč o Pravidle tří (🎁 v bonusu). Co takhle přidat ještě třetí podsekci? 🤔 Jen nápad…

Od zákazníka vyžadujte co nejméně informací (třeba jen e-mail). A to jen tehdy, pokud je to opravdu potřeba.

Vizuálně poukažte na formulář. Barevné kontrastní šipky na pozadí směřují přesně tam, kam je potřeba…

Samotný formulář je zvýrazněný stínem. Vypadá to, že je k nám „blíž.“ Více si ho všimneme.

Formulář udělejte dostatečně velký a třeba ho umístěte doprostřed obrazovky, aby na něj zákazník snadno a rychle kliknul.

…

—Fittův zákon říká, že to, jak rychle dosáhneme cíle, záleží na jeho vzdálenosti a velikosti—proto je dobré udělat akční prvek velký a blízko ke kurzoru, abyste celou akci uživateli ulehčili.

Vyvracejte zákazníkovi obavy, kde to jde. Pokud víte, že by mohla existovat z něčeho obava, zbavte se ji.

—V tomto případě je odbourána obava z nutnosti přihlašovat se do zkušební verze… Jako alternativa je nabídnuta možnost domluvit si nejprve ukázku produktu.

Čím více informací o hodnotiteli sdělíte, tím důvěryhodnější hodnocení je:

• Fotografie
• Jméno a příjmení
• Pozice ve firmě
• + prostřednictvím jaké služby bylo hodnocení vytvořeno. To svědčí o důvěryhodnosti samotného hodnocení = je to v podstatě důkaz pro důkaz…

Hodně se mi líbí, jak je hodnocení vyřešeno vizuálně.

…

Textový obsah je zvýrazněn v samostatné „bublině“. Zákazník se pak plně soustředí na hlavní obsah textového hodnocení. Informace o člověku jsou pak pod ní.

Jak bych hodnocení vylepšil?

—Zvýraznil bych důležité části textového hodnocení.

Položky patičky jsou rozřazeny do menších skupin dle Millerova zákona.

Důležité věci jdou na první pohled vidět…

Newsletter—motivujte lidi přihlásit se. Snažte se jim nabídnout hodnotný obsah výměnou za e-mail…

Otázkou je: Budou „Simple user testing tips & tricks“ stačit? Možná ano, možná ne…

Byla to fuška… Ale máte to za sebou!

…jde vždy o čerstvě napsaný obsah, který aktuálně tvořím pro své budoucí e-booky…

…k rozborům i bonusům mají přístup pouze předplatitelé. Nikdo další je nezíská…