Main Website

20+ Principios de diseño UX: Crea aplicaciones ganadoras como un profesional

El diseño UX juega un papel fundamental en el establecimiento de la calidad y el rendimiento de un software, producto, servicio, etc. En última instancia, esto determina el recorrido del usuario y su experiencia con el producto.

Claramente, tienen un papel muy importante que desempeñar en el éxito de su sitio web o aplicación. Cuando se hace bien, puede tener un impacto positivo en todas sus métricas de éxito y aumentar su tráfico, ventas, etc.

Con el tiempo, se ha vuelto más fácil crear sitios web (gracias a WordPress) y convertir sitios web de WordPress en diseño de aplicaciones, UI y UX todavía tiene muchos desafíos y requiere experiencia profesional.

Hoy, estamos aquí para hacerlo un poco más simple para usted. Por lo tanto, quédate con nosotros y lee sobre 20+ principios de diseño UX que pueden ayudarte a diseñar como un verdadero profesional. ¡Empecemos!

Lectura sugerida: La diferencia entre UI y UX: una guía para principiantes

En este blog

  1. Efecto von Restorff
  2. Efecto Zeigarnik
  3. Efecto de posición en serie
  4. Efecto de usabilidad estética
  5. Efecto de degradado de objetivo
  6. Efecto de falso consenso
  7. Efecto de superioridad de imagen
  8. Ley de Hick
  9. Ley de Fitts
  10. Ley de Postel
  11. Ley de Jakob
  12. Ley de Parkinson
  13. Ley de Miller
  14. Ley de Weber
  15. Ley de Tesler
  16. Umbral de Doherty
  17. Principio de Pareto
  18. Regla de extremo pico
  19. Figura-Fondo
  20. Navaja de Occam
  21. Ley de similitud
  22. Ley de Prägnanz
  23. Ley de Conexión Uniforme
  24. Ley de Región Común
  25. Ley de proximidad
  26. Ley de continuidad
  27. Ley de Cierre

Efecto von Restorff

Efecto von Restorff

El Efecto Van Restorff también se conoce como Efecto Aislamiento. Este principio establece que cuando hay varios objetos similares, es más probable que los usuarios recuerden el que difiere del resto.

Esto puede ayudar a los diseñadores a resaltar la mayor parte de la información, característica, botón, etc., y distinguirla. También puede permitir a los usuarios identificar el elemento más significativo entre un grupo de elementos.

Efecto Zeigarnik

Este principio lleva el nombre del psicólogo soviético Bluma Zeigarnik. El efecto Zeigarnik postula que las personas recuerdan mejor las tareas inconclusas o interrumpidas que las tareas completadas.

Los diseños de UX deben significar con éxito a los usuarios tareas incompletas. Los usuarios recordarán tales señales y sus posibilidades de volver a la tarea y completarla se multiplicarán.

Efecto de posición en serie

Efecto de posición en serie

Los cerebros humanos están programados para recordar el primer y el último elemento de cualquier serie. Esta tendencia ha sido nombrada como el Efecto de Posición en Serie.

Por lo tanto, al diseñar para UX, los elementos más significativos se pueden colocar al principio o al extremo. Del mismo modo, los elementos menos importantes se pueden colocar en el medio.

Por ejemplo, las acciones clave se pueden colocar en el extremo derecho o en el extremo izquierdo al diseñar para la navegación. Es por eso que los elementos y elementos más importantes, como el menú de la aplicación, se colocan en la parte superior o en el extremo inferior.

Efecto de usabilidad estética

¿Cuántas veces te encuentras con un sitio web y su diseño elegante y su estética pegadiza te hacen creer en el producto o servicio? ¡Muy a menudo! ¿No es así?

Esto está en nuestra naturaleza como humanos. El efecto estético-usabilidad postula esta tendencia que hace creer a los clientes que los productos estéticamente agradables serán más utilizables.

Es por eso que todas las grandes marcas ponen tanto énfasis en mejorar la estética de sus sitios web, aplicaciones y otros activos.

