UX - Cadastro: Como ter uma tela melhor

Palestra do evento FrontendSP

Transcript

1. UX - Cadastro Como ter uma tela melhor
2. Alda Rocha UX Designer - Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io
3. UX - Cadastro Como ter uma tela melhor
4. Don’t Use ‘Sign In’ and ‘Sign Up’ Together
5. O quão rápido você consegue diferenciar uma palavra da outra?
6. Users fazem scan da tela rapidamente e assumem que o primeiro call to action que chamar atenção é o correto.
7. Bad
8. Better Good
9. Microcopy (PT-BR)
10. Logar Cadastrar Registrar
 Assinar
 Entrar
 …
11. Botões completamente diferentes um do outro (cor e estilo) para deixar claro as diferenças entre ações:
12. Cor diferente funciona!
 (atenção com daltônicos)
13. Eliminate as Many Fields as Possible
14. Pergunte o mínimo possível pra começar. Quanto menor o form, mais fácil do user efetuar o cadastro.
15. Remova o campo duplicado de confirmação de senha. CALMA! Tem soluções em outro slide.
16. Se é opcional, pergunte mais tarde. Não gaste tempo com campos que não são necessários agora. Deixe as informações opcionais para um complemento de perfil.
17. Differentiate Login From Registration
18. Muitos sites e apps usam praticamente o mesmo número de campos para login/cadastro e os exibem lado a lado.
19. Muito importante ter uma diferença clara entre uma ação e outra.
20. Let Users See Their Password
21. Erros de digitação de senhas são muito comuns. Pessoas cometem erros em especial usando mobile. O campo confirmar senha vira um tiro no pé!
22. Não faça o usuário preencher o mesmo campo 2X </3 Implemente um exibir senha
23. Uma outra dica é inserir um ícone para ver sua senha. Cuidado: Nem todo mundo entende o que ícone quer dizer.
24. Provide Guidance
25. Você precisa deixar claro e explicar os erros nos forms. Não diga que tem um erro, explique o erro e mostre como arrumar. User-friendly and Descriptive Error Messages
26. De feedback da validação do form em tempo real Real-time Data Validation
27. De saídas, soluções pro problema quando possível Alda Rocha
28. “For security reasons your password must be longer than 6 and shorter than 10 characters, contain at least one capital letter, a number and a symbol.”
29. User progress
30. Use Email or Phone Number, Rather Than Username
31. Nome e nicknames não são únicos! O users vai levar tempo para pensar ou acabar cadastrando: @alda123 @mjcoffeeholick Vai esquecer ou se arrepender depois =/
32. Seu app ou site deve permitir que o user cadastre-se por algo mais pessoal e rápido.
33. Allow User to Log in Via Facebook, Twitter or Google+
34. Para evitar dor de cabeça com cadastros:
35. Como a gente sabe que nem todo mundo fica confortável com isso:
36. Keep Users Signed In When They Register
37. Nada mais irritante que você acabar de se registrar e estar DESLOGADO!!
38. Make Password Recovery Painless
40. A gente vai esquecer as senhas! 
 Faça ser fácil de ver e achar como resetar senha o tempo todo.
41. Follow a ‘Try Before You Buy’ Strategy
42. Não force o cadastro!
43. Deixe o user degustar seu app/site
44. When you strip every barrier away from signing up, what you get is lots of sign-ups. And lots of sign-ups doesn’t translate automatically to the lots of customers.
45. Customers are the result of a series of events. And creating an efficient registration process is just a first step in this direction.
46. https://blog.intercom.com/ways-to-increase-user-engagement/
47. https://uxdesign.cc/the-magic-of-microcopy-a56c5decbe1f#.fvh773q3z
48. https://www.alura.com.br/curso-online-introducao-ao-microcopy
51. Apoie uma mulher!
 #MulheresEmTI
52. https://medium.com/nossa-coletividad/regrinhas-b%C3%A1sicas-de- conviv%C3%AAncia-em-meetups-89fde78b41d5#.7oomynmdp
53. Vlw!
54. Alda Rocha UX Designer e Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io Me add!