ergonomie webů a eshopů v praxi - jan kvasnička

95
Ergonomie webů a eshopů v praxi JsmeMarketing Ing. Kvasnička Jan www.kvasnickajan.cz [email protected] @Jan_Kvasnicka

Upload: jsmemarketing

Post on 29-Jun-2015

1.364 views

Category:

Technology


1 download

DESCRIPTION

Prezentace s názvem Ergonomie webů a eshopů v praxi. Autor: Jan Kvasnička. Datum: 15.1. 2013. Přednáška v rámci projektu JsmeMarketing.cz, formátu Professional Lecture. Info o akci http://www.jsmemarketing.cz/akce/lecture/2013-1-ergonomie-webu-a-eshopu-v-praxi

TRANSCRIPT

Page 1: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Ergonomie webů a eshopův praxi

JsmeMarketing

Ing. Kvasnička Jan

[email protected]@Jan_Kvasnicka

Page 2: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Kdo z Vás se tímto tématem na svém eshopu (webu) zabýval?

Zkoušel někdo z Vás testování na svém eshopu (webu)?

Zapracovali jste výsledky testování? Jaký byl reálný přínos?

Otázky na úvod

Page 3: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Schopnost ovládání webu co nejjednodušeji, intuitivní chování

Přehlednost, srozumitelnost

Na základě použitelnosti vznikají pravidla

Co je to ergonomie (použitelnost) webu?

Page 4: Ergonomie webů a eshopů v praxi - Jan Kvasnička

„Nenuťte návštěvníky příliš přemýšlet“

„Pokud je první zkušenost negativní, pravděpodobně už se nikdy nevrátí“

„Okolo 50% obchodů prodělává, jelikož návštěvník nenajde požadované informace“

„Není to o tom, že jeden opisuje od druhého, ale používají něco, co funguje (pozor při vymýšlení vlastních prvků)“

4 myšlenky okolo použitelnosti

Page 5: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Jaké jsou podle Vás nejčastější chyby v rámci použitelnosti?

Nejčastější chyby

Page 6: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Stránky nečteme, ale prohlížíme (přesněji: skenujeme)

Neprovádíme optimální výběry, ale děláme kompromisy

Nebádáme nad tím, jak věci fungují, jednoduše to „nějak uděláme“

3 základní skutečnosti o chování uživatelů

Page 7: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Vytvořte jasnou vizuální hierarchii na stránce

Neměňte zvyklosti, vše musí být jednoduše pochopitelné

Rozdělte stránky na jasně definované oblasti

Vyznačte odkazy, dejte jasně najevo, na co lze „klepnout”

Stránky nepřeplácávejte, neuvádějte zbytečná slova

5 pravidel použitelnosti

Page 8: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Ergonomie eshopu

Nevytvářejte složitou strukturu produktů

Obecné doporučení: maximálně 3 úrovně

3 sloupce: ustupující trend

Page 9: Ergonomie webů a eshopů v praxi - Jan Kvasnička

„Vybídnutí k činnosti/aktivitě“

Jedná se o vhodné použití textů, tlačítek, formulářů atd.

Příklady textů call-to-action Přihlásit odběr / Zasílání tipů zdarma

Log in nebo Přihlásit / Přihlásit mě do systému (komunity)

Volej 777 777 777 / Zavolejte na číslo 777 777 777 pro konzultaci ZDARMA

Co je to call-to-action?

Page 10: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Lay the groundwork

Techniky call-to-action 1/5

Page 11: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Use white space

Techniky call-to-action 2/5

Page 12: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Use an alternative colour

Techniky call-to-action 3/5

Page 13: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Make it big

Techniky call-to-action 4/5

Page 14: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Upozornění na novinku

Techniky call-to-action 5/5

Page 15: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Výsledky studie 3 frází a jejich úspěšnost na magazínu (marketingsherpa.com)„click to continue“ – 8,53 % prokliků

„continue to article“ – 3,3 % prokliků

„read more“ – 1,8 % prokliků

Call-to-action – ukázky z praxe - 1/6

Page 17: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Call-to-action – ukázky z praxe - 3/6

Page 18: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Call-to-action – ukázky z praxe - 4/6

Page 19: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Call-to-action – ukázky z praxe - 5/6

Page 20: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Call-to-action – ukázky z praxe - 6/6