Efecto de degradado de objetivo

Efecto de degradado de objetivo

El efecto Goal-Gradient tiene que ver con el diseño para la motivación. Establece que cuanto más cerca esté alguien de completar una tarea, más rápido trabajará para realizarla.

Puede tener un montón de aplicaciones en el diseño de UX. Por ejemplo, si se refiere a la imagen de arriba, indica que hay una tarea en curso y que se ha completado en un 60 por ciento.

Ahora, al ver esto, es más probable que un usuario espere a que el 40 por ciento restante se complete y verifique lo que le espera después de eso.

Efecto de falso consenso

En términos simples, el efecto de falso consenso es una tendencia a asumir que los demás comparten tus creencias y se comportarán como tú, en un contexto determinado.

Este es el caso de muchos diseñadores y otros profesionales. Sin embargo, no es cierto en absoluto. Es muy posible y muy probable que los usuarios que utilizarán el producto final no sean como usted.

Por lo tanto, se recomienda crear perfiles de usuario basados en una investigación exhaustiva y hacer que sus diseños sean revisados por usuarios reales. Esto te dará una idea de cómo reaccionan los diferentes usuarios a los diferentes elementos y a qué problemas se enfrentan en su interacción.

Lectura sugerida: ¿Qué es la microinteracción y por qué es importante para la interfaz de usuario y la experiencia de usuario de su aplicación móvil?

Efecto de superioridad de imagen

Efecto de superioridad de imagen

Este principio resume la importancia de los cuadros, imágenes o ilustraciones gráficas en un diseño. Afirma que es más probable que los usuarios recuerden y recuerden imágenes que texto.

Hay muchos estudios y ejemplos de la vida real que demuestran lo mismo. La mayoría de los libros infantiles tienen imágenes con muy pocos textos por la misma razón.

Esta es la razón por la que la mayor parte de su información significativa y elementos textuales deben estar respaldados por representaciones pictóricas. Los usuarios recordarán las imágenes, incluso si olvidan el texto.

Ley de Hick

La ley de Hick simplemente establece que cuanto más complejas sean las opciones, más tiempo tardarán los usuarios en realizar las tareas. De hecho, demasiadas opciones reducirán las probabilidades de que el usuario tome alguna decisión y conducirán a la parálisis de la elección o del análisis.

Por ejemplo, la incorporación prolongada y el complejo proceso de pago son una de las razones más importantes y comunes detrás de los abandonos de sitios web y aplicaciones.

Por lo tanto, idealmente, los diseñadores deberían reducir la carga cognitiva de los usuarios y limitar el número de opciones o pasos que se deben tomar para lograr un objetivo.

Mantenga todos los procesos lo más simples posible y minimice la cantidad de pasos que los usuarios deben realizar para completar un determinado objetivo o tarea dentro de la aplicación.

Ley de Fitts

Ley de Fitts

La ley de Fitts es bastante similar a la ley de Hick. Establece que el tiempo para adquirir un objetivo es una función de la distancia y el tamaño del objetivo. En términos sencillos, el tiempo que tarden los usuarios en llegar a un objetivo dependerá de la distancia y el tamaño del objetivo.

Por lo tanto, el diseño se puede hacer más interactivo y menos desafiante al:

  • Hacer que los elementos importantes sean lo suficientemente grandes como para que los usuarios los vean y seleccionen sin esfuerzo.
  • Dichos elementos deben separarse de otros elementos mediante el uso de un espaciado adecuado, colores variados, tamaños, etc.
  • Todo el elemento de diseño debe ser fácilmente clicable y debe haber un trabajo mínimo para los usuarios.

Ley de Postel

Sé conservador en lo que haces, sé liberal en lo que aceptas de los demás. En términos más simples, sé flexible en lo que aceptas de tus usuarios y limita lo que les pides.

¡De esto se trata la ley de Postel (también conocida como el principio de robustez)!

Te lo explicamos con un ejemplo. Incluso cuando escribimos mal o abreviamos una palabra mientras escribimos una consulta de búsqueda en Google, obtenemos las respuestas correctas. Sin embargo, las respuestas suelen ser siempre precisas y precisas.

