💇 🖼️ 🖐🏾 Formar patrones de diseño. Reseña del libro 👨🏻‍🎨 🕥 🏂🏽

Introducción por el autor de la revisión

El libro revela, a veces no es obvio para los diseñadores y desarrolladores front-end, los temas del diseño de campo, el concepto de trabajar con tipos de datos y usabilidad. El libro será útil tanto para principiantes como para diseñadores conocedores de la interfaz, ya que el primero dará una comprensión de los conceptos básicos, y el segundo dará de qué pensar, a veces controversiales, patrones de diseño. La revisión se presentará en forma de resúmenes breves del libro y breves comentarios del revisor.

Parte uno. Sobre los campos

1. Una etiqueta en la parte superior es mejor que una etiqueta en la izquierda.

Por qué: la tesis se ha convertido en un clásico del género. Se han escrito muchos artículos sobre este tema, por ejemplo , este y cientos de otros similares. Además, colocando la etiqueta encima obtenemos más espacio si la etiqueta es larga. Parece obvio, pero muchos diseñadores ponen tercamente etiquetas a la izquierda.

2. Marcadores de posición para no describir las reglas de llenado

Por qué: los marcadores de posición desaparecen al hacer clic en + recortar en el campo.

3. No solicite una contraseña nuevamente

Por qué: enfurece entrar dos veces.

4. Texto de error para escribir entre la etiqueta y el campo

Por qué: no se cerrará con un autocompletado o un teclado en un teléfono móvil.

Opinión: Parece que la tesis es comprensible, pero parece realmente súper inusual. Durante todo el tiempo de diseño de interfaces (más de 9 años), solo lo conocí una vez y solo en los diseños de un diseñador. Pero quizás valga la pena poner en práctica este patrón.

5. Las selecciones son mejores para no usar

Por qué: Ocultar opciones, no hacer zoom en algunos dispositivos, un clic adicional, alguien está intentando escribirles.

Opinión: trato de no usar selecciones si los puntos son menores o iguales a 3er. Si es así, es más fácil crear etiquetas o un grupo de radio. Quizás el hecho de que algunas personas crean que este es un campo de entrada, no un select e intenten escribir allí, dio lugar a un híbrido de input y select en forma de menú desplegable, pero el primer elemento del cual es el campo de entrada (más a menudo una búsqueda). Esto es tanto una solución como una muleta al mismo tiempo.

6. Cuando no necesita un calendario para indicar fechas

No se necesita un calendario para:

Fechas de nacimiento, porque todos recuerdan esta fecha de memoria y es más fácil ingresar a mano;
Fechas de vencimiento de la tarjeta;
Las fechas que están escritas en los documentos y solo necesita volver a escribirlas sin dudarlo.

7. Crear una "frase de contraseña"

Por qué: Existe la opinión de que la frase es más fácil de recordar.
Opinión: ¯ \ _ (ツ) _ / ¯

8. Use "- / +" en lugar de selecciones

Regla: Use más y menos si los números no son grandes. Un buen ejemplo es la elección del número de pasajeros por vuelo. El libro dice que hubo pruebas sobre este tema y el más / menos se mostró mejor.

9. El tamaño del campo debe estar debajo del contenido

Por qué: Sí, ¡porque es lógico! Y no importa que de esta manera los campos no sean uniformes. Pero en medio segundo está claro qué tipo de contenido debería haber.

10. Habla justo donde está el error

Por qué generalmente no es así: se cree que esto no es una seguridad, después de todo, al decir que la contraseña no es correcta, sugerimos que el inicio de sesión es correcto. Pero, de hecho, los piratas informáticos no comprobarán todas las contraseñas existentes en el mundo si descubren que el inicio de sesión, que a menudo es una dirección de correo electrónico. correo y es información abierta adecuada.

La segunda parte. Sobre botones

1. Alinee los botones a la izquierda.

Por qué: la mirada va de izquierda a derecha. Una excepción puede ser una ventana modal en la que no hay campos de entrada. Por ejemplo, en el diseño material del botón de Google en los modales de la derecha.

2. No deshabilite el botón