Page 21: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Call-to-action – ukázky z praxe - 6/6

Page 22: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby

Page 23: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - header - 1/2

Page 24: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - header - 2/2

Page 25: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 1/12

Page 26: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 2/12

Page 27: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 3/12

Page 28: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 4/12

Page 29: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 4/12

Page 30: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Jednostránková vs Více stránková objednávka?

Nejčastější chyby - košík a objednávka - 5/12

Page 31: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 6/12

Page 32: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 7/12

Page 33: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Pozor na pamatování vyplněných částí v objednávce

„Přepočítat“

Nejčastější chyby - košík a objednávka - 8/12

Page 34: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 9/12

Page 35: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 10/12

Page 36: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 11/17

Page 37: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - košík a objednávka - 12/12

Je opravdu

nutná

registrace?

Page 38: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - navigace - 1/7

Page 39: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - navigace - 2/7

Které menu je přehlednější?

Page 40: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - navigace - 3/7

Které menu

je přehlednější?

Page 41: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - navigace - 4/7

Page 42: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - navigace - 5/7

Page 43: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - navigace - 6/7

Page 44: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - navigace - 7/7

Drobečková navigace

Page 45: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - výpis produktů - 1/3

Page 46: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - výpis produktů - 2/3

Page 47: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - výpis produktů - 3/3

Page 48: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - detail produktu - 1/3

Page 49: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - detail produktu - 2/3

Page 50: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - detail produktu - 3/3

Page 51: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - mezikrok nákupu - 1/3

Page 52: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - mezikrok nákupu - 2/3

Page 53: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - mezikrok nákupu - 3/3

Page 54: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - filtrování a vyhledávání -1/4

Page 55: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - filtrování a vyhledávání -2/4

Page 56: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - filtrování a vyhledávání -3/4

Page 57: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - filtrování a vyhledávání -4/4

Page 58: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - porovnávání - 1/2

Page 59: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - porovnávání - 2/2

Page 60: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - patičky - 1/1

Page 61: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Nejčastější chyby - patičky - 2/2

Page 62: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků

Page 63: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 1/31

Hlavnístrana

Page 64: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 2/31

Služby

Page 65: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 3/31

Hlavní strana

Page 66: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 4/31

Nabídka

Page 67: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 5/31

Hlavní strana

Page 68: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 6/31

Nabídka článků

Page 69: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 7/31

Hlavní strana

Page 70: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 8/31

Detail produktu

Page 71: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 9/31

Mezikrok nákupu

Page 72: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 10/31

Objednávka

Page 73: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 11/31

Výpis produktů

Page 74: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 12/31

Recenze

Page 75: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 13/31

Header

Page 76: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 14/31

Detail produktu

Page 77: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 15/31

Levé menu

Page 78: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 16/31

Výpis produktů

Page 79: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 17/31

Detail

produktu

Page 80: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 18/31

Hlavní strana

Page 81: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 19/31

Výpis produktů

Page 82: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 20/31

Hlavní strana

Page 83: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 21/31

Detail produktu

Page 84: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 22/31

Upozornění a nákupní košík

Page 85: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 23/31

Hlavní strana

Page 86: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 24/31

Výpis kategorií

Page 87: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 25/31

Header

Page 88: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 26/31

Výpis produktů

Page 89: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 27/31

Levé menu

Page 90: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 28/31

Header

Page 91: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 29/31

Výpis produktů

Page 92: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 30/31

Header

Page 93: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Z eshopů a webů účastníků - 31/31

Výpis produktů

Page 94: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Shrnutí

Vždy důkladně testujte funkčnost (před spuštěním, za běhu)

Testování ať provádí lidé různého věku a zaměření

Sledujte aktuální trendy a vývoje silných eshopů (platí za vývoj, proč se nepřiučit)

Stále opakované: „Nenuťte uživatele přemýšlet“

Snažte se také testovat a hrát si se slovy: „lákání uživatelů na akce atd.“

Navigace a jednoduchost procesu nákupu je klíčová

Pozor na cílovou skupinu

Page 95: Ergonomie webů a eshopů v praxi - Jan Kvasnička

Děkuji za pozornost

JsmeMarketing

Ing. Kvasnička Jan

[email protected]@Jan_Kvasnicka

Možnost odběru novinek na webu