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
760
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.1k
UXD: Manopla do infinito do design
mjcoffeeholick
6
340
Qual é a história que seu produto conta?
mjcoffeeholick
3
110
Como ter uma comunidade mais inclusiva
mjcoffeeholick
1
140
Other Decks in Design
See All in Design
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
130
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
260
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
330
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
140
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
680
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
410
The Golden Whitney
ohtristanart
PRO
0
510
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
0
130
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
130
オープンデータを利用して色々なものを作った話
hjmkth
1
110
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Gamification - CAS2011
davidbonilla
81
5.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Automating Front-end Workflow
addyosmani
1370
200k
Speed Design
sergeychernyshev
32
1k
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!