8 UX trendů pro váš e-shop - Dobrý web

Připravujeme pro vás nový web a už brzy vás uvítáme v novém kabátě. Jak děláme a pro koho, vám odpoví naše prozatimní info stránka.

8 UX trendů pro váš e-shop

Stačí pár kliknutí a máte doma košili na míru i plavbu kolem světa. Ani nemusíte sedět u počítače, potřebujete jen mobil a pár minut při čekání na tramvaj. Lidé nakupují na internetu stále víc a víc, jak na to však reagují prodejci? Podívejte se, jaké trendy ovládnou e-shopy v roce 2015.

Responsivní design

Lidé nakupují stále častěji na cestách. Je tedy nezbytné, aby byly stránky responsivní a uzpůsobené nákupům ve vlaku či na sedadle spolujezdce. Nezapomínejme také na další početnou skupiny zákazníků - na ty, kteří nakupují v práci. Ti naopak stránky zobrazují na velikých monitorech v kanceláři. Správný e-shop by měl myslet na všechny.

Na stránce Burton nakoupíte z mobilu i na velkém monitoru v práci.



Na stránce Burton nakoupíte z mobilu i na velkém monitoru v práci.

Material a flat design

Stále více se používá flat design a novinka společnosti Google - material design. Vyznačují se čistými barvami a plochým vyobrazením objektů bez stínování a napodobování reálných věcí. Tlačítka jsou znázorněna tak, aby se na ně dalo intuitivně kliknout, ale bez zbytečného vykreslování a komixových prvků. Vše je zobrazeno minimalisticky, pomocí jednoduchých prvků, typografie a barev. Flat design jde ruku v ruce s responsivním designem při různých velikostech displeje.

Obchod Skinny ties sází na jednoduchý grafický design a rozložení stránky.



Obchod Skinny ties sází na jednoduchý grafický design a rozložení stránky.

Mikro interakce

Malé animace nebo drobné interakce vaše zákazníky pobaví a namotivuje k dalšímu nákupu. Může se jednat o jednoduché přidání položky do košíku, kde košík spolkne položku nebo figurína, která se zatočí, když si vyberete šaty. Všechny tyto interakce mohou obohatit vytoužený uživatelský prožitek o něco nového.

Kdo by nechtěl udělat radost nákupnímu košíku jako v e-shopu threadless.com



Kdo by nechtěl udělat radost nákupnímu košíku jako v e-shopu threadless.com

Velká typografie

Drobná písmena jsou špatně čitelný na mobilních zařízeních. Trendem poslední doby jsou u produktových i firemních prezentací velká, dobře čitelná písmena. Obrovské a tučné písmo se nejen velmi dobře čte, ale zaujme uživatele hned po načtení stránky. Méně textu, ale o to větší font je jedním z nejrozšířenějších trendů tohoto roku.

Jednoduché sdělení přes celou stránku. Built Things.



Jednoduché sdělení přes celou stránku. Built Things.

Karetní rozložení stránky

Ideální pro responsivní design, lehce přizpůsobitelné s minimem nepotřebného obsahu. Takové je rozložení pomocí karet. Karty se jednoduše přidávají a odebírají podle velikosti zařízení, na kterém zrovna stránku prohlížíte. Mohou být různě veliké a použitelné téměř pro cokoliv - od přehledu produktů, zobrazení článků blogu nebo třeba výpis komentářů.

Hlavní strana e-shopu Firebox - vyberte si kartu.



Hlavní strana e-shopu Firebox - vyberte si kartu.

Ikony místo textu

Lidé neradi čtou dlouhé texty. Proto se čím dál častěji můžeme setkat s prvky, které text neobsahují vůbec. Typickým příkladem jsou tlačítka vyhledávání, kde je text nahrazen obrázkem lupy nebo domeček, kterým se vracíte na hlavní stránku.

Stále používanějším piktogramem je tzv. hamburger. Ten je však důkazem, že ne vždy je nahrazení textu obrázkem pro uživatele lehce srozumitelné. Průzkumy napovídají, že je lepší k této ikoně přidávat doplňující text, protože ne každý si tuto ikonu spojí se zobrazením menu. Velmi často si pod ní představí spíše seznam položek ve výpisu.

Nahrazování ikonami se tedy zdá být jako veliký trend, ale může s sebou nést i nepříjemnosti v podobě složitější navigace na webu. Je tedy potřeba je vybírat s citem a porozuměním cílové skupině.

Jednoduché logo nebo hlavolam pro uživatele? Zdroj: Pollen London.