Este principio también debe seguirse en el diseño. Su diseño debe ser tal que requiera un mínimo esfuerzo o información por parte de los usuarios. Sin embargo, debe tener una amplia sustancia para que el viaje del usuario sea fluido y sin esfuerzo.

Ley de Jakob

Ley de Jakob

¿Alguna vez has pensado por qué algunos de los patrones de diseño, estilos de UX, iconos, etc., son comunes para la mayoría de los sitios web, aplicaciones, etc.?

Esto lo hacen los diseñadores a propósito para alinearse con la ley de Jakob. Se basa en el hecho de que los usuarios pasan la mayor parte de su tiempo en otros sitios o aplicaciones y, por lo tanto, terminan queriendo que su plataforma funcione de la misma manera.

Esto puede ser una decisión consciente o suceder inconscientemente porque está incrustado en la naturaleza humana identificar y relacionarse con patrones.

Por supuesto, esto no implica que deba comprometer la voz, la identidad, el tema, etc. de su marca. Sin embargo, debe asegurarse de que la funcionalidad básica de los elementos de diseño siga siendo la misma. Por ejemplo, la flecha que apunta a la izquierda debe llevar al usuario al paso anterior y la flecha que apunta a la derecha debe llevar al usuario al paso siguiente.

Al cumplir con esta ley, podrá aprovechar los modelos mentales y las creencias existentes de sus clientes y crear diseños increíbles. Los usuarios obtendrán una experiencia familiar y su aprendizaje ayudará a comprender su producto más fácilmente.

Ley de Parkinson

Esto puede sonar como el más confuso de nuestra lista de 20+ principios, pero en realidad es muy simple. Estipula que una tarea se inflará para ocupar todo el tiempo disponible.

¿Suena confuso? ¿Te lo explicamos?

¿Alguna vez te ha pasado que te dieron una fecha límite para un trabajo, y terminaste procrastinándolo o trabajando en él más de lo necesario? Esta es una tendencia humana, y esto es lo que esta ley encapsula.

Por lo tanto, los diseñadores de UX deben tratar de limitar el tiempo para una tarea determinada y aplicar esta ley para crear interfaces más eficientes y tensas que ayuden a los usuarios a lograr un objetivo de manera oportuna.

De lo contrario, se perderán en el proceso y es posible que no aterricen donde deberían.

Lectura sugerida: La guía completa de la terminología de UX: toda la jerga del diseño que los profesionales deben conocer

Ley de Miller

Ley de Miller

Esta ley se centra en el hecho de que la memoria de trabajo de un ser humano promedio solo puede almacenar 7 (más o menos 2) elementos. Es más probable que los usuarios olviden o incluso descuiden algo más que eso.

Habla de la limitada capacidad de atención y retención de los usuarios. Los diseñadores de UX deben recordar esto y tratar de mantener los elementos en una página o sección determinada, limitados a este número.

Esto también resalta la importancia de crear diseños ordenados y agregar solo elementos que realmente importen. Por ejemplo, si está mostrando categorías de productos en varias cajas, intente limitar el número y alinee su diseño con esta ley.

Ley de Weber

La ley de Weber de las diferencias apenas notables establece que un ligero cambio en las cosas no resultará en un cambio que sea notado de manera prominente por los usuarios. Esto se puede aplicar para hacer cambios sutiles.

Además, hay muchos estudios y ejemplos de la vida real que demuestran que a los clientes no les gustan los cambios drásticos. Por lo tanto, los cambios deben implementarse de manera gradual y no de una sola vez.

Demasiados cambios en la interfaz de usuario y la experiencia de usuario o una revisión completa implementada a la vez pueden abrumar a los clientes. Por lo tanto, asegúrese de que los cambios no intimiden a los usuarios.

Además, no olvide probar sus cambios correctamente con usuarios o probadores reales. Te dará retroalimentación sobre la percepción de tus usuarios potenciales y te mantendrá en el camino correcto.

