Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UX - Cadastro: Como ter uma tela melhor
Search
Alda Rocha
March 08, 2017
Design
4
670
UX - Cadastro: Como ter uma tela melhor
Palestra do evento FrontendSP
Alda Rocha
March 08, 2017
Tweet
Share
More Decks by Alda Rocha
See All by Alda Rocha
Como viés influencia o que desenvolvemos
mjcoffeeholick
3
200
Viés
mjcoffeeholick
3
140
Os clichês de UX
mjcoffeeholick
0
150
Viés e UX
mjcoffeeholick
1
180
UXD: a manopla do infinito do design
mjcoffeeholick
0
92
Raio X de UX
mjcoffeeholick
1
900
UXD: Manopla do infinito do design
mjcoffeeholick
6
290
Qual é a história que seu produto conta?
mjcoffeeholick
3
91
Como ter uma comunidade mais inclusiva
mjcoffeeholick
1
120
Other Decks in Design
See All in Design
The Fight
euralisw
0
110
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
モデル・デザイン入門
akitsugu7935
0
460
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
310
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
570
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
850
Wolf and the seven goatkids
_limex_
PRO
0
420
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
1
110
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
KATA
mclloyd
14
12k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Done Done
chrislema
178
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Docker and Python
trallard
33
2.7k
The Invisible Side of Design
smashingmag
294
49k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
Fireside Chat
paigeccino
20
2.6k
Transcript
UX - Cadastro Como ter uma tela melhor
Alda Rocha UX Designer - Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io
UX - Cadastro Como ter uma tela melhor
Don’t Use ‘Sign In’ and ‘Sign Up’ Together
O quão rápido você consegue diferenciar uma palavra da outra?
Users fazem scan da tela rapidamente e assumem que o
primeiro call to action que chamar atenção é o correto.
Bad
Better Good
Microcopy (PT-BR)
Logar Cadastrar Registrar Assinar Entrar …
Botões completamente diferentes um do outro (cor e estilo) para
deixar claro as diferenças entre ações:
Cor diferente funciona! (atenção com daltônicos)
Eliminate as Many Fields as Possible
Pergunte o mínimo possível pra começar. Quanto menor o form,
mais fácil do user efetuar o cadastro.
Remova o campo duplicado de confirmação de senha. CALMA! Tem
soluções em outro slide.
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.
Differentiate Login From Registration
Muitos sites e apps usam praticamente o mesmo número de
campos para login/cadastro e os exibem lado a lado.
Muito importante ter uma diferença clara entre uma ação e
outra.
Let Users See Their Password
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é!
Não faça o usuário preencher o mesmo campo 2X </3
Implemente um exibir senha
Uma outra dica é inserir um ícone para ver sua
senha. Cuidado: Nem todo mundo entende o que ícone quer dizer.
Provide Guidance
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
De feedback da validação do form em tempo real Real-time
Data Validation
De saídas, soluções pro problema quando possível Alda Rocha
“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.”
User progress
Use Email or Phone Number, Rather Than Username
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 =/
Seu app ou site deve permitir que o user cadastre-se
por algo mais pessoal e rápido.
Allow User to Log in Via Facebook, Twitter or Google+
Para evitar dor de cabeça com cadastros:
Como a gente sabe que nem todo mundo fica confortável
com isso:
Keep Users Signed In When They Register
Nada mais irritante que você acabar de se registrar e
estar DESLOGADO!!
Make Password Recovery Painless
None
A gente vai esquecer as senhas! Faça ser fácil
de ver e achar como resetar senha o tempo todo.
Follow a ‘Try Before You Buy’ Strategy
Não force o cadastro!
Deixe o user degustar seu app/site
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.
Customers are the result of a series of events. And
creating an efficient registration process is just a first step in this direction.
https://blog.intercom.com/ways-to-increase-user-engagement/
https://uxdesign.cc/the-magic-of-microcopy-a56c5decbe1f#.fvh773q3z
https://www.alura.com.br/curso-online-introducao-ao-microcopy
None
None
Apoie uma mulher! #MulheresEmTI
https://medium.com/nossa-coletividad/regrinhas-b%C3%A1sicas-de- conviv%C3%AAncia-em-meetups-89fde78b41d5#.7oomynmdp
Vlw!
Alda Rocha UX Designer e Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io
Me add!