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
150
Other Decks in Design
See All in Design
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
330
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
320
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
#Dubois Challenge 2025: Economics
ajstarks
0
140
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
510
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
330
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
190
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.1k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
140
PF_濵村ひろみ_202503
maru_design78
0
200
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
590
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Music & Morning Musume
bryan
46
6.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Six Lessons from altMBA
skipperchong
28
3.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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!