Ley de Tesler

Ley de Tesler

¿Qué tan beneficiosa crees que es la funcionalidad de copiar y pegar que está disponible en nuestros dispositivos? ¿Dijiste que salva vidas? ¡Pues lo es!

Esta funcionalidad fue co-creada por Larry Tesler, quien se especializó en la interacción humano-computadora y creía que los ingenieros y técnicos debían hacer el trabajo pesado para que los clientes no tuvieran que hacerlo.

La Ley de Tesler o la Ley de Conservación de la Complejidad, que lleva su nombre, es un adagio que establece que cada aplicación tiene una cantidad inherente de complejidad que no se puede eliminar ni ocultar.

Por lo tanto, debe tratarse en una u otra etapa del desarrollo del producto o de la interacción humana. Como diseñadores de UX, tu responsabilidad será asegurarte de que se reduzca la complejidad.

A veces, esta complejidad también puede ocurrir debido a demasiadas funciones o a un diseño desordenado. En este caso, se pueden eliminar elementos y características de bajo valor para reducir la carga cognitiva de los usuarios.

Además, puede utilizar información sobre herramientas, elementos de tutorial, etc., para simplificar el recorrido de sus usuarios. Básicamente, debes dedicar mucho tiempo a perfeccionar tu sitio web o aplicación para que tus usuarios no tengan que hacerlo.

Umbral de Doherty

Este principio fue concebido por Walter Doherty y Ahrvind Thadani. Se aplica para mantener al usuario completamente comprometido cuando interactúa con una computadora.

Una interacción debe proporcionar retroalimentación del sistema en 400 milisegundos para mantener al usuario comprometido y lograr la máxima productividad al garantizar que ni el usuario ni el sistema tengan que esperar al otro.

Por lo tanto, los diseñadores deben trabajar en estrecha colaboración con los desarrolladores para garantizar que haya un tiempo mínimo de respuesta o carga en todo el producto, y que esté optimizado para la velocidad y el rendimiento.

Además, cuando los usuarios necesitan esperar, los diseñadores pueden agregar animaciones interactivas mientras el proceso de carga ocurre en segundo plano.

Principio de Pareto

Principio de Pareto

El principio de Pareto es bastante popular en todos los campos. Afirma que para muchos resultados, aproximadamente el 80% de las consecuencias provienen del 20% de las causas.

Este principio lleva el nombre del economista italiano Vilfredo Pareto y también se conoce como la regla del 80/20, la ley de los pocos vitales o el principio de la escasez de factores.

Postula que dentro de cualquier sistema dado, sólo unas pocas variables afectan a los resultados principales. Mientras que los factores tienen poco o ningún impacto.

Microsoft lo aplicó a su producto y notó que al corregir solo el 20 por ciento de los errores más reportados, se eliminaba el 80 por ciento de los errores y bloqueos relacionados.

Los diseñadores de UX pueden aplicar el Principio de Pareto a los esfuerzos de optimización, donde pueden identificar y centrarse en el 20 por ciento de los aspectos o elementos más importantes del producto.

Regla de extremo pico

Este es un principio interesante y también tiene una influencia considerable en nuestra vida cotidiana.

¡Te explicamos cómo!

¿Alguna vez te ha pasado que para un evento determinado, terminaste recordando solo el primero y el último o lo mejor y lo peor de él? Esto es lo que postula el principio de la Regla del Pico al Fin.

Afirma que las personas juzgan una experiencia en gran medida en función de cómo se sintieron en su punto máximo (es decir, el punto más intenso) y al final, en lugar de basarse en el promedio general de cada momento de la experiencia. Esto es independientemente del hecho de si su experiencia fue buena o mala.

Por lo tanto, si las experiencias pico y final de tu producto son buenas, la gente lo percibirá como una experiencia positiva. Puede amplificar su viaje agregando dichos picos y haciendo que los procesos finales sean memorables.

Lectura sugerida: Reduzca el tiempo de carga de la aplicación y aumente la velocidad: su guía definitiva para una mejor experiencia de usuario