Por qué: no será posible acceder a él presionando Tab, algunos lectores de pantalla no lo leerán y es poco visible debido a la opacidad.

Opinión: hasta hace poco, prefería diseñar un botón para dejar en claro a los usuarios que estaban rellenando algo en el formulario. Y de alguna manera ni siquiera dudaba de que esto podría no ser obvio. Las pruebas en los usuarios mostraron que los usuarios ven un color gris, pero no todos entienden que significa que algo está mal. Es como si vieras un semáforo por primera vez y pudieras distinguir sus colores, pero simplemente no supieras qué significa cada color. No tendrías en cuenta lo que está ardiendo ahora.

3. Escribir en los botones un verbo

Por qué: está más claro lo que sucederá.

4. No coloque el enlace "No recuerdo la contraseña" delante del botón

Por qué: para aquellos que recorren los campos a través de la pestaña, esto puede funcionar como ir a un enlace en lugar de un botón y por costumbre, presionará Enter, ejecutando un script de recuperación de contraseña innecesario.

5. Con una forma larga, no se avergüence de poner un botón encima

Opinión: Algún tipo de tontería. Es mejor arreglar el botón desde abajo para que siempre esté visible al desplazarse. Pero, por ejemplo, Yandex.Mail pone un botón en la parte superior.

imagen

Parte tres. Navegadores y Automatización

No realice transiciones automáticas de un campo a otro cuando ingrese el número requerido de caracteres. Puede confundir a los usuarios.
Los navegadores habilitados para HTML5 tienen validadores de formulario integrados y cada navegador tiene su propia lógica. Tiene sentido deshabilitar la validación predeterminada
Es necesario desactivar la corrección automática de errores y aumentar automáticamente la primera letra. De lo contrario, a los usuarios les parece que esto fue un error y que los datos no serían aceptados.
Según las estadísticas, la finalización automática en Chrome se usa 9 mil millones de veces al mes. Esto, en promedio, ahorra al usuario 12 segundos, lo que le da 1.250.000 días al mes. Hecho de la diversión
No filtre sin hacer clic en el botón "Filtro". Se necesita un botón, por ejemplo, si no solo hay radio y casillas de verificación, sino también campos de entrada (costo, algunos intervalos, etc.). Pero ellos mismos continúan escribiendo sobre pruebas, donde los usuarios creían que el filtro no funciona sin darse cuenta de que necesita hacer clic en el botón "Filtro". ¯ \ _ (ツ) _ / ¯

Cuarta parte Sobre todo

En algún momento, el libro pasó de los formularios a describir la usabilidad de los iconos y otras cosas que no son relevantes para el tema. Escriben en el libro que es bastante extraño ver textos sobre iconos aquí, pero los iconos también son parte de la interfaz, como los formularios, y por lo tanto pueden describirse. Sin embargo, encontré cosas bastante interesantes entre la poca información útil. Sobre ellos a continuación.

1. Difundir los campos de inicio de sesión y contraseña en diferentes páginas no es una pena

En el sitio web GOV.UK, en forma de autorización, hicieron un inicio de sesión en una página y la contraseña en otra (ahora no es así) y los usuarios no notaron nada extraño.

Opinión: ahora noto cada vez más este enfoque. De Google a varios servicios como Resumen.

imagen

2. Mostrar pasos es opcional

No tiene sentido mostrar barras de progreso con pasos. Ocupan mucho espacio. El gobierno británico eliminó la barra y la conversión no ha cambiado.

imagen

3. El tema con la memorización de 7 ± 2 elementos ya no es relevante

Por qué: porque nadie recuerda nada en los sitios. Simplemente puede desplazarse hacia arriba si olvida algo.

4. Coloque los campos de dirección en el orden aceptado en una región particular

Esto no es del libro, sino de mi ensayo. La Asociación Postal Internacional tiene reglas escritas. Por ejemplo, en Rusia, se ha adoptado el siguiente procedimiento:

Ivanov Ivan
S t. Lesnaya, casa 5, apto. once
Moscú
Rusia
Código postal

Formar patrones de diseño. Reseña del libro