Recuerda agregar a los comentarios, esas buenas prácticas que conoces smile

Así como se menciona en el anterior artículo de buenas prácticas, al inicio del proyecto siempre se planifica, hay una estrategia y se debe escoger unos lineamientos (guidelines) a seguir, incluyendo: colores, tipo de letra, tamaño, etc. Hablamos de esas bases que vamos a seguir en todo el proyecto.

En este artículo nos vamos a enfocar en buenas prácticas para el elemento Visual de la interfaz de usuario, con éstas se pretende alcanzar un buen nivel de:

$

Atracción (Desirability)

Apoyar a la marca, logrando dar una buena impresión, y después de esto seguir brindando una experiencia emocional positiva.

Reflejando en esta experiencia las cualidades asociadas a la marca, producto o servicio de manera consistente.

 

$

Usabilidad (Usability)

Mejorar la Usabilidad, comunicando el contenido y comportamiento a través de una visualización acorde.

Para esto hay que tener en cuenta los factores del entorno que afectan la visualización del usuario y sus condiciones de priorización, la información relevante, etc.

Un diseñador Visual utiliza los principios de diseño y el análisis de la ‘persona’ o arquetipo de usuario para:

O

Reducir complejidad

Eliminando elementos visuales innecesarios

e

Priorizando

Visualmente los componentes con diferente peso según ciertas condiciones.

e

Organizando

Ajustando las propiedades visuales y estructuras contenedoras según secuencia, frecuencia, etc.

Los siguientes son principios de Diseño Visual necesarios en todo diseño de Interfaz de Usuario:

Gestión del tamaño de etiquetas

Para aplicaciones multi-lenguajes, gestionar el tamaño de las etiquetas, evitando que queden incompletas cuando son traducidas (por ejemplo las acciones en los botones).

Entender la percepción visual

Nuestros cerebros se quedan con una pequeña fracción de información visual para formar una primera impresión. ¿De qué color es una hoja? Es realmente de muchos colores, pero creemos que es verde.

P

Cuidado con el significado

Algunas formas o colores tienen diferente significado según:

 

  • Su uso en un elemento visual
    • Una señal en la carretera
  • El contexto en el que se usa
    • Una señal en un auto de emergencia
  • La experiencia y cultura del usuario
    • Una señal en la clase de matemáticas

Aprovechar la memoria visual

Los seres humanos tenemos una gran memoria visual, en especial, las formas. Una forma delineada es suficiente para reconocer el objeto u acción.

 

  • Flechas que indican dirección
  • Figuras que indican personas
  • Sobres que indican correo.

Establecer Jerarquías

Esto permite que UI con demasiada información que visualizar, sea más eficiente y menos intimidante. Se puede usar:

 

  • Posición anidada
  • Tamaño o énfasis del texto
  • Color o no color en objetos

Establecer Asociación

Para indicar relaciones o no, se puede usar diferentes apoyos visuales:

 

  • Contenedores limitados con bordes
  • Asociación de items por color (para apoyar a la memoria)

Referencias

Cooper, 2007. About Face 3. Editorial Wiley.

¿Qué otras buenas prácticas visuales conoces?

Compartir

Comparte este artículo con tus conocidos.