Login e Criação de Conta em Tela Cheia

[jordan.vidrine]

Este tópico é para rastrear feedback sobre o estilo de Login / Criação de conta em tela cheia disponibilizado no meta através de: Discourse Design team experimentation topic

[satonotdead]

Será pré-carregado?

Eu adoro. Modais de tamanho pequeno estão desatualizados nos aplicativos comuns do usuário da internet.

[Arkshine]

Parece muito bom! Muito legal.

Alguns feedbacks:

1. Desktop – a largura dos botões sociais em telas grandes pode ser muito grande e imponente. No entanto, se você diminuí-los, pode ser necessário mais esforço para harmonizar o visual entre os painéis esquerdo/direito.

Capturas de tela

Ou um meio-termo (largura do painel direito / 2)

2. Desktop – A cor do ícone de fechar pode precisar de mais contraste para acessibilidade.

Capturas de tela

3. Mobile – Muito exigente . Parece que a altura da linha pode ser um pouco alta demais

Capturas de tela

4. Mobile – Não tenho certeza sobre isso. Depende do contraste da tela. A cor da borda do botão social parece mal visível (a primeira coisa que notei no meu celular, mas parece ok na minha segunda tela). Entendo se for demais; certamente será avassalador. Talvez usar primary-300 possa ajudar um pouco.

Capturas de tela

[jordan.vidrine]

Obrigado por um feedback tão detalhado!

[jordan.vidrine]

@satonotdead

Será pré-carregado?

Por enquanto, ele está instalado aqui no meta enquanto experimentamos e recebemos feedback. Se as coisas forem bem recebidas, eventualmente o tornaremos o padrão no produto principal.

[Moin]

Acho que há muito espaço em branco na parte superior. Por que preciso rolar para que o botão de login apareça? Como você pode ver, o texto inteiro cabe perfeitamente na tela.

[pmusaraj (Penar Musaraj)]

No Safari no iOS, o texto “Welcome” está cortado.

Deslizar para cima ou para baixo também não resolve o problema. Observe também que o ‘x’ da modal está acima do emoji.

@Arkshine

Desktop – a largura dos botões sociais em telas grandes pode ser muito grande e imponente. No entanto, se você os diminuir, pode ser necessário mais esforço para harmonizar o visual entre os painéis esquerdo/direito.

Eu me pergunto se a melhor opção aqui é ter um limite de largura máxima para o tratamento de página inteira da modal. Além de uma certa largura, provavelmente não faz sentido continuar usando a viewport inteira.

[jordan.vidrine]

@pmusaraj

Eu me pergunto se a melhor opção aqui é ter um limite de max-width para o tratamento de página inteira do modal. Além de uma certa largura, provavelmente não faz sentido usar a tela inteira.

Sabe, acho que isso pode ser devido ao fato de eu estar mantendo o layout esquerdo|direito que tínhamos no modal quando as opções de login de autenticação estavam presentes.

Vou explorar a possibilidade de trazer as opções de login alternativas para a zona principal de login.

[jordan.vidrine]

Fiz alguns ajustes incorporando a maior parte desse feedback, dê uma olhada e me diga o que você acha

@pmusaraj, dê uma olhada também, me afastei do layout de 2 colunas e me juntei a uma única visualização no centro de uma tela inteira, semelhante ao Google e a muitas outras páginas de login de sites.

[pmusaraj (Penar Musaraj)]

É uma ideia interessante, mas para ser honesto, não estou totalmente convencido. Talvez seja memória muscular da minha parte, com certeza me acostumei com a divisão branco/azul (ou preto/azul para temas escuros) nessas telas, mas para mim isso também se tornou parte da identidade do Discourse. Parece um grande passo removê-la.

Deixe-me postar algumas capturas de tela lado a lado, ajuda a colocar as coisas em contexto (são instâncias diferentes, mas é apenas para dar uma ideia da mudança).

Além disso, no modal de inscrição, o CTA “Crie Sua Conta” está atrás de uma rolagem, você não o vê imediatamente.

