Este tema es para rastrear comentarios sobre el estilo de inicio de sesión / creación de cuenta a pantalla completa disponible en meta a través de: Discourse Design team experimentation topic
7 Me gusta
¿Se precargará?
Me encanta. Los modales de tamaño pequeño están desactualizados en las aplicaciones de usuario común de Internet desde hace un tiempo.
6 Me gusta
¡Se siente muy bien! Muy agradable. 
Algunos comentarios:
- Escritorio: el ancho de los botones sociales en pantallas grandes podría ser demasiado grande e imponente. Sin embargo, si los reduces, puede requerir más esfuerzo armonizar lo visual entre los paneles izquierdo/derecho.
- Escritorio: el color del ícono de cerrar podría necesitar más contraste para la accesibilidad.
Capturas de pantalla
- Móvil: Muy quisquilloso
. Parece que la altura de línea podría ser un poco alta.
- Móvil: No estoy seguro de esto. Depende del contraste de la pantalla. El color del borde del botón social parece apenas visible (lo primero que noté en mi móvil, pero se ve bien en mi segunda pantalla). Entiendo si es demasiado; seguramente será abrumador. Quizás usar
primary-300podría ayudar un poco.
6 Me gusta
¡Gracias por tus comentarios tan detallados!
2 Me gusta
Por ahora está instalado aquí en meta mientras experimentamos y recibimos comentarios. Si las cosas son bien recibidas, eventualmente haríamos que esto sea el predeterminado en el producto principal.
4 Me gusta
Creo que hay mucho espacio en blanco en la parte superior. ¿Por qué tengo que desplazarme para que aparezca el botón de inicio de sesión? Como puedes ver, al final todo el texto cabe perfectamente en la pantalla.
2 Me gusta
En Safari en iOS, el texto de “Bienvenida” está cortado.
Deslizar hacia arriba o hacia abajo tampoco soluciona el problema. Tenga en cuenta también que la “x” del modal está por encima del emoji.
Me pregunto si la mejor opción aquí es tener un límite de ancho máximo para el tratamiento de página completa del modal. Más allá de cierto ancho, es probable que no tenga sentido seguir utilizando la vista completa.
2 Me gusta
Sabes, creo que esto puede deberse al hecho de que me estoy ciñendo al diseño izquierda|derecha que teníamos en el modal cuando estaban presentes las opciones de inicio de sesión de autenticación.
Exploraré cómo llevar las opciones de inicio de sesión alternativas a la zona de inicio de sesión principal.
2 Me gusta
He realizado algunos ajustes teniendo en cuenta la mayoría de estos comentarios, échales un vistazo y dime qué opinas
@pmusaraj, échale un vistazo también, he abandonado el diseño de 2 columnas y lo he fusionado en una sola vista en el centro de pantalla completa, similar a Google y a las páginas de inicio de sesión de muchos otros sitios.
3 Me gusta
Es una idea interesante, pero para ser honesto, no estoy completamente convencido. Quizás sea memoria muscular de mi parte, ciertamente me he acostumbrado a la división blanco/azul (o negro/azul para temas oscuros) en estas pantallas, pero para mí eso también se ha convertido en parte de la identidad de Discourse. Parece un gran paso eliminarlo.
Permítanme publicar algunas capturas de pantalla una al lado de la otra, ayuda a poner las cosas en contexto (son instancias diferentes, pero es solo para dar una idea del cambio).
Además, en el modal de registro, la llamada a la acción “Crear tu cuenta” está oculta tras un desplazamiento, no la ves de inmediato.
Además, algo más a tener en cuenta, en todas las pantallas de inicio de sesión a pantalla completa falta el logotipo del sitio. Los usuarios suelen saber dónde están, pero el logotipo es una validación adicional importante de que realmente estás introduciendo datos sensibles (un correo electrónico, una contraseña) en el sitio correcto. En las pantallas antiguas está ahí, más o menos, cortesía del marco modal.
8 Me gusta
Aquí tienes algunos comentarios.
Se ve bien. Sin embargo, creo que le falta algo de identidad visual. 
. (EDIT: Tengo exactamente la misma sensación que Penar sobre la identidad)
Móvil
Se ve bien en modo vertical.
Algunos problemas en modo horizontal:
- El encabezado está cortado. No puedes desplazarte hacia arriba, pero sí hacia abajo.
Captura de pantalla
Ocurre también en modo vertical.
El teclado empuja el contenido hacia arriba en la página de inicio de sesión. No ocurre en la página de registro.
Sobre el modo horizontal. La mayoría de la gente no lo usará, pero puede ocurrir y no es una buena experiencia de usuario. Creo que puedes ajustar un poco el CSS para que los bloques floten alrededor del mensaje de bienvenida. No es ideal, pero está bien:
Sin embargo, lo más atractivo visualmente para mí es dividir las credenciales y los botones sociales por la mitad:
- No está directamente relacionado. En el móvil, el primer campo de entrada tiene el foco y se abre el teclado directamente. (No sé si es el mismo comportamiento en todas partes)
Creo que empeora la experiencia de usuario por dos razones:
- No ves la página completa al principio y no es acogedor.
- No ves todas las opciones de inicio de sesión. (especialmente para los usuarios que usan inicio de sesión social: tienes que cerrar el teclado cada vez)
Escritorio
En general se ve bien, con algunos problemas.
- Se ve bien en pantallas de tamaño mediano:
- En pantallas grandes, no estoy seguro. Se ve bien; sin embargo, aunque tener todos los botones sociales en una sola línea parece conveniente, se ve inusual (contenido pequeño centrado, con debajo un contenido grande). No está mal y se ve bien; podría ser un hábito del estilo anterior, ya que tu atención se centra en un lugar centrado.
Lo que hiciste antes era en realidad bastante elegante y, como sugirió Penar, un max-width sería suficiente para que se viera bien. No me importaría ver dos columnas en una pantalla grande, luego se ajusta automáticamente debajo de algún límite.
- En el lado de la respuesta: por debajo de una altura mínima, aparece una barra de desplazamiento en el panel izquierdo. No puedo probar en un dispositivo real si también ocurre. Creo que sería más natural para el usuario desplazarse por la página en lugar de por el componente interno.
Común
La barra de desplazamiento del foro es visible cuando se abre la ventana modal de inicio de sesión y puedes interactuar con ella. Puede confundir al usuario haciéndole pensar que hay algo cuando no lo hay. Puede ser desconcertante si la barra de desplazamiento de la ventana modal también aparece al mismo tiempo.
Ejemplo
4 Me gusta
Se agregaron otros ajustes y modificaciones hoy
4 Me gusta
Antiguo:
Nuevo:
El registro con cuenta social se siente extremadamente suprimido en una pantalla estrecha ahora. Estoy de acuerdo en que se ve visualmente mejor, pero ahora no está llamando la atención sobre estas acciones.
Barra lateral… al registrarse, probablemente queramos cambiar el texto a “registrarse con Google”. También es confuso que algunos sean “iniciar sesión” y otros “entrar”.
4 Me gusta
esto también iría en contra de sus directrices para los inicios de sesión sociales, hemos tenido algunos sitios notificados sobre botones de Facebook no conformes en el pasado (los requisitos de inicio de sesión social también podrían ser la razón por la que algunos dicen “iniciar sesión” en lugar de “registrarme”, aunque no estoy 100% seguro de eso)
4 Me gusta
Parece otro icono para compartir/seguir en el pie de página. No es nada bueno y estoy totalmente seguro de que la mayoría de los usuarios no se dan cuenta de que en realidad son para iniciar sesión.
1 me gusta
Aquí vamos.
Móvil
- En modo vertical, ¡se ve bien!
Posibles mejoras:-
Los botones sociales parecen bastante pequeños en mi teléfono (Android, FDH+, 2220x1080). Para comparar, el ancho de mi dedo es de ~1,5 cm y el ancho del botón es de 0,5 cm en la pantalla de mi teléfono. Esto podría ser un problema de accesibilidad. Intentaría hacerlos un poco más grandes (también el espacio).
-
Cuando el teclado está visible, mueve la ventana modal hacia arriba. Creo que está relacionado con este cambio reciente aquí FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub – Sin embargo, no creo que esto deba aplicarse a la ventana modal de inicio de sesión a pantalla completa. Experimentar un cambio de diseño no es bueno.
-
En modo horizontal, supongo que no se ha tocado. Se necesitaría algo de cariño en esta área.
-
Escritorio
¡Se ve bien en general!
Definitivamente estaría a favor de este diseño. ¡Gracias por traerlo de vuelta!
Pantalla grande
Tengo dos preocupaciones al respecto:
- Esos dos paneles todavía están un poco demasiado separados.
- Los botones sociales son un poco demasiado grandes.
Sobre el punto 2 – Podrías introducir más puntos de interrupción
@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%;
}
}
En resolución 2K, se ve así:
Sobre el punto 1 – No estoy seguro. Aquí hay una alternativa posible. Las ventajas son que la vista del usuario siempre está centrada manteniendo la identidad visual. El ancho del panel azul podría ajustarse. Esta no es la sensación exacta, pero está bastante cerca.
Nota: Con el ancho del botón reducido, estoy bastante contento con el diseño actual. Comparto esta sugerencia en caso de que te inspire. Me gusta un poco.
Algunos CSS que noté:
- El panel izquierdo tiene un
padding-topde3rem– esto no parece útil y hace que el panel no esté centrado en comparación con el panel derecho.
.login-left-side {
padding: 0 3rem 0 3rem
}
- El formulario de registro no está centrado verticalmente. Utiliza este CSS. ¿Hay alguna razón?
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
Centrado se ve bien para mí.
- El contraste de color del botón de cierre podría necesitar ajustarse por motivos de accesibilidad. Usaría
--primary-very-highen su lugar.
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
¡Eso es todo por mi parte!
3 Me gusta
Esta es la razón. Creo que el último recurso para los inicios de sesión sociales en pantallas pequeñas es simplemente mostrar el logo, pero necesito que me verifiquen / hacer alguna comprobación al respecto.
2 Me gusta
Ya no puedo dejar de verlo así, ¡gracias por mencionarlo!
Mmm…
Parece que las únicas guías de estilo que pude encontrar sobre el botón eran para Facebook y Google.
Facebook solo quiere que tengas un botón rectangular con “Iniciar sesión con Facebook”. Tampoco quieren que tengas muchas opciones para autenticarte con servicios que no sean Facebook.
Google está bien con usar solo su logotipo si es necesario como botón de inicio de sesión.
Eché un vistazo rápido aquí en meta y parece genial. Realmente no me afectará, ya que el foro principal en el que estoy es solo SSO.
1 me gusta