Jednoduché logo nebo hlavolam pro uživatele? Zdroj: Pollen London.

Více posouvání, méně klikání

Pro uživatele je mnohem jednoduší stránky posouvat, než složitě proklikávat. Všimněte si, že jsou dnešní stránky mnohem delší a bez větších odskoků mimo. Spíše se jedná o vyprávění příběhů, které návštěvníky zaujmou a vtáhnou do děje. Delší stránky se používají jak pro prezentace firem, tak produktové stránky.

Na webu Dangers Off Tracking z cesty nesjedete.



Na webu Dangers Off Tracking z cesty nesjedete.

Fotky a videa přes celou obrazovku

Emoce mají na stránkách velkou váhu. Krásné fotky nebo videa hrající na pozadí dodají stránce styl, ale zároveň pomohou představit značku nebo vybraný produkt. Tak jako všechny ostatní trendy jde ruku v ruce s responsivním designem, díky němuž vypadá výsledný web dobře na všech zařízeních.

Fotka na fashion webu Basus.



Fotka na fashion webu Basus.

Co nás překvapí příště?

Designéři rádi experimentují a zkoušejí nové věci, je proto velká šance, že nás brzy v opět něčím překvapí. Některé prvky, které se nám dnes zdají nejasné nebo málo používané nám budou brzy připadat jako běžná součást webu. Naopak jsou prvky, které už v současném webdesignu definitivně ustupují.

Pozn.: Článek vyšel na serveru Podnikatel.cz

Datum vydání: 3. 6. 2015

Workshop: UX Design v návrhu webu

  • Myslíte při návrhu skutečně na lidi?
  • Víte, kdy je vhodné začít prototypovat?
  • Umíte zjistit, co je v prototypu špatně?
  • Umíte navrhovat v týmu?

Dokážete odpovědět na všechny otázky? Pak je pro vás workshop UX Design v návrhu webu zbytečný.

Přihlásit se k odběru newsletteru

Ochrana proti spamovacím robotům. Odpovězte prosím na následující otázku: Jaký je letos rok?

Autor

DW - nové - PŽ

Petr Žďárský

UX Specialist

Petr se v oboru UX pohybuje již několik let. Zkušenosti získal při spolupráci na několika sportovních projektech jako například Můjinstruktor nebo Runningchallenge. Při své práci se vždy snaží najít kreativní a zároveň funkční řešení, jehož mantinely ale určují uživatelé a jejich potřeby.

Ve volném čase rád sportuje a několik let hrál na vysoké úrovni florbal. Vyzkoušel si i práci lyžařského instruktora, při které naplno využil své zkušenosti s anglickým jazykem z pobytu ve Velké Británii.

Názory k článku „8 UX trendů pro váš e-shop“

9 názorů Přidejte svůj

Iva
Iva (neregistrovaný) ---.cust.vodafone.cz
3. 6. 2015 17:24

Jednostránková vs několikakroková objednávka

Díky za pěkný článek. Chci se zeptat, zda si myslíte, že je lepší jednostránková objednávka oproti několikakrokové. Zdá se mi, že jsou uživatelé zvyklí spíš na "krokovanou" objednávku, ale dle mého názoru je jednodušší i uživatelsky přijatelnější jednostránková. Hezký den.

Petr Žďárský
Petr Žďárský (neregistrovaný) ---.iinfo.cz
3. 6. 2015 17:24

Re: Jednostránková vs několikakroková objednávka

Děkuji za váš názor.
Dle mého názoru je vícekrokový proces zaběhnutý. Z hlediska použitelnosti se dá tento proces zkrátit na nezbytné minimum a tím uživateli ulehčit práci. Objednávka na 3 kroky tedy není pro uživatele žádný problém. Ze zkušenosti vím, že i více jak 4 krokový proces může mít vysokou míru dokončení ;-) Toto dilema ovšem závisí také od toho na jaký typ e-shopu ho chcete použít.
Doufám, že vám tato odpověď pomůže a přeji hodně štěstí s vaším e-shopem. Hezký den.

Zaspálek
Zaspálek (neregistrovaný) 62.168.37.---
4. 6. 2015 17:05

Rok 2015? #WTF

Autor asi zaspal pár let a teprve teď se probudil. Tohle se předpovídalo už v roce 2012. To je přesně takový ten typ článku "Nemáme co inteligentního napsat, tak napíšeme trendy na další rok, to všichni vždycky sežerou a kvalitu nikdo nepozná".

