Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vratislav Kopp

3,000 views

Published on

Jak nepokazit finish

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Vratislav Kopp

  1. 1. by Jak nepokazit finiš ...aneb na formulářích záleží
  2. 2. =
  3. 3. Sestavení otázek
  4. 4. ZDROJ: marketingexperiments.com, imagescape.com (PDF) Vyhoďte zbytečné otázky Čím více otázek, tím více, lidé lžou. Méně otázek se vyplatí businessově.
  5. 5. Zbavte se optional otázek Lidé neřeší required položky, ale vnímají formulář jako celek: cxpartners.co.uk Jméno sousedky (nepovinné)
  6. 6. ...nebo se na ně ptejte po odeslání formuláře
  7. 7. Udělejte si question protocol 1. Můžete odpověď získat jinde? 2. Co přesně s odpovědí plánujete dělat? 3. Jaká je kvalita odpovědí? 4. Opravdu potřebujete odpověď teď? ZDROJ: uxmatters.com
  8. 8. Seřazujte a seskupujte je dle témat. Tvořte přirozené pauzy.
  9. 9. Pokud je to možné používejte podmíněný input.
  10. 10. Jedna stránka formulář se skádá z několika krátkých témat nebo obsahuje mnoho otázek, ale mají společné téma. Kdy to rozdělit na stránky? Více stránek pro velké množství otázek s několika různými tématy
  11. 11. U formulářů s několika kroky nebo mnoha otázkami indikujte progres.
  12. 12. Umožněte uložit rozdělanou žádost k dokončení později Dobrý den, děkujeme Vám, že chcete využívat naše služby. Kód Vaší rozpracované žádosti je: xxxxx. Pokud jste žádost dosud nedokončili, můžete to udělat na www.airbank.cz. Rozpracovanou žádost najdete v části „Stát se klientem“. Zde stačí kliknout na záložku „Pokračovat v žádosti“ a žádost dokončit.
  13. 13. U velmi složitých formulářů používejte startovací stránku
  14. 14. Layout formuláře
  15. 15. Vyhoďte vše, co není formulář HLAVIČKA PATIČKA NAVIGACE NAVIGACE REKLAMY, NÁSTROJE NESLOUŽÍCÍ FORMULÁŘE
  16. 16. Používejte jednosloupcový layout ZDROJE: baymard.com, cxpartners.co.uk, nngroup.com,
  17. 17. Existují výjimky Jméno Příjmení Den Měsíc Rok Hodiny Minuty Výška Šířka
  18. 18. Hodiny, Minuty Vyjímky je lepší sloučit. Jméno a příjmení Den, Měsíc, Rok
  19. 19. Labely
  20. 20. Velká a malá písmena používejte jako ve větách Dodací adresa > dodací adresa > Dodací Adresa > DODACÍ ADRESA
  21. 21. ZDROJE: uxmatters.com, lukew.com, nngroup.com Labely ideálně nad inputem Jméno
  22. 22. V mobilu rozhodně nahoře
  23. 23. Bacha na labely uvnitř James Newman Fax number
  24. 24. Označujte optional, ne required Jméno E-mail Telefon PSČ Jméno E-mail Telefon PSČ *povinné *povinné *povinné nepovinné ZDROJE: uxmovement.com, uxmovement.com # 2
  25. 25. Na zadaný e-mail pošleme informaci o případné výhře a vaše soukromí dodržujeme na 100 %. Tak přísaháme. Nebojte se, vaše data jsou u nás v bezpečí. Rodné číslo potřebujeme, protože je v žádosti vyžadováno zákonem. Jinak by nás nikdy nenapadlo ho chtít :) Rodné číslo U složitých nebo citlivých vysvětlete proč je vyplnění pro uživatele užitečné, rozptylte obavy E-mail Můžete jí kdykoliv později změnit Přezdívka
  26. 26. Inputy
  27. 27. Vyberte správný input. Žena Jméno Pohlaví Muž Požadovaná výbava Autorádio Vyhřívaná sedadla Vodotrysk Kraj Počet osob - +2 0 % 100 % 20 % 80 % Praha Středočeský Jihomoravský Pardubický
  28. 28. Vyberte správný input.
  29. 29. 1. Je přirozenější odpověď napsat než vybrat? 2. Je u odpovědí jednoduchý a častý překlep? 3. Potřebuje uživatel vidět odpovědi, aby pochopil otázku? 4. Kolik je možných odpovědí? 5. Může uživatel vybrat více než jednu? 6. Jsou možné odpovědi vizuálně odlišné? Vyberte správný input. ZDROJ: Formsthatwork.com (PDF)
  30. 30. Nejčastější je textový input. Zvolte správnou délku. vratislav.kopp@gmail.com E-mail 170 00 PSČ Otázka Odpověď Otázka Odpov ZDROJ: Wikipedia.org
  31. 31. Nezapomeňte na input type. ZDROJ: Mobileinputtypes.com Text (/ password) Email Phone number Number Date (/week, time,..) URL
  32. 32. ...bohužel to stále není samozřejmost
  33. 33. Radio buttony a checkboxy by měly být vybratelné celým řádkem Žena Pohlaví Muž Požadovaná výbava Vyhřívaná sedadla
  34. 34. 7 - 15 možností drop down 2 - 6 možností radio button ZDROJE: Baymard.com, Smashingmagazine.com
  35. 35. Pro rozsáhlý uzavřený výběr použijte našeptávač. ZDROJ: Smashingmagazine.com Podpořte alternativyZohledněte řazení
  36. 36. Když nemáte našeptávač, použijte aspoň dobrý default a řazení
  37. 37. Pozor na dlouhé odpovědi v mobilním drop-down menu
  38. 38. Pro výběr škály, kde čekáte nízkou variabilitu odpovědí, použijte stepper
  39. 39. Využívejte nových funkcí mobilních browserů.
  40. 40. Každopádně šetřete inputy. ZDROJ: Baymard.com
  41. 41. Pořebujete to? 1. Je pole absolutně nutné? Popis 2. Je label na inputem? (Ne vevnitř nebo pod ním) 3. Máte označena nepovinná pole? 4. Dali jste pryč zbytečné placeholdery a nápovědy? Viditelnost 5. Je pole dostatečně velké pro většinu možných odpovědí? 6. Je pole viditelné při obou orientacích displeje se zapnutou klávesnicí? Vyplňování 7. Máte pro pole nějaké defaults? Jsou k dispozici z databáze, případně historie uživatele? Nebo často vyplňované odpověd? 8. Můžete použít features a senzory telefonu k vyplnění? (Foťák, GPS, Mikrofon, Kontakty…) 9. Můžete pole předvyplnit na základě jiných informací? (např. město na základě PSČ nebo čísla slevového kupónu) Psaní 10. Podporujete copy & paste? 11. Používáte správný typ klávesnice? 12. Můžete použít našeptávač nebo autocomplete na základě prvních vyplněných písmen? 13. Vypněte autocorrect pro jména, adresy a emaily 14. Chápe váš formulář běžné zkratky a překlepy? 15. Necháváte uživatelům svobodu ve formátu? (např. telefonní číslo, datum, číslo kreditní karty). Zformátovat to můžete za ně... Checklist pro mobilní zobrazení ZDROJ: nngroup.com
  42. 42. Akce
  43. 43. Zbavte se sekundárních akcí. Zaplatit
  44. 44. Když máte více akcí, prioritizujte velikostí, vzdáleností, polohou. Zaplatit Zrušit
  45. 45. Hlavní akce vlevo je nejčastější, ale je dobré to otestovat. Save vs Cancel Save Cancel SaveCancel vs ZDROJ: Smashingmagazine.com
  46. 46. Buďte konzistetní v umístění. +
  47. 47. Vytvořte dojem směřování.
  48. 48. Vyhýbejte se generickým popisům, musí být jasné, co se stane a že je to žádoucí. Ano Ne Všechny naše pokoje mají prostor pro přistýlku, ale připravujeme ji pro hosty pouze na přání. Budete chtít přistýlku připravit? Ne, děkujiChci přistýlku Všechny naše pokoje mají prostor pro přistýlku, ale připravujeme ji pro hosty pouze na přání. Budete chtít přistýlku připravit?
  49. 49. Naznačte, že se něco děje. Uložit 32 % complete Hotovo
  50. 50. Nepoužívejte CAPTCHA dokud jste nevyzkoušeli vše ostatní. ZDROJ: Smashingmagazine.com, Haacked.com, Moz.com
  51. 51. Nenuťte hesla opakovat. ZDROJE: Uxmovement.com, Formisimo.com ********************* Zadejte heslo Zopakujte heslo *********************
  52. 52. Místo toho je dovolte odmaskovat. ZDROJ: Passwordmasking.com Maminka1234 Zadejte heslo Ukázat heslo
  53. 53. Nápověda a asistivní funkce
  54. 54. Podporujte autocomplete.
  55. 55. Používejte chytré a personalizované defaults. M Velikost S Praha Kraj Počet osob - +2 L XL
  56. 56. +420 775 323 017 00420 775 323 017 775 323 017 775323017 775 323017 775-323-017 775.323.017 Netrvejte na jednom formátu. Buďte velkorysí. Telefonní číslo
  57. 57. Číslo karty (bez mezer a pomlček) … a když nejste, ukažte, jaký formát je potřeba.
  58. 58. Opravujte známé chyby
  59. 59. U inputu se jednoznačným formátem automaticky pousunujte na další pole.
  60. 60. Automaticky formátujte inputy do přehledného formátu
  61. 61. Když tušíte, že by chyba mohla nastat u velké části uživatelů, poskytněte inline nápovědu. Objem motoru Objem motoru najdete v malém tech. průkazu.
  62. 62. Pokud pomoc potřebuje menšina lidí, použijte user triggered help Objem motoru
  63. 63. Každopádně to nepřehánějte
  64. 64. 1. Uživatelům neznámý typ informací 2. Budou přemýšlet, k čemu je potřebujete 3. Budou se bát o soukromí 4. Jsou přesné formáty toho, co vyplnit Kdy použít nápovědu a vysvětlení
  65. 65. Omyly odhalte včas inline validací umístěnou ideálně pod inputem (mobil) nebo vpravo (desktop). Validační hlášku zobrazujte na lost-focus. Telefon Email frantaseznam.cz Nespletli jste se? Zadanému emailu chybí zavináč @.
  66. 66. Když odhalíte chybu, vysvětlete, co se stalo a navrhněte řešení.
  67. 67. Budujte vztah
  68. 68. Základem dobré uživatelské zkušenosti jsou emoce.
  69. 69. 1. Minimalizujte bolest 2. Vytyčte jasnou cestu k cíli 3. Uvědomte si kontext 4. Buďte konzistentní Když už nic jiného...
  70. 70. Testujte, testujte, testujte!
  71. 71. díky & těším Vratislav Kopp Managing Director vratislav.kopp@bistrox.cz +420 775 323 017 se na feedback We are

×