Além disso, outra coisa a considerar, em todas as telas de login em tela cheia, o logotipo do site está faltando. Os usuários geralmente sabem onde estão, mas o logotipo é uma validação adicional importante de que você está realmente inserindo dados confidenciais (um e-mail, uma senha) no local correto. Nas telas antigas, ele está lá, de certa forma, cortesia da moldura modal.

[Arkshine]

Aqui estão alguns comentários!

Parece bom. Acho que falta um pouco de identidade visual, no entanto. . (EDIT: Tenho exatamente o mesmo sentimento que o Penar sobre a identidade)

Mobile

Parece bom no modo retrato.

Screenshot

Alguns problemas no modo paisagem:

• O cabeçalho está cortado. Você não pode rolar para cima, mas pode rolar para baixo.

Screenshot

Isso também acontece no modo retrato.
O teclado empurra o conteúdo para cima na página de login. Isso não acontece na página de registro.

Sobre o modo paisagem. A maioria das pessoas não o usará, mas pode acontecer, e não é uma boa experiência do usuário. Acho que você pode ajustar um pouco o CSS para fazer os blocos flutuarem em torno da mensagem de boas-vindas. Não é o ideal, mas está bom:

Exemplo 1

No entanto, o mais visualmente atraente para mim é dividir as credenciais e os botões sociais ao meio:

Exemplo 2

• Não diretamente relacionado. No celular, o primeiro campo de entrada está focado e abre o teclado diretamente. (Não sei se o comportamento é o mesmo em todos os lugares)
  Acho que isso piora a experiência do usuário por dois motivos:

1. você não vê a página inteira de primeira, e não é acolhedor.
2. você não vê todas as opções de login. (especialmente para usuários que usam login social - você tem que fechar o teclado toda vez)

O que vejo depois de clicar em login

Desktop

Na maioria das vezes parece bom, com alguns problemas.

• Parece bom em telas de tamanho médio:

Screenshot

• Em telas grandes, não tenho certeza. Parece bom; no entanto, embora ter todos os botões sociais em uma linha pareça conveniente, parece incomum (conteúdo pequeno centralizado, com abaixo um conteúdo grande). Não está errado, e parece bom - pode ser um hábito do estilo anterior, pois sua atenção se concentra em um local centralizado.

Screenshot

O que você fez antes era realmente elegante e, como sugeriu Penar, uma largura máxima seria suficiente para que ficasse bom. Não me importaria de ver duas colunas em uma tela grande, então ele se ajustaria automaticamente abaixo de algum limite.

Login semelhante ao anterior com ajuste de largura máxima

• No lado responsivo - abaixo de uma altura mínima, você obtém uma barra de rolagem no painel esquerdo. Não consigo testar em um dispositivo real se isso também acontece. Acho que seria mais natural para o usuário rolar a página em vez do componente interno.

Screenshot

Comum

• A barra de rolagem do fórum fica aparente quando o modal de login é aberto, e você pode interagir com ela. Isso pode confundir o usuário, fazendo-o pensar que há algo quando não há. Pode ser confuso se a barra de rolagem do modal também aparecer ao mesmo tempo.

Exemplo

[jordan.vidrine]

Mais uma rodada de ajustes e modificações foi adicionada hoje

[sam (Sam Saffron)]

Antigo:

Novo:

O cadastro com conta social está parecendo extremamente suprimido em uma tela estreita agora. Concordo que visualmente parece melhor, mas não está chamando essas ações agora.

---

Barra lateral… no cadastro, provavelmente queremos mudar o texto para “cadastrar com Google”. Além disso, é confuso que alguns sejam “entrar” e outros sejam “fazer login”.

[awesomerobot (Kris)]

@sam

mas não está chamando essas ações agora.

isso também violaria as diretrizes deles para logins sociais, tivemos alguns sites notificados sobre botões do Facebook não conformes no passado (os requisitos de login social também podem ser o motivo pelo qual alguns dizem “entrar” em vez de “registrar-se”, embora eu não tenha 100% de certeza sobre isso)

[Jagster (Jakke Lehtonen)]

@sam

não está chamando essas ações agora

