Uxpert
UX designová agentura, co pro zákazníky tvoří digitální produkty.
🧭 V prezentaci se posouvejte se šipkami ↑ nahoru a ↓ dolů
Landing page odshora až dolů™
Rozbor hlavní stránky
Prohlédněte si stránku živě—
a pak pokračujte v rozboru…
💪🏻 Pojďme na rozbor…
Uxpert—Agentura, který tvoří digitální produkty. Vcelku obyčejný web, který je oživený animacemi.
Jde vidět, že web je pár let starý. Alespoň tomu napovídá vizuální styl .
Přesto bych rád web rozebral, protože mě zaujala jeho ráznost
a jasný obsah…
❌ Začal bych velkým mínusem. Tím je velice dlouhé načítání webů. Důležité je co nejdříve ukázat obsah.
Během 5 sekund se musí uživatel dozvědět, o čem web je.
To se tady neděje… Na stránkách nenajdete datově náročný obsah, aby se musel speciálně načítat.
Stránku ukažte hned a obrázky
a další zdroje načítejte průběžně. Nepoužívejte „preloaders“. Snížíte frustraci uživatelů
z čekání.
3 myšlenky jsou vyjádřeny
v jednom nadpisu pomocí animace? Je to známá technika. Ovšem tady ji tvůrci obohatili i o hříčku se slovy. 👏
Animovaný nadpis vytvořili z .gif obrázku. Z hlediska SEO je ale důležité, aby byl psaný běžným textem. Velké mínus. ❌
GIF animace
Nadpis je kreativní a zaujme. Ne každý mu ale může porozumět. Lidé, co znají UX design, asi ano.
Ale co běžní lidé? Budou vědět, co chtěl básník říct spojením „na zkušenosti záleží“?
Doporučil bych rovnou napsat, kdo jste a co nabízíte.
Odkaz/tlačítko „Play showreel“.
—Nejlepší způsob, jak ukázat kdo jste a co umíte, je skrz video. To dokáže člověk nejrychleji zpracovat a vyjádříte v něm nespočet myšlenek.
Za cíl si dejte pouze jedno. A to, aby uživatelé tlačítko „přehrát“ našli a všimli si ho. Musí evokovat, že na něj lze kliknout.
Další prvky?
Vedle loga je prvek drobečkového menu. Ukazuje stránku, na které zrovna jste. Máte tedy přehled, kde se nacházíte. Po jeho kliknutí se otevře hlavní nabídka.
Vedle toho hlavní nabídku otevřete
i klasickým tlačítkem, jaké znáte. Popisek „Menu“ je velice důležitý. Ne každý chápe, co jsou 3 čárky. Nejasné ikony vždy popište i textovým sdělením.
Textové sdělení chybí naopak
u animované ikony, která říká: „skroluj dolů“. Nebojte se to napsat výslovně. Nespoléhejte se jen na ikonu.
Drobečkové menu
Navigace s popiskem ✅
Skroluj dolů (chybí popis ❌)
Po úvodu přichází kdo a co…
V krátké formě sdělte zákazníkům, co nabízíte.
Úplně obyčejné „Who we are“
v nadpisu jednoduše funguje. Když očima skenujete rozhraní, hned víte, co v sekci najdete.
❌ Víte, co je tady špatně? „We, we, we, …“ Všechny texty tvůrci napsali z pozice „my“.
Zákazníka nezajímá, co děláte vy! Zajímáte ho, co pro něj máte a co získá. Pište z pozice „ty“.
Tip: Když nevíte, umělá inteligence vás navede.
Celou sekci „dotváří“ malý abstraktní prvek uprostřed. On totiž není až tak malý. Má kolem sebe hodně prázdného místa.
A prázdné místo je také grafický prvek. Tím pádem na sebe v této kombinaci upozorňuje.
Jeho další funkcí je vyrovnání vizuální rovnováhy. Hlavní žlutá barva končí předchozí sekci a začíná následující. Je v lince nad nadpisem a je
v tlačítku/odkazu. Prvek pomáhá celé rozložení propojit a vyvážit.
No a ještě jednou funkcí tohoto prvku je navést uživatelovo oko
z nadpisu směrem na pravou část obsahu. Minule jsem psal
o Principu jednotného propojení.
Teď to nejhlavnější. Řekněte co nejdříve, co nabízíte a co děláte. Žádné okecávání.
A tuto sekci zvýrazněte a odlište od ostatních sekcí. Maximálně zaručte, že si uživatel sekce všimne.
Prostý seznam k prezentaci toho, co děláte, postačí. Lidé ho snadno zpracují.
Seznam nemusí být nudný
a odrážkový. Podobně jako tady – položky můžete rozmístit
i vodorovně . Každou položku obohaťte třeba o ikonu nebo grafiku pro snadnější rozlišení
a zaujmutí oka.
Další sekce se zabývá hotovými pracemi.
Podobně jako u sekce „Kdo jsme“—mluvte k zákazníkovi. Naprosto totožná chyba. ❌
Ukažte, co jste dělali. Případové studie, jsou fajn. Ale…
Kromě 4 bloků s případovými studiemi bych ještě navíc ukázal vizuály hotových projektů.
Ukažte je hned. Dejte je na oči. Použijte jich hodně. Ať je zákazník vidí na první dobrou a nemusí se nikam proklikávat.
Zaujměte. Dosáhněte wow efektu. Použijte takový úhel pohledu, který zákazníka osloví. Použijte mockupy, zvýrazněte prvky a nebojte se trochu přikrášlit realitu. Cílem je zaujmout…
…Co říkáte na tyto 4 případové studie?
Osobně nemám motivaci je prokliknout. Jednak se mi nechce a jednak mě jejich vizuály dostatečně nezaujaly. ❌
Uxpert oslovuje zájemce a nabízí jim digitální služby. Zákazník poptává digitální tvorbu od výzkumu až po design uživatelských rozhraní. → Jak ho má nalákat fotografie pizzy? ❌
Snad by to dávalo smysl v případě, že by součástí zakázky byly fotografické práce. Skutečnou náplní práce je však návrh objednávkového systému.
✅ Do vizuálu přidejte prvky, které vystihují téma a přidávají hodnotu.
Než zbytečné záběry raději ukažte reálnou ukázku práce. To, co prodáváte.
Ocenění, chlubírna, říkejte tomu, jak chcete. Nebojte se ukázat, čeho jste dosáhli jaká ocenění jste získali.
Zvyšte důvěryhodnost vašeho produktu nebo služby. Použijte čísla, která snadno zákazník zpracuje a rozklíčuje.
Tip: Pro designy webů používám pro oživení takovéto kreslené prvky. Texty pak vyniknou a posouvají návrh o příčku výš.
Pro Amíky jsem začal před pár dny dělat vlastní kolekci takových prvků. Ručně je překresluji. Jejich výhodou je, že se dají upravovat. Je to určené pro návrh webů ve Figma. Třeba se někomu bude hodit. 👋
Rozdělovací „přátelská“ sekce, která se snaží budovat přátelský vztah s potenciálním zákazníkem. Osobně bych takovou sekci vynechal. Dal bych ji ma místo, kde bude prostor a kde bude zákazník „předehřátý“.
Šetřete místo pro důležité prvky, které prodávají váš produkt nebo službu. Každý prvek by měl potenciálního zákazníka přiblížit
k nákupu. Na výplňové sekce
v dnešním zahlceném světě není prostor.
Na celém webu se používá kontrast v typografii. Jak?
Nadpisy jsou psány bezpatkovým písmem Montserrat. Některá slova jsou zvýrazněna písmem Courgette, které vypadá jako psané kurzívou a ručně.
Použitím takto kontrastních písem dosáhnete takového rozdílu, že text bude vypadat zajímavě
a zaujme.
Tip: Zajímavá typografie dokáže nahradit fotografie i obrázky
a podtrhnout značku.
Myšlenka nazývat klienty „přáteli“ není špatná a líbí se mi. Určitě se více k zákazníkům „přiblížíte“. ✅
Sociální důkaz ukázka log partnerů, tedy přátel, je důležitým bodem pro zvýšení důvěryhodnosti.
🎁 Více v bonusu.
Zajímavě si loga rozdělili i na
2 záložky/skupiny. Na organizace
a technologické společnosti.
Ukažte, kdo s vámi spolupracoval.
Tady se mi líbí vtipně podaná věta:
„Přísaháme, že jsme je nedonutili“.
Trochu decentního vtipu neuškodí.
Jinak hodnocení obsahují vše, co by měla. Fotografii osoby, jméno, pracovní pozici a ještě logo společnosti. ✅
Hodnocení by šlo určitě vylepšit.
1/ Je škoda příliš malého textu hlavního sdělení. To nejdůležitější musí být viditelné. Nebojte se zvětšit písmo.
2/ Chybí uvozovky. V nějaké formě je dobré v citacích mít. Evokuje to přímou řeč a lidskost.
3/ Zvýrazněte důležité pasáže hodnocení a umožněte uživatelům skenovat klíčové informace.
4/ Textový obsah je příliš široký
a odstavce textů hodnocení nevypadají pěkně… Jak to spravit?
✅ Zvětšil jsem text, aby hlavní obsah byl výraznější. Tím se zároveň vyřešil i druhý problém, kdy byly odstavce příliš široké.
✅ Zvýraznil jsem důležitou pasáž. Změnil jsem text na druhý font a přidal jsem podbarvení.
Nezapomněl jsem přidat uvozovky, které evokují přímou řeč.
Při průchodu hodnocení mě zaujalo ještě jedno…
…geniální a krátké. Řekněte, že by vás takové hodnocení nepřesvědčilo? 👍
Stránku zakončuje stručná patička s výzvou k akci. Je tam minimum informací. Pouze tlačítko, kontaktní údaje
a adresa. Vše, co zákazník potřebuje. Nic dalšího mu nebere zbytečně pozornost.
Vytknul bych jedině tlačítko/odkaz „Contact us“. Neevokuje, že je klikatelné, což není dobrá praktika. Na první pohled by chování mělo být zřejmé.
❌ Neevokuje tlačítko/odkaz
✅ Kontakt
✅ Adresa
Výborně! Dokončili jste rozbor! 🎉
Co si z něho odnést? (pokračujte 👉)
🎉
🎉
🎉
🎉
🎉
🎉
- Zapomeňte na „načítače“ webů. Ukažte obsah hned. Během 5 sekund se musí uživatel dozvědět, o čem web je a co nabízí.
- Animované nadpisy mohou ušetřit prostor. Dejte však pozor, aby byly tvořené opravdu texty, ne obrázky. Kvůli webovým vyhledávačům.
- Ukažte, co nabízíte, v podobě videa.
- U tlačítek a odkazů musí být hned jasné, že na ně lze kliknout.
- Nepoužívejte matoucí interakční ikony samostatně. Přidejte vždy textový popisek, aby je každý pochopil.
- Nepište o sobě. Přepněte z myšlení „já/my“ na „ty získáš“.
- Abstraktní a dekorativní prvky použijte s rozvahou. Můžete dosahovat vizuální rovnováhy, vést uživatelovo oko nebo propojit prvky mezi sebou.
- Co nejdřív na stránce (ideálně ve formě seznamu) sdělte, co nabízíte. Seznam zvýrazněte, ať si ho každy všimne.
- Při prezentaci svých prací použijte vizuály, které potenciálnímu zákazníkovi přinesou hodnotu. Nerelevantní grafiky a fotky nepoužívejte. Zkuste zaujmout a dosáhnout wow efektu.
- V rámci sociálního důkazu ukažte, čeho jste dosáhli. Používejte čísla, loga a hodnocení zákazníků.
- Každý prvek webu, by měl zákazníka přiblížit k nákupu. Prázdné sekce, které nepřináší hodnotu, vynechejte.
- Dosáhněte zajímavého vizuálu tak, že nakombinujete 2 odlišná písma.
Klíčové shrnutí
Co jste se dozvěděli? Tipy pro návrh prodejní stránky
👍 Jako předplatitelé rozborů dnes získáváte bonusový obsah, který se vám bude hodit při návrhu webu…
…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á…
…v každém rozboru najdete nový materiál… Tak si ho nenechte utéct…
—tady je…👉
✅
2
3
Bonus
Hodnocení
Příště…
Bonus
Mohu vás poprosit o laskavost? Dejte mi, prosím, ⭐️hodnocení na rozbory…
Pomůžete mi tím udržet se
v sedle a pokračovat ve tvorbě →
…
Sociální důkaz
Zpětná vazba
Hodnocení
Jak se vám rozbory líbí? Co byste udělali jinak? Dejte mi zpětnou, abych věděl, co zlepšit. Budu vám opravdu vděčný.
✅
✅
3
Bonus
Hodnocení
Příště…
Klik 👉
👋 Uvidíme se za 2 týdny
V záloze mám spoustu výborných webů
a bonusů, o které se s vámi chci podělit.
Jsem vděčný každému, kdo sdílí myšlenku rozborů na svých sociálních sítích nebo blogu.
Získejte 25% slevu pro vaše předplatné—Jako odměnu za doporučení…
…více o partnerském programu →
✅
✅
✅
Bonus
Hodnocení
Příště…
(Odesílám 1. a 15. v měsíci)
Rozbor hlavní stránky - uxpert.com
By Lukáš Augusta
Rozbor hlavní stránky - uxpert.com
UX designová agentura, co pro zákazníky tvoří digitální produkty.
