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
770
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
240
Viés
mjcoffeeholick
3
150
Os clichês de UX
mjcoffeeholick
0
170
Viés e UX
mjcoffeeholick
1
210
UXD: a manopla do infinito do design
mjcoffeeholick
0
120
Raio X de UX
mjcoffeeholick
1
1.2k
UXD: Manopla do infinito do design
mjcoffeeholick
6
340
Qual é a história que seu produto conta?
mjcoffeeholick
3
120
Como ter uma comunidade mais inclusiva
mjcoffeeholick
1
150
Other Decks in Design
See All in Design
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.2k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
480
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
490
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
530
Memory Man v3 (WIP)
storybychad
PRO
0
2.5k
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
1.7k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
1
180
株式会社Muture_ソーシャル推進事業
muture
PRO
0
130
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.7k
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
350
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
380
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
The Invisible Side of Design
smashingmag
301
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Typedesign – Prime Four
hannesfritz
42
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Unsuck your backbone
ammeep
671
58k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Music & Morning Musume
bryan
46
6.7k
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!