Figura-Fondo

Figura-Fondo

El principio figura-fondo se refiere a la capacidad humana de separar visualmente objetos en diferentes capas de enfoque.

Es un tipo de agrupación perceptiva que es necesaria para reconocer objetos a través de la visión. En psicología de la Gestalt se conoce como identificar a una figura del fondo.

Por ejemplo, nuestra mente está entrenada para reconocer palabras negras en un papel como la figura y la hoja blanca como fondo. Esto es algo así como ver sombras como figuras en estructuras sólidas.

Una de las mayores aplicaciones de este principio se ve en el diseño y la colocación de «pop-ups». Las ventanas emergentes a menudo aparecen en primer plano, convirtiendo la pantalla existente en un fondo.

Esto alinea automáticamente la atención del usuario en el lugar correcto y se vuelve más fácil resaltar elementos destacados con facilidad.

Navaja de Occam

La solución más sencilla es siempre la mejor. Esto es lo que afirma la Navaja de Occam.

Es un principio filosófico de resolución de problemas que establece que cuando hay dos explicaciones para un suceso, la que requiere menos especulación suele ser la correcta.

Por lo tanto, como diseñadores debes recordar que cuando puedas, analiza todos los elementos que estás utilizando y elimina tantos como puedas sin comprometer el diseño o la funcionalidad.

Eliminar los elementos innecesarios reducirá el tamaño de su producto, eliminará el desorden y ayudará a los usuarios a alcanzar sus objetivos más rápido. Recuerde el principio de KISS (Keep it Simple & Stupid) y estará listo para comenzar.

Ley de similitud

Ley de similitud

Puedes entender la ley de la similitud con solo mirar la imagen de arriba. Si miras de cerca, verás que todos los botones etiquetados como «Editar» son de color similar, mientras que todos los botones etiquetados como «Eliminar» son de color similar.

Esto se debe a que el diseño anterior sigue el principio de similitud. Establece que el ojo humano tiende a percibir elementos similares en un diseño como uno o iguales, incluso si esos elementos se colocan por separado en la pantalla.

Por ejemplo, si visitas el sitio web de AppMySite, todos los botones azules de la página de destino te llevarán a la página de registro de nuestro creador de aplicaciones. Los botones están colocados en muchos lugares del sitio web para facilitar su viaje. Sin embargo, todos tienen el mismo propósito.

Como diseñadores de UX, también debes aplicar la ley de similitud para diferenciar elementos similares de otros contrarios y facilitar que tus usuarios los entiendan.

Ley de Prägnanz

La Ley de Prägnanz (o Pragnanz) también se conoce como la ley de la «buena figura» o el Principio de Simetría y Orden.

Esta ley afirma que cuando se nos presentan formas complejas o un conjunto de elementos ambiguos, nuestro cerebro elige interpretar los elementos de la manera más fácil con el menor esfuerzo cognitivo posible.

Por ejemplo, si vemos una versión monocromática del logotipo olímpico, pensaremos en ella como círculos superpuestos en lugar de una colección de líneas curvas.

Por lo tanto, si su objetivo o mensaje real está oculto en algo complejo, es más probable que los usuarios lo pasen por alto, ya que desglosarán el diseño y procesarán la información de la forma más simple.

Por lo tanto, para estar más seguro, debe trabajar para descomplicar los elementos de diseño y hacer las cosas lo suficientemente simples como para que los usuarios las entiendan.

Ley de Conexión Uniforme

Ley de Conexión Uniforme

La Ley de Conexión Uniforme enfatiza que los elementos que están conectados visualmente se perciben como más relacionados que los elementos sin conexión.

Se trabaja en torno al hecho de que los elementos de un grupo comparten algunas características y, por lo tanto, deben estar conectados mediante colores, líneas, marcos, etc., para denotar lo mismo.

Por ejemplo, la pantalla de inicio de sesión de la mayoría de los sitios web y aplicaciones tiene el formulario de incorporación (donde los usuarios completan los detalles) dentro de un cuadrado u otra forma similar.

