Autor: Luke Wroblewski.
Fecha: 3 de Noviembre de 2005.
Publicado en UXmatters en Noviembre de 2005 (enlace).
Traducción: turbia.net.
"Cuando diseñas un producto interactivo estás creando miles de conversaciones que serán realizadas entre el producto y la persona que lo utiliza" - Marc Rettig.
La cuidadosa estructuración e interactividad son componentes clave en un diseño eficaz de la interfaz de usuario; finalmente es la presentación de la interfaz lo que dice a los usuarios qué les ofrece el producto y cómo pueden hacer uso de él. Obtener productos interactivos accesibles y cómodos de usar depende de nuestra habilidad como diseñadores para comunicarnos con nuestra audiencia. Mientras mejores seamos comunicándonos más fácil será para nuestra audiencia comprender nuestros mensajes e intenciones y más fácil es para ellos usar y apreciar los productos que diseñamos.
"En última instancia la presentación de la interfaz - plantilla, aspecto y sentimiento - es lo que le dice al usuario qué es lo que el producto tiene que ofrecer y cómo puede hacer uso de él."
Los productos interactivos por su propia naturaleza tienden a ser complicados. Nos permiten crear y controlar grandes cantidades de información y establecer muchas interacciones entre diversos elementos. Como resultado, hay una tendencia natural de los diseños de interfaz de sobrecomunicar, o establecer múltiples formas de diálogo y vocabulario en una simple aplicación o interacción. Los conceptos complicados requieren más explicación, ¿cierto? no siempre.
"La habilidad de simplificar significa eliminar lo innecesario de forma que lo necesario pueda hablar" . Hans Hofmann.
Considere la tabla de la figura 1. Le está dando información sobre una serie de referencias y sus correspondientes valores. El problema es que un excesivo ruido visual y un contenido redundante oscurece los valores - los elementos más importantes en la tabla -. Es difícil concentrarse en los valores, ya que el color de fondo y los bordes gruesos continuamente luchan por tu atención. El grosor variable de la tabla y los bordes de cada celda hace la tabla más confusa. En otras palabras, la tabla en sí está hablando más alto que los datos que pretende comunicar.
Figura 1. Una tabla simple.
Nuestra primera inclinación, por lo tanto, puede ser reducir el volumen de la tabla eliminando el color de fondo y los bordes oscuros. Esto da como resultado la tabla que vemos en la Figura 2.
Figura 2 .La tabla sin color de fondo ni bordes.
Los valores y sus etiquetas son ahora claramente el centro de la conversación, pero este diseño requiere algunos ajustes entre las etiquetas y los valores para entender lo que nos pretende comunicar la tabla. No se nos está diciendo nada sobre la relación entre los valores hasta que no nos tomemos el tiempo de leer cada uno de ellos. Una vez que eliminemos el borde ya no hay agrupamiento visual de los elementos de la tabla, con lo que los elementos se pueden fundir con otros elementos de la página - dependiendo de su tratamiento visual, por supuesto -.
Con el objetivo de comunicar las relaciones entre las etiquetas y los datos de nuestra tabla, devolvamos algunos de los elementos visuales que quitamos anteriormente. Esta vez, por tanto, usaremos solamente la mínima cantidad de contraste visual necesario, como vemos en la figura 3.
Figura 3 . La tabla rediseñada.
El borde ligero de un solo píxel que hemos añadido tiene suficiente peso visual para agrupar el contenido en nuestra tabla sin distraer nuestra atención visual. El color de fondo claro agrupa con sentido el contenido relacionado de la tabla sin introducir múltiples elementos visuales como los bordes entre las filas de la tabla que teníamos antes. También hemos reducido el contraste de la cabecera de la tabla, que estaba consiguiendo más atención de la merecida.
El aspecto de la tabla está quedando bastante bien, pero podemos hacerlo todavía mejor. Eliminando el contenido redundante . como la frase repetida Number of . y poniendo énfasis visual en los datos numéricos en vez de en sus etiquetas, podemos simplificar el diseño de la tabla más aún, como podemos ver en la figura 4.
Figura 4. El contenido rediseñado.
En nuestro diseño final de la tabla, los elementos visuales son suficientemente visibles para agrupar contenido relacionado sin distraernos del mismo. Hemos hecho las etiquetas en la tabla más fáciles de leer eliminando contenido redundante y enfatizando los valores a través del uso de la negrita.
A través de este ejemplo bastante simple hemos visto cómo podemos reducir el diseño visual y los elementos de contenido al mínimo necesario para una comunicación efectiva. Un diseño claro y conciso es un factor clave en el éxito de todas las interfaces de usuario, especialmente cuando tenemos en consideración la cantidad de información que necesitamos analizar en el mundo digital de hoy. Diseñe de forma que lo necesario pueda hablar.