Parece outro ícone de compartilhar/seguir no rodapé. Nada bom e tenho total certeza de que a maioria dos usuários não percebe que eles são, na verdade, para login.

[Arkshine]

Vamos lá.

Mobile

• No modo retrato, fica bom!
  Possíveis melhorias:

  1. Os botões sociais parecem bem pequenos no meu celular (Android, FDH+, 2220x1080). Para comparar, a largura do meu dedo é de ~1,5cm, e a largura do botão é de 0,5cm na tela do meu celular. Isso pode ser um problema de acessibilidade. Eu tentaria torná-los um pouco maiores (o espaçamento também).
     

     

  2. Quando o teclado está visível, ele move o modal para cima. Acredito que esteja relacionado a esta alteração recente aqui FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub – No entanto, não acho que isso deva ser aplicado ao modal de login em tela cheia. Experimentar uma mudança de layout não é bom.

  3. No modo paisagem, presumo que não foi tocado. Seria necessário algum carinho nessa área.
     

     

Desktop

Fica bom no geral!
Eu seria definitivamente a favor desse design. Obrigado por trazê-lo de volta!

Tela grande

Tenho duas preocupações com ele:

1. Esses dois painéis ainda estão um pouco distantes
2. Os botões sociais são um pouco grandes demais.

Sobre o 2. – Você poderia introduzir mais pontos de interrupção

@media screen and (min-width: 1536px) {
  .d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
    width: 70%;
  }
}

@media screen and (min-width: 1920px) {
  .d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
    width: 60%;
  }
}

@media screen and (min-width: 2560px) {
  .d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
    width: 50%;
  }
}

Em resolução 2K, fica assim:

Sobre o 1. – Não tenho certeza. Aqui está uma alternativa possível. As vantagens são que a visualização do usuário está sempre centralizada, mantendo a identidade visual. A largura do painel azul poderia ser ajustada. Esta não é a sensação exata, mas está bem próxima.

Nota: Com a largura do botão reduzida, estou bem satisfeito com o design atual. Compartilho esta sugestão caso você tenha alguma inspiração para isso. Eu meio que gosto disso.

Alguns CSS que notei:

• O painel esquerdo tem um padding-top de 3rem – isso não parece útil e faz com que o painel não fique centralizado em comparação com o painel direito.

.login-left-side {
  padding: 0 3rem 0 3rem
}

• O formulário de registro não está centralizado verticalmente. Ele usa este CSS. Há algum motivo?

.d-modal.create-account .login-left-side {
  height: calc(80% - 6rem);
  @media screen and (max-width: 900px) {
    height: calc(100% - 6rem);
  }
}

Centralizado fica bom para mim.

• O contraste de cor do botão de fechar pode precisar ser ajustado por motivos de acessibilidade. Eu usaria --primary-very-high em vez disso.

.d-modal__header .modal-close .d-icon {
  color: var(--primary-very-high);
}

---

É tudo por mim!

[jordan.vidrine]

@awesomerobot

os requisitos de login social também podem ser o motivo pelo qual alguns dizem “log in” em vez de “sign in”, embora eu não tenha 100% de certeza sobre isso

Este é o motivo. Acho que o último recurso para logins sociais em telas pequenas é apenas mostrar o logotipo, mas preciso ser verificado / fazer alguma verificação sobre isso.

[jordan.vidrine]

@Jagster

Parece que são outros ícones de compartilhamento/seguimento no rodapé.

Não consigo mais ver de outra forma agora, obrigado por levantar isso!

[jordan.vidrine]

@jordan.vidrine

Preciso verificar fatos / fazer algumas verificações sobre isso

Hmmm…

Parece que os únicos guias de estilo que encontrei no botão foram para Facebook e Google.

O Facebook só quer que você tenha um botão retangular com “Entrar com o Facebook”. Eles também não querem que você tenha muitas opções de autenticação com serviços além do Facebook.

O Google não se importa em usar apenas o logotipo deles, se necessário, como um botão de login.

[not-ethan (Ethan)]

Dei uma olhada rápida aqui no meta e parece legal. Não vai me afetar muito, pois o principal fórum em que estou é apenas SSO.