Esto ayuda a los usuarios a comprender que estos campos están relacionados entre sí y deben tratarse como parte de un solo proceso.

Ley de Región Común

Esto es algo similar a la Ley de Conexión Uniforme mencionada anteriormente. Afirma que los elementos que comparten un área dentro de un límite claramente definido se perciben como una unidad o grupo.

Por ejemplo, en una página de producto que tiene varios productos enumerados juntos, cada producto y su descripción se pueden agregar en límites separados para distinguirlo del resto de los productos.

Los sitios de comercio electrónico suelen utilizar esta técnica para diferenciar una categoría de productos de otra. Los diseñadores pueden crear estas razones comunes para ayudar a los usuarios a percibir un grupo de cosas como una sola y tomar medidas en consecuencia.

Lectura sugerida: Navegación de aplicaciones móviles: mejores prácticas para mejorar su interfaz de usuario y experiencia de usuario

Ley de proximidad

Ley de proximidad

Esta ley establece que los objetos que están cerca o próximos tienen más probabilidades de agruparse y percibirse como una unidad. Esto es cierto incluso para una mezcla de diferentes tipos de artículos.

Esta ley se puede aplicar para establecer relaciones entre diferentes elementos de diseño y ayudar a los usuarios a notar y procesar información crítica más rápido.

Los diseñadores de UX deben agrupar visualmente elementos similares o relacionados para enfatizar su relación y ayudar a los usuarios a comprender que esos elementos pertenecen juntos y comparten una característica o funcionalidad.

Ley de continuidad

Esta ley afirma que el ojo humano sigue líneas, curvas o una secuencia de formas para determinar una relación entre los elementos del diseño.

Por lo tanto, cuando los usuarios encuentran una conexión visual entre dos elementos, tienden a navegar con más fluidez a través del proceso y progresar en la dirección correcta.

Por lo tanto, establezca dichas conexiones en su diseño cuando sea necesario y garantice la continuidad y la conexión para guiar a sus usuarios y ayudarlos a percibir el mensaje correcto.

Ley de Cierre

Ley de Cierre

Los seres humanos tienen una fuerte necesidad de cerrar. Nuestros cerebros tienen la tendencia a llenar vacíos para tener un sentido completo de algo.

Por ejemplo, con solo mirar la imagen de arriba, sabemos que una imagen es un círculo y la otra es una estrella.

Esto se puede aplicar para hacer que el diseño sea divertido sin interferir con la capacidad de los usuarios para comprender lo que hay en el diseño. Se puede aplicar para indicar pantallas de carga, imágenes de carga y otras animaciones en espacios relevantes.

¡Terminando!

Se trataba de diseños de UX y sus diversas leyes y principios. Como habrás notado, la mayoría de estas leyes interactúan y juntas forman la base de maravillosos diseños de UX.

Puedes basar tus procesos de desarrollo de sitios web y aplicaciones en estas leyes y crear diseños profesionales de los que tus usuarios se enamorarán.

Sin embargo, si todo esto te parece demasiado abrumador, entonces puedes tomar un atajo y diseñar tu propia aplicación con el creador de aplicaciones gratuito de AppMySite.

Tiene un entorno de bricolaje saludable donde puede diseñar aplicaciones de Android e iOS desde cero como un profesional. Puede cargar sus propios diseños o utilizar los activos disponibles para colocar el diseño de su aplicación, las funciones, etc. Pruébalo gratis y compruébalo por ti mismo. Además, nos encanta saber de ti. ¡No olvides dejar tus comentarios en la sección de comentarios y haznos saber si logramos emocionarte hoy!

Fuentes de datos e imágenes:

  • Leyes de la UX
  • Psicología Práctica
  • Colectivo UX
  • Empresa
  • Una sola cosa
  • Struto
  • Prototypr.io
  • Freecodecamp
  • Asana
  • UXMISIFT
  • Andy Rutledge
  • UXtoast
  • UXcam

SIMILAR

Related Articles