¿Qué va a pasar?

En solo tres pasos tu aplicación empresarial comenzará a ser una realidad

Registro
Escuchamos tus necesidades

Tip 5. Interfaz de usuario: Jerarquía visual

Prioriza lo importante, jerarquía visual

Dentro de las técnicas a aplicar a una interfaz, las de jerarquía visual son de lo más importante, pues dependiendo de cómo se apliquen, hacen que la tarea a realizar por parte del usuario, se comprenda o resulte confusa.

Tip5-a

Claves

  • 1. Enfatiza la información más importante y minimiza la menos importante
  • Identifica el orden de importancia de los elementos de la interfaz
  • Establece una pauta de movimiento para guiar a los usuarios
  • Crear un centro de interés que atraiga la atención. La atención debe recaer sobreun número reducido de elementos y estos deben ser clave en esa pantalla
  • 2. Usar los atributos preatencionales para generar una jerarquía clara:
  • Movimiento. Lo que genera movimiento tiene más importancia jerárquicamenteque lo que está estático
  • Localización. La posición superior es más importante que la inferior
  • Tamaño. El tamaño mayor es más importante que el menor
  • Forma. En un conjunto de formas iguales, las que son irregulares tienen mayor importanciaen la jerarquía visual
  • Espacio. El espacio en blanco, enfatiza una forma con respecto a las formas queno tienen ese espacio su alrededor
  • Contraste. Cuanta más diferencia de contraste (Ej: blanco sobre negro) llamará másla atención que los tonos menos contrastados
  • Color. Los colores cálidos (rojo, amarillo, naranja) son más próximos se percibencomo más importantes que los fríos (azules, violetas, índigos)
  • Saturación. En un matiz de color, cuanto más puro (saturados) se entenderámás importante que otro más claro o desaturado (en gris)
  • Rostros. Las caras humanas llaman poderosamente la atención con respectoa otro tipo de imágenes o ilustraciones

Algunos ejemplos

Ejemplo 1. Home page Highrise. En esta página de Highrise de 37signals la jerarquía está muy lograda. La cara (1) es lo que más predomina en toda la composición, vinculandola con la marca (2), para finalmente guiar la mirada del usuario hacia el texto (3) y finalmente le botón verde (4).

Tip5-b

Ejemplo 2. Google Drive. En la interfaz de Google Drive (antes Google Docs) el boton “Crear + subir” (1) es más importante visualmente que el botón “buscar” (2).Cuando pasamos sobre la rejilla esta se resalta en amarillo (3) y se transforma en un elemento jerárquicamente más importante que el resto de líneas de la rejilla.

Tip5-c
Dani
7/5/2013