https://uxmag.com/articles/the-top-5-website-ux-trends-of-2012

-
- (neregistrovaný) ---.cust.vodafone.cz
4. 6. 2015 17:05

Re: Rok 2015? #WTF

Nerekl bych ze autor zaspal, protoze o podobnych trendehc na tento rok se pise na vice portalech. Napr. https://econsultancy.com/blog/65898-17-crucial-web-design-trends-for-2015/
Podobne trendy se hlavne uz zapracovavaji, v roce 2012 to melo hodne daleko na realizaci.

Klára
Klára (neregistrovaný) 84.16.107.---
15. 7. 2015 11:07

Live chat

Dobrý den, moc děkuji za hezký článek. Zajímalo by mě, jaký je Váš názor na Live chat (http://www.oxyshop.cz/live-chat-a-navstevnici-eshopu/novinka), který se v současné době objevuje u stále více webů? Nějaké zajímavé články jsou i tady: http://www.jakpsatweb.cz/clanky/index.html. Třeba se Vám něco hodí :).

Manuel
Manuel (neregistrovaný) ---.freepoint.cz
11. 12. 2015 17:17

Zhodnocení UX prvků webu

Dobrý den, sice nejsme e-shop, ale právě jim pomáháme v navyšování objednávek prostřednictvím cashback (affiliate) spolupráce. Zajímal by mě váš názor na UX prvky na našem webu https://www.alvarado.cz/. Budu rád za jakoukoliv zpětnou vazbu, už jsme si zvykli to schytávat, ale bereme to vždy jen pozitivně, jelikož víme o mouchách, které web má. Děkuji za váš čas.

Petr Žďárský
Petr Žďárský (neregistrovaný) ---.iinfo.cz
11. 12. 2015 17:17

Re: Zhodnocení UX prvků webu

Dobrý den,

děkuji za váš komentář. Myslím si, že celý koncept webu není špatný. Vidím pouze menší nedokonalosti, které mi jako uživateli a designérovi nepřijdou šťastně udělané.

Na první pohled není moc dobře vysvětlené o čem služba vlastně je a jak funguje. Je to první po čem koukám, když jsem na neznámé službě. Taková informace by určitě neměla chybět na homepage. Dočetl jsem se také, že srovnáváte obchody, ale takovou možnost jsem nikde nenašel. Dále máte na homepage zobrazené "Nejoblíbenější kategorie", ale pouze 2 z nich jsou aktivní a ostatní nefungují. Doporučil bych neaktivní kategorie zobrazit šedivé, aby bylo jasné že zatím nefungují. Na homepage bych více tlačil registraci, která je pro web nejdůležitější, například místo referencí by mohl být nějaký claim pro registraci do programu. Teď se registruji do služby pouze vlastní iniciativou nebo pokud se složitě proklikám webem. Chtělo by to více tlačit na výhody registrace a co to pro zákazníky znamená. Občas chybí navigace, která je zastoupena odkazy v patičce, ale na používání webu to nemá takový vliv.
Je vidět že služba je na začátku, ale určitě má velký potenciál. Více bych se zaměřil na to co zákazník potřebuje. Ve vašem případě to je ušetřit na nákupech tím, že se u vás zaregistruje. Tohle z webu zatím není jasné, ale dá se toho kontinuální prací dosáhnout.

Přeji hodně štěstí s dalším vývojem stránky a v případě dalších dotazů mne neváhejte kontaktovat.

Manuel
Manuel (neregistrovaný) ---.freepoint.cz
11. 12. 2015 17:17

Re: Zhodnocení UX prvků webu

Výborně! Děkuji moc za zpětnou vazbu, která má hodnotu zlata. Budeme se snažit co nejdříve nahradit nedostatky.

David
David (neregistrovaný) ---.eurotel.cz
16. 10. 2016 12:48

UX feedback

Dobré odpoledne, díky za inspiraci. Jak si myslíte, že si z hlediska UX stojí náš e-shop http://www.galo.cz/. Bylo by prosím možné nám dát feedback a vypíchnout 3 největší UX chyby, které by bylo vhodné pro zvýšení konverzního poměru zapracovat? Řešíme podobné dilema jako paní Iva - momentálně máme vícekrokový košík a uvažujeme o změně na jednostránkový. Myslíte, že by to z hlediska povahy našeho sortimentu (hobby) mohlo pomoci? Předem moc děkujeme.

Zasílat nově přidané příspěvky e-mailem        

Přidejte svůj názor