2. Typické prvky na webu
a jejich použitelnost
neděle, 20. června 2010
Story:
Každý den děláme nějaká rozhodnutí a většinu těchto rozhodnutí děláme intuitivně. Známe nějaké vzorce, náš mozek se
rozhoduje podle věcí, které už zná - rozhoduje se automaticky.
O spoustě našich rozhodnutí nechceme přemýšlet, chceme přemýšlet o věcech, které nás baví.
Typicky nákup. Já nechci přemýšlet o tom, jakým způsobem si mám dané zboží objednat, já si ho chci vybírat, zkoušet,
poznávat. Poznávat to zboží, nikoliv proces, kterým docílím, že to zboží bude moje.
Každou překážku, kterou mi nákupní proces postaví do cesty musím zdolat. A to je velmi namáhavé. Může to vést tak daleko, že
to zkusím jinde, neboť tam třeba mají můj friťák dražší, ale objednám ho způsobem, který znám a mám ho zafixovaný.
3. Tlačítka
Hodnocení
Přihlášení
Porovnávání
Vyhledávání
Primární navigace Komentáře
Registrace Drobečková navigace
Související
Košík Sekundární navigace
Lightbox
Strom produktů Doprava a platba
Formuláře Náhledy
Typogra e Patička
Facetová navigace Galerie Kontaktní údaje
Užitečné informace Objednávka
Detail
neděle, 20. června 2010
4. Použití standardních prvků urychluje učení.
neděle, 20. června 2010
iPad - téměř neexistuje učící křivka - lidé znají z iPhone
- zařízení, které nemá skoro žádné využití, ale už ho umíte používat
5. neděle, 20. června 2010
iPad - téměř neexistuje učící křivka - lidé znají z iPhone
- zařízení, které nemá skoro žádné využití, ale už ho umíte používat
6. neděle, 20. června 2010
iPad - téměř neexistuje učící křivka - lidé znají z iPhone
- zařízení, které nemá skoro žádné využití, ale už ho umíte používat
7. Méně je více.
neděle, 20. června 2010
Apple si vychovává svoje uživatele.
Na málu je naučí, postupně jim dá více - a nechá si za to zaplatit, samozřejmě.
8. Tlačítka
Hodnocení
Přihlášení
Porovnávání
Vyhledávání
Primární navigace Komentáře
Registrace Drobečková navigace
Související
Košík Sekundární navigace
Lightbox
Strom produktů Doprava a platba
Formuláře Náhledy
Typogra e Patička
Facetová navigace Galerie Kontaktní údaje
Užitečné informace Objednávka
Detail
neděle, 20. června 2010
Dneska si tu prosvištíme 6 základních oblastí, kterým se musíte při návrhu například eshopu
věnovat.
Pojďme se na to vrhnout, čeká nás toho docela hodně.
9. Tlačítka
Hodnocení
Přihlášení
Porovnávání
Vyhledávání
Primární navigace Komentáře
Registrace Drobečková navigace
Související
Košík Sekundární navigace
Lightbox
Strom produktů Doprava a platba
Formuláře Náhledy
Typogra e Patička
Facetová navigace Galerie Kontaktní údaje
Užitečné informace Objednávka
Detail
neděle, 20. června 2010
Dneska si tu prosvištíme 5 základních oblastí, kterým se musíte při návrhu například eshopu
věnovat.
Pojďme se na to vrhnout, čeká nás toho docela hodně.
11. User eXperience webu je pouze tak dobrá,
jak je dobrá jeho navigace.
neděle, 20. června 2010
Co je standardní
- hlavní a vedlejší menu
- horizontální, vertikální
12. Kde jsem?
Kam mohu jít?
neděle, 20. června 2010
Přijde-li uživatel záchodovým okýnkem... z vyhledávačů, bannerů, jiných webů.
Tyto otázky, nic víc, nic míň.
13. neděle, 20. června 2010
hlavní menu
vidím kde jsem
- navigační cesta
- postranní menu - sekundární menu
14. neděle, 20. června 2010
hlavní menu
vidím kde jsem
- navigační cesta
- postranní menu - sekundární menu
15. neděle, 20. června 2010
Alza.cz už trochu horší
- souvisí i s grafickým designem
- úzký pravý sloupec
- drobečková navigace téměř není vidět
- vidím na první pohled, že doporučené zboží má klik na detail?
16. neděle, 20. června 2010
Alza.cz už trochu horší
- souvisí i s grafickým designem
- úzký pravý sloupec
- drobečková navigace téměř není vidět
- vidím na první pohled, že doporučené zboží má klik na detail?
17. neděle, 20. června 2010
iDnes vynechává navigační cestu
může si to dovolit
- dvojitá navigace
- doplňková navigace
18. neděle, 20. června 2010
iDnes vynechává navigační cestu
může si to dovolit
- dvojitá navigace
- doplňková navigace
19. neděle, 20. června 2010
souvisí se strukturou
když se navigace nezvládne
24. neděle, 20. června 2010
Martin Pecina - typograf
pod svícnem největší tma?
11px písmo je při delších textech nečitelné
- ano, můžu si zvětšit, ale kolik BFU to umí?
- umí to naše cílová skupina?
31. Dodržujte typogra cká pravidla
neděle, 20. června 2010
- začíná to psaním čárek, teček, závorek, časových údajů
- až po rozločení textu ve stránce, použitím nadpisů atd.
32. Pište česky
neděle, 20. června 2010
- používejte jazyk svých zákazníků
- žargon na běžný web nepatří
33. Strukturujte informace
neděle, 20. června 2010
- ať už se ptáte kohokoliv, lidi na webu zachytávají napoprvé dvě informace - odkazy a
nadpisy
- Jared Spool - trigger words - spouštěcí slova
- nadpisy, citace, seznamy číslované, nečíslované, definiční
- na tabulková data použijte tabulky
35. Cílem copywritera je napsat text, který osloví své čtenáře a dovede je
k požadované akci (objednání produktu/služby apod.).
http://cs.wikipedia.org/wiki/Copywriter
neděle, 20. června 2010
Cílem copywritera je napsat text, který osloví své čtenáře a dovede je k požadované akci (objednání
produktu/služby apod.).
- používá trigger words (spouštění slova) ve správném počtu a na správném místě
37. Kvalitně navržený formulář váš web buď
podpoří, nebo pohřbí.
neděle, 20. června 2010
Flash
- nemá standardní formulářové prvky
- každý prvek se musí udělat ručně a znovu
- výhoda bohaté interakce - ale nikdo jí nedělá
38. neděle, 20. června 2010
csob pojišťovna
k čemu tam jsou ty ikonky?
potřebuju ikonky na používání schránky?
39. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
40. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
41. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
42. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
43. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
44. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
45. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
46. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
47. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
48. neděle, 20. června 2010
co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
54. Nevymýšlejte kolo
neděle, 20. června 2010
Používejte formulářové prvky k tomu účelu, ke kterému byli stvořeny
HTML5 - nové možnosti pro formuláře
- validace na úrovni formulářů
- více typů vstupních polí
55. Testujte
neděle, 20. června 2010
testujte na svých lidech
testujte v úzkém i širokém okolí
testujte, testujte, testujte
56. Buďte konzistentní
neděle, 20. června 2010
Všechny použité formuláře musí vypadat shodně
- musí se shodně chovat
- chybová oznámení musí být vždy na stejném místě a stejně provedená
61. Buďte konzistentní
neděle, 20. června 2010
Všechny použité formuláře musí vypadat shodně
- musí se shodně chovat
- chybová oznámení musí být vždy na stejném místě a stejně provedená
64. K čemu je vám nákupní košík, když ho
neumíte prodat?
neděle, 20. června 2010
65. neděle, 20. června 2010
... všimněte si, že nikdo při vložení produktu do košíku nechce po uživateli registraci
- pokračování
- zpět do obchodu
- nabídka souvisejících produktů
66. neděle, 20. června 2010
trochu jiný přístup
- zase zpětka
- změna počtu
- pokračování výrazné
68. neděle, 20. června 2010
pokročíme dál
- doprava, platba
- nechybí cena za platbu i dopravu (je tam zdarma, protože jsem vybral drahý teleobjektiv) -
mohlo by být výraznější
69. neděle, 20. června 2010
druhý krok se u mall.cz liší!
chtějí po mě registraci... aniž bych se dozvěděl, kolik chtějí za dopravu...
a nejsou jediní...
70. neděle, 20. června 2010
stejně tak hifishop
říkám si, kde asi tak vzali inspiraci?
71. neděle, 20. června 2010
a heleme se!
Proč to dělají?
- automatická registrace
- necháte mail a hned vás začnou spamovat výhodnýma nabídkama... supr, ne?
72. neděle, 20. června 2010
Krásnější = použitelnější. A i když to nemusí být vždy pravda, uživatelé to tak vnímají. Tato
představa má poté vliv na jejich celkové hodnocení produktu a jejich pocit uspokojení.
Krásným produktům pak uživatelé často odpouštějí jejich nedostatky v použitelnosti, nebo
nedostatek funkcí.
73. Krása?
neděle, 20. června 2010
Krásnější = použitelnější. A i když to nemusí být vždy pravda, uživatelé to tak vnímají. Tato
představa má poté vliv na jejich celkové hodnocení produktu a jejich pocit uspokojení.
Krásným produktům pak uživatelé často odpouštějí jejich nedostatky v použitelnosti, nebo
nedostatek funkcí.
74. Chápete?
neděle, 20. června 2010
Krásnější = použitelnější. A i když to nemusí být vždy pravda, uživatelé to tak vnímají. Tato
představa má poté vliv na jejich celkové hodnocení produktu a jejich pocit uspokojení.
Krásným produktům pak uživatelé často odpouštějí jejich nedostatky v použitelnosti, nebo
nedostatek funkcí.
75. Tweak, don’t redesign...
Steve Krug, sensible.com
neděle, 20. června 2010
- tweak, dont redesign - steve krug - Nenuťte uživatele přemýšlet (bible UX designérů)
- malé změny, častěji, testovat
- neztratíte své stálé uživatele brutální změnou
- dozvíte se která změna co přináší