¿Diez reglas generales para el diseño de UI?
Recuerde, el diseño consiste simplemente en pensar fuera de lo común y, a veces, eso significa romper las reglas.
Primero, diseñe para densidad, no para píxeles.
El valor de píxel es 3 o 4 veces el valor de dp.
Si no lo sabes, la densidad es el número de píxeles por pulgada de la pantalla, o PPI. La unidad de "dp" es una abreviatura de "píxel independiente de la densidad", a veces abreviada como "inmersión".
Al diseñar una interfaz, se recomienda no diseñar para píxeles, sino para píxeles por pulgada del dispositivo. Esto garantiza que nuestros elementos se escale correctamente para adaptarse a diferentes tamaños de dispositivos.
La razón de esto es que, por ejemplo, si diseñamos un recurso material de botón, como 200 x 50 dp, se mostrará como 200 x 50 px en una pantalla de 160 ppp, y 400 x 100 en una pantalla de 320 px, que es el doble del tamaño del recurso original.
Dado que algunas pantallas tienen más píxeles por pulgada que otras, los recursos no aparecerán más pequeños en pantallas con más píxeles por pulgada. Sólo se representan a dos, tres y cuatro veces su tamaño original. Esto garantiza que todos los activos mantengan su tamaño en diferentes dispositivos con diferentes densidades.
Por ejemplo, el tamaño de pantalla del iPhone XS Max es 414 x896. Pero no es un píxel, es un punto. En píxeles, es 1242 x 2688 píxeles. Con esto en mente, al diseñar para el iPhone XS Max, diseñaría a 414 x 896 puntos y entregaría los activos 3 veces más rápido.
En segundo lugar, utilice incrementos de 8 dp
¿Por qué el espaciado del diseño se basa en 8 incrementos? Hay una explicación sencilla para esto. Por ejemplo, la razón por la que usamos el número mágico 8 en lugar de 5 es porque si la resolución del dispositivo es 1,5 veces, los números impares no se representarán correctamente.
Además, la mayoría de los tamaños de pantalla modernos son divisibles por 8, por lo que podemos escalar fácilmente nuestros diseños de forma adecuada en estos dispositivos.
Mantenga su diseño consistente diseñando en incrementos de 8 en una cuadrícula de 8 puntos. No es necesario adivinar el espaciado, todo funciona exactamente como definimos la convención de espaciado.
Para una lectura más completa sobre este tema, consulte el artículo Cuadrícula de 8 puntos de Bryn Jackson.
En tercer lugar, elimine líneas y cuadros.
Al diseñar, ocasionalmente debe dar un paso atrás y determinar si los contenedores confunden la interfaz de usuario. En general, los cuadros y líneas utilizados para separar contenidos se pueden sustituir por espacios.
La mayoría de los elementos de nuestro diseño están contenidos dentro de cajas, por lo que eliminar esos contenedores puede hacer que la página parezca menos densa y dar a nuestros elementos más espacio para respirar.
Cuarto, preste atención a la comparación
El uso de la comparación no solo puede atraer la atención del usuario, sino también mejorar la accesibilidad del producto.
Diseñar un producto es similar a construir un edificio público como una biblioteca o una escuela: tiene que incluir a todos. Estos usuarios incluyen usuarios ciegos, daltónicos y con discapacidad visual.
Las Pautas de Accesibilidad al Contenido Web (WCAG) requieren una relación de contraste de al menos 4,5:1.
Para asegurarte de cumplir con este estándar, descarga Stark, que te permite comprobar si tu diseño es accesible.
5. La familiaridad es buena
Hay muchas razones por las que algunos elementos se consideran estándares.
Por ejemplo, si el botón está diseñado para ser redondo, por ejemplo, cuando el texto debe ser "Iniciar una prueba gratuita", ocupará espacio vertical innecesario.
Además, los usuarios tienen expectativas de experiencias similares en toda la red. Si su sitio web, aplicación o software hace algo diferente a lo que los usuarios están acostumbrados, no será intuitivo y es posible que se sientan frustrados con la experiencia.
Por lo tanto, es mejor innovar sólo dentro de los límites de las especificaciones de diseño actuales. No reinventes la rueda.
6. Utilice pesos de color para establecer la jerarquía.
Cada color tiene un peso visual que nos ayuda a establecer jerarquía entre contenidos. Al utilizar colores más claros, podemos asignar diferentes niveles de importancia a los elementos.
La regla general es que si un elemento es más importante que otro, debe tener un mayor peso visual. Esto facilita a los usuarios escanear rápidamente la página y distinguir entre información importante y menos importante.
La información más grande y en negrita es lo que primero llama la atención del usuario, y luego pasa a la información de respaldo a continuación.
Evita utilizar más de dos fuentes.
Una práctica de diseño generalmente aceptada es limitar el número de fuentes utilizadas en una interfaz. Normalmente, dos fuentes diferentes son suficientes. Eso no significa que no puedas usar más, pero normalmente es mejor no usarlo a menos que haya una buena razón.
La solución a este problema es utilizar familias de fuentes.
Al utilizar familias tipográficas podemos utilizar diferentes variaciones de una misma fuente en nuestros diseños. Los tipos de letra de la misma familia están diseñados para funcionar juntos, por lo que son flexibles y consistentes.
A la hora de elegir una fuente, busca fuentes en diferentes pesos, como ligera, regular, media, negrita, súper negrita y condensada, expandida, cursiva, etc. Esto le dará más espacio para explorar diferentes estilos sin agregar fuentes adicionales.
8. Reconocimiento en lugar de memoria
El reconocimiento es un buen hábito en el diseño de productos, porque ¿por qué deberían pensar los usuarios?
Página de salida, bandeja de entrada de correo electrónico, historial de búsqueda, botón Atrás, etc. Todos son buenos ejemplos. En la página de pago (si está diseñada correctamente), no tengo que recordar qué artículos quiero pagar. Aparentemente debería poder identificar el artículo que quiero comprar sin tener que luchar contra mi memoria.
Cancelar mi búsqueda.
En mi bandeja de entrada de Gmail puedo identificar claramente los correos electrónicos que he leído y los que no. O si inicio sesión en Amazon, puedo continuar rápidamente donde lo dejé porque me indica los productos revisados más recientemente.
"Minimiza la carga de memoria del usuario haciendo visibles los objetos, acciones y opciones. Los usuarios no tienen que recordar información de una parte de una conversación a otra. Cuando sea apropiado, las descripciones del sistema deben ser claramente visibles o fáciles de recuperable ”—Nelson Norman Group
No me detengas.
La guía definitiva para utilizar correctamente las animaciones en UX
Como usuario, la velocidad y la eficiencia son lo único que importa. Estoy usando una aplicación para resolver una tarea específica.
"Quiero irme rápido" - Ricky Bobby
Si la experiencia de depositar un cheque digital en mi cuenta bancaria es placentera, está bien, pero no dejes que tu creatividad se apodere de ti. en el camino de mis objetivos como usuario.
Una regla general relacionada principalmente con animaciones y microinteracciones es que no se puede mejorar una experiencia si agrega tiempo innecesario.
El uso intencionado de la animación puede mejorar la experiencia sin añadir distracciones ni movimientos innecesarios a los elementos.
A menudo veo diseños de páginas de destino en Dribbble que se animan a medida que el usuario se desplaza por la página. A menudo, las animaciones se vuelven demasiado animadas y todo se desvanece y se mueve, pero se pone poca atención en la experiencia en sí. Como usuario, puede ser un desafío saber a qué debes prestar atención cuando suceden tantas cosas en tu pantalla. Esto también me hace perder mi precioso tiempo.
Perdón por llamarte usuario de Didi:/
Muchos estudios han encontrado que la velocidad óptima de animación de la interfaz está entre 200 y 500 milisegundos. Estos números se basan en las cualidades especiales del cerebro humano. Cualquier animación de menos de 100 milisegundos es transitoria y no será reconocida en absoluto. Pero las animaciones de más de 1 segundo transmitirán una sensación de retraso, lo que puede molestar a los usuarios. ” - La guía definitiva para usar animaciones correctamente en UX.
Entonces, si usas animaciones, entonces estas dos partes tienen un propósito. Si estas animaciones tienen un propósito, entonces no me hagas esperar Más de 500. milisegundos. En 2019, solo se necesita un milisegundo para cabrear a tus usuarios
LMK, si quieres invertir en esta idea revolucionaria.
p>Cada vez agregamos información adicional. a la página: botones, texto, imágenes, animaciones, ilustraciones, etc., competirá con la información relacionada y la importancia del elemento disminuirá.
La famosa página de inicio de Baidu es un buen ejemplo. Ahogando a los visitantes en información potencialmente innecesaria, este diseño se centra en la acción principal: la búsqueda.
Una de mis frases de diseño favoritas: “La perfección no se logra cuando no se puede agregar nada más, sino cuando no se puede desear nada más.