10 reglas generales en el diseño de la interfaz de usuario

En caso de duda, aquí hay una lista de prácticas estándar a seguir en el diseño de la interfaz de usuario.

Ninguno de estos está escrito en piedra, simplemente una lista de métodos que creo que pueden ayudarlo en su trabajo diario de diseño de interfaz de usuario.

Recuerde, el diseño se trata de pensar fuera de la caja, y a veces eso significa romper las reglas, así que tome este consejo con un grano de sal marina del Himalaya.

1. Diseño para densidad, no píxeles

Si no está familiarizado, la densidad es el número de píxeles por pulgada de una pantalla o PPI. La unidad "dp" es la abreviatura de "píxel independiente de la densidad", que a veces también se abrevia como "dip".

Al diseñar una interfaz, se recomienda no diseñar para píxeles, sino para la densidad de píxeles del dispositivo. Esto garantiza que nuestros elementos se escalen correctamente para adaptarse a diferentes tamaños de dispositivo.

La razón por la que hacemos esto es si diseñamos un elemento de botón, por ejemplo, a 200 x 50 dp, se muestra a 200 x 50 px en una pantalla de 160ppi y 400 x 100 px en una pantalla de 320 ppi, o 2 veces el tamaño de El activo original.

Dado que algunas pantallas tienen más píxeles por pulgada que otras, los activos no se muestran más pequeños en pantallas con una alta densidad de píxeles, simplemente se representan en 2x, 3x, 4x su tamaño original. Esto asegura que todos los activos mantengan su tamaño en diferentes dispositivos con diferentes densidades.

Las dimensiones de la pantalla del iPhone XS Max, por ejemplo, son 414 x 896. Pero eso no es píxeles, es el número de puntos. En píxeles, es 1242 x 2688 px. Con eso en mente, al diseñar para el iPhone XS Max, diseñaría en 414 x 896 puntos y luego entregaría activos @ 3x.

2. Use incrementos de 8dp

¿Por qué diseñar con espacios en incrementos de 8? Bueno, hay una explicación simple para esto; La razón por la que usamos el número mágico 8 en lugar de 5, por ejemplo, es que si el dispositivo tiene una resolución de 1.5x, no generará un número impar correctamente.

Además, la gran mayoría de las dimensiones de pantalla modernas son divisibles por 8, lo que hace que sea sencillo alinear nuestros diseños de manera adecuada en esos dispositivos.

Al diseñar en incrementos de 8 en una cuadrícula de 8 puntos, crea consistencia en nuestros diseños. No hay más conjeturas para el espaciado, y todo está perfectamente alineado con las convenciones de espaciado que hemos definido.

Para obtener una lectura más completa sobre este tema, consulte el artículo de la cuadrícula de 8 puntos de Bryn Jackson .

3. Eliminar líneas y cuadros

Al diseñar, debe dar un paso atrás a veces y decidir si tener contenedores está abarrotando la interfaz de usuario o no. A menudo, los cuadros y líneas que sirven para dividir el contenido pueden reemplazarse con margen.

La mayoría de los elementos que diseñamos están contenidos dentro de cajas, por lo que simplemente quitando esos contenedores, puede hacer que la página parezca menos densa y dar a nuestros elementos más espacio para respirar.

4. Presta atención al contraste

El uso del contraste no solo atrae la atención del usuario hacia la información relevante en la página, sino que también mejora la accesibilidad del producto.

Diseñar un producto es similar a construir un edificio público como una biblioteca o una escuela, debe ser inclusivo para todos. Eso incluye usuarios ciegos, daltónicos y con discapacidad visual.

Las Pautas de Accesibilidad al Contenido en la Web (WCAG) requieren al menos un contraste de 4.5: 1.

Para asegurarse de cumplir con este estándar, descargue Stark, que le permitirá verificar si sus diseños son accesibles o no.

5. La familiaridad es buena.

Existen numerosas razones por las cuales ciertos elementos se consideran estándar.

Por ejemplo, si ha diseñado su botón para que sea un círculo, entonces cuando el texto debe ser "Iniciar prueba gratuita", por ejemplo, ocupará una cantidad innecesaria de espacio vertical.

Aparte de eso, los usuarios esperan experiencias similares en la web. Si su sitio web, aplicación o software funciona de manera diferente a lo que los usuarios se han acostumbrado, entonces no será intuitivo y es probable que se sientan frustrados con la experiencia.

Por esta razón, es mejor ser creativo solo dentro de los límites de las normas actuales de diseño. No reinventes la rueda.

6. Use el peso del color para establecer la jerarquía

Cada color tiene un peso visual, que puede ayudarnos a desarrollar una jerarquía entre nuestro contenido. Al usar tonos de color más claros, podemos asignar diferentes niveles de importancia a los elementos.

