[UX] Facilitar o entendimento dos campos dos formulários

[ikaikyy]

#1528

Introdução

Trago para discussão a proposta de adicionar um recurso de dica de ajuda aos campos de formulário para fornecer aos usuários informações úteis e melhorar a experiência do usuário.

Diferentemente de alguns botões da aplicação, atualmente os formulários não possuem nenhum contexto sobre o que colocar em seus campos, apenas validações caso eles forneçam alguma informação errônea. Comportamento tal que pode deixar confuso quem não tiver conhecimento prévio sobre função de cada informação.

Um exemplo seria o campo "Nome de usuário", que não deixa nenhum aviso prévio ao usuário de que será sua URL personalizada para acesso ao seu conteúdo, que é algo nem tão comum, já que muitos sistemas utilizam UUIDs para acesso a entidades.

Mudança proposta:

• Adicionar juntamente às labels dos formulários, um ícone de ajuda que, ao passar o mouse por cima, exibe informações úteis e/ou avisos sobre o campo em questão.
• O texto será personalizável para cada label, assim o campo "email" por exemplo teria um texto diferente na tela de login e de recuperar senha por exemplo.
• Formulários mais amigáveis para quem ainda não conhece a comunidade do TabNews, podendo assim evitar que algum usuário novo utilize a plataforma de maneira indesejada.

Plano de teste:

• Testar em diferentes navegadores e dispositivos para garantir que a feature seja funcional para todos.
• Encontrar possíveis problemas de escalabilidade que a implementação pode causar.

Ideias sobre onde e oque colocar nas dicas seriam de grande ajuda no desenvolvimento.

Screenshots:

[Poveii]

É uma adição legal, @ikaikyy, tanto para acessibilidade quanto para melhor entendimento dos campos apresentados. Porém eu vejo que esse ícone ficou bem exposto, e eu creio que seja melhor ele só aparecer quando o mouse estiver em cima, pois fica um elemento visual muito chamativo, sendo que é só uma ajuda, já que o usuário consegue entender só pelo nomes do campos.

[aprendendofelipe]

@ikaikyy, obrigado pela proposta! 💪

É fato que alguns campos podem gerar dúvidas em alguns usuários, mas acho um pouco de exagero colocar ajuda em todos os campos.

Para o campo "Nome de usuário", deve ser suficiente adicionar um placeholder, por exemplo, IndentificadorPúblico. Acho que algo visível e sucinto tenha uma UX melhor do que o botão de interrogação para abrir a ajuda.

O outro que precisa de ajuda é o campo "Fonte". Até já existe issue aberta sobre isso (#941), então para a melhoria desse campo eu acho melhor continuar a discussão por lá, já que tem mais gente acompanhando.

E eu acho melhor não citar regras de validação na ajuda, como quantidade de caracteres, etc. Pelo menos por enquanto eu deixaria isso apenas para a mensagem retornada pelo back-end.

Também não acho boa ideia colocar nessa ajuda os detalhes de como cada informação será utilizada. Isso deve ser explicado de forma bem clara na nossa "política de privacidade", que ainda não foi criada. Colocar isso na ajuda traria o risco de ficar algo incompleto e/ou desatualizado, o que nos causaria problemas com a LGPD.

Então não vejo necessidade de ajuda para os outros campos. O que acham?

[Rafatcb]

O Primer tem algumas orientações na documentação do Text Input, inclusive nós quebramos uma delas na página de Publicar Novo Conteúdo:

Only use placeholder text to show an example of the expected input. Never use placeholder text for critical information.

E tem um elemento específico para ajudar na informação sobre o campo:

Caption: Provides additional context about the field to help users fill in the correct data or explain how the data will be used. Caption text should be as short as possible. Caption text may be displayed at the same time as a validation message, or it may be hidden if it only provides redundant information.

Como nós decidimos usar os componentes do Primer, acredito que devemos seguir as suas recomendações de usabilidade também. E isso evita os problemas que uma Tooltip traz.

[Rafatcb]

Com as melhorias implementadas em #1580, seguindo as orientações do Primer sobre Formulários, colocamos label em todos os campos de formulário, indicador se o campo é requerido, e um placeholder de exemplo.

Acho que isso resolve a necessidade de adicionar mais informações e podemos fechar esse issue, certo? Se precisar explicar ainda mais em algum campo, sugiro usar o Caption mencionado no meu comentário anterior #1529 (comment).

[aprendendofelipe]

Acho que isso resolve a necessidade de adicionar mais informações e podemos fechar esse issue, certo? Se precisar explicar ainda mais em algum campo, sugiro usar o Caption

Talvez seja interessante usar o Caption nos campos de username nas telas /cadastro e /perfil.

No cadastro eu acho que é válido informar que o usuário será uma informação pública.

No perfil podemos informar que a alteração irá modificar os links dos conteúdos. Mesmo existindo a mensagem de confirmação, pode ser legal informar isso logo de cara.

O que acham?

E falando na mensagem de confirmação, acho melhor mudar "publicações" para "conteúdos", não é?

tabnews.com.br/pages/perfil/index.public.js

Lines 83 to 84 in 3110967

	title: `Você realmente deseja alterar seu nome de usuário?`,
	content: `Isto irá quebrar todas as URLs das suas publicações.`,

E talvez já reformular a mensagem para sanar a #895

[Rafatcb]

O que acham?

Concordo. Aproveitei para trocar o título do issue para ficar mais claro que agora não se trata exatamente sobre Tooltips.

[Rafatcb]

Mais uma melhoria que falta e está relacionada à esse issue:

tabnews.com.br/pages/cadastro/index.public.js

Lines 192 to 196 in d03462c

	<Checkbox checked={isTermsAccepted} onClick={() => setIsTermsAccepted(!isTermsAccepted)} />
	<Text>
	Li e estou de acordo com os
	<Link href="/termos-de-uso"> Termos de Uso.</Link>
	</Text>

Devemos usar FormControl e Label para o checkbox funcionar de forma adequada (permitir clicar no label, por exemplo). Veja o exemplo da documentação:

() => (
  <Box as="form">
    <FormControl>
      <Checkbox value="default" />
      <FormControl.Label>Default label</FormControl.Label>
    </FormControl>
  </Box>
)