5 principios de UX que debes cumplir para un diseño de UX impresionante

Will Grant, un experto en UI / UX y diseñador de productos digitales, explica los 5 principios que debe seguir para garantizar una excelente experiencia de usuario.

1. No use más de dos tipos de letra

Solo los aficionados llaman a los tipos de letra "fuentes", ¿sabes? Los profesionales de diseño "adecuados" los llaman "tipos de letra". Las fuentes son los archivos del dispositivo que el software utiliza para representar el tipo de letra. Las fuentes son la pintura en la paleta, mientras que la tipografía es la obra maestra en el lienzo.

Independientemente, con demasiada frecuencia, los diseñadores agregan demasiados tipos de letra a sus productos. Debe intentar utilizar un máximo de dos tipos de letra: uno para encabezados y títulos, y otro para la copia del cuerpo que debe leerse.

Utilice los pesos y las cursivas dentro de esa familia de fuentes para enfatizar, en lugar de cambiar a otra familia. Por lo general, esto significa usar la fuente de su marca corporativa como encabezado, dejando los controles, los cuadros de diálogo y la copia en la aplicación (que deben ser claramente legibles) en un tipo de letra más probado y legible.

El uso de demasiados tipos de letra crea demasiado "ruido" visual y aumenta el esfuerzo que el usuario tiene que hacer para comprender la vista que tiene delante. Además, muchas tipografías de marcas personalizadas a menudo se hacen con un impacto visual impactante en mente, no legibilidad.

2. Los usuarios ya tienen fuentes en sus computadoras, así que úselas

Sí, la fuente de tu marca corporativa es encantadora. Es tan juguetón y encantador, pero lleva tres segundos adicionales cargar la página, ya que la fuente debe descargarse del servidor y procesarse, y nada aparece hasta que se carga, volviendo locos a sus usuarios.

Incluir fuentes de visualización personalizadas para encabezados y títulos está bien; ayuda a marcar el producto y agrega algo de interés visual. Sin embargo, usar fuentes personalizadas para la copia del cuerpo generalmente es una mala idea.

En primer lugar, estas fuentes deben cargarse desde algún lugar, ya sea Google Fonts, Typekit o su propia CDN. Esto significa que hay una sobrecarga en llevar los archivos de fuentes a la máquina del usuario. Las páginas con mucho contenido a menudo se rompen mientras se descargan y renderizan las fuentes correctas: el temido Flash de contenido sin estilo o Flash de texto sin estilo (FOUC) (https://en.wikipedia.org/wiki/Flash_of_unstyled_content).

En segundo lugar, si al especificar tipos de letra corporales salvajes y maravillosos, crees que estás ejerciendo cierto control sobre el resultado final, piénsalo de nuevo. El diseño receptivo y miles de dispositivos diferentes en la naturaleza significan que sus páginas se verán un poco diferentes para todos.

Afortunadamente, ya sea que su usuario esté en un teléfono o una computadora de escritorio, Windows o Mac (o Linux), tienen algunas fuentes hermosas y altamente legibles ya instaladas y en espera de ser utilizadas. La "pila de fuentes del sistema" es una regla CSS que le dice a los navegadores modernos que representen el tipo en el tipo de letra nativo del sistema.

En la mayoría de los casos, el uso de fuentes nativas del sistema hace que las páginas aparezcan más rápidamente, y el tipo se ve más nítido y legible.

Familia tipográfica:
   sistema de manzana
   BlinkMacSystemFont
   Segoe UI
   Roboto
   Sin oxígeno
   Ubuntu
   Cantarell
   Helvetica Neue
   sans-serif

Por favor, solo use la pila de fuentes del sistema.

Utilice el tamaño de tipo para representar la jerarquía de información

Este es un método simple pero efectivo para organizar sus vistas y hacerlas instantáneamente comprensibles para una amplia gama de usuarios. Veamos un ejemplo de cómo no hacer esto en una interfaz de usuario de la aplicación "Calendario" imaginada:

Simplemente modificando el tamaño de letra por un factor notable, podemos mostrar al usuario la información más relevante primero:

Amplíe la información que desea que los usuarios vean primero, o que cree que les resultará más útil, y pueden seguir leyendo para obtener más detalles. Esta es la razón de que muchas noticias y periodismo basado en hechos se establezcan en este formato:

Titular que te dice algo

Subtítulo que agrega contexto y plantea más preguntas

Esta es la copia del cuerpo que se expande en la historia al agregar detalles progresivamente a través de la copia. Sigue leyendo hasta el final para aprender detalles cada vez menos importantes.

La misma técnica exacta puede emplearse en el diseño de la interfaz de usuario con gran efecto.

Nota
Consejo profesional: encuentre un saldo y no se exceda. Si demasiados elementos en la página son grandes, entonces pierden cualquier sentido de jerarquía y énfasis.

Utilice un tamaño predeterminado sensible para la copia del cuerpo

Sus clientes leerán una gran cantidad de texto en su aplicación o sitio, entonces, ¿qué tan grande debe ser el tipo?

Los días del tipo de tamaño fijo han quedado atrás. La mayoría de los navegadores en computadoras de escritorio y dispositivos móviles permitirán a los usuarios escalar el tipo de letra hacia arriba y hacia abajo, cambiar al "modo de lectura" y aplicar configuraciones de accesibilidad en todo el sistema, como tipo grande y colores de alto contraste.

Con eso en mente, todo lo que está haciendo aquí es configurar el tamaño de letra predeterminado que aparece cuando se abre el producto por primera vez. Idealmente, el tipo debería ser lo suficientemente grande como para ser legible, pero no tan grande como para abrumar al usuario o ocupar demasiado espacio en una vista abarrotada.

La copia del cuerpo en 16px, con una altura de línea de 1,5 y un espaciado de caracteres "automático" o "predeterminado", suele ser una apuesta segura y una buena opción predeterminada para la gran mayoría de sus usuarios.

Tratar de establecer su propio espacio entre caracteres generalmente no es necesario para la copia del cuerpo porque el navegador hará un mejor trabajo de representación de texto que usted.

Use puntos suspensivos para indicar que hay un paso más

Si su usuario ve un botón "Eliminar", ¿cómo sabe si presionarlo:

· ¿Eliminar la "cosa" que están mirando?

· ¿Preguntar qué "cosa" necesita ser removida?

· Pregúnteles si realmente quieren eliminar la "cosa"?

· ¿Eliminar instantáneamente todas sus cosas?

Etiqueta el botón "Eliminar ..." y el usuario tendrá una buena idea de que hay otro paso antes de que se eliminen todas sus cosas. La mayoría de los usuarios deducirán de esto que el botón es la primera parte de un proceso de varias partes y habrá un segundo paso para confirmar o cancelar la acción. Si un control requiere un paso adicional para realizar su acción, incluya puntos suspensivos (...) en el control:

Estos pequeños puntos son un gran ejemplo de diseño invisible: la mayoría de los usuarios nunca los habrán notado, pero transmiten un mensaje sutil a medida que la experiencia del usuario aumenta con el tiempo. No se interponen en el camino y "simplemente trabajan".

Si disfrutaste leyendo este artículo, puedes consultar 101 Principios UX de Will Grant para explorar 101 formas de mejorar tus diseños UX. Siguiendo los pasos de Jakob Nielsen y Don Norman, 101 UX Principles es la guía de referencia para profesionales de UX, que cubre todo, desde las contraseñas hasta la planificación del viaje del usuario.