La regla general aquí es que si un elemento es más importante que otro, debería tener un mayor peso visual. Esto facilita que un usuario hojee rápidamente la página y distinga entre la información importante y la menos importante.

La información más grande y audaz es a lo que los ojos del usuario se sentirán atraídos primero, y luego pasarán a la información de soporte que se encuentra debajo.

7. Evite usar más de dos tipos de letra

Una práctica de diseño generalmente aceptada es limitar el número de fuentes utilizadas en una interfaz. En general, dos tipos de letra diferentes deberían ser suficientes. Eso no significa que no pueda usar más, pero a menos que tenga una buena razón, generalmente es mejor no hacerlo.

La forma de evitar esto es usar familias de fuentes.

Al usar una familia de fuentes, podemos usar la misma fuente con diferentes variaciones en nuestros diseños. Las fuentes de la misma familia están diseñadas para trabajar juntas, por lo que son flexibles y consistentes.

Al seleccionar una fuente, encuentre familias que tengan varios pesos como claro, regular, medio, negrita, negrita extra, así como estilos como condensado, expandido y cursiva. Esto le dará más espacio para explorar diferentes estilos sin agregar tipos de letra adicionales.

8. Reconocimiento, no recuerdo

El reconocimiento es una buena práctica en el diseño de productos porque, ¿por qué hacer pensar al usuario?

Las páginas de pago, las bandejas de entrada de correo electrónico, el historial de búsqueda, los botones de retroceso, etc. son buenos ejemplos de esto.

En una página de pago (si está bien diseñada), no debería tener que recordar qué artículos estoy pagando. Claramente debería poder identificar los artículos que estoy comprando sin tener que mover mi memoria.

En mi bandeja de entrada de Gmail, de un vistazo, puedo determinar qué correos electrónicos he leído y cuáles no sin tener que pensarlo. O, si inicio sesión en Amazon, puedo retomar rápidamente donde lo dejé porque me dirá los elementos que he visto recientemente.

"Minimice la carga de memoria del usuario haciendo visibles los objetos, las acciones y las opciones. El usuario no debería tener que recordar información de una parte del diálogo a otra. Las instrucciones de uso del sistema deben ser visibles o fácilmente recuperables siempre que sea apropiado. ”- Nielson Norman Group

9. No me detengas

Como usuario, la velocidad y la eficiencia son lo único que importa. Estoy usando una aplicación para resolver un trabajo específico por hacer.

"Quiero ir rápido" - Ricky Bobby

Si la experiencia de depositar digitalmente un cheque en mi cuenta bancaria es agradable, entonces eso es genial, pero no deje que su creatividad se interponga en mi objetivo como usuario.

Una buena regla general relacionada principalmente con animaciones y micro interacciones es que si la experiencia agrega tiempo innecesario, no está mejorando la experiencia.

Tener un propósito con animaciones puede mejorar la experiencia, pero agregar distracciones y movimientos innecesarios a los elementos no lo hará.

A menudo veo diseños en Dribbble para páginas de destino que se animan a medida que el usuario se desplaza por la página. A menudo está demasiado animado con todo desvaneciéndose y moviéndose, con poca atención a la experiencia misma. Como usuario, puede ser un desafío saber a qué debo prestar atención cuando suceden tantas cosas en la pantalla. También está perdiendo mi precioso tiempo.

“Numerosas investigaciones han descubierto que la velocidad óptima para la animación de la interfaz es de entre 200 y 500 ms. Estas cifras se basan en las cualidades particulares del cerebro humano. Cualquier animación de menos de 100 ms es instantánea y no se reconocerá en absoluto. Mientras que la animación de más de 1 segundo transmitiría una sensación de retraso y, por lo tanto, sería aburrida para el usuario ". - La guía definitiva para el uso adecuado de la animación en UX

Entonces, las dos partes de esto son, si está usando animación, tenga un propósito al respecto. Y si esas animaciones tienen un propósito, entonces no me hagas esperar más de 500 ms. En 2019 solo lleva un milisegundo molestar a los usuarios.

10. Menos es más

Cada vez que agregamos información adicional a la página: botones, texto, imágenes, animaciones, ilustraciones, etc., compite con la información relevante. Si hay demasiado en una página, entonces la importancia de los elementos disminuye.

Un ejemplo perfecto de esto es la famosa página de inicio de Google. En lugar de inundar al visitante con información posiblemente innecesaria, el diseño permanece enfocado en la acción principal: la búsqueda.

Una de mis citas de diseño favoritas: "La perfección se logra, no cuando no hay nada más que agregar, sino cuando no hay nada más que quitar".- Antoine de Saint-Exupery