Typické prvky webu - Lukáš Hroch

1,233 views
1,144 views

Published on

Konference User Experiece - Praha
22. 6. 2010

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,233
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Typické prvky webu - Lukáš Hroch

  1. 1. Lukáš Hroch neděle, 20. června 2010
  2. 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. 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. 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. 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. 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. 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. 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. 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ě.
  10. 10. Navigace neděle, 20. června 2010
  11. 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. 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. 13. neděle, 20. června 2010 hlavní menu vidím kde jsem - navigační cesta - postranní menu - sekundární menu
  14. 14. neděle, 20. června 2010 hlavní menu vidím kde jsem - navigační cesta - postranní menu - sekundární menu
  15. 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. 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. 17. neděle, 20. června 2010 iDnes vynechává navigační cestu může si to dovolit - dvojitá navigace - doplňková navigace
  18. 18. neděle, 20. června 2010 iDnes vynechává navigační cestu může si to dovolit - dvojitá navigace - doplňková navigace
  19. 19. neděle, 20. června 2010 souvisí se strukturou když se navigace nezvládne
  20. 20. neděle, 20. června 2010 ještě, že ty taby nemají i dole a kolem dokola
  21. 21. neděle, 20. června 2010 už jen pro zasmání
  22. 22. Typogra e neděle, 20. června 2010
  23. 23. User eXperience design je typogra e. neděle, 20. června 2010
  24. 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?
  25. 25. neděle, 20. června 2010 rozdíl v pojetí je vidět i od iDnes.cz
  26. 26. neděle, 20. června 2010
  27. 27. neděle, 20. června 2010 jak neprezentovat dobrá možné jen pro roboty... SEO korunka.cz
  28. 28. neděle, 20. června 2010 trochu lepší, ale... rozumí uživatel daným pojmům? hifishop.cz
  29. 29. neděle, 20. června 2010 že se umí utnou i mall.cz
  30. 30. Whazup?! neděle, 20. června 2010 - co s tím?
  31. 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. 32. Pište česky neděle, 20. června 2010 - používejte jazyk svých zákazníků - žargon na běžný web nepatří
  33. 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
  34. 34. ... najděte si copywritera! neděle, 20. června 2010
  35. 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ě
  36. 36. Formuláře neděle, 20. června 2010 - mimo odkazů druhý stavební kámen webových aplikací
  37. 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. 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. 39. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  40. 40. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  41. 41. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  42. 42. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  43. 43. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  44. 44. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  45. 45. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  46. 46. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  47. 47. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  48. 48. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  49. 49. neděle, 20. června 2010 ekonto - většina zná - historické souvislosti
  50. 50. neděle, 20. června 2010 jeden typ chybové hlášky - bohužel v tomto případě vám sdělí pouze jednu chybu, i když jich máte ve formuláři více
  51. 51. neděle, 20. června 2010 řešením jsou inline validace...
  52. 52. neděle, 20. června 2010 ... pokud je výrobíte správně co se tady stalo?
  53. 53. Formulář musí vypadat jako formulář neděle, 20. června 2010
  54. 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. 55. Testujte neděle, 20. června 2010 testujte na svých lidech testujte v úzkém i širokém okolí testujte, testujte, testujte
  56. 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á
  57. 57. neděle, 20. června 2010
  58. 58. neděle, 20. června 2010
  59. 59. neděle, 20. června 2010
  60. 60. neděle, 20. června 2010
  61. 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á
  62. 62. neděle, 20. června 2010 nebo taky můžete skončit takto...
  63. 63. Nákupní košík neděle, 20. června 2010
  64. 64. K čemu je vám nákupní košík, když ho neumíte prodat? neděle, 20. června 2010
  65. 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. 66. neděle, 20. června 2010 trochu jiný přístup - zase zpětka - změna počtu - pokračování výrazné
  67. 67. neděle, 20. června 2010 - opět klasická tabulka - doporučení produktů
  68. 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. 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. 70. neděle, 20. června 2010 stejně tak hifishop říkám si, kde asi tak vzali inspiraci?
  71. 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. 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. 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. 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. 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áší
  76. 76. neděle, 20. června 2010 Na závěr ikona mezi šopy Jak se vyvíjela?
  77. 77. Amazon.com neděle, 20. června 2010 Na závěr ikona mezi šopy Jak se vyvíjela?
  78. 78. neděle, 20. června 2010 1998
  79. 79. neděle, 20. června 2010 2000
  80. 80. neděle, 20. června 2010 2002
  81. 81. neděle, 20. června 2010 2008
  82. 82. neděle, 20. června 2010 dnes
  83. 83. Použitelnost JE konkurenční výhoda. neděle, 20. června 2010
  84. 84. Díky neděle, 20. června 2010
  85. 85. Díky soundake.cz neděle, 